Now that you know the difference between UX & UI design, let’s take a look at wireframing and how you go about creating the first wireframe for your site, product, or app.

Why Do UX Designers Use Wireframes?

Wireframing is a practice used by UX designers which allows them to define and plan the information hierarchy of their design for a website, app, or product. This process focuses on how the designer or client wants the user to process information on a site, based on the user research already performed by the UX design team.

When designing for the screen you need to know where all the information is going to go in plain black and white diagrams before building anything with code. Wireframing is also a great way of getting to know how a user interacts with your interface, through the positioning of buttons and menus on the diagrams.

Without the distractions of colors, typeface choices or text, wireframing lets you plan the layout and interaction of your interface. A commonly-used argument for wireframing is that if a user doesn’t know where to go on a plain hand-drawn diagram of your site page, then it is irrelevant what colors or fancy text eventually get used. A button or call to action needs to be clear to the user even it’s not brightly colored and flashing.

Examples Of Wireframes

Before you start designing the wireframes of your own app or product, take a look at some examples of wireframes. This will give you some inspiration for your own wireframes, as well as giving you an idea of the variety of ways of creating them. Some people like to draw their wireframes by hand, others feel more comfortable using software like InvisionApp, or Balsamiq to create theirs. How you do yours is up to you! However, bear in mind the following when deciding on your wireframe creation process:

  • Wireframes drawn with paper and a pencil, or at a whiteboard, have the advantage of looking and being very easy to change, which can help tremendously in early conversations about your website or product.
  • With the help of paper-prototypes, you can test with end users at every stage of ideation and design. Changes at these stages are much easier–and therefore cheaper–than changes whose necessity is first discovered after coding is under way.
  • Switching later to software (after initially hand-drawing your wireframe) allows you to keep track of more detailed decisions.

It might therefore be to your advantage to start off hand-drawing your wireframes before executing more detailed versions using an online app or software. The following wireframes should give you a good idea of how information can be organized on the screen.

Wireframes from CareerFoundry student Samuel Adaramola:

CareerFoundry student Will Spice’s wireframes:

Deciding On Your Process

As we mentioned above, different UX designers approach the task of wireframing in different ways. Some like to draw by hand, while others like to use apps or tools found online. But more often than not, the decision to use online tools or to wireframe by hand, and the process used to get to from wireframe to code, is less related to the individual preference of the UX Designer, and much more related to what approach the particular situation requires. It depends largely on how much emphasis there is on visual design in a project, and how much uncertainty there is with respect to what is being designed.

In the bullet points below are a number of ways different designers can structure the process from design to implementation:

  • Wireframe -> Interactive Prototype - Visual -> Design
  • Sketch - > Code
  • Sketch -> Wireframe -> Hi-Def Wireframe - > Visual -> Code
  • Sketch -> Wireframe -> Visual -> Code

If the task is very narrow and the visual design is either set or considered unimportant (such as with many backend administrative interfaces), then “sketch>code” makes sense, whereas if the time and resources and the business value are all high, then spending the time to make a high-definition wireframe and going through a cycle of testing with a fully realized interactive prototype makes better sense.

Which Tools Are Best For Wireframing?

There are heaps of free tools out there for creating wireframes and prototypes, so you should experiment with as many as you can to find the ones that suit you the best. Don’t forget that you can also just use pen and paper! Below we’ve listed three online tools we find particularly good. The examples below all have free trials, and InVision’s app is completely free forever, so check it out!

UXPin

UXPin has a wide range of functionalities, but one of the best ones is how how it facilitates building responsive clickable prototypes directly in your browser.

InVision

InVision allows you to get feedback straight from your team and users through clickable mock-ups of your site design. It’s completely free too!

Wireframe.cc

Wireframe.cc provides you with the technology to create wireframes really quickly within your browser, the online version of pen and paper.

Building The Blocks Of Your Wireframe

If you prefer wireframing by hand, invest in a Sharpie. For non-US natives out there, a Sharpie is a big, thick marker pen. These are perfect for drawing your wireframe blocks, as they really help you fill the page, and do not allow you to get distracted by the details.

If you are wireframing with an online tool, the same principle applies: get the blocks of your wireframe on the page first before thinking about anything else.

To do this, think about:

  • What are the intended user and business goals when interacting with this page?
  • Exactly how can the content be organized to support these goals?
  • Where should your main message and logo go?
  • What should the user see first when arriving at the page?
  • Where is the call to action?
  • What will the user expect to see on certain areas of the page?

Filling In The Details

Once you’ve got the blocks of your wireframe in place, it’s time to fill in the details. We would advise working from top to bottom and then left to right.

You’ll also need to define the following elements in your wireframe:

  • Usability conventions, such as putting the navigation at the top next to your logo, having a search box on the top right, and so on.
  • Spacing and layout
  • The hierarchy of the information: What’s more important than what?
  • What are your calls to action?
  • Images: Where and what size?
  • Trust-building elements: What do you need to build trust in your customers and where would be the best place to put these elements?

The following points should be at the forefront of your mind when building your wireframe:

Clarity

Your wireframe needs to answer the questions of what that site page is, what the user can do there, and if it satisfies their needs. Your wireframe is an aid for you to visualize the layout of your site page and ensure that the user’s most important questions are answered and goals are achievable without being distracted by more aesthetic considerations.

User Confidence

Ease of navigation through your site and clear calls-to-action increase user confidence in your brand. If your site page is unpredictable, or has buttons or boxes in unexpected places user confidence diminishes. A lot of this information can already be organized at the wireframing stage. Using familiar navigational processes and placing buttons in commonly-used and intuitive positions, user confidence will soar–and that’s before you’ve even gotten around to thinking about colors and styles.

Keeping The Noise Out

Too much information, copy, or links, can be distracting to the user and will have a detrimental affect on your users’ ability to achieve their goals. You want your users to be able to find their way through your site with as little extra ‘fluff’ as possible, to the elements that map to their most significant goals in a given context.

Your wireframe should be a visual guide to the framework of your site and how it will be navigated. Attractiveness at this stage is not a consideration. Once you’ve decided who your product or service is for, you can begin laying out the information they are looking for in an intuitive and natural way that is not only familiar to them as users of this kind of service, but that also guides them towards the conversion point or otherwise helps them to achieve their goals in the interaction. By presenting your information in this way, you are aligning both the business goals of your site with the needs of the customer.

Other useful resources for UX Designers:

The Difference Between UX & UI Design - A Layman’s Guide

The UX Design Process - An Actionable Guide To Your First Job In UX

A Beginner’s Guide to Information Architecture

What Qualifications Do You Need to Be a UX Designer?

A Guide To UX Careers (Infographic)