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.
Workbook Structure
Each exercise uses a 4-page setup.
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.
- 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.
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.
Photos
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