What is a wireframe?
A website wireframe is a visual guide of a website page. It shows the arrangement of the content and design elements, navigation, etc.
What is wireframing?
Wireframing is an important step in UI design that allows for planning the layout and the sequence of processing the information by the user.
What is the difference between a wireframe and a mockup?
A wireframe is just a schematic representation of a product’s functionality. It is a simple sketch that shows the core of the design: the navigation bar, the position of buttons, and the placement of other elements.
A mockup (mobile app or website mockup) is a lifelike representation of the product’s appearance.
Why you need wireframes
- You see how your website or mobile app is going to look.
- With a web wireframe, you can show your client exactly what “Google Maps integration” or “news feed” is.
- Wireframes show defects in usability.
- You save costs by showing your client simplified wireframes instead of full-design mockups, and you are able to get feedback quickly.
- Wireframing saves time on the entire project.
How to create a wireframe
Wireframing tools
- InDesign
- Balsamiq Mockups
- Photoshop (It’s not a joke!)
Mockup tools
- Mockingbird
- Mockup Builder
- Mock Flow