---
# System prepended metadata

title: Wireframe
tags: [wireframe, uxprocess]

---

# Wireframe

Wireframe is a layout of web/app. It is a critical part of the interaction design process.

The goals is provide a visual understanding of a screen/page and understanding of elements for stakeholder and team approval ==“how it would work”== before implement.

## How to deal with wireframe

- Depend on tasks, we consider the lo-fi or hi-fi. Sometime unimportant page we could draw lo-fi. important screen that we want other people understand, we draw hi-fi.
- We also could combie wireframe with Moodboard. Capture it and put into the wireframe. We use this for save time.
- Wireframe + [[User Flow]] = Wireflow. It is a visualied User Flow within screens. Make sure the product flow is not so complicated.
- Take note/Testimonial to make sure everyone understand. (Like: This is CTA, This is Default image, This is Success screen display...)

The wireframe focus on UX but unstyled UI. To make more engage to the stakeholder, we should use the color to make it interest, but not so take so much time for styling (Big no is: Shadow, animation, beauty icon...)

Take 80% effort for the UX, User Flow. 20% for the visualize the screen.

Wireframe could be used as skeleton screen/loading state. [[State Machine Diagram]].

## What should a wireframe contain?

- A reference number which links the page back to the site map
- A page title, again linking back to the site map
- Depending on the intended user, create notes in order to describe interactions or different states on the UI
- Any other supplementary information such as using a particular template or notes on the rationale for certain decisions

###### tags: `uxprocess` `wireframe`