Prototype

Hey Chris!

I'm happy to help you with this. What program are you using to create your prototype? If you could post an example of what you're trying to accomplish, that would help too.

Cheers,

Caitlin

Hi Caitlin

Thanks for the offer of help!

This is a random sample I found: https://www.midwich.com/ When the site scales to a large HD web size, the hero image fills the browser width and scales within a fixed height. You'll notice the boxes below the hero stay pinned to the centre and don't scale any bigger in size.

I have attached a partial screen shot from my file (which is a Sketch file I am opening through Invision Studio). I need to be able to show a prototype that shows the large images fill the width of the browser and scale as the browser window is made larger, but all other components to stay pinned to the centre of the page and at 100%.

Hope that makes sense.

Many thanks

Chris

Hi Chris,

As a follow up to Caitlin's offer of help, if I'm correct, you're trying to create a responsive page such that the hero image has a proportionate size and fills the browser width any time the browser is resized. The trick is in toggling the alignment of the elements with respect to the artboard.

To achieve this,

• First for the hero image, because you want it to scale within a fixed width and height, create a rectangle with your desired width and height.
• Use that rectangle to create a mask with your hero image. (Make sure your hero image is above your rectangle while masking - just select both rectangle and the image, right click and select mask).
  The mask makes sure it scales within the specified size.
• A group will be created from both components and you can change the group to a container (optional though).
• Set the alignment of the group/container you created with respect to the artboard to left & right, bottom & top (picture attached).
• Add the other components you want to stay pinned and at 100%, group them but instead set the alignment with respect to the artboard to bottom & center (picture attached).

You can repeat the process for the first hero image if you have another image you want to fill the width and so on.

I hope this works fine. Just in case, the studio file I used to test is attached here.

Regards,
Wurah.

Hi Wurah

Thanks so much for this—Invision Studio is new to me, but this makes great sense.

I'll let you know how I got on.

Thanks again for your help

Chris

Hi Wurah

Just had a look at your test file. Do you know if there's a way to keep the grey boxes at a fixed size and centred to the page (rather than scaling with the hero image) whilst the hero image scales as you have it? This only to demonstrate how they would act on desktop, I appreciate they would scale/stack no tablet and mobile.

Thanks

Chris

Hi Chris,

There's a way to keep the grey boxes at a fixed size, just select each grey box and uncheck the maintain aspect ratio icon (picture attached).

Yes, from my little experience and knowledge, the way I understand responsiveness is always to start from the smallest iteration, so if you want it to scale on mobile and tablet, you'll start the design from a mobile or desktop then scale up.

I hope this helps.

Regards,
Wurah.