Practice Sketch - Responsive Website due May 13, 2019

Now that you are experts in Sketch, we want to push it one step further and understand the use of symbols in the context of a responsive website. This exercise is aimed at improving your sense of responsive design and how a design can be adapted to different viewport sizes. We also want to encourage you to understand design systems and style tiles.

Upload your final Sketch files to the Google Drive in the “Completed Work” folder.

Deliverable:

It is HIGHLY recommended that you use symbols for this exercise, so that you don’t spend infinite amount of time on it.

Deliverable Instructions

1. Choose a responsive website
2. Choose three viewport sizes (Mobile / Tablet / Desktop)
3. Recreate two screens in these three sizes (6 screens in total). Try to replicate with screens side by side (not tracing!)
4. By looking at the website and examples of design systems, reverse engineer the style tile that has been used to create this website
5. More advanced (optional): Use nested symbols to make the beginning of a design system for the site
6. Upload your Sketch file to the Google Drive in the “Completed Work” folder