Sketch Practice - Desktop Design due November 2, 2018

Now that you’ve reviewed some Sketch basics, practiced tracing and copying mobile screens, and incorporated symbols, we are going to stretch your skills even further. Today’s homework is designed to give you some practice with how elements are laid out on a larger screen size.

Be sure to upload your final Sketch files to the Google Drive in the “Completed Work” folder.

Deliverable: Desktop Landing Page and/or Desktop App Copy

For this exercise, you will have a choice of which screens you’d like to copy. The desktop app is a more advanced design than the landing page. We suggest you start with a more basic screen and work your way up to a more advanced screen, but the choice is yours. Regardless, please copy at least TWO of the four screens.

1. Download the images from the Google Drive in the “Beginner” or “Advanced” folders.
2. Create an Artboard (shortcut A) in Sketch that is the size of the image.
3. Copy the screen side by side (no tracing!).
4. Use alignment guides to ensure proper spacing.
5. Keep an eye on the details! Watch out for icon size and weight, typography and font weight, rounded corners, masks, overlays, shadows, glows, etc.
6. Upload your Sketch file to the Google Drive in the “Completed Work” folder.

Tips

• The font for the Landing Page is Lato. You can download it from Google Fonts.
• Select a similar sans-serif font for the Desktop App. It is OK that it isn’t the same.
• Don’t worry about finding the same images. You can use images of your choice for the location and album covers.
• Look to The Noun Project, Icons8 or Flat Icon for icons.
• Use nested symbols and overrides to speed up your workflow!
• Download the Paddy Plugin for the tags and buttons. Medium tutorial about Layer Padding HERE.
• Ask the TAs if you need help.

Suggested Resources

• 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
• Images: Unsplash

Suggested Plugins

• Paddy

  Automated padding, spacing and alignment for your Sketch layers.

• 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).