Part 1: Wireframing Overview

Wireframing Guide

What are wireframes?

A wireframe represents the skeletal framework of a website, product, or app. Using visual lines, symbols, and text, wireframes depict the structure of content and functionality of pages.

Wireframes are created during the earliest stages of development to establish the basic structure and purpose of what’s being created. Once approved, they are the basis for the visual design and development of the project.

What are UX and UI design?

UX, or user experience, design is the process of creating user satisfaction between customers and a website, product, or app. Usability, accessibility, and psychological effects are all taken into consideration by UX Designers.

UI, or user interface, design is more difficult to define but is more closely related to graphic design. It focuses on the responsiveness and interactivity of each element of a page, as well as the look and feel, to maximize usability for the user.

UX and UI design tend to overlap, but you can think of the distinction this way: the UX of a page is like a body’s skeleton, defining its structure and functionality; the UI is like a body’s reflexes, defining what interactions feel like.

What elements make up a wireframe?

Wireframes can be as basic as a sketch on a whiteboard or as complex as a working prototype created using a piece of complex software. How detailed your wireframes are depends on your designer and your design process.

However, most wireframes include the following elements:

Information architecture

Information Architecture (IA) is the organization and prioritization of information within websites, apps, and products in a way that supports usability and findability. It’s about making information easy to access according to how you treat the following four elements:

  • Organizing systems (i.e. hierarchical, sequential, matrix, etc.)
  • Labeling systems (e.g. the grouping of related information)
  • Navigating systems (i.e. global, local, contextual, etc.) and
  • Searching systems (i.e. search engines, filters, etc.)

Good IA structures content strategically in line with company goals. Wireframes translate that structure into a visual representation of content that can then be tested and iterated on from the user’s perspective.

Navigation

Included as one of the main elements of good IA, navigation is crucial for ensuring that users can move from one page to the next and get the information they need in a logical manner.

Users should never have to think too hard about where a navigational element will take them. These elements should be predictable and clear. Users should be able to organically move through your site based on visual cues, interactive elements, and preconceived expectations they have about how things work online.

User interface

As we discussed, UX and UI typically overlap in wireframing. The UI portion of a wireframe focuses on the interface elements that help users interact with features in efficient ways. These elements might include buttons, text entry fields, sliders, checkboxes, and more.

Benefits of wireframing

Wireframing is generally accepted as a necessary step in today’s design world. Trying to build a website, product, or app without a wireframe is like trying to build a skyscraper without a blueprint: it’s likely to be a disaster.

One of the biggest advantages of wireframing is that it provides an early visual that can be reviewed with stakeholders and users. Useful feedback given at early stages of development is invaluable. Wireframes are much easier to change than fully designed and developed prototypes, which can cost your company valuable time and money to correct.

Getting stakeholders and users on board early also encourages confidence from everyone involved that what’s being created is going to be great.

More practically, wireframes ensure that designs first and foremost meet business objectives. The most visually and interactively fascinating website is worthless if it doesn’t achieve the goals of the business it represents.

As a project moves forward, wireframes also serve as reference points for the overall project vision and scope that all teams can return to.

Wireframes clarify your vision, save time and money, and allow for efficient changes to be made before going into next steps.

Disadvantages of wireframing

There aren’t many. But if you’re working with clients or stakeholders who aren’t technically-oriented, the lack of visuals can be a little underwhelming.

Getting everyone to buy into the importance of wireframing is an important step in making wireframing work within your design process.

Another criticism of wireframes is that they can be seen as restricting to particularly creative designers and copywriters who may want to go outside of the prescribed layout.

Again, getting each team member to understand the importance of wireframing and how they support the company objectives in the best way possible will go a long way in getting creatives on board.

Additional Cacoo Resources:

Ready to start wireframing?

Get Started