Photo by Kelly Sikkema on Unsplash

So you just got your first UX job, you can finally look at your momma and say “Momma I finally made it, your baby boy/girl a star”. Fresh-faced and smiling you are ready to jump in hair first and create the best product in the history of the universe.

Well first off slow your roll. I love the enthusiasm, but you too amped. Before you create beautiful high-fidelity prototypes, we need to lay the foundation of the design. I’m not talking about laying bricks I’m talking about wireframes.

I know some people say that wireframes are a waste and it’s easy to think that, but don’t fall into that mindset. Proper wireframing at the beginning of the design process can set the tone of the overall project and can save you a lot of time down the road.

Wireframes = Blueprints

Wireframing involves drawing out the skeletal structure of a design. Wireframes also show how different design elements will interact with each other.

The easiest metaphor for wireframes are blueprints in construction. Blueprints just show the barebones structure of a building no more no less, the same goes for wireframes.

Now you can build a building without blueprints, but it would be time-consuming and costly. Also, ask yourself if you had someone building you a house and they showed up with no blueprints how would you feel about that? Now take that same logic and apply it to wireframes.

Lo-Fi

Low — Fidelity wireframes are basic illustrations that show the overall structure of a design.

• UI elements have no design to them and are usually depicted as boxes and lines with little to no description.
• Used at the beginning of the ideation process.
• Don’t worry about scale, grids, or being pixel perfect.
• You can create a lot of wireframes in a short amount of time.

Medium-Fidelity

Now you have the structure of your design, it’s time to turn that into a medium fidelity wireframe.

• Focus is still on the layout of the design so avoid stuff like color and images.
• Take the time to show certain elements like buttons, headers, and footers.
• Use a monochromatic color palette to show the visual hierarchy of a design.

High Fidelity

Now here comes the fun part taking the design that you have so carefully laid out and adding all the fancy stuff.

• Add elements such as brand-specific colors, fonts, logos, and images.
• Use of grids
• Not too far off from what the final product will look like.
• Focus on the finer details of a design = increased time

Why use wireframes

If you were like me when I first started you may be asking “why to worry about this I already know what the final design will look like”. I understand your logic but hear me out let me give you a few reasons why you shouldn’t skip wireframing.

Quick and Cheap

The first reason for wireframing is that they are quick and cost almost nothing. In the beginning stages of the design process, you don’t want to be spending a lot of time or money on the basics of the design.

Personally, I love making low-fidelity wireframes as I can just let my thoughts flow freely. I write down every design idea that comes to mind most suck but it’s still on paper for me and the team to review.

This helps me because if I put too much thought into a design in the beginning I can suffer from analysis paralysis. I’m a recovering perfectionist so I take steps to keep myself on track.

One of my first articles I ever wrote was on my struggles with perfectionism you can check that out below if you like:

Get everyone involved

Reason two for wireframing is that it can get everyone involved including the client. You don’t really need software to create low-fidelity wireframes, all you need is pencil and paper.

This is a big plus as not everyone knows how to use software like Figma, but the majority of people know how to use pencil and paper. If you are working on a team get everyone involved we are all in this together.

No distractions

When showing people who are not designers a design they tend to look at the aesthetics more then the structure and usability. People can get caught up on the smallest of things such as a picture or a certain color. When all you are asking for is their opinion on a button placement.

Wireframes cuts out the visual distractions so people can focus on what you are trying to evaluate, feedback is focused on the structure and interactions of the design not the looks.

Practice, Practice, Practice

Wireframing like anything in design is a skill that you can develop overtime. Get you some pencil and paper and start drawing is a good place to start. Can’t come up with an idea to do a wireframe on well the link below can give you a something to work with:

https://uxtools.co/challenges/wireframe/

In a Nutshell

It may not seem like much, but wireframing is an essential skill in UX design. It may not be glamorous but it will definitely pay off in the end. Wireframes are quick, cheap and highly accessible.

Wireframing is like sculpting a statue. First, you start and a large rock you chip away the structure of the statue (low-fidelity). Then you refine the shape into something more recognizable (medium-fidelity). Lastly, you add the finer details and besides an adjustment here or there the statue has taken full form (high fidelity).

So next time don’t skip wireframes embrace it. Understand that UX is not only about the destination, but the journey. Wireframing should be one of the first steps in that journey so enjoy it.

If you like this article check out my article on whitespace in design below:

How do you feel about wireframing? Lets talk about that in the comments. As always thanks for the read and I hope all is well. Pilahuk