What is a wireframe?
Definition: A wireframe is a visual representation of a website or app showing the raw user interface structure using a combination of shapes, lines, and text.
Wireframes are created to represent the different elements of the website in the early stages of design and development as a blueprint for the layout, functionalities, and content of the website or app.
Different types of wireframes
Represent the website without much detail, just enough to communicate the idea for the website design, layout, and user interface.
They are abstract and made using sketching tools or on paper, include placeholder content (text, pictures…), and aren’t created for accuracy.
Teams use them to quickly sketch different variations of a website and easily edit it. The goal is to see which design they will use for the second phase.
Include more detail than Low-fidelity frameworks and incorporate website design elements (buttons, search bars, navbar…) while still keeping the design simple.
They also use placeholder content, but the design (spacing, typography, color) and element layout are more accurate and closer to a working website.
They are used to test the design, gather feedback and make improvements before moving to the next stage.
Are the most detailed types of frameworks and are very similar to the final website build.
They use little to no placeholders opting for actual content, images, and elements used in the final build. The design is pixel-perfect, and the website meets all user expectations.
They are used to present the final design to stakeholders without making many changes before proceeding with building it.
Wireframe elements are split into three categories:
- Design represents the visual aspect, the layout of the website, color, logos, typography, images, and text placement. Everything that can be seen on the website is a design element.
- Navigation represents the structure and organization of all the buttons, forms, navbars, menus, and interactive elements. Almost everything clickable on the website is a navigation element.
- Information represents the website's content, such as text, images, videos, and information about the website.
Since wireframes are just visual representations of a website and can’t be interacted with, designers use links and descriptions to represent the actions happening on the website when a user interacts with a certain element (open another page, animate an element, send a request).
These elements change and become more detailed through the three wireframe types/phases.
Tools used for creating wireframes
- Whiteboard/Pen and paper (best for low-fidelity)