Wireframe Prototype
Wireframe Prototype
Embedded Files
Overview
Overview
A wireframe is a formatted, diagrammatic, low-fidelity prototype. It fleshes out screen layouts at scale and allows for early interaction to test navigability. Key goals with wireframing include:
Distribute content within screen layouts
Develop a consistent layout structure
Refine navigation with an interactive low-fidelity prototype that can be user tested.
develop text and identify the types of visual assets that will be needed.
Wireframing Goals
Wireframing Goals
Strive for the fewest number of steps needed to accomplish goals or tasks
Action prompts should be clearly stated and follow conventions, such as 'login' 'enter' 'view' 'select' , etc.
Feedback loops are important, such as 'submitted' 'saved' ''review' and other confirmations.
Recovery options are critical, such as 'reset' 'reenter' 'select different' and 'back'.
Wireframing Tools
Wireframing Tools
If you are already familiar and practiced with a particular wireframing tool, feel free to use it to execute this module.
If you are new to wireframing, and UX Design is not your primary focus, you may want to consider using Google Slides. It's always free and the learning curve is very low.
Google Slides
Google Slides
A free Google Slides wireframe template by zuzze.tech (a link to the template is halfway down the instructional web page).
A Typical UX/UI Prototpying Workflow
A Typical UX/UI Prototpying Workflow
- Screens are laid out using first draft text and image placeholders
Example Wireframe Template created with Figma software.
2. Navigation assets are linked to their constituent screens. This module ends when this is accomplished
2. Navigation assets are linked to their constituent screens. This module ends when this is accomplished
Once liked together, users can test a fully navigable, low-fidelity, prototype.
A linked wireframe in adobe XD software. (no longer available so we use Figma now.)
3. Visual Design is mapped over the low-fidelity wireframe prototype. This will be executed in the beginning of the 2nd semester.
3. Visual Design is mapped over the low-fidelity wireframe prototype. This will be executed in the beginning of the 2nd semester.
Example visual Design created in Sketch Software
3. Optional UX Storyboards. This is strictly optional
3. Optional UX Storyboards. This is strictly optional
Example visual Design created in Sketch Software
Google Sites
Report abuse