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.
Register for a Class
We provide computers to use during class. This course is available on Mac only.
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 SyllabusDownload PDF Outline
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
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