Capterra IT Management Blog

Software, technology, and management insights for IT professionals

How I Learned to Create a Wireframe: 6 Easy Steps to Follow

Share This Article

One day, I’m sitting peacefully at my desk, pondering the links between zombies and project management software for a potential blog post, when my boss comes up to me and says, “I need you to do something for me.”

I’m an intern, so I know that could mean anything from a coffee run to gleaning project management lessons from a superhero movie. On this particular day, the “something” my boss, Rachel, needs me to do is wireframe an idea for Capterra’s new mobile site.

But if you’re anything like me, you have no idea how to create a wireframe or where to start.

However, now that I’ve gone through this process, I can assure you that you can survive in this brave new mobile-facing world.

And to those of you who are thinking about skipping the wireframing step, either because it doesn’t seem necessary or because you don’t know how: Trust me—don’t.

how to create wireframes

Take it from someone who hit a few rough spots in her first wireframe experience and progressed with the tiniest of baby steps: The right wireframe can turn into the right user experience (UX) design, which can eventually turn into the perfect mobile site or app.

Below, I’ll outline the steps I followed to create my first wireframe project. Hopefully you can learn from some of my mistakes and get your own wireframe design out the door in half the time.

First, what is wireframing?

Wireframing is designing a visual outline for a mobile UX. Its purpose is to clearly lay out specific content, functions, and connections between pages. A wireframe often doesn’t take color or visual aesthetics into account outside of space allotment, and it represents the bare bones of your future design.

Without a wireframe, you’ll end up lost and with digital writer’s block. This is how you’ll figure out what works and what doesn’t early on in the process.

Now, let’s tackle your first wireframe project.

Step 1: Make sure you know what you’re building

So you’re creating a mobile UX design. Sounds easy enough, right? I thought that because all my favorite apps are simple and easy to use, only requiring a few clicks for navigation, that creating a mobile site would be equally as easy.

I was wrong. When I first started sketching my wireframe I thought everything would fit into place; the reality is that, it takes a lot of effort to make a mobile app feel effortless for the user.

First, forget about design aesthetics. This is no time to focus on how well the colors go together or which images pair up nicely. Instead, list all the things you want your final design to include.

For instance, does your design need a search bar? Private chat features? Links to social media? Whatever you need or want, put it on your list so you have a clear idea of what your finished product will include. Then, prioritize those requirements in order of importance to your final design.

If you first list everything that needs to be done, actually doing it becomes a whole lot easier.

My wireframing experience

Rachel told me she wanted to make the system more user-friendly. Meanwhile, Capterra has over 400 different categories of software. And while that’s pretty impressive—if we do say so ourselves—having a list of over 400 options for business software on a tiny mobile screen would be overwhelming for anyone. It certainly was for me when I first saw the page.

The solution to that was displaying smaller lists and offering more ways to group different software categories together.

Knowing what Rachel ultimately wanted to achieve gave me a clear goal to work toward.

 QUICK TAKEAWAY:  To reach your destination, it helps to know where you want to end up.

Step 2: Focus on UX, not design

Of course you want a great mobile UX, but do you know what UX actually is?

To sum up a very complicated concept succinctly, UX refers to user experience: What will the user see when they open the app? Where will this page take them? If they want to take a specific action, can they easily figure out how to get where they need to be?

Sounds big and abstract.

To be honest, it kind of is. Because UX and everything else involving the internet is evolving faster than we can catch up with it.

When you’re wireframing, the best thing about to remember about UX is that there are limitations. UX isn’t about filling every page or loading the screen with all the bells and whistles.

UX is all about, “Who is my audience, and how can I make experience of using my site as seamless and enjoyable as possible for them?”

My wireframing experience

I spent hours on my first day looking at images the size of my thumbnail, debating which doctor icon would best represent our medical practice management software.

It turns out, that wasn’t my job. My job was just to make it clear that an image on that page would lead to another specific page that makes sense for the user.

 QUICK TAKEAWAY:  When people are assigned large projects it’s easy to lose track of the scope or allow it to creep out of control. I had to learn that designing a wireframe doesn’t mean designing a website from scratch all by myself. It just means determining how users will interact with the basic functions of your site.

Step 3: Find inspiration in existing sources

Now you’ve defined what you want to do and what it involves. You have a clear destination in mind.

But you haven’t yet taken pen to paper.

how to create wireframes

If only we could all be this stylish and creative (Image Source: Viktor Hanacek)

Why not? The same thing that can leave an author staring at a blank screen, or an artist sighing over a white canvas: too many options.

There are thousands of different websites and apps floating around that do UX in different ways. Trying to look at all of them and then turn around and create something entirely new is difficult.

Fortunately, you don’t have to create something entirely from scratch.

There are hundreds of websites dedicated to sharing mobile UX design templates, but I personally favor this list of 18 for its sheer variety. Templates such as these are a good starting point for a range of UX projects. The list features tools for newcomers and those well-versed in design with plenty of stylistic flairs to choose from.

These templates are already user-approved, so to help narrow down the options, focus on choosing one that aligns with your company’s brand. For example, does your organization prefer minimalist designs or something with more flash? Are you trying to send out trendy vibes or give off a classically cool essence? Either way, you can pick, choose, and change templates with ease.

