Interface Design Sketching
Learn ZURB's sketching system to move projects forward, now in a new on-demand format with 2 hours of video lectures, 30 real-world exercises, and 8 hours of office hours to get feedback on your work.
$99 per person
Attend this Video Course on your own time from anywhere!
Class Outline
-
Learn the Basics
In this section, we’ll go over the basics of the sketching tools, shapes, and the elements you’ll need to sketch effectively.
- The tools you need: Understanding the tools
- Basic Mechanics: Sketch simple shapes, color, shading, squiggles, text
- Images: Sketch people, desktop screen, laptop, phone
- Form Elements: Sketch text inputs, checkboxes and radio inputs, select lists, buttons, field sets, element motion
- Login: Sketch logins and modals
- Navigation: Sketching navigations
- Test Your Knowledge: Quiz
-
Putting the basics together
In this section, we’ll introduce the types of sketches you’ll need to push work forward, and examples of common layouts.
- Putting the basics together intro: Introduction to the different types of sketches
- Marketing Page: Sketch a marketing page
- Content Page: Sketch a content page
- Title, Notes, and Feedback: How to title, add notes, and place feedback on sketches
- Test Your Knowledge: Quiz
-
Sketching System
In this section, we’ll put everything together into the types of sketches you’ll be using at different stages of a project.
- Opportunity Sketching: Making basic ideas more tangible to get things moving.
- Ideation sketching: Explore how different opportunities can come to life.
- Lo-fi wireframes: Bring selected Ideation Sketches together into a layout.
- Workflow sketching: Showing processes or user flows.
-
Case Study Exercise
In this section, we’ll be using the case study as a reference to walk you through practical application of sketch types during each project phase.
- Opportunity sketching: Watch the instructor’s intro, tackle the deliverables for this section, upload your deliverables to Notable for feedback, then check your work against the instructor’s example.
- Ideation sketching: Watch the instructor’s intro, tackle the deliverables for this section, upload your deliverables to Notable for feedback, then check your work against the instructor’s example.
- Lo-fi wireframes: Watch the instructor’s intro, tackle the deliverables for this section, upload your deliverables to Notable for feedback, then check your work against the instructor’s example.
- Workflow sketching: There are no Workflow Sketch deliverables, but you’ll want to do a Workflow Sketch to help you visualize how the user moves through the product.