27 Wireframes

In the previous chapters, we focused our energies on creating a paper prototype and running a paper prototyping session. And if your experiences are as typical as other students who have participated in a lab demo, you’ve likely received a lot of feedback from our volunteers and clients – either in terms of what works really well, or what doesn’t. You might also have identified things that are missing or other things that aren’t needed in your original design. Whatever the case, you can and should use this information to help design your next prototype, and to improve the overall design of your solution.

Wireframe prototypes – a high-fidelity prototype – bring us closer to the final product than a paper prototype might. When developing a wireframe, you should already have a really good idea of what you need to build, and how it should be implemented. This information might have been gleaned from the paper prototyping sessions, or from other interactions with the clients or users. Whatever the case, by the time you start your wireframe, you should have a good sense of how things are supposed to work – and in particular, how the user might want to interact with the system you are designing.

What are Wireframes?

Wireframes are visual representations of a user interface (UI) or web page. They serve as a foundational design element in the early stages of a design process, such as in web design, app development, or user experience (UX) design. Wireframes are devoid of colours, images, or intricate details, focusing instead on the layout, structure, and placement of elements on a screen.

Key characteristics of wireframes include:

1. Structural Focus: Wireframes primarily emphasize the arrangement and hierarchy of content and UI elements, such as text, buttons, forms, and images, without delving into their specific visual design.
2. Simple: Wireframes are intentionally simplistic and lack the fine details and visual aesthetics found in high-fidelity mockups or prototypes. This allows designers to focus on layout and functionality before committing to design decisions.
3. Content Placement: They show where various elements will be positioned on the screen, including headers, footers, navigation menus, and content areas. They help establish a clear information hierarchy.
4. Navigation and Interactions: Wireframes include basic options that allow the “user” to navigate through the interface and interact with different elements, like clicking buttons or filling out forms.
5. Responsive Considerations: In modern design practices, wireframes often account for different screen sizes and device orientations to ensure that the layout is responsive and adaptable to various devices, such as smartphones, tablets, and desktops.

Why do we use Wireframes?

Wireframes are valuable for several reasons:

• Early Conceptualization: They provide a quick and cost-effective way to brainstorm and explore different layout ideas and design concepts.
• Communication: Wireframes serve as a means of communication between designers, developers, and stakeholders, helping everyone visualize the proposed structure and layout of a digital product.
• Iterative Design: Since wireframes are relatively easy to create and modify, they facilitate an iterative design process where designers can refine the layout based on feedback and testing.
• Efficiency: Creating wireframes before investing time in high-fidelity design work can save time and resources by identifying potential issues or user experience problems early in the design process.

Wireframes can be created using specialized software applications designed for UI/UX design. For our class, you can use any tool you’d like to create a wireframe. As the design process progresses, wireframes are often followed by higher-fidelity mockups and prototypes, which add visual design elements and interactivity to the wireframe’s structural foundation.