Wireframing and Prototyping

July 22, 2020



A wireframe is a two-dimensional representation of a page’s interface that particularly focuses on space allocation and prioritization of content, functionalities available, and planned behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics. Wireframes also support establish relations between a website’s various templates.

The Value of Wireframes

Wireframes serve multiple purposes by helping to:

  • Connect the site’s information architecture to its visual design by showing routes between pages
  • Clarify normal ways for displaying special kinds of information on the user interface
  • Determine intended functionality in the interface
  • Prioritize content through the determination of how much space to allocate to a given item and where that item is located

The Benefits Of Prototyping

We are fortunate to have a wealth of prototyping tools at our disposal at a wide range of fidelities. 

Digital prototypes allow us to build a realistic, clickable proof of concepts that allow users and stakeholders to get a feel for what we’re building. These prototypes enable us to test our opinions and move progressively towards finished solutions.

Building a clickable prototype using a tool like Adobe XD is considerably quicker than diving deep into HTML, CSS, and JS to build a website or diving into the complex build of a mobile application.

Clickable prototypes also allow us to test our designs with users and other stakeholders, bringing them into the design process in a meaningful way and allowing us to test: information architecture, layout, and visual hierarchy, and interactive elements.

There are numerous other benefits of prototyping, including:

  • Saving time and money;
  • Everyone involves into the design process;
  • Acting as a bridge between designers and developers.

Let’s dive a little deeper into these and make a case for prototyping — as a bridge between your original idea and your final build — as a core part of the design process.

Prototyping Save You Time And Money

The golden rule of prototyping — and developing any new idea — is to fail early and fail economically. Prototyping enables misunderstandings to be identified and addressed as early in the design process as possible. The earlier in the process issues are addressed, the better, saving you time and money.

The deeper into a project you are, the more expensive it is to fix mistakes. Prototypes — whether lo-fi paper prototypes or digital hi-fi prototypes — are a cost-effective way of identifying changes that might need to be made before you embark upon a finished build, at which point changes become increasingly more expensive to implement.

Prototyping Help Get Everyone Involved In The Design Process

Even a modest project will typically encompass a number of different stakeholders. It’s important to engage with everyone involved in a project, bringing them on the journey from idea to finished product.

Prototypes are helpful for including the wide range of participants in a project: designers, developers, project managers, business analysts, and everyday users. (This list — depending on the size and scope of the project — is potentially just the tip of the iceberg.)

Prototypes are a great way of getting everyone involved in the design process. They also keep the conversation going, so that designers don’t disappear for weeks on end building complicated solutions to problems that perhaps don’t exist.

Prototyping Act As a Bridge Between Designers And Developers

As our industry has become more and more complex, the idea of ‘unicorn designers’ — who have deep skills as both designers and developers — is one that’s thankfully being left behind. It is simply too complex now to be ‘a master of all trades.’ We are increasingly working in multi-disciplinary teams, drawing on the strengths of different specialists, and in this context, prototypes act as the glue that holds everyone together.

When the design of a product or feature is finished, and it is being passed on to a more skilled developer to undertake the final build, a high fidelity, clickable prototype ensures that the developer has a clear understanding of what’s what.

This is particularly true when it comes to designing interactions. Rich, interactive prototypes are considerably more powerful — not to mention immersive — than a series of flat, visuals that lack interaction. They provide a very clear picture of not only how something looks, but also how it works.

So, with this in mind, let’s explore the process of building prototypes.

Creating Wireframes

It’s important to keep in mind that wireframes are guides to where the major navigation and content elements of your site are going to appear on the page. Since the goal of the illustrations is not to depict visual design, keep it simple.

  • Do not use colors. If you would typically use color to distinguish items, instead rely on various gray tones to communicate the differences. 
  • Do not use images. Images distract from the task at hand. To indicate where you intend to place an image and its size, you can instead use a rectangular box sized to dimension with an “x” through it.
  • Use only one generic font. Typography should not be a part of the wireframing discussion. Within the wireframes, however, you may still resize the font to indicate various headers and changes in the hierarchy of the text information on the page.

Since wireframes are two-dimensional, it’s important to remember that they don’t do well with showing interactive features of the interface like drop-downs, hover states, accordions that implement show-hide functionality, or auto-rotating carousels.

Important Elements Illustrated in Prototyping

Although wireframes differ from site to site, standard elements on wireframes are as below:

  • Logo
  • Search field
  • Breadcrumb
  • Headers, including page title as the H1 and subheads H2-Hx
  • Navigation systems, including global navigation and local navigation
  • Body content
  • Share buttons
  • Contact information
  • Footer

Types of Wireframes

Wireframes can vary both in their production, from paper sketches to computer-drawn images and in the amount of detail that they convey. Low and high-fidelity are terms for identifying the level of wireframe production or functionality.

  • Low-fidelity wireframes help facilitate project team communication and are relatively quick to develop. They tend to be more abstract because they often use simple images to block off space and implement mock content or Latin (lorem ipsum) text as filler for content and labels.
  • High-fidelity wireframes are better for documentation because of their increased level of detail. These wireframes often include information about each particular item on the page, including dimensions, behavior, and/ or actions related to any interactive element.
No Comments
prev next
Leave a comment
about us

We are full-service software solutions provider that works with clients to enhance the effectiveness of business through the adoption of digital technology.

office location
+1 (504) 320-1996
1 Galleria Blvd, Suite 1900, Metairie, Louisiana 70001
opening hours
Mon - Sat
9:00 - 17:00
Subscribe our newsletter