Wireframes are a two-dimensional skeletal outline for a website or an app. It is similar to an architectural blueprint. Wireframes give a clear overview about the page structure, layout and information architecture. They also show how users will interact with the site. Wireframes are often used to represent the original product concept. Therefore, colors, styling, and graphics are kept to a minimum.
Depending on the level of detail required, wireframes can either be drawn digitally or by hand.
Wireframing allows all parties to reach an agreement on the location of the information before the developers begin building the interface with code.
When does Wireframing take place?
The exploratory phase (also known as discovery phase) of a product’s life cycle is when wireframing takes place. This phase is where the designers test the product’s scope, collaborate on ideas and identify business requirements. The wireframe is the first iteration of a website and serves as a starting point for product design.
Designers can use the valuable information from user feedback to build the next iteration of the product’s design, such as the prototype or mockup.
What’s the purpose of wireframing?
Three key functions of wireframes are to keep the idea user-focused, to clarify and define features and to keep the costs low.
1. Wireframes keep your concept user-focused
Wireframes can be used as communication tools. They facilitate user feedback, stimulate conversations with stakeholders, and spark ideas between designers. User testing is an important part of wireframing. It allows designers to get honest feedback and to identify the key issues that will help them to develop and establish the product concept.
Designers can ask users questions such as “What would you expect to see here?” and use placeholders to determine how users would interact with the interface. These insights allow the designer to identify what is intuitive to the user and to create products that feel comfortable and easy to use.
2. Wireframes define and clarify features
Clients often do not understand technical terms such as “hero image” and “call to actions.” Wireframing allows all parties to determine how much space is required for each feature, link the information architecture with its visual design, as well as clarify the product functionality.
A wireframe allows you to see the features in action and may help you decide to remove some features if they don’t fit with the rest.
3. Wireframes can be quickly and inexpensively created
Wirefranes are affordable and simple to make. You can even create a wireframe with just a pencil and paper. You can build a digital wireframe in minutes thanks to the abundance of tools that are available. Wireframes identify and fix flaws in the layout without spending a lot of money or time. It is more difficult to make changes the further along the product design process it is.
What types of wireframe models are available?
There are three types of wireframe models; low-fidelity, mid-fidelity, and high-fidelity.
1. Low-fidelity wireframes
Low-fidelity wireframes, which are visual representations of a layout, serve as the starting point for the design. They are often very rough and lack any sense of scale, grid or pixel-accuracy. Low-fidelity wireframes are free of any details that could be distracting and only include simple images, block shapes and mock content (such as filler text to labels and headings).
Low-fidelity wireframes can be used to start conversations, decide on navigation layouts, and map the user flow. Low-fidelity wireframes can be useful if there are clients or stakeholders present and you need to quickly sketch something with a pen during a meeting. These wireframes are also extremely useful for designers with multiple product ideas and need to quickly determine which direction to take.
2. Mid-fidelity Wireframes
Mid-fidelity wireframes are the most popular of all three types. They provide more detailed representations of the layout but they are still free from typography and images. They have more detail assigned to components and features are also clearly distinguished.
For example, you can also use different text weights to separate headings from body content. Although still in black and white, designers may use different shades or greys to convey the visual prominence of specific elements. Mid-fidelity wireframes, while still important in the product’s early stages of development, are often created with a digital wireframing tool such as Balsamiq or Sketch.
3. High-fidelity wireframes
High-fidelity wireframes can be customized to fit pixel-specific layouts. While low-fidelity wireframes include pseudo-Latin text and grey boxes with an ‘X” to indicate an image, High-fidelity wireframes can include actual featured images as well as relevant written content. They provide a great way to explore and document complex concepts, such as interactive maps or menu systems.
What’s in a wireframe?
We have already mentioned that the number of features included in a wireframe will depend on its fidelity. But, you will find elements in wireframes such as logos, search fields headers, share buttons and pseudo-Latin placeholder text (Lorem Ipsum).
High-fidelity wireframes can also include contact information, navigation systems, and footers. Low- or mid-fidelity wireframes do not include imagery or typography. However, designers may play with the size of text to indicate a header or information hierarchy.
Wireframes are typically created in greyscale and designers often experiment with shading. Lighter shades of grey can be used to indicate light colors and darker shades to show more dark colors. Designers may add a color to high-fidelity wireframes. For example, red is used to signify an error message or warning, and dark blue to signifies an active link.
Wireframes are only two-dimensional. This means that they can’t be used to show interactive features such as hover states or drop-downs.
Desktop wireframes vs. Mobile
wireframes
Wireframes are often associated with desktop websites. However, wireframes are also used for mobile apps and need special considerations. What are the main differences between them?
1. Size
Layouts must be considered carefully due to differences in the sizes of desktop and mobile devices. On a desktop, your wireframe may have multiple columns because of the screen width of a desktop. On mobile devices, the number of columns is limited to one or two columns. It is up to you to decide to display a smaller number of items or show content stacked.
2. Behaviour
The behavior of mobile apps is the second major difference that you need to consider. To navigate on a desktop, a user will use either a trackpad or a mouse. You can click on specific features to reveal more information or hover over certain interactions in order to see menus. Users will need to tap the screen in order to access a feature in a mobile app. This means that you need to think more about how to encourage users to tap specific buttons to achieve a goal when wireframing mobile apps.
3. Interaction
Interaction on mobile devices is different from desktops in many ways. Although the app might pull data and content from the Internet in the same way as a website, many apps allow users to download content to their device for offline use. Your wireframe should reflect these “offline modes” that are specific to mobile apps.
What tools can be used to create wireframes?
Designers have an abundance of wireframing programs and tools in today’s technologically-saturated world. Designers can use pre-made design decisions to create wireframes quickly and efficiently using built-in UI components such as form elements and button states.
Sketch is one of the most popular wireframing tools. It uses both vector and artboard design shapes to allow designers to create wireframes on a canvas that’s pixel-based.
Balsamiq is another popular tool that allows designers to concentrate on the layout, intuitive interaction design and basic information architecture, rather than the aesthetic qualities.
Conclusion
Although they may seem overly simple, wireframes can help you to get stakeholders on the same page when it comes to the layout and navigation of key product elements. With this approval, your design can be confidently moved forward. The bonus? The long-term savings from wireframes are significant!
The Importance of Prototyping for User Experience Design
What is Interaction Design?
Links:
