Sketches, Wireframes, and Mockups

Over the course of a couple activities and working in Figma, we’ll begin to develop the physical structure and appearance of our portfolio sites.

Learning Objectives

This lesson addresses learning objectives:

Design front-end user experiences using accepted web design patterns, methods, and information structures.
Identify and use strategies of successful visual rhetoric for the web.

Hello Web Design, Chapter 3

Provides a low-fidelity, rapid prototype
Creates a situation on which designers can quickly revise/translate abstract concepts
Contributes to faster, lower-stakes ideation
Develops a clearer conceptual foundation for final wireframes
Easy to develop multiple “looks” per page and compare them

Focus only on major elements
- Do not add detail like wording unless it’s a major-level heading, or similar
Show actions or movement through arrows or other clear indicator
Build each sketch in layers
- Add the overall framing elements, then the next important, and so on
Add interactions with post-it note instructions
Photocopy your best sketches to create a platform on which to iterate
Make multiple sketches for each page
Make notes on the sketches

Ultimately, follow something close to a design thinking process for this step:

begin the process only when your design goals are clear
design for the right sizes
- for this course, we’re concentrating on Desktop and Mobile
use the process to develop consistent design “rules”
- e.g., all images are x width apart, and y units separated from headings
develop components when you encounter a control or block you plan to reuse
do not become overly attached to your wireframes; they will change

Figma logo

As with our information architecture, we’re going to use Figma, an industry-standard design software.