Wireframing - Building the skeleton for user interfaces.

Creating practical user interfaces is an art itself.

Think of how many times you've been frustrated after visiting a website find out that the buttons are not positioned conviniently or are too small to press consistently. Maybe the general layout of the content "just feels wrong".

Users may not be as smart as designers when making the design decisions but they surely know the difference between a good UI and an ugly one.

Wireframing is the most basic way of visualizing how our elements should be laid out in design. At most, they show how the content will be structured to communicate the desired intent to our users.

Despite being crude, wireframing is important in laying out the foundations of practical visual hierarchy ensuring that the users get access to the elements that are of utmost importance with minimal effort.

You can sketch unlimited amounts of wireframes in a short span of time because we are brainstorming what our final design should look like. In my opinion, I think wireframing defines the "functional requirements" and ignores the aesthetics for a while.

Shapes form recognizable patterns

We use shapes of differing dimensions to represent the actual elements we would expect in our app. This makes wireframing fairly quick and easy because its akin to doodling.

Below are some of the commonly used shapes to represent certain elements in the final user interface. Bear in mind that this list is not exhaustive and conventions may differ because design is a highly opinionated field since it utilizes creativity.

Typography

What better place to start than the text content. We consume the majority of information on our computers as text because even images and other graphic elements are accompanied by helper text.

We use stretched out rectangles of varying dimensions to represent text in different levels (i.e the heading elements in HTML).

I prefer to have the typography elements a light grey since text is outranked by graphical content like images when we consider visual hierarchy. This is why we notice the images first before the text (ignoring other factors such as size etc).

Images

Representations of images can be achieved by rectangles as well but the key difference is that the height is more than that of typographic content.

You can turn it up a notch and make it more recognizable by adding more shapes. My favourite convention is that of "the sun above the mountains". It looks as shown below:

Images can preferably have a darker shade of gray than than typography to clearly distinguish between the two.

Buttons

What would the user interface be without a call to action?

Buttons are represented as mainly 2 different shapes as per current design trends on button shapes: rectangular and circular. The wireframe presentation of buttons is shown as follows:

Input fields

These can be shown by accompanying drawing two rectangles of different sizes one showing the input field and the other showing the helper text that accompanies all input fields by convention:

For the sake of brevity I think its now easier to predict how we can show other common elements in their abstract forms. The illustration below showw how we can combine them to form a typical layout.

Is this practical

Depending on the timeframe, we may not have a lot of time to dwell on low fidelity designs and may choose to jump straight to a high fidelity mockup. Depending on the skill one may have as a designer they may skip the wireframing process altogether. However, there's no substitute for quality and I think wireframes expose rudimentary aspects of our final product that would not be immediately visible in a mockup. Opinions differ and one operates according to the principles that improve their workflow.

Takeaway

Wireframing makes it easy to visualize the functional components of your product before considering the aesthetics. It helps define the visual hierarchy from the beginning making it easier to create contextually relevant designs.