What is a wireframe?
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?
Wire framing 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: navigation bar, 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 like.
- With a web wireframe you can show your client exactly what “Google map integration” or “news feed” are.
- 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.
- Wire framing saves time on the entire project.
How to create a wireframe
Wireframing tools
- InDesign
- Balsamiq Mockups
- Photoshop (It’s not a joke!)