Our next Akendi session was taught by Daniel Iaboni, lead UX specialist with a background in engineering. He spoke about many things including the different dimensions of design, the way in which users think and process information, and design patterns. The most important thing I took away was in regards to wireframing. Prior to this session, I thought that wireframes only came in two forms: loose sketches or detailed digital wireframes, however there are many different kinds of wireframes that must be tailored to different audiences.
Types of Wireframes
Wireframes usually start off as sketches that we show to fellow designers, but you wouldn’t want to show your sketch to a client or stakeholder, would you? There are some cases where people’s wireframes look like works of art, but if your sketches look messy like mine, it’s best to re-evaluate what kind of wireframe to deliver to your audience.
There are 5 different types of wireframes that differ in fidelity quality:
1. Sketch Wireframes
Sketchbook spread by Win Lin
Sketch wireframes are quick and dirty, usually drawn with a pencil, that help capture ideas quickly. These are nice to show around to fellow designers, but clients might prefer a more refined wireframe.
2. Reference Zone Wireframes
Reference Zone wireframes from blog.mockupbuilder.com
Reference zone wireframes are used to loosely determine the location and scale of elements on a page to achieve different business requirements. For example, one business requirement could be that the site’s main content will take up 50% of the page, while advertising will take up 10%. Content is chunked up to visualize where it should go on the page relative to everything else. Reference zone wireframes are usually works in progress, and should not replace a detailed wireframe.
3. High-Fidelity Wireframes
High-fidelity wireframes from www.saggezza.com
High-fidelity wireframes are usually created digitally and show great detail. Textual hierarchy is shown, real copy and image placeholders are used. These wireframes are shown to clients and business analysts to evaluate.
4. Specification Wireframes
Specification Wireframe by linaurbain.wordpress.com
Specification wireframes are used when development is being outsourced, or if a highly detailed wireframe is required by your team. Annotations help explain parts of the wireframe, and in some cases, dimensions, margins and padding are defined.
Storyboards by voicegap.com
For mobile projects and web projects that require a lot of interactivity, storyboards might be the best way to convey information. You can even narrate or draw the story rather than just show a series of screens.
Always remember that wireframes guide the design, they do NOT define the design. Wireframes have their own audience, whether it be fellow designers, coders, or clients and business partners. Tailor the wireframe to your audience’s expectations.
Thanks for reading!