đŸ‘‹đŸœ We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Learning to Wireframe: a Quick Guide

· Posted by Billy in UX · 2 Comments

Wireframing is a skill that can be learned by anyone. That's what makes wireframes so powerful. They are simple, stripped-down sketches of a screen for an app, website, or software. They visualize ideas and allow them to be more effectively communicated to colleagues or users.

Since they are easy to make, they are also easy to discard. Being able to quickly generate many ideas, and only keep the ones worth keeping aid in the development of great products.

If you are looking forward to getting started with this important UX technique, keep on reading!


Learn how to wireframe with Balsamiq Wireframing Academy

We've created a ton of free content to help you learn how to wireframe and create great products. We have a whole site dedicated to it called the Balsamiq Wireframing Academy.

If you're brand new to wireframes, watch the video below to see them in action:

Now that you're ready to learn more, we recommend 3 ways to start learning how to wireframe.

1. Read some articles

There is a lot of material out there to get yourself up-to-speed on what wireframes are, how to make them effectively, and how to use them once you’re done. Here are a few of our favorite articles to get you started.

We also created our Ten Principles of Effective Wireframes to help anyone understand exactly what goes into great wireframes. If video is your thing, we have a great introduction to wireframes in our video, Wireframing for Newbies on YouTube.

Be sure to check out our webinars, courses, and other resources for even more content.

2. Practice wireframing

Wireframing is a creative exercise and the only way to get better at any creative endeavor is to practice, and practice more. We have developed a few techniques that we use personally to do this.

We also have a comprehensive set of UI control guidelines to learn about all types of ways a user can interact with a digital product. Become an expert by studying what types of controls are available, and the best ways to use them in your design. Learning this will increase your digital design literacy, allowing you to design great interfaces and better communicate with others in design.

3. Discuss your wireframes with others

Feedback on your designs is very important. You may fall in love with your new creation, but the only way to know if it is effective is to have another person review it and try and make sense of it. Here are a few articles we’ve written that offer great tips on how to do this.


Choosing a wireframing tool

Wireframes can be created with a sharpie and paper, or on a whiteboard, but "these days, the software available for creating interactive wireframes makes the task quick and easy to do." (from UX Mastery)

If you decide to go with software, choosing a tool can be daunting. We've created a resource to simplify this task for you. In How to Choose a Wireframing / Prototyping Tool you will find a set of questions and recommendations to evaluate different software. It includes:

  • What is the tool's main purpose?
  • How is the tool supported?
  • Who's behind the tool? Will they stay in business?
  • How much does the tool cost?
  • What do others think of the tool?
  • Where can I find a list of wireframing tools?

It's a smart resource that will give you a head start on exploring the landscape of wireframing tools.

Remember: tools are only that, just a tool. They can help you make a design, but not necessarily a good design. Don’t spend time mastering tools, but mastering what it takes to make great designs!


We’re writing a book!

Leon, Michael, and myself are writing what we hope will be THE book about wireframing. There aren’t many books that cover UI and UX at the right level for people who don’t have “design” in their title but are designing nonetheless. If you are one of those people, our book will teach you just enough about design to do your job better.

Sign up for updates and be the first to know when it's out!


That's it! We hope these resources give you the confidence to start making great wireframes.

Let us know what you think âŹ‡ïž in the comments.

Happy wireframing!
Billy

Billy for the Balsamiq Team

Leave a Comment

Comments (2)

  1. So where is the actual guide on how to wireframe? 🙂 was really hoping to see some great content that I could share with students (b/c I do like your UX Apprentice resource) but do not really see any “guide” here on how to wireframe… is this just a page to get people to UX apprentice? Disappointed a bit…

    Michael
    • Hi Michael,

      You’re right, there’s definitely room for improvement in this quick guide. We will update it soon.

      We’d love to know more about how can we be more helpful for you. Would you like to chat with us about it? Please send me an email jess@balsamiq.com, and we can schedule a meeting when is more convenient for you.

      In the meantime, there are other resources we’ve been working on to help our users get better at wireframing. We’ve started Live Wireframing with Balsamiq a Youtube series where people can learn by watching experts wireframe real products.

      We’ve also created UI Design 101, a resource to help you learn the basics of user interface design through established guidelines and best practices.

      Thanks for being open and honest about your experience so we can learn from it ❀.

      Jessica