My wireframing experience

Fortunately, I was given my inspiration at the beginning of my assignment. My boss had already fallen in love with Nerdwallet‘s sleek and simple mobile design and wanted something just as user-friendly for Capterra.

I danced through their site a few times, identified the parts that I genuinely loved as a user, and tried to emulate that in my wireframe for Capterra.

 QUICK TAKEAWAY:  Don’t start from scratch. Use templates and look at how other sites do things as a starting point. Then, you can make tweaks and tailor these existing ideas to your company’s style and needs.

Step 4: Build your wireframe!

No more waiting, no more anticipation, no more overdone metaphors about maps or journeys. Now it’s time to wire that frame!

But first, here’s an analogy: You know the phrase about the many ways to skin a cat? Well I think we should change it for two reasons:

  1. I love cats and I don’t think they deserve that
  2. There are many more ways to wireframe

You can do the actual wireframing however you want, either physically or online. You can draw it on a huge whiteboard like mathematicians in movies or plow through 12 packs of Post-it notes. Any surface you can draw on can be used to sketch out your UX masterpiece.

But I will say that there’s a downside to designing your idea physically: It’s hard to prototype with pen and paper.

But there’s also an upside: Collaboration with your coworkers is as easy as tossing them a pen.

If you want to design online, there are free online wireframing tools to help you do your job with no added expense. Design, build, and impress your boss with a professional UX design for free.

how to create wireframes

Online wireframing (Image Source: Moqups)

My wireframing experience

I ended up using the infographic software, Piktochart. It’s also free, if a bit unsuited for this exact purpose. I was already used to the system, however, and it allowed me to save and upload my pages easily to my prototyping software.

 QUICK TAKEAWAY:  Pick whatever tool works best for you and your team so you can get down to designing your new site.

Step 5: Make it work

Have you ever wanted to feel like Tony Stark, aka billionaire superhero Iron Man? Me too, which is why I loved prototyping my wireframe. It makes me sound like a genius inventor instead of an intern who was just playing with different lengths of text boxes for an hour.

Prototyping is when you connect your wireframe together and test it as if you are the end user. This means connecting specific buttons to their landing pages, layering dropdown menus, etc.

Prototyping tools have become popular recently, and I hope this trend continues because they are insanely useful for fixing design bugs and finding hidden flaws and blind spots.

My wireframing experience

The tool I used to test my wireframe was Invision. It’s free, it’s fast, and it’s fully collaborative. I was able to download my Piktochart designs as a PDF, upload them to Invision, and then link buttons to pages and insert menus in build mode.

how to create wireframes

Invision’s build mode for prototyping (Image Source: Invision)

Then I could show it to my coworkers and watch as they clicked through it, commenting on bugs and my chartreuse color scheme (a mistake, in hindsight).

 QUICK TAKEAWAY:  This is the part of your project where you should be able to imagine the functional finished product. Solicit feedback and advice at this stage so you can incorporate revisions before the next, crucial step.

Step 6: Test and present your idea

Does your prototype function the way you want it to? Have you received unabashed praise from your coworkers?

Then give that sucker a whirl around the meeting room table, grab that approval, and start building the actual design.

In the perfect world, that is.

First, send the email. Explain that the prototype is done. Say you have a presentation prepared. You can even include a link or picture.

Then you wait.

My wireframing experience

I’m still technically waiting for my boss to see the prototype, and that sort of thing happens all the time. You spend days and hours on a project only to wait longer than that to present. What matters is that you’re prepared when the time comes to show off your masterpiece.

A few tips for the presentation:

  • Have a few backup plans for parts of the design that you’re unsure about
  • Welcome criticism and input
  • Remind the people you’re presenting to that this is the bare bones of how the UX will work, not the design customers will see
  • Point out parts you especially love and see if they can be expanded upon
  • Be confident—after all, you made it this far

 QUICK TAKEAWAY:  While your wireframe might be finished, that doesn’t mean you’re done. Be prepared to prove that a black and white outline of boxes can transform into an incredible UX design.

What now?

So, has this article prepared you for wireframing or are you still a bit iffy? If the answer is yes, check out the flowchart below for some extra help getting started.

how to create wireframes

Now go out there and start your wireframing project! Be sure to come back and tell us how it went!

For those who have already completed projects, what was the experience like? What were your rough patches? Your favorite parts of the project? Which tools did you use to make your vision come to life? Let me know in the comments below!

If you want more wireframing resources, you can check out Capterra’s list wireframing software options. And if you want to know what comes after the wireframe, I suggest reading these articles for help and inspiration.

Looking for IT Management software? Check out Capterra's list of the best IT Management software solutions.

Share This Article

About the Author

Madison Petty

Madison Petty is a content marketing intern at Capterra, a Gartner Company, where she writes about project management and IT software. As a rising senior at Colgan High School for the Arts, Madison is both studying for college and participating in creative writing. When she's not glued to her computer screen, she loves playing board games and acting in school plays.

Comments

No comments yet. Be the first!

Comment on this article:


Your privacy is important to us. Check out our Privacy Policy.