Design a User Interface with Sketch

 22 Reviews Add a review

Published September 2016

Create your next web project with Sketch

Learning User Interface (UI) design is fundamental for creating an intuitive experience for your audience. This course teaches you the essentials of Sketch 40 and how to use it to build clean, crisp designs. Whether you’re a new or seasoned developer, this course explores the process from beginning to end, discussing design practices while working through a unique design case.

Note: Sketch is a tool available only on Mac.

If you’d like to continue learning with Sketch, head on over to Design Essentials with Sketch. If you don’t mind reading, I would highly recommend reading (and learning) about Sketch’s latest competitor, Adobe Experience Design with our book Jump Start Adobe XD.

Oh yeah, and the whole SitePoint library! Learn More.

What you'll learn

  • The basics of UI Design
  • How to use Sketch 40
  • The principles of design
  • Closed captions available
Meet your instructor
Adam Rasheed

Adam Rasheed is a professional UX/UI designer, front-end developer, consultant and commercial photographer. A creative by heart, when Adam is not busy working he's learning a new skill most recently, it’s been hand-lettering and Sketch. In his spare time you'll find Adam exploring Orange County for the newest (and best) restaurants.

Lesson 1: Introduction
Introduction 0:35
Project Briefs 1:54
Lesson 2: Setting Up
Sketch Overview 11:41
Workspace Setup 16:00
Lesson 3: Wireframing
A Mobile-First Approach to Wireframing 1:54
Creating a Mobile Wireframe 34:52
Creating a Tablet Wireframe 18:42
Creating a Desktop Wireframe 18:16
Lesson 4: Style Tiles
Style Tiles Overview 2:14
Creating Typography Styles 15:05
Working with Color Palettes 8:17
Working with Icons 10:26
Creating Buttons and Forms 6:50
Lesson 5: UI Design for Mobile
Designing the Header 6:51
Designing the Blog 23:04
Designing the Content Spaces 26:31
Designing the Opt-In Banner 10:37
Designing the Footer 3:22
Lesson 6: Designing for Devices
Designing for a Tablet 36:14
Designing for a Desktop 31:32
New Resizing Tools 8:58
Lesson 7: Wrapping Up
Annotating Your Designs for Developers 12:47
Preparing Deliverables 13:00
Next Steps 2:38
Course Conclusion 0:40
Lesson 8: Moving to Sketch 4.0
Vector Tool Updates 3:30
Text Transfer Tool 2:44
Official Sketch Plugins 7:55

Leave a Review