Let us get to the basics of web application design and start with understanding what a wireframe is.
By definition a wireframe is a skeletal three-dimensional model in which only lines and vertices are represented.
Ok, 3-dimensional?
Well, the term wireframe is not specific to the web design industry. Other industries, like the manufacturing industry, also use wireframes to design their products.
When it comes to web design, a wireframe is always a 2-dimensional representation of the user interface of a website or a web application.
Unless you find a third dimension in web design 🙂
Jokes apart, when it comes to web design, wireframes are the most crucial piece of product development process.
Wireframes can look as simple as a hand-drawn sketch to a high fidelity colorful drawing.
I know there has been a lot of debate about the usefulness of wireframes and whether we should just code the user interface in the browser instead of wasting time on a wireframe.
From my personal experience, wireframes are the best way of communicating design ideas hands down.
Why is a Wireframe Useful?
Let me ask you a question. Will you be able to convey the idea of how a web page should look like to your colleague just by talking to him?
No. Right?
You have to sketch the layout on a paper and show that to your colleague and then explain the layout.
Any feedback that your colleague gives can be immediately incorporated into the design and you can redraw the sketch again.
This rough sketch or wireframe can now be very useful in explaining the layout to some other person, like your programmer who will eventually have to write the code for it or to your client.
I think now you have got the idea of why wireframes are so useful.
Types of Wireframes
Basically there are 2 types of wireframes:
- Low fidelity Wireframes and
- High fidelity Wireframes
Low fidelity wireframe resembles a sketch that you can draw with your hand. These are just black and white representation of the user interface.
Things to keep in mind while creating a low fidelity wireframe:
- Keep colors to a minimum. Only use them if they are essential to convey an idea
- Use a single font but you play around with font sizes and
- Keep the use of images to a minimum
Here is an example of a low fidelity wireframe:
High fidelity wireframes on the other hand are created to show the finer details of the user interface. These are usually colorful representation of their counter-parts with more attention to alignment and sizing of each element of the interface.
Here is an example of a high fidelity wireframe:
Whichever wireframe type you end up using, do keep in mind that while drawing the wireframe you should have a firm grasp of the width of the screen you are designing for.
Mobile devices have limited width compared to larger monitor screens and so the way you layout your user interface will vary according to the screen size.
So which of these types should you use?
Well it depends on what the expectation are from your design project and how your design workflow is laid out.
Where to Fit the Wireframing Process in Your Design Workflow?
Obviously, right at the start of your design workflow, before you start writing a single line of code.
Some designers like to create low fidelity wireframes as well as high fidelity wireframes. While some designers like to create only the low fidelity wireframe and then directly start writing code to either create a prototype or the final product.
So the design process may vary from designer to designer.
Here are some ways to incorporate wireframes into your design workflow:
Sketch > Wireframe > Prototype > Code
Sketch > Low fidelity Wireframe > High fidelity Wireframe > Code
Wireframe > Code
Sketch > Code
As you can see there are multiple ways in which you can fit in the wireframing processes into your design workflow depending upon what your designing.
Wireframing Websites versus Wireframing Web Applications
Though the wireframing process for a website and a web application remains the same, how you present a wireframe may differ depending upon whether you are designing a website or a web application.
Let me explain.
There a difference between designing a website versus designing a web application.
Websites are meant to display information on various pages and each page is self-contained. Meaning, there is no set pattern in which the user is supposed to navigate the pages and each page can have its own layout and design. So you can wireframe each page of the website individually.
However in a web application, the user is supposed to carry out various actions in a pre-defined way. And while carrying out a particular action, the user may have to navigate through various pages sequentially. Your wireframe will have to show that entire flow of how the user will navigate the various pages for completing a particular action.
As you can see, the techniques to wireframe will differ depending on what you are designing.
2 Effective Techniques of Wireframing
Let me show you two techniques of wireframing a web application that can make your life easy to convey the design ideas behind your web application.
End-to-End Flow Wireframing
In End-to-End wireframing, you display the entire flow a user will execute within your application in a single wireframe.
For example, say you are designing a web application in which the user is supposed to login, fill a form and logout. Then you can wireframe this end-to-end flow in a single wireframe like shown below:
But it is rare to have such small web applications.
So what you can do is divide the various actions in logical groupings and display them in individual end-to-end wireframes. For example, in the Kandan Redesign Project, I wireframed the create, edit and delete actions of a Conversation together in one wireframe. It looked something like this:
And then I wireframed the notifications feature of Kandan separately as follows:
As you see, by breaking up the various actions into logical groupings, I was able to show the flow a user will carry out to create, edit, delete a Conversation and view the notifications.
You can do this kind of wireframing when the web application is too big and has lots of actions.
Consolidated Flow Wireframing
In Consolidated Flow Wireframing, you will wireframe all the actions together in one wireframe.
Carrying forward with the same example of create, edit, delete and view notifications actions, I could have wireframed all of these actions together as shown below:
But as you can see, I was not able to show all the interactions properly. If I add too many pages, the wireframe will become a jumbled mess.
Also if there are too many actions in a web application then this type of wireframing is not very useful.
However this type of wireframing technique can be useful when the web application is relatively small with less pages and actions.
Wireframing Tools
There are just too many wireframing tools out there that will help you to wireframe from low-fidelity wireframes to fully interactive prototypes.
I don’t intend to list them all here, but I will mention the big boys.
Balsamiq – Balsamiq is the coolest application you will find for creating wireframes. It gives that rough sketch look to every wireframe, which immediately conveys that the design is still being worked on.
Omnigraffle – Omnigraffle does much more than just create basic wireframes. It has some advanced features that let you design high fidelity wireframes.
Axure – Axure is a very professional and advanced application that lets you design anything from low fidelity wireframes to full blown prototypes.
Other than these, there are many other wireframing tools which you can find by a simple Google search.
Additional Resources to Read
Here are some additional resources that you can read about wireframing.
Close Photoshop and Grab a Pencil: The Lost Art of Thumbnail Sketches
4 Things No One Told Me About High-Fidelity Wireframes
3 Tactics for Improving Wireframe Presentations
Quora: Wireframing: What are the best tools for wireframing?
Conclusion
I hope you have now got a clear idea of what a wireframe is and how to go about wireframing the user interface to convey your design ideas.
The whole purpose of wireframes is to draw, get feedback and redraw. So do not be afraid to keep on iterating your wireframe as you get feedback from others.
Now, if this article really helped you, please share it with your friends. I will appreciate that.
