What Is A Wireframe And How Is It Useful?

When it comes to Web Design, you may hear the term “wireframe” thrown around by “people in the know.” While a design “comp,” or comprehensive, envisions the visual look and feel of a web page, a wireframe provides insight into the layout of elements, content, and their ultimate function.

Let’s put on our User Experience (UX) professional hats and review some of the basics of wireframes together.

Wireframes: The Origin Story And Its Components

Where did wireframes come from?

The term “wireframe” has origins within the Architecture and CAD (Computer-Aided Design) disciplines. Creating wireframes helped designers to lock down the essential elements of a 3D design or construction—these 2D line-based (read: wire-like) representations could be created within a much shorter time than producing their 3D counterparts, thereby increasing the efficiency of the overall process. How grand!

What does a wireframe consist of?

As a technical document, a wireframe doesn’t embody the polished sexiness of a comp. There are no fancy colors, formatting, or ornamentation. However, the carefully planned and placed lines, boxes, and text depict the skeleton of the layout and user interface elements that web designers and developers will ultimately translate to design comps and code.

Even the Statue of Liberty Started Out As a Skeleton
Attribution: Theophile Seyrig (1843-1923) death date per [1], Public domain, via Wikimedia Commons

Form (And Flow!) Follows Function

Architecting your website

If we consult a classic and trusted source of technical and business information, O’Reilly Media, we’ll see in chapter 57 of Joel Marsh’s UX For Beginners that:

“Wireframes are important, if not essential. If we are the “architect,” wireframes are the blueprints. But their simple appearance makes some people think they are simple, easy documents.”

At Geek Town USA, we often tell web development clients that wireframes literally define the building blocks of their future website. That’s not to say that their wireframes come together simply though—it takes user research, data and requirements gathering, and synthesis of industry best practices and customized strategy to make it work for each individual website we build.

By the time we present client-approved wireframes to our design team to create comps, all the features, content, and functionality are laid out. Going through the wireframing exercise minimizes guesswork on the part of our designers and developers, minimizing revision work down the road.

Geek Town USA Wireframe Juxtaposed with Blueprint

Blueprint vs. Wireframe: Villa of M. Hemsy, St. Cloud, Face Posterieure, 1913; Wayne Health Homepage Wireframe
Attribution: Cooper Hewitt, Smithsonian Design Museum, Public domain, via Wikimedia Commons; Geek Town USA Company Library

Conceptualizing the user journey and content flow

We all understand the pain of experiencing a poorly architected website. Whether you couldn’t figure out how to do what you were trying to do, couldn’t find the information you were looking for, or you found elements displayed and/or placed so inconsistently that you couldn’t determine their use, an ill-conceived website can rain buckets on your user experience parade.

Any solid UX strategy will consider the placement, order, and priority of features and elements including but not limited to:

Brand identity
Header and footer
Navigation menus
Breadcrumbs
Search

Headings
Paragraph text
Lists
Hyperlinks

Forms
Buttons and other CTAs
Multimedia: images, videos, audio
Tables and grid displays

Defining the responsive experience across popular devices is crucial. What makes sense on a big desktop display might not make sense on a much smaller mobile phone, so wireframes can help to define how the user interface should be programmed to accommodate variances in screen size, orientation, and functional limitations.

Use Wireframes To Enhance Your User Experience

Now that you’ve read the cheat sheet version about what wireframes are and can do, reach out to the GTU team for a customized UX analysis with recommendations on how to improve the user experience of your website, or perhaps with us to create a new or reimagined website. Our geeks are ready to help architect, design, and build your vision!

Contact GTU