Sketch 101


My Role

I created website mockups on Sketch and taught a small class of students how to use the tool.

CIrriculum

By walking them through this tutorial, I taught students the following skills: 

TEchnical

  • Learn the fundamentals of Sketch
  • Know the 5 most common shortcuts by heart (Artboard, Text, Vector, Rectangle, Oval)
  • Learn how to use Symbols
  • Learn how to use Text Styles
  • Learn how to use Document Colors
  • Achieve pixel-perfection by measuring pixel distance
  • Directly selecting elements
  • Learn how to quickly add and duplicate dummy content like names and photos using the Craft plugin

Responsive Web

  • Learn how to design for different breakpoints
  • Learn how to use Layout to design in columns
  • Make a habit of using naming conventions
  • Learn how to use CSS attributes

Overview

I created four websites to demonstrate responsive design—desktop HD, desktop, tablet, and mobile. For "extra credit," students can create a mobile app, as well.