Sketch - Desktop Design

due November 11, 2019

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.


Suggested Resources

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.