Wireframing: A Quick Review

March 26, 2015In Web Usability3 Minutes

Brands spend hours designing a page so that everything flows properly, blending together cohesively. Like any architectural project, they use a tool that allows them to speed up the process and make quick changes to tweak and perfect the user interface.

Wireframes are a two-dimensional blueprint for how you want your website to look, like a skeletal framework that allows you to display your various elements visually. Working like a foundation for the final product, the wireframe is a fantastic design tool that lets you organize everything properly before engaging in the creative process.

They help to connect the site’s information architecture to the visuals crafted by the designers, showing a direct correlation between different pages. Wireframing also allows you to see where content and imagery clash and match, determining which pattern would result in the best functionality for the end user. Beginning from a clean slate, the space is a blank canvas for the design layout, which lets the designers see how much space to allocate to various items based on location and size.

Wireframe design shown on the iPad
Wireframe design shown on the iPad

To ensure that navigation is perfect for your intended audience, it is crucial to understand that the goal of the wireframe illustrations is not to depict detailed visual designs. Therefore, do not use colors, instead focusing on grey tones to show contrast; wherever images would go, use a rectangular or square box sized to the appropriate dimension with an “x” going through it.

The same concept applies to typography – as with color and images, the typeface should not be considered in the wire framing process (though the font itself should be resized, if needed, to mark any headers and titles, etc.).

Designing UX on iPad
Using iPad for UX Design

The standard elements included in wireframes (though they differ per site), are logo, search field, breadcrumbs, headers and subheads, content, buttons (including share buttons), contact information, and footer. Keeping it simple will provide the best experience since the two-dimensional element of wireframes make it difficult to show the interactive features of the user interface, like drop-down menus.

We will continue with a more in-depth discussion of wire framing in the following post

Person on computer browsing website with usability

Transforming Usability Throughout the Health Care Experience

There's perhaps no industry where usability and overall user experience is more critical than that of health care. Personalized engagement is of the utmost importance to an environment where the relationship with between patient and provider can at…

Desktop on table near window displaying home screen content

Reading Between the Lines: The Content and Usability Connection

Very often, when developing a website or app, the first step is presenting the client with wireframes and comps that feature placeholder text which can, and usually delivers a design that is well received, but that may not be ideal in its user…

Think Creative, Work Effective. User-centered design mug.

Serving the Brand with User-Centered Design

Delivering a web design that both effectively resonates the brand it represents and puts the user first can be a complex task - especially when multiple markets or user segments are at play. User-centered design, sometimes referred to as…