A wireframe is a static, low-fidelity representation of a website or mobile app interface using only simple shapes. Wireframes are used to communicate structure, content, and functionality. Wireframes should be created early on in the design process. It’s much more efficient to make big changes during the wireframing stage compared to the prototype (more on that next week!) or the beta software.
Wireframes are similar to an architectural blueprint, you’ll see how space will be allocated for different rooms, but you won’t see paint colors, flooring types, landscaping, etc.
Wireframes can vary on how they are created and the amount of detail included. Wireframes can be hand-drawn sketches or built within design programs such as Adobe XD (my preference) or Basalmiq. The fidelity of a wireframe identifies the level of wireframe presentation.
The role of wireframes is to create a place to start from and to set a direction for the design. Wireframes help to plan an interface without investing too much time, effort, and resources. Wireframes also have the advantage of presenting designs to the team without getting bogged down in the details of visual design, like typography, color scheme, photography, etc.
Wireframes can also help determine intended functionality for the interface and to prioritize content within the website or app.
A picture is worth a thousand words! By looking at a wireframe, you should have a good idea of what screens an app or website will have. Wireframes are also part of the project documentation. They are also used as a reference point for functional specifications and to make sure that everyone on the project is on the same page.
Wireframes aren’t good for user testing because they are static. They make it difficult to convey the overall user experience to the user, unlike a prototype (again, more on this next week!). Wireframes also don't help convey complex design effects and interactions. Wireframes can show where the effect or interaction begins and ends, but it doesn’t show what happens in between screens.
Contact me to see how I can help you redesign your website or create a mobile app for your business!