Sketch is a Mac app that was built with the specific needs of a modern web designer (or app designer) in mind. Learn how to use Sketch to design user interfaces of websites & apps in our hands-on Sketch courses in New York City.
Sketch uses Artboards, so you can efficiently design web layouts for mobile, tablet, and desktop (or screens for apps). It’s vector-based, so you can scale for a variety of screen sizes with ease, as well as export hi-res (Retina) graphics for the web or apps. You’ll find tools and features specifically relevant to User Interface (UI) design, native and adjustable grids, and a quick workflow for exporting your work.
Why Learn Sketch for Web & UI Design?
Unlike some other image editing programs—which were originally created for print, photo retouching, or illustration—the entire focus of the Sketch app is on designing user interfaces.
- With artboards and layout guides, you can design on popular grid systems (like Bootstrap), making it easier to design responsive webpages.
- Exporting graphics from Sketch is quick. Mark what you want to export, select the filetype and size, and you’re ready to export.
- Plugins add tons of useful features to Sketch. For example, you can export specs to give your web developer so they can inspect a Sketch layout for size, colors, fonts, spacing, copy CSS code, and more—all from a web bowser without having to own Sketch.
- Symbols are where Sketch really shines. They are much more powerful than similar apps, such as Adobe XD. Symbols let you reuse design elements (such as buttons) to create flexible design systems. The content can be customized across instances of a symbol, while maintaining the same appearance. You can globally update symbols, making design changes easier.
- Turn your designs into clickable prototypes quickly and easily. You can create prototypes directly in Sketch, using either their native prototyping tools, or by using Craft by InVision.
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.
Sketch in a Day Class Syllabus
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