UX/UI 06/19

Practice

Sketch - Mobile Design

due July 2, 2019

Disclaimer: Please do this homework after completing the Sketch Basics homework assignment first.

Now that you’ve reviewed some Sketch basics and gotten practice with tracing, we are going to stretch your skills even further.

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

Deliverable: Mobile App Copy

For this exercise, you will be getting some practice with nested symbols! The Sketch Basics homework gave you a brief view into the world of symbols, and nested symbols is the term used when a symbol(s) is “nested” within another symbol.

Like text styles, symbols are a total game changer if used correctly, because they are resuable components. Once you start incorporating symbols into your Sketch screens, you will see how much more effient your workflow is and how much easier it is to make sweeping edits across your document.

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

Warm-Up Instructions

  1. Watch this 27 min. Video Tutorial about how to create nested symbols with a Wunderlist To Do App demonstration.
  2. For added practice, download the “Lesson File” provided in the video description and follow along or complete on your own after watching the tutorial.

Deliverable Instructions

  1. Download the images and icons from the Google Drive.
  2. Replicate the screens side by side (no tracing this time!).
  3. Use symbols to build the cards and overrides to change the copy, photos, star ratings and avatars. You can be creative with the text and photos.
  4. You will make use of masks to update the photos and avatars. Check out this brief tutorial video for a quick refresher.
  5. Keep an eye on the details! Watch out for shadows, gradients, rounded corners, spacing, alignment, etc.
  6. Upload your Sketch file to the Google Drive in the “Completed Work” folder.

Pro Tips

Suggested Resources

Suggested Plugins