GUI Interaction Design

wireframes

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

pic1

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

2

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

3

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

4

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.

5. Storyboards

6

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.

Final thoughts

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!

Abby

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s