Sketch in a Day

Hands-on Sketch Classes in NYC

Sketch is an app for Mac that was built with the needs of a modern web designer (or app designer) in mind. This one-day class will teach you the fundamentals of Sketch to create user interfaces.  You’ll create wireframes and turn them into finished designs that are optimized for mobile, tablet, and desktops. 

Sketch uses artboards to help you design web responsive layouts for mobile, tablet, and desktop. It’s vector-based, so you can scale for a variety of screen sizes with ease, as well as export hi-resolution (Retina) graphics for the web. Sketch contains tools and features specifically relevant to User Interface (UI) design, native and adjustable grids.  Sketch makes it easy to export your work.

If you already know Sketch and want to take your skills to the next level, check out our Sketch Advanced class.

Why Learn Sketch for Web & UI Design?

Unlike some other image editing programs—which were originally created for print, photo retouching, or illustration—Sketch was made for designing user interfaces.

  • With artboards and layout guides, you can design on popular grid systems (like Bootstrap), making responsive web design easier than ever.
  • Symbols are where Sketch really shines. They are much more powerful than in similar apps, such as Adobe XD. Symbols let you reuse design elements (such as buttons) to create flexible design systems. Content can be customized across instances of a symbol, while maintaining the symbol's appearance. You can update symbols globally, making design changes easy and quick.
  • Exporting graphics from Sketch is simple. Mark what you want to export, select the file type and size, and you’re ready to go.

This beginner Sketch course and our advanced Sketch course are both held at our design school in SoHo.

  • icon for small classesSmall classes
  • icon for small classesComputer provided
  • icon for small classesBook included
  • icon for small classesFree retake

Register for a Class 

$325 6 Hours Mac provided 594 Broadway, NYC In-person classroom training

This course is offered at our design school, Noble Desktop, in SoHo. View upcoming dates and register for this course directly on Noble Desktop’s website.

Register at nobledesktop.com 

What You'll Learn

  • Use Sketch to create and optimize graphics for web and user interface design.
  • Create wireframes and turn them into finished designs that are optimized for mobile, tablet, and desktop screens.
  • Design on grids, extract image assets, create hi‑res 2x graphics, and more.

Full Course Syllabus

Download PDF Outline

Section 1

Creating New Files & Designing on a Grid System

  • Sketch templates, artboards, & pages
  • Creating a new file
  • Setting up a layout grid
  • Creating colored backgrounds for text
  • Importing text

Adjusting the Layout for Tablets & Mobile Phones

  • Designing with Bootstrap’s grid
  • Adapting the design for tablets
  • Adapting the design for mobile phones

Inserting & Masking Photos

  • Importing photos
  • Cropping a photo (masking)
  • Custom shaped masks

Inserting Vector Graphics, Fills, Shadows, & More

  • Importing & modifying vector graphics
  • Making grouped objects easily selectable
  • Layer opacity vs. fill opacity
  • Aligning & distributing layers
  • Reusing colors found in the design
  • Adding a drop shadow

Section 2

Shared Graphic Styles (Reusable Appearance)

  • Creating a shared graphic style
  • Attributes that are not part of a shared graphic style
  • Changing & renaming graphic styles
  • Making a style to darken full-width background photos

Text Styles (Reusable Appearance)

  • Creating text styles
  • Editing text styles
  • Renaming styles & organizing into folders

Symbols (Reusable Elements)

  • Creating & editing symbols
  • Customizing content inside a symbol
  • Resizing symbols
  • Renaming symbols
  • Detaching from a symbol

Exporting Assets: SVG & PNG

  • Exporting artboards
  • Exporting for web as SVG & PNG
  • Exporting into folders

Exporting Assets: 1x & 2x JPEG

  • Exporting as JPEG
  • Properly setting JPEG quality