Sketch Practice - Mobile Design due January 15, 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.
- Watch this 27 min. Video Tutorial about how to create nested symbols with a Wunderlist To Do App demonstration.
- For added practice, download the “Lesson File” provided in the video description and follow along or complete on your own after watching the tutorial.
- Download the images and icons from the Google Drive.
- Replicate the screens side by side (no tracing this time!).
- 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.
- You will make use of masks to update the photos and avatars. Check out this brief tutorial video for a quick refresher.
- Keep an eye on the details! Watch out for shadows, gradients, rounded corners, spacing, alignment, etc.
- Upload your Sketch file to the Google Drive in the “Completed Work” folder.
- Font = SF Pro Display. You can download it HERE
- Use the “Stock” and “Data” functions of the Craft plugin to update photos, names and headlines quickly. Check out tutorial videos HERE
- Image Stock: Unsplash
- Avatar Photo Stock: UI Faces
- Sketch Doc: Symbols
- Sketch Doc: Nested Symbols
- Video Tutorial: Nested Symbols with the Wunderlist To Do App - 27:19
- Video Tutorial: Sketch Masks: A Quick Refresher - 3:48
- Video Tutorial: How to Make the Perfect Drop Shadow in Sketch - 5:22
- Video Tutorial: Organizing Symbols in Sketch - 11:48
- Merge Duplicate Symbols
- This plugin is used to merge symbols with the same name. Choose the one you want to keep and press OK. The other symbols will be removed, and all of their instances will be replaced by the one you chose to keep.
- Symbol Organizer
- Super helpful tool to organize your symbols page, and layer list, alphabetically and into groupings determined by your symbol names. Also provides the ability to choose the granularity of the groups, layout symbols horizontally or vertically, set a maximum of symbols per row/column, reverse the layer list sort direction, sequentially rename duplicate symbols, gather symbols from other pages, and remove unused symbols (symbols which are nested in other symbols, or used as overrides, will NOT be removed).