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 course is offered at our design school, Noble Desktop. View upcoming dates and register for this course directly on Noble Desktop’s website.Register at nobledesktop.com
Students get a custom workbook with step-by-step instructions.
Modern computer classroom with a Mac for each student to work on.
Small In-Person Classes
Get personalized attention in small groups with an expert instructor in the classroom.
Refresh the course materials within six months for free as long as there's space in the class.
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
Frequently Asked Questions
Do I need to bring a computer?
No. We provide a computer with the necessary software for each attendee. This course is available on Mac only.
Are discounts available for this course?
No. This course is not eligible for any discounts.
We offer discounts for packages of classes, including our Excel Bootcamp, SQL Bootcamp, Data Analytics, and PowerPoint Bootcamp.
We also provide discounts for ten or more classes purchased together. Please reach out for more information on our voucher programs.
Does this course come with a book?
Yes. This course includes a complimentary book or manual at no additional cost.
What if I need to retake this course? May I retake it for free?
Yes. You may retake this course for free once within six months, provided that the class is running with an available seat. For more information, visit our policies page.