UX/UI 0818

Sketch Practice due August 31, 2018

Now that you’ve reviewed some Sketch basics and gotten practice with tracing, we are going to stretch your skills even further. We’ll have some time in class during the afternoon to get a jumpstart on this.

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

1st Deliverable: Desktop App Copy

You will be copying the Slack desktop app for the first exercise. This is to give you some practice with how elements are laid out on a larger screen size.

  1. Download the Slack screenshot image from the Google Drive in the “Images to Copy” folder.
  2. Choose an Artboard (shortcut A) in Sketch that is similar in size and adjust as necessary.
  3. Copy the screen side by side (no tracing this time!).
  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, etc.
  6. Upload your Sketch file to the Google Drive in the “Completed Work” folder.

2nd Deliverable: Mobile App Copy

For this exercise, you will be getting some practice with nested symbols! Yesterday’s homework gave you a brief view into the world of symbols, and nested symbols is the term used for when there is a symbol(s) “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.

  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.
  3. Deliverable: download the Recipe screenshot image from the Google Drive in the “Images to Copy” folder.
  4. Copy the screen side by side (no tracing this time!).
  5. Use symbols to build the cards and overrides to change the recipe title, cuisine, price, and star rating. Get creative with the text.
  6. You will make use of masks to update the photos. Check out this brief tutorial video for a quick refresher.
  7. Keep an eye on the details! Watch out for shadows, rounded corners, spacing and alignment, etc.
  8. Upload your Sketch file to the Google Drive in the “Completed Work” folder.

Suggested Resources

Suggested Plugins