Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create responsive web design from scratch in your prototypes

Learn how to create and simulate a simple responsive web design from scratch in your prototypes with the help of this tutorial.

We introduced responsive web design in web and app prototypes in this tutorial. Read on for a step by step guide of how to create a responsive web design from scratch.

You can download the below example here.

responsive-web-design-from-scratch-anim

 

Create a responsive web design in your prototypes

1. Create a new web prototype.

2. Use Image widgets to replicate the design layout that we have created in our Web screen in our downloadable example. We have uploaded the images that match our example into this assets folder for your convenience.

3. When you have all the images in place, group them together by selecting them all, right clicking and selecting the ‘Group’ option.

4. Next, add a Text widget and place it at the top of the screen. Write ‘WEB 1366px’ in the text box. 1366px is the width of your Web screen.

interactive-prototypes-responsive-web-design-sizes

The sizes of our responsive web design screens

 

5. We are going to create two additional screens to represent tablet and mobile. So to differentiate them, rename this screen ‘1366px- Web’.

interactive-prototypes-responsive-web-design-width

6. Next, create a second screen by clicking the ‘+’ button in the Screens tab. Rename this screen ‘768px- Tablet’.

7. In the Outline tab, select the screen. In the Properties tab above, change the size of the screen to 768 x 768px.

8. Use Image widgets to replicate the design layout that we have created in our Tablet screen, taking the images from the assets folder. Group them together.

9. Add a Text widget and place it at the top of the screen. Write ‘TABLET 768px’ in the text box. 768px is the width of your Tablet screen.

10. Now, add a third screen and rename it ‘480px- Mobile’.

11. In the Outline tab, select the screen. In the Properties tab above, change the size of the screen to 480 x 768px.

12. Use Image widgets to replicate the design layout that we have created in our Mobile screen, taking the images from the assets folder. Group them together

interactive-prototypes-responsive-web-design-2

How each image shoudld be placed in each screen

 

13. Add a Text widget and place it at the top of the screen. Write ‘MOBILE 480px’ in the text box. 480px is the width of your Mobile screen.

interactive-prototypes-responsive-web-design-1

The final layout of our responsive screen layout

Now let’s add events to link the screens together

Web screen event

  • From the Screens tab, select the Web screen.
  • In the Outline tab, select the screen and go to the events tab.
  • Add an ‘On Window Resize’ + ‘Link To’ event, selecting the Tablet screen from the options below. Click OK.
  • Back in the Events tab, click on the ‘add condition’ option on the left of the event you have just created and add the following expression:

Drag the Window Width constant followed by the Less or Equals to function, and then write ‘1366’ in the following text box. Click OK. 

interactive-prototypes-responsive-web-design-condition

This condition will ensure that upon shrinking the window during simulation, the Tablet screen will be displayed. Let’s now add responsive interaction the other two screens.

Tablet screen events

  • From the Screens tab, select the Tablet screen.
  • In the Outline tab, select the screen and go to the events tab.
  • Add an ‘On Window Resize’ + ‘Link To’ event, selecting the Web screen from the options below. Click OK.
  • Back in the Events tab, click on the ‘add condition’ option on the left of the event you have just created and add the following expression:

Drag the Window Width constant followed by the Greater or Equals to function, and then write ‘1366’ in the following text box. Click OK.

This condition will ensure that upon expanding the window during simulation, the Web screen will be displayed. Now, we’ll create an event that will show the Mobile screen upon shrinking the Tablet screen.

  • Back in the Events tab, add another ‘On Window Resize’ + ‘Link To’ event, selecting the Mobile screen from the options below. Click OK.
  • Back in the Events tab, click on the ‘add condition’ option on the left of the event you have just created and add the following expression:

Drag the Window Width constant followed by the Less or Equals to function, and then write ‘768’ in the following text box. Click OK.

interactive-prototypes-responsive-web-design-condition-2

Finally, let’s add an event that will ensure that upon expanding the Mobile screen, the Tablet screen will be displayed.

Mobile screen event

  • From the Screens tab, select the Mobile screen.
  • In the Outline tab, select the screen and go to the events tab.
  • Add an ‘On Window Resize’ + ‘Link To’ event, selecting the Tablet screen from the options below. Click OK.
  • Back in the Events tab, click on the ‘add condition’ option on the left of the event you have just created and add the following expression:

Drag the Window Width constant followed by the Greater or Equals to function, and then write ‘768’ in the following text box. Click OK. 

Note: you can add as many screens of different sizes as you wish. Just make sure that the ‘middle’ screens (i.e. all in between the smallest and largest) have events to shrink and expand.

And that’s it! Click ‘Simulate’ to see and interact with your prototype. Shrink the simulation to screen to see how your web screen becomes tablet and then mobile, and expand to see the opposite effect.

Click here to check out our tutorials on Parallax Prototyping!