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 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.

Simple Wireframes

For this course we will consider two types of wireframes: simple wireframes, and higher-fidelity (or fancy) wireframes. Both of them are useful.

A simple wireframe will look like a skeleton of a final website or application, but it won’t have all the aesthetic design elements finalized. What does this look like in practice? A simple wireframe will typically replace images with a box with an X drawn through it. It might not have a finalized colour scheme, but some elements will include colour. The wireframe will also have each design element situated on the screen in a way that represents its (according to the design team and any feedback received from the user or the client) final location (and size). Headings, buttons, and menus will have proper names, and some text on the screen will be close to the final text appearing in the app or website. In other words, the text will be legible and comprehensible.

These wireframes are great for gathering more information on the design before fully implementing the system. They also allow the user to provide feedback on the system flow (although most of the feedback will likely be about the design aesthetic).

An example of a single-screen wireframe for YouTube can be found in the course slides.

Higher-fidelity/fancy Wireframes

Higher-fidelity or fancy wireframes look much closer to the final product. Design elements and themes have been implemented, images, icons, and logos are included, and the size and location of each element have been considered.

Typically these wireframes are designed using specialized tools – including (but not limited to) Figma and Adobe XD. You may also build a fancy wireframe using whatever language you use to build the app or website.

Examples of fancy wireframes can be found in the Welcome to CIS3750 chapter of this book.