Wireframing

Your constantly-updated definition of Wireframing and collection of videos and articles
535 shares

What is Wireframing?

Wireframing is a process where designers draw overviews of interactive products to establish the structure and flow of possible design solutions. These outlines reflect user and business needs. Paper or software-rendered wireframes help teams and stakeholders ideate toward optimal, user-focused prototypes and products.

Show Hide video transcript
  1. Transcript loading…

“Here is one of the few effective keys to the design problem — the ability of the designer to recognize as many of the constraints as possible — his willingness and enthusiasm for working within these constraints. Constraints of price, of size, of strength, of balance, of surface, of time and so forth.”

— Charles Eames, Pioneering designer, architect and filmmaker

Learn how to use wireframing to spot constraints and opportunities – and bridge the gap between abstract requirements and likely solutions.

Good Wireframes are Skeletons for Powerful Prototypes & Delightful Designs

Wireframes are basic visual guides in which designers propose elements for screens and webpages and show how experimental solutions would flow for target users. Wireframing is invaluable early in the interaction design process for design teams to explore how concepts accommodate user and business needs. You mark out a solution’s bare bones and include navigation features and more detail than in sketches. Good wireframing is the skill of creating realistic-looking, lean layouts so your team and stakeholders can quickly determine if concepts are worth developing. Wireframing is distinct from prototyping in the sense that prototyping deals more with testing interactivity and—when done at the highest level of fidelity—sophisticated versions that might closely resemble the released products. However, it’s similar in that you can also do wireframing by hand (e.g., using boxes and lines to represent pictures, text, etc.) or with software and make low- to high-fidelity versions. In low-fidelity wireframing, you use placeholders to mark content and pictures in grayscale. In high-fidelity wireframing, you introduce more realism, including pictures and perhaps even some interactivity. You can adapt well-crafted wireframes far more easily into prototypes for usability testing.

© Interaction Design Foundation, CC BY-SA 4.0

Software choices vary in price (some are free), options (e.g., click-through interactivity) and suitability (e.g., for mobile). When you do wireframing well, you can help safeguard yourself, your team and your brand against pursuing flawed solutions. Good wireframing can also support agile development as team members needn’t wait for sophisticated deliverables.

Desk with Sketchbook, Pens, and Keyboard. Font: FOCA Stock

Wireframing is the Art of Efficiency

The aim is to communicate the structure of a possible solution so your team can identify solid user experience (UX) design foundations to build on and stakeholders can offer feedback on a visual item.

So, you should show what elements your users would expect to find and how these work in flow. To begin, you should:

  1. Focus on functionality, accessibility, layout and navigation to make a design easier to use, produce and sell – Leave nice-to-have features out.

  2. Structure a hierarchy with a list of prioritized elements for each page – Determine the information architecture early so you can categorize information clearly.

    Show Hide video transcript
    1. Transcript loading…

  3. Divide the screen into large blocks for content.

  4. Fine-tune these blocks with details – links, placeholders for images, etc.

  5. Maintain a clean grid-oriented view of all content – Apply best practice design principles to maximize ease of use.

  6. Use annotations to help others understand your wireframes faster.

  7. Put mobile first – When you start wireframing for the smallest screens, you can achieve better consistency across devices.

  8. With higher-fidelity wireframing, be more specific – Although you shouldn’t overdo content, still show what needs to appear and accurate sizes of fonts, icons, links, etc.

    © Interaction Design Foundation, CC BY-SA 4.0

  9. Keep your wireframes concise – Don’t worry about finer details such as aesthetic appeal.

Remember, wireframes are primarily tools for collaboration toward making better prototypes and products faster. As such, they’re deliverables you shouldn’t overinvest in. Your best wireframes will prove your ability to strip back to basics and recognize constraints in user-centered design. They’ll therefore confirm your expertise as you and your design team iterate toward the most effective solution in a project.

Learn More about Wireframing

Take our UX Portfolio course to see how to use wireframing best.

Show Hide video transcript
  1. Transcript loading…

Here’s a list of helpful, free wireframing tools.

Read one designer’s inspiring approach to wireframing.

This is a varied collection of wireframing examples.

Literature on Wireframing

Here’s the entire UX literature on Wireframing by the Interaction Design Foundation, collated in one place:

Learn more about Wireframing

Take a deep dive into Wireframing with our course How to Create a UX Portfolio .

Did you know the average UX recruiter spends less than 5 minutes skimming through your UX portfolio? If you want to join the growing and well-paid field of UX design, not only do you need a UX portfolio—you’ll need a great UX portfolio that showcases relevant skills and knowledge. Your UX portfolio will help you get your first job interviews and freelance clients, and it will also force you to stay relevant in your UX career. In other words, no matter what point you’re at in your UX career, you’re going to need a UX portfolio that’s in tip-top condition.

So, how do you build an enticing UX portfolio, especially if you’ve got no prior experience in UX design? Well, that’s exactly what you’ll learn in this course! You’ll cover everything so you can start from zero and end up with an incredible UX portfolio. For example, you’ll walk through the various UX job roles, since you can’t begin to create your portfolio without first understanding which job role you want to apply for! You’ll also learn how to create your first case studies for your portfolio even if you have no prior UX design work experience. You’ll even learn how to navigate non-disclosure agreements and create visuals for your UX case studies.

By the end of this practical, how to oriented course, you’ll have the skills needed to create your personal online UX portfolio site and PDF UX portfolio. You’ll receive tips and insights from recruiters and global UX design leads from SAP, Oracle and Google to give you an edge over your fellow candidates. You’ll learn how to craft your UX case studies so they’re compelling and relevant, and you’ll also learn how to engage recruiters through the use of Freytag’s dramatic structure and 8 killer tips to write effectively. What’s more, you’ll get to download and keep more than 10 useful templates and samples that will guide you closely as you craft your UX portfolio. To sum it up, if you want to create a UX portfolio and land your first job in the industry, this is the course for you!

All open-source articles on Wireframing

Please check the value and try again.

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!