Balsamiq

Toggle navigation

Practical training for creating more usable products

Wireframing Academy

by

This is a wireframe, a schematic or blueprint displaying the functional elements of a website or app. It helps you think about and communicate the structure of the product you’re building with your product team or client.

Back to web view

Wireframes are ugly on purpose, to force you to focus on structure and content. Read our wireframing principles to learn how to use them effectively.

Want to learn more about wireframes? Watch the video below or read this short article.

New to Wireframing? Start Here.

What Are Wireframes?

This article answers common questions about wireframes and provides suggestions for how to start using them.

By Peldi Guilizzoni

Five Steps to Creating Great Wireframes

Good wireframes solve real problems and lead to strong products. From writing out the scenario to gathering inputs, here is a proven path to a great website or app.

By Leon Barnard

How to Start a Wireframe Project

Four techniques to start a wireframe project from scratch and ensure that you dedicate enough time to the ideation phase, where the success of your product begins.

By Leon Barnard

The Two Phases of Wireframing: Ideation and Validation

Make sure your wireframes address 2 questions: What are some ways we can solve our customers' problem? How do I know if this idea actually solves it?

By Leon Barnard
More Wireframing Articles

Learning Resources

Get Inspired!reload icon


Talk to our Design Experts!

Join our Slack Community to get all your wireframing questions answered.

Learn How to Use Balsamiq Wireframes

Recent Articles

How to Design a Sign Up Flow: Balsamiq Cloud Case Study

Designing a Sign Up flow for a web app is much harder than you’d think. It requires a balance between usability and security, with a sprinkle of marketing on top.

By Peldi Guilizzoni

How to Design a Sign Up Flow: Balsamiq Cloud Case Study

Designing a Sign Up flow for a web app is much harder than you’d think. It requires a balance between usability and security, with a sprinkle of marketing on top.

By Peldi Guilizzoni

How to Use Wireframes for Content Modeling

Modeling your written content visually before you start wireframing the page is a little-known practice that will make you better at writing for the web.

By Derek Gillette

How to Use Wireframes to Create a Service Blueprint

Service Blueprints help organizations see the whole by showing the customer view and what’s behind the scenes. Learn the step-by-step process for creating them.

By Laura Theis

Designing Effective Data Tables

Big data can cause big problems for clean, usable interface designs. Here are some easy-to-understand tips to ensure that your data applications are easy to use.

By Billy Carlson

Ten Principles of Effective Wireframes

Guiding principles to help designers wireframe better and encourage the entire team to participate in the design process.

By Billy Carlson

Usability Testing Wireframes with Your Users

Learn how to conduct discount usability tests on wireframes with users — an effective step in validating your solution before implementation. For small budgets, too!

By Mike Angeles
All Articles

Video Series

Live Wireframing with Balsamiq

Learn to wireframe by watching others. Watch us design product features and help out nonprofits.

Live Wireframing with Balsamiq

Learn to wireframe by watching others. Watch us design product features and help out nonprofits.

Website UX Reviews: First Impressions with Paul Boag

Website review video series with UX expert Paul Boag. 20-minute videos packed with insights, suggestions, and tips to improve your own website’s user experience.

Live Wireframing with Balsamiq

Learn to wireframe by watching others. Watch us design product features and help out nonprofits.

Website UX Reviews: First Impressions with Paul Boag

Website review video series with UX expert Paul Boag. 20-minute videos packed with insights, suggestions, and tips to improve your own website’s user experience.

Wireframing Academy Webinars

Live lessons from the Balsamiq education team about specific design topics. Sign up for our next webinar here.

The Process Behind

Conversations with founders, product people, and makers about how they create engaging products and experiences.

Talks and Presentations

Recordings of the talks we've given for events and conferences about Wireframing, User Experience (UX), and User Interface Design.

Courses

Introduction to User Interface Design Through Wireframes

This easy-to-follow course is intended for Product Managers, Entrepreneurs, and other non-designers who want to feel comfortable in the world of UI design.

How to Design Navigation for Large and Small Screens

With this free course you’ll learn the basics of the most essential navigation elements and Information Architecture. 8 video lessons, 50 minutes total.

Introduction to User Interface Design Through Wireframes

This easy-to-follow course is intended for Product Managers, Entrepreneurs, and other non-designers who want to feel comfortable in the world of UI design.

How to Design Navigation for Large and Small Screens

With this free course you’ll learn the basics of the most essential navigation elements and Information Architecture. 8 video lessons, 50 minutes total.

How to Design Page Layout

This mini-course will teach you the basics of proximity, alignment, and visual hierarchy, and how to use different components, like dropdowns and buttons.

Rapid Wireframing: Finding the Right Product Design

Learn how to create wireframes and a clickable prototype for early-stage product design. For product managers, developers, and those new to wireframing.

The Psychology of UI Design

Over 3 hours of video lessons by UX expert Paul Boag about how humans think and behave when interacting with your product. For UI novices and non-designers.