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:
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.
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:
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:
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.
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:
About the website, user signup, user login
View all friends updates, write update
Add as friend, view updates, send message
Read messages, send messages
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.
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.
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:
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:
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.
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.
These wireframes were created using the online tool UXPin.
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.
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.
Posted by Chris Rickard
Tue, 13 Dec 2016
Designing the perfect user experience (UX)
UX design is where art meets function – and it is crucial to the health of your brand and the success of your business. Here we explore the...
Flexible planning: Choosing the right methodology for your software project
When it comes to planning software projects, adopting a rigid or flexible approach can have an impact on the project’s outcome. Here, we exp...
How software is transforming the education sector
Software systems, free online courses and accessible apps are rapidly transforming the education sector.
Or call us on 0400 946 644