UI Design Workbook

UI Design Workbook

The UI Design Workbook was created as a resource for students and young designers  who want a structured set of exercises to practice creating high-fidelity wireframes.

UI Design Workbook cover
The UI Design Workbook is a series of exercises where users practice sketching out a collection of different UI components that are used in a majority of apps and websites.
These exercises have been designed around the usage of an 8px grid system. This grid will simplify the wireframing process by setting base unit of measurement to determine how things will fit into your wireframes (margin, spacing, font size, leading, etc,).

Workbook Structure

Each exercise uses a 4-page setup.

UI workbook - lead-in page

This page will serve as an introduction to the component. It lists the name and description of the components usage; along with some of the visual attributes that are commonly found in it.

UI workbook - notes page

  • The top half of this page includes space to write ideas and notes (font names, colors, etc.) for that component.
  • The bottom half includes a grid to sketch out these initial notes and ideas.

UI workbook - 2 page spread

Two dotted grid pages to sketch out high fidelity wireframes.

You can use one page to create a close-up view of the individual component and the second page to create complete view of the page with all components placed in it.

Download the Wireframe Template for Free


Component Exercises

Product Grid/Product List

A layout displaying a collection of products in either a scrolling grid of columns and rows, or a single column list.

User Profile w/ Settings

A section that allows user to update their personal information and preferences for how the website/app should function.

Shopping Cart

A collection of selected items where the user can update quantities, remove products, or purchase the selected items.

Comments Section

A section where users can post their feedback to an article or post; typically located below a piece of content.

…and many more