The art of wireframing: A guide to getting started

It’s the first and essential step in the web design process but there’s a fine art to wireframing.

Wireframing is the art of turning an idea into a visual representation that can be easily communicated to others.

This exercise can be very useful when starting a software project and is a great way to sketch out a user interface, including details about different screens and features within a website or mobile app.

Wireframes (also called mockups or sketches) are basically blueprints of what a software project could look like.

Rather than spending too much time designing a realistic interpretation, wireframes encourage speed and agility and have the added benefit of being simpler and, therefore, more approachable to non-designers and non-tech individuals.

The main goals of a wireframe is to:

  • Communicate ideas using a visual medium
  • Help break down a system into a set of screens and relationships
  • Help people to think about which features could belong on specific screens
  • Visualise the features without getting too sidetracked with aesthetics and details.

The real art of wireframing is knowing how to approach the process. There are no fixed rules for wireframing however, in inoutput’s experience of wireframing hundreds of software projects, we have compiled a list of useful starting points.

Low-fidelity vs high-fidelity wireframes

Inoutput Lo Fi Hi Fi Wireframe Example

Low-fidelity (lo-fi) wireframes

Lo-fi wireframes are the perfect way to visually represent a user interface quickly. As the name suggests, these wireframes do not require a high level of detail. Lo-fi wireframes are generally recommended to people starting out with web design, as the goal is to keep things simple. They can be created using pencil and paper, or by using an online wireframing tool.

Typical features of lo-fi wireframes:

  • A sketch of the concept
  • The ability to quickly communicate tangible ideas
  • The ability to begin a conversation about the project’s potential (Remember, it is not the final product)
  • Flexible actual elements used (e.g. a button vs a link)
  • Less detail; text and images are usually placeholders (e.g. they can be just lines and squiggles)
  • Using text placeholders such as Lorem Ipsum. Remember, it is about concept not content at this point in the process
  • Documenting ideas visually – you can't go wrong at this stage.

High-fidelity (hi-fi) wireframes

Hi-fi wireframes have more detail and are much closer to an actual design.

Hi-fi wireframes are generally created by an experienced UI/UX designer or a savvy front-end programmer. They are often created after first completing lo-fi wireframes, and building upon them to include more detail and specifics.

Typical features of hi-fi wireframes:

  • Although it is still not the final product, it is closer to a real design
  • Communicates what the final product could look like
  • Often interactive (e.g. the ability to click between screens)
  • Use of real text, real elements and real (or close to) photos/images
  • Requires less imagination to communicate (pros and cons here).

Depending on your goal, hi-fi wireframes can be great. For example, if you are building wireframes for a very visual client who has already communicated the aesthetics they would like, then it may be helpful to go straight to these more detailed wireframes.

However, keep in mind that the general goal is to represent functionality. More often than not, lo-fi wireframes can do the job just as well, in much less time, and requires fewer decisions to be made up front.

How to create wireframes

Step 1. Identify the main screens and features

If you were to draw a floorplan of a house you would first think about the rooms the house contains. Similarly, the first step in wireframing is to think of all the different screens in the software project.

Sometimes it's great to pick up a pen and start drawing (and if that’s more your thing you can skip this step). However, sometimes it's good to have an outline to follow.

For a real-life example, let's say we are wireframing a simple website that is a social network for pets. We might come up with the following list of screens and features:

Screen                       

Possible features

Home

About the website, user signup, user login

Dashboard

View all friends updates, write update

User’s profile

Add as friend, view updates, send message

Messages

Read messages, send messages

Help

Get help about features

Don't worry if you don't quite know where to put things at this stage. For instance, should "send message" go on the "user’s profile" or the "messages" screen? Don't stress, the important thing is to get all the concepts from your head onto paper or a screen, and how you think they might be grouped together.

Step 2. Choose a layout

Whether you are wireframing a website or a mobile app, it is a good idea to start with a base layout or a foundation that is common between the screens.

For a website, choosing a layout may be deciding between where the main navigation might be (e.g. on the top or on the left), and for a mobile app it may be deciding whether you have a bottom tab bar for navigation, or a slide out left-hand menu.

From using other websites and apps you can get inspiration for the layout you may like. There are only a few very common ones, such as those mentioned above.

Like everything here, none of this is set in stone, and wireframing is often visual brainstorming. You can always change your mind.

Tip: Although you can always change your mind, we have found it beneficial to avoid over analysing the process. Try to get one finished version of a wireframe complete before going back and making changes. Remember, functionality over form.

Below are some examples of website layouts.

Inoutput Example Website Layouts

Step 3. Screen by screen (most important first)

It's always tempting to start with the main screen first, such as the homepage, but oftentimes the homepage is not the most important screen. Ask yourself, what is the one screen the system could not function without? It is best to start with the most important screen first and work backwards, then move on to the second most important next, and so on.

If you are wireframing on paper, stick to one screen per page and make it as large as you need. The drawing can be bigger than true size – there’s no need to scale your paper design down to mobile size.

In terms of adding the actual elements to the page, here are a few tips that may be useful:

  • Start by drawing the container (a section representing the screen on the browser or phone)
  • Leave some margin around the outside (for annotations)
  • Only use one color (don't get too creative when wireframing)
  • Represent visual elements such as paragraphs of text with simple lines or squiggles
  • You can add real text if you want to, but don't spend too much time thinking about it
  • Represent images as simple boxes with crosses in them
  • Leave plenty of white space around elements.
Inoutput Example Wireframe

Step 4. Annotate

Once the basic pages have been completed, there is usually some interaction that  can’t be represented visually. Annotations are helpful in communicating the various functions of the wireframes.

This is why it is good to leave a margin around your wireframe, so you can easily draw some arrows in and annotate any additional features where you feel you need to communicate their function.

Some examples of annotations may include:

  • "[This link] goes to the user’s profile page"
  • "Only shown if user is logged in"
  • "This button sends a friend request".
Inoutput Example Wireframe Annotated

Step 5. Iterate

As with writing, wireframing is often more easily accomplished by drafting and then iterating and refining. 

Instead of spending an hour painstakingly choosing where a button should go, just draw it on somewhere, and know you can always come back to it.

Examples of wireframes

We have created some example wireframes demonstrating the concepts discussed, and using our fictional example of a social network for pets – let’s call it PetBuddies.

You can download the example wireframes as PDF, or view them online.

These wireframes were created using the online tool UXPin.

Recommended wireframing tools

Pencil and paper

Everyone has access to pencil and paper, it’s easy and it’s flexible. Pencil is better than pen as you can erase it, otherwise you may go through a lot of paper.

UXPin

There are a bunch of online tools but we recommend UXPin, as used for the PetBuddies example.

Although there is no free plan, there is a 30-day trial which hopefully provides enough time for you to complete your great first wireframe.

We recommend keeping it simple, at first. As UXPin comes with a lot of nice templates, it can be tempting to end up with a higher fidelity wireframe than you initially planned. Remember to keep it simple at the start, and iterate from there.