What Are Wireframes, and How Do I Make Them?

A beginner’s guide to wireframes for BAs, Developers, and anyone new to UX

Wireframing is considered an essential piece of UX Design in any product’s lifecycle. It’s the first chance a lot of stakeholders get to see things on the page, and it’s the first visual that will really start off the deeper conversations of what works and doesn’t work in the product.

It also can seem a bit intimidating if you’re not a seasoned UXer. After all, it is drawing creatively while presenting your ideas in a visually clear and comprehensible way. Not to mention, don’t a lot of UX designers come from graphic design backgrounds? Does that mean you need have great art skills?

Happily, the answer is no — absolutely not! (or else why would I be writing this article?)

Wireframing is this wonderful, magical trick that anyone can use. It brings your thoughts to life and your stakeholders to consensus without needing to be able to draw at all. BA or Developer, Data Architect or newly minted Designer, anyone can create wireframes with some very basic shapes.

What is Wireframing?

But let’s take a step back and define what wireframing is.

Big picture, wireframes are prototypes of applications. They’re rough mockups that show you what content is going to be on the page, but not the detailed colors, graphic design, and nuanced look of it.

The Prototype Continuum: As you move from left to right, things get more complicated and involved until you get to designs that pixel-by-pixel show developers exactly what should be on the page or exactly how the dropdown’s animation will look. While high-fidelity prototypes take specialized design skills and tools, wireframes are low-fidelity designs that anyone can do with any number of free tools.

Within the larger category of wireframes, we have a further breakdown. Sketching/whiteboarding are essentially the same, just on different mediums. Sketching and whiteboarding generally take place very early on, while brainstorming or beginning ideation, and they’re created using just basic shapes.

Detailed wireframing takes place a bit later, maybe during the beginning of elaboration. It’s likely you’ve now moved on to expanding a couple ideas, are using computer tools to create them, and are starting to get some detailed content on the page. But crucially, it’s still the same basic shapes. Again, anyone can do it, and you can create them with any number of free tools.

Examples of all three. Although sketching is generally though of as being on paper, it doesn’t have to be, and similarly, detailed wireframing doesn’t have to be on a computer. And whiteboarding? Well, whiteboarding does kind of have to be on a whiteboard…unless maybe I’m using a chalkboard? Can I whiteboard on a chalkboard? Or is that just sketching? …chalkboarding?

Where to Start?

Blank page syndrome is real, and it’s not just for writers. Facing a digital or physical expanse of white space is intimidating for all of us. When you find yourself staring at the blank space with marker in hand for 10 minutes, follow these tips below.

Start by writing down your goal.

What is the problem you’re trying to solve? What is the screen you’re trying to build? Have it down, on ‘paper’, so you know and everyone knows (if you’re in a group) what problem you’re solving.

Then, write down anything else that’s useful.

Do you already know some restrictions, assumptions, or just relevant information? Maybe it’s on mobile, maybe you know you need to include 5 specific elements, or maybe you have a certain assumption about your user you need to call out. Put it all down on the page.

Not only will it help to organize your thoughts, but you also don’t want to be taking up any cognitive load with remembering these items. You want your brain powers to be focused entirely on the ideating, brainstorming, and new designs.

If you’re stuck, just draw a rectangle and start to fill it in.

Here’s the secret to getting through blank page syndrome: Your first idea is just going to be a jumping off point for all the others.

There is a high likelihood that you won’t get it right the first time, and that’s great! It takes off all the pressure. That means your first idea can be (will be? should be?) terrible, and all that matters is putting something on the page to get to the next idea, and then the next.

I can’t tell you how many times that thought has saved me from staring at the page for another 15 minutes, getting nothing done. And trust me, once you start putting things on the page, the ideas will start to come.

Tactics for Creating Simple Wireframes

But let’s get to the good stuff. What are some tips for putting things on the page or whiteboard? What are some general ideas to follow to create quick but immediately recognizable product screens?

Like I’ve mentioned a couple times in this article, it’s all about very basic shapes. It’s all about rectangles, circles, triangles, and lines. And that’s truly all there is to it!

Frames

Starting with your frame: square-er rectangles or somewhat horizontal rectangles are browser windows, while smaller and narrower rectangles are tablet and mobile frames.

Some nice wireframe frames. Browser window on the left, mobile on the right.

Headers and Images

Headers are created by adding in a line a little bit down from the top of the page. In my header I have some placeholder text, a login avatar/person (small circle with a half-circle below it), and a hamburger menu (three horizontal lines).

Images are super easy. They are simply a rectangle with a big “X” through it. It’s a waste of time to draw out an actual image at this point, and you just want to indicate that there will be something there. If you want to provide a bit more context, you can always write out “trees” or “hero image” inside the rectangle. That should be all you need.

Adding in some headers and image placeholders.

Page Content

Search boxes are just rectangles with magnifying glasses (circle and line). Input areas are either blank rectangles or straight lines, and dropdowns are again rectangles, but this time with downward carrots (open triangles).

Text is either written out, if there’s room, or just squiggly lines. Again, the point here is just the big ideas. Key actions like “Save” might be short enough you can write it out, but other text can be just talked to instead.

Speaking of “Save”, buttons are (yet again!) rectangles with the command text in them, and finally, icons are often shown by little circles or squares.

As you can see, it’s all rectangles, triangles, circles, and lines!

Wireframes filled out with body content. Although I now see that somehow the top navigation is missing on the browser version, and the save button is missing on the mobile. hmm….

Annotations

At this point, you might be starting to add in the pathways between the frames or thinking of random questions your work has sparked. Write all of that down!

Confetti lines are a great way to show that something has been clicked, or an action has been taken on that element. Arrows then show the connection between the two screens.

If you have questions or random ideas that pop up as you go along, write them next to your images with a star or bullet point indicating each one. This will make sure you don’t forget about them, and it will help free up your brain for ideating.

Our wireframes are looking complete, and even have pathways.

Color

And the big one: color. There are some different schools of thought on this, but I believe strongly that you should use color sparingly, or not at all.

Color is very powerful. It immediately draws your eye to it, and it starts to tiptoe into the realm of graphic design choices. It’s easy for stakeholders to focus too much on why some things are blue while other things are green, or for the conversation to suddenly be about “if we all think this blue is the best blue for our app”.

It’s best to leave color entirely out of your actual page layouts, so that you can instead focus on the high-level ideas, flow, and structure.

But, that all being said, color can be useful outside your page layouts. Maybe make your pathway indicators a different color to show they aren’t a part of the page. Or, it’s sometimes useful to add color categories to your annotations for easy recognition later.

Tactics for Creating Detailed Wireframes

Lastly, I want to go into detailed wireframes. The good news is that these build on simple wireframes, so pretty much everything in the previous section still applies. With detailed wireframes we’re refining our initial designs a bit more, and we get to focus on a few additional elements.

Placement

Although this is relevant in simple sketches and whiteboard wireframes, it really comes into play as you get into more detailed designs.

Placement is mostly about following convention. Eye-tracking studies have shown that people follow a “Z” or “F” pattern when looking at images. They look at the top left first, then top right, then middle left, then middle right, etc. What this means is that your page’s content should also follow this general layout: most important content in the top left/center, with the least important content on the bottom right.

The standard “Z” layout. The “F” is essentially the same, but looks like an F instead. Quick caveat, this structure is for cultures that read left to right. Those that read right to left are switched!

Importance

To add to that, importance is another element you want to include in your detailed wireframes. When I say importance, I mean how quickly your eyes are drawn to an element. Bigger and bolder things draw your attention and should be used sparingly, with purpose. Big beautiful images will sell products, and boldly colored call-to-action buttons will show your user where to click, but too many important things will overwhelm your user!

The post button under the edit status area up top is darker so that you don’t miss it, and the big image that Jane Doe posted is going to draw your attention right away.

Icons and Images

Luckily, you still don’t need any images at this point. You probably still don’t know what they’re going to be, but more importantly, colorful, detailed images will just be a distraction from the flow and structure.

As for icons, many computer tools that help you wireframe have standard icons you can drag and drop on the page. If you find that yours does, go ahead and add them in. If yours doesn’t, then just leave them as circles or squares and talk to them if it comes up.

This page has a lot of standard icons throughout. They’re useful to see, but not necessary at this stage!

Text

Always add in real text where possible.

This is for two reasons. One, people can’t start to agree or disagree with what’s on the page if they can’t see it on there. Two, the text length greatly affects the design. As a small example (and this is something I see designers do a lot), if you create all your designs with short user names (e.g. Ann Smith), then when your users put in their much longer name (e.g. Sarah-Beth Dabrowski), your design suddenly breaks!

But, if you can’t add in real text, then your next best option is to use the random latin text, Lorem Ipsum. We’re past the random squiggles at this point, and we need to see a rough idea of text on the page, even if we don’t know what it will be yet. (Side note, if you want to grab some Lorem Ipsum, just type in “Lorem Ipsum Generator” into google, and you’ll get back more results than you need!)

Some really short names. I hope Madhavi Ramakrishna never has to use this app. But also, there’s some tactfully used Lorem Ipsum on the side panel.

Build out the workflow

The last thing you want to focus on in your detailed wireframes is the full workflow. Now’s the time to really create your happy paths and your not-so-happy paths. How does your user interact with the platform? How does she know where to click, and how will he know when he’s successfully completed his transaction? Not to mention that this is the perfect time for those error messages. What fields are required and what happens if your user forgets to fill them in?

All of these workflow details are crucial to building out the product, and all of them can be done with simple wireframes!

A sample wireflow. Essentially it’s a process flow, but with the actual wireframes in each step of the path.

A Picture Is Worth…A Whole Lot of Words

So, in a quick little summary:

• Wireframes are easy, quick, and powerful prototypes that anyone can make.
• When facing a blank page, start your wireframes by writing down your goal and relevant details, then just drawing out a rectangle!
• Wireframes, whether simple or detailed, can all be created with rectangles, circles, triangles, and lines.
• As you get into more detailed wireframes, start to think about things like placement, importance, text, and workflows.
• Wireframes should never have color or detailed graphic designs.

It doesn’t matter if you’re a BA, Developer, PM, Data Scientist, Architect, UX Designer, or anyone else on a product. Wireframes are crucial for helping your stakeholders visualize their thoughts and move in the same direction. And luckily for all of us, they’re about the easiest thing to create!

This is the first part in a multi-part series on UX Wireframe basics aimed towards BAs, PMs, Developers, and anyone new to UX. In Part 2 we’ll go over some key free or common enterprise-license tools you can use to quickly create some wireframes!

If you liked the article, please spend an extra second to click on those 👏 (remember that you could express the amount of the value with more ‘claps’)! You can also always share the story with your friends or follow me on Medium.