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. Click here for more information about how to add fonts to your Mac.
• 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!
• Use the Anima Plugin for the tags and buttons to make them more responsive. Video tutorial about responsive design 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

Anima Toolkit

a Plugin that integrates seamlessly into Sketch with various powerful features: Layout, a way to build responsive designs inside Sketch. Prototype, a feature that let’s you create links, breakpoints and smart layers to preview in a website. And Export a paid feature that enables you to export both HTML & CSS files directly out of Sketch.

• 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 (downloadable through the link where you can make a donation or through the Sketchpacks plugin).

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