Wireframing Process

Outlined boxes

Placeholder boxes to represent images, text, and graphics

Can be done in low, mid, or high fidelity depending on project needs

To start the conversation about design needs and layout

Helps clarify and define features needed and change ideas quickly

Helps visualize how screens might look on different device sizes and in different contexts

Filler content (Lorem ipsum or actual text, which is highly recommended)

Placeholder images or stock images

Usually created using design software with an existing wireframing UI kit or from scratch

Visualize the general layout

Establish correct proportions

Build trust with stakeholders by presenting a more fleshed-out idea

Fast and cost-effective way to create initial ideas or low-fidelity prototypes

UI kits

Symbols (buttons, badges)

Element states (hover state, clicked state)

Components (tables, lists, cards, forms)

Actual text

Discover and address usability issues

Uncover accessibility and responsive problems

Translate ideas into consistent elements that can be shared with engineers and discussed across teams

Wireframes

Flow charts

Wireflows

Arrows

Conditionals

Show navigation routes

Check for missing states and information

Visualize entry, exit, and decision points for the user/customer journey

Shows exactly how things will appear in the final product

Create pixel perfection

Ensure visual design consistency

Add a sense of brand identity

Select final design assets

Obtain final approval from stakeholders

All screens in high-fidelity

Target points to mimic user interactions with the real product

Link together all screens and flows in a simulated environment

Ensure everything looks good, works well, and flows as intended before production

Considered the pre-code or no-code version of the product