Wireframes: The What, Why and How

A wireframe is a stripped-down visual representation of key elements on an app/website/product in development. It is used by UX designers to define the hierarchy of items on a page and communicate what the items on that page should be, based on user needs. Wireframes also show how users flow through the interface.

Wireframes might vary in their level of detailing, but should generally reflect the designer's ideas about the placement of elements on the page and where the user can interact with the site.

Why do we need wireframes?
A wireframe’s function is to display necessary page elements in an orderly arrangement. Wireframes are useful for a number of reasons:

The wireframe is used as a reference point for functional specifications. A developer can refer to the wireframe when he needs to check for functional aspects like what elements would be there and what content is required.

Wireframes give visual designers a basis to begin creating screens. Designers generally use wireframes as a basis for all the creative designs that they will come up with. Without a wireframe, it becomes difficult to explore an idea without having to change and chop a lot, which can often be difficult in Photoshop.

Wireframes can be vetted by stakeholders to gain consensus, before moving them to graphics, and finally, coding. All placements can be mostly frozen at this stage.

This makes it much easier to communicate the functionality that is going to be built to stakeholders, without also having to wrestle with visual design elements or branding at this stage. It also works as a good way of reducing risk by allowing revisions at an early stage, ensuring that the subsequent design time is well spent.

An example of how a wireframe helps portray basic elements in a UI

How to create wireframes?
The best way to start with wireframing is to sketch using pen and paper. You do not need to be an artist to sketch well. However, if using software is a must, or if a designer categorically fears putting pen to paper, like me, then worry not. There are many tools available to ease the pain and do a great job!

You can try a lot of software applications that have been designed to make the process faster through reusable common UI components. Tools like Balsamiq, Lucidchart and IndigoStudio do the job well.

Keep in mind that the goal of this exercise is NOT to DESIGN a page but to wireframe it. The time should be spent on providing a practical representation of the page rather than making it pixel perfect. A tool that can help achieve that goal in the shortest amount of time qualifies as a good one.

Content
Lorem Ipsum might work well in some scenarios, but it should also be kept in mind what sort of information the user would need to see on the page, and what type of language should be used for calls to action. The content may not be the final version, but a close approximation will help with designing the layout well. Many designs fail because there is either no content taken into consideration, or too much—and in fact the real content could turn out to be entirely different.

This is generic and doesn’t allow me to tackle the large content-set issue

With real content, I can now solve the problem of large content sets

Layout
Does the page need to be responsive? Will a grid system be followed? What are the resolutions on which the site will display?

These questions should be answered in order to create a layout that works for the users. There is no point getting into a situation where the layout itself doesn’t work. The wireframe will not serve any purpose then.

What is a “good” wireframe?
A wireframe is only useful and valuable if its form matches its function as well.

Incidentally, it is often assumed that there are MANY versions of a good wireframe, but for good designers there aren’t too many good options. In fact, the basics of a good wireframe almost always boil down to the following aspects:

It should represent the layout and positioning clearly

It should not be overpowered by design elements and should only display elements as they should be laid out

It should clearly state what content will be displayed

It should have call outs in order to describe interactions or different states on the UI

It should clearly state the actions on the page

It should state the exit points from the page

Bad Wireframe Good Wireframe

Endnote

Wireframes are the starting point of any good design exercise. They help the client prepare a mental model of what he/she is going to get later. Wireframing is the first step that helps clarify the thought process, leading to a better and cleaner design.

Wireframing is certainly not rocket science, but if a few principles are followed religiously, it could make the difference between an exceptional designer and a good one. ;)