Wireframes guide

If you want to create a quality website or app, you’re going to need something crucial: planning. Planning what you’re making, why, and for whom is important, as important as where you’re going to place features and why. One of the most powerful tools in the early stages of design are wireframes which is why we created this guide to help you start learning the tricks of the trade.

This guide is useful for:

  • Anyone interested in learning more about UX design,
  • UX Designers just starting their careers,
  • UX Designers struggling to deliver quality wireframes, and
  • UX design veterans wanting to brush up on the fundamentals and stay up-to-date on new trends.

This guide has three parts:

An overview

What is a wireframe?

A wireframe represents the skeletal framework of a website, product, or app. Using visual lines, symbols, and text, wireframes depict the structure of content and functionality of pages.

Wireframes are created during the earliest stages of development to establish the basic structure and purpose of what’s being created. Once approved, they are the basis for the visual design and development of the project.

UX & UI design

UX (i.e. user experience) design is the process of creating user satisfaction between customers and a website, product, or app. Usability, accessibility, and psychological effects are all taken into consideration by UX Designers.

UI (i.e. user interface) design is more difficult to define but is more closely related to graphic design. It focuses on the responsiveness and interactivity of each element of a page, as well as the look and feel, to maximize usability for the user.

UX and UI design tend to overlap, but you can think of the distinction this way: the UX of a page is like a body’s skeleton, defining its structure and functionality; the UI is like the body’s reflexes, defining what interactions feel like.

Elements

Wireframes can be as basic as a sketch on a whiteboard or as complex as a working prototype created using a piece of complex software. How detailed your wireframes are depends on your designer and your design process.

However, most wireframes include the following elements:

Information architecture

Information Architecture (IA) is the organization and prioritization of information within websites, apps, and products in a way that supports usability and findability. It’s about making information easy to access according to how you treat the following four elements:

  • Organizing systems (i.e. hierarchical, sequential, matrix, etc.)
  • Labeling systems (e.g. the grouping of related information)
  • Navigating systems (i.e. global, local, contextual, etc.) and
  • Searching systems (i.e. search engines, filters, etc.)

Good IA structures content strategically in line with company goals. Wireframes translate that structure into a visual representation of content that can then be tested and iterated on from the user’s perspective.

Navigation

Included as one of the main elements of good IA, navigation is crucial for ensuring that users can move from one page to the next and get to the information they need in a logical manner.

Users should never have to think too hard about where a navigational element will take them. These elements should be predictable and clear. Users should be able to organically move through your site based on visual cues, interactive elements, and preconceived expectations they have about how things work online.

User interface

As we discussed, UX and UI typically overlap in wireframing. The UI portion of a wireframe focuses on the interface elements that help users interact with features in efficient ways. These elements might include buttons, text entry fields, sliders, checkboxes, and more.

Benefits

Wireframing is generally accepted as a necessary step in today’s design world. Trying to build a website, product, or app without a wireframe is like trying to build a skyscraper without a blueprint: it’s likely to be a disaster.

One of the biggest advantages of wireframing is that it provides an early visual that can be reviewed with stakeholders and users. Useful feedback given at early stages of development is invaluable. Wireframes are much easier to change than fully designed and developed prototypes, which can cost your company valuable time and money to correct.

Getting stakeholders and users on board early also encourages confidence from everyone involved that what’s being created is going to be great.

More practically, wireframes ensure that designs first and foremost meet business objectives. The most visually and interactively fascinating website is worthless if it doesn’t achieve the goals of the business it represents.

As a project moves forward, wireframes also serve as reference points for the overall project vision and scope that all teams can return to.

Wireframes clarify your vision, save time and money, and allow for efficient changes to be made before going into next steps.

Disadvantages

There aren’t many. But if you’re working with clients or stakeholders who aren’t technically-oriented, the lack of visuals can be a little underwhelming.

Getting everyone to buy into the importance of wireframing is an important step in making wireframing work within your design process.

Another criticism of wireframes is that they can be seen as restricting to particularly creative designers and copywriters who may want to go outside of the prescribed layout.

Again, getting each team member to understand the importance of wireframing and how they support the company objectives in the best way possible will go a long way in getting creatives on board.

Creating wireframes

Successful wireframes achieve your business’s objectives while meeting your users’ needs. Achieving this outcome requires an effective design process and a skilled UX Designer who understands how to create the right type of wireframe with the right design elements at the right time.

Types

People use many terms to describe wireframes, but essentially there are three types:

  • Content wireframes,
  • Annotated wireframes, and
  • Interactive wireframes.

Content wireframes

Content wireframes are the initial step taken towards creating a layout and organizing pages based on types of content.

They can be physical sketches or created using digital tools. They are usually comprised of a series of boxes and labels that outline where content will be laid out on a page.

By removing any graphic design from these initial wireframes, the UX Designer can focus on what matters most: laying out content in a way that best achieves business goals and user needs while keeping elements consistent across different pages and devices.

Annotated wireframes

Annotated wireframes add clarity to your content wireframes with detailed notes explaining how things will look and behave.

Most annotations fall into one of the following four categories:

  1. Functionality
    • Gestures
    • Data inputs & outputs
  2. Content
    • Descriptions of copy or, preferably, the actual copy
    • Graphics & multimedia
    • Dimensions & resolutions
  3. Behavior
    • Animations
    • Interactions
    • Link destinations
  4. Constraints
    • Limitations due to hardware, software, etc.

Interactive wireframes

Sometimes called prototypes, interactive wireframes require digital design tools that allow for the addition of interactivity into your wireframes to test with users.

There are two kinds of interactive wireframes: low-fidelity (lo-fi) and high-fidelity (hi-fi). Lo-fi wireframes are used to test navigation, layout, and usability, and hi-fi wireframes are used to test advanced functionality and visuals details.

As your project starts getting coded, things like navigation and UI get more time consuming to modify. Prototypes and testing are meant to save you that time by discovering what changes need to be made before coding commences.

Depending on your design process, you may use one, both, or neither of these types of interactive wireframes.

Process

Not every project requires every type of wireframe to be a success. Your design process will be dictated by what your particular project or piece of the project requires. Depending on what you’re designing and for whom, your process will need to change to fit the situation.

For example, you’re likely to spend more time iterating on wireframes for a project that is visually and interactively complex. You may go through not only each of the types of wireframes discussed previously but multiple rounds of user testing.

On the other hand, if you’re designing something like a backend administrative interface, you can probably go through a much less intensive process.

 

Here are a few examples of common design processes

  • Content Wireframe > Annotated Wireframe > Visual Design > Code
  • Content Wireframe > Annotated Wireframe > Lo-fi Wireframe > Visual Design > Code
  • Content Wireframe > Annotated Wireframe > Hi-fi Wireframe > Visual Design > Code
  • Content Wireframe > Annotated Wireframe > Lo-fi Wireframe > Hi-fi Wireframe > Visual Design > Code
  • Content Wireframe > Code

Objects & symbols

There are many common objects and symbols used within wireframing templates. In Cacoo, we offer a variety of templates and shapes to get your designs started.

Template Example #1Template Example #1

Template Example #2Template Example #2

Template Example #3Template Example #3

Template Example #4Template Example #4

How to wireframe

Wireframing can be broken down into a few basic steps.

Step 1: Find inspiration

You’ll want to look around at your competitors, of course, but also other websites, products, and apps that you like. Inspiration can come from anywhere and from any industry. While it’s important to give your user what they want, it’s also crucial to stand out.

Step 2: Plan your design process

Layout how your design process is going to work and communicate that to your team and all stakeholders, so everyone knows what to expect.

Setting accurate expectations of what, when, and how you’ll deliver your product will help your team give the right feedback at the right time.

Step 3: Pick your tool(s)

Depending on your design process, you may need just one or multiple tools to complete all your stages.

Initials sketches can be done on paper or a whiteboard, but many UX Designers prefer to go straight to digital.

In this guide, we’ll be using our own diagramming tool Cacoo.

Step 4: Select a template.

When you create a new diagram in Cacoo, the first thing you’ll be asked to do is select a template.

Select your template

You can choose from our library of options, which are completely customizable, or you choose a blank template to start from scratch.

Step 5: Set your grid and outline.

In the lower right-hand of your editor, you can select from a few grid options:

  • If you go to View > Grid, your canvas background will transform into a grid.
  • If you go to View > Snap to Grid all of your diagram elements will automatically snap to the grid system when you’re moving or placing objects.
  • You can unselect these options at any time if you’d rather design without these features.

Grid / Snap to grid

Deciding the width and height of your wireframe depends on what you’re creating and what device(s) you’re designing for.

Hopefully, you already understand the requirements set forth by your stakeholders, so if there’s anything special to account for, you know it.

Start designing with shapes, lines, and images from your main menu.

Step 6: Determine your layout with boxes.

Start by drawing boxes for your navigation, body, and footer. Then begin adding in other content boxes based on your information hierarchy and the story you want the page to tell.

You should imagine your page’s story going from top to bottom as well as left to right, in the same way English readers scan for information. The more important the information, the higher it should be on the page.

As you design, think about headers, text, icons, sliders, and multimedia, always considering how each piece serves the greater purpose of the page.

Also, consider how your story will link to and continue on to other pages eventually.

Step 7: Define your text hierarchy.

As your layout starts coming together, you’ll want to start pulling in real text and information (if it’s available).

Ideally, you want to avoid lorem ipsum. While it’s fine as a placeholder, chances are your actual copy will not fit exactly the same way as your dummy text. Using real copy will help make your wireframe more concrete, so you don’t have to make as many large changes later.

As you’re entering in copy, determine your text hierarchy—which lines are H1, H3, H4, etc. Adjusting the size of your text will give you a better picture of what information is grabbing the most attention on your page.

Step 8: Detail your design.

Once you have completed the outline of your design, it’s time to add in interactive details. It’s not enough to have boxes and text; for every element of your website, an interaction needs to be fully designed.

This will include:

Interaction feedback, i.e. information that tells the user what happened or what will happen next, such as:

  • Validation responses for forms
  • Intermediary messages and modals

Interaction states, i.e. potential states for all UI components, such as:

  • Dropdown lists
  • Titles, labels, and names
  • Dynamic content
  • Icons with numbers
  • Form fields
  • File uploads

Gestures, i.e. the way your users will physically interact with your UI on a given device, such as:

  • Click
  • Double-click
  • Right-click
  • Swipe or flick
  • Pinch and spread
  • Press
  • Hover
  • Drag and drop
  • Keyboard input
  • Keyboard shortcuts

Cross-device interactions, i.e. gestures that may not translate to different devices:

  • Hovering
  • Dragging and dropping
  • Uploading files

User types, i.e. what different users see based on their previous interactions with the page, such as:

  • New users
  • Guests
  • First-time visitors
  • Returning visitors
  • Existing or logged-in users
  • Admins and super-users

As we stated earlier in this guide, UX and UI often overlap. This portion of your wireframe design may require you to collaborate with a UI Designer, or it may fall on you. That will depend on your company, your level of expertise, and your design process.

Step 9: Annotate your diagrams.

Annotations help your developers understand your design intentions and vision for the final product. There are a few things to keep in mind when annotating diagrams.

  • Write for your developers. While stakeholders might prefer story-driven annotations that allow them to imagine the future product of their dreams, you aren’t writing for them. You’re writing for your developers, so they can understand what each element is supposed to do as quickly and clearly as possible. Be specific and technical.
  • Don’t let your annotations overtake your designs. When placing your annotations, put them to the side of your design, so the wireframe can still be seen in its entirety. They shouldn’t interrupt your viewer’s experience.
  • Be concise. Your team will want to get through your annotations as quickly as possible without any redundant information.
  • Format your annotations consistently. For each annotation, include a list of all gestures and states written in a consistent format, so they are easier to digest quickly.

Most annotations can be categorized into the following fields:

  • Functionality. Gestures, pop-ups, data inputs and outputs, zooming issues, etc.
  • Content. Text, fonts, sizing, linking, graphics, multimedia (including dimensions, resolution, etc.)
  • Behavior. Animation (styles, speed, and positioning), interactions, link destinations, etc.
  • Constraints. Limitations due to hardware, software, browser, data, etc.

Step 10: Iterate until satisfied.

As you fill in final details, you’ll figure out which elements are working and which aren’t. Don’t be afraid to experiment with a few ideas before selecting what best serves your page’s purpose.
That’s the great thing about wireframes: they’re easy to play around with and manipulate.

In Cacoo, you can save different versions of the same diagram with Version History, or you can create new tabs for your diagram to create alternative options.

When you’re ready, ask for feedback. If you can’t decide between layouts, sometimes it’s best to get a few different perspectives. Fresh eyes will help you see exactly what each layout accomplishes best.

You may need to go through a few rounds of critique and iterations before you get final approval on your wireframes. Once approved, it’s time to go to design, where your design skeleton will get the full treatment with brand colors, typography, final images, etc.

Custom templates & shapes

While creating wireframes from scratch is easy with Cacoo, using templates can greatly speed up your diagramming process.

There are many different types of wireframe diagram templates to choose from in Cacoo. Simply open the editor, choose a template to get you started, and begin customizing it to your liking.

If you create a diagram you think you’ll want to replicate, save it as a new template or stencil. With custom templates and stencils, you can recreate your best work again and again.

Advanced tips & tricks

Best-practices

Regardless of the type of wireframe you’re designing or product you’re creating, there are a few guiding principles that apply to all wireframes.

Start broad

If you get caught up in the details of individual parts of your creation before you’ve outlined your basic structure, you’ll end up with some really nice details and a poorly functioning product.

Your wireframe elements should start out as mostly boxes and text. Make sure you’re thinking about things like navigation, information hierarchy, and storytelling before you even start thinking about interactivity or visual treatments.

Optimize navigation

If there was a primary goal of wireframing it would be defining your navigation. Guiding your user from point A to point B to anywhere else you want them to go, with minimal effort, is the backbone of a successful product.

The more your user has to think about where to go, the more likely they are to fall off the path you’ve tried to build for them.

Consider your user’s journey through each page and the product as a whole, asking yourself when and where they might need or expect certain information to be available.

Minimize or exclude colors

The point of a wireframe is to look at structure. Colors distract your audience and will only encourage unnecessary feedback and questions from your team or client.

At least for your first iteration, avoid color.

Use real copy

Boxes are fine for visual placeholders, but you should use real copy (and avoid lorem ipsum) when possible.

Visuals are easy to set rough dimensions for, but text is a little different. If you create a design around lorem ipsum, chances are your final copy won’t conform to your design. Consequently, you’ll have to waste time drastically changing your layout to accommodate all the information you end up needing to display.

Your copy can still be a rough draft, but you should have some idea of the nature and amount of text you’re going to be working with.

Real copy also makes user testing far more useful.

Be consistent

Just because your wireframes might look simple, doesn’t mean they have to look sloppy.

Use consistent typography, spacing, line widths, buttons, etc., so as not to distract from the structure and functionality you’re trying to convey.

Experiment

When it comes to experimenting, wireframes are the design phase with the least risk. Now is your chance to try out wildly different navigation options, layouts, and text without huge repercussions to the rest of the project.

Try out new ideas or iterate on old ones you’ve found success with in the past. Don’t get attached to any one idea before letting your creativity fully explore all potentials.

Consider the code cost

After you’ve let your creativity run wild, you’ll need to revisit the world of practicality. The reality is every element of your wireframe will eventually need to be coded.

Ask yourself: Is your design feasible given your time and budget constraints?

You will likely have to pare down some of your design to fit the parameters of your project.

Don’t get attached

User testing is an integral part of the wireframing process, and it will result in swift design changes.

Again, this is a reason not to get too detail-oriented too quickly because you could end up wasting a lot of time on elements that immediately get scrapped.

Your goal is to create a “minimum viable design” to test with users. The details come later.

Give your designs context

Because wireframes are so visually simplistic, presenting them can sometimes be underwhelming to your audience. Remember that the importance of your work isn’t how it looks but the story it tells and how effectively it tells it.

When presenting to stakeholders, make sure you explain your design decisions, narrate the experience it creates for the user, and show your work. Keep your early sketches, user flow notes, and other experiments, so you have evidence of all the work that went into each design decision.

Preparation

There are many things to consider before you start the design process to ensure your wireframes suit the needs of your business or client.

Talk to stakeholders

No matter what you’re creating, understanding the requirements of your design is imperative to success. No one will care how awesome your creation is if it doesn’t fulfill the needs and goals of the stakeholders.

Hold a formal meeting with all stakeholders to pin down the goal of the project and any expectations they have about functionality, what they want the user to do, specific features, etc.

The more you understand their terms for success, the better your resulting project will be.

Some other things you may want to discuss with stakeholders include:

  • Device support (desktop, mobile, tablet, etc.)
  • Operating system support (Android, iOS, Windows, etc.)
  • Features by device (are feature consistent across devices or do they get paired down?)
  • Design scaling (fixed, fluid, adaptive, or responsive)
  • Any important elements that need to be on a page (login areas, search boxes, logos, payment boxes, etc)

Remember: responsive and adaptive layouts need multiple sets of screens. Let your project managers know it will require extra time depending on how many sets you need to create.

Get team consensus

Once you understand the requirements of the stakeholders, you’ll want to consult your team of developers and visual designers about how to approach the project.

Some things you may want to discuss with your team include:
Default screen size (what devices are you designing for, and what screen sizes are your users actually using?)
Breaking points (at what size or orientation does your design or feature set change?)

Getting consensus from your team early on will prevent disagreement later when it’s time for them to get to work.

Get frequent feedback

Don’t be afraid of feedback. The more feedback you can get from your team along the way, the better your designs will be by the time they’re ready for stakeholders to review and for users to try.

Not only will your team’s feedback help you spot things you may have missed, but they will challenge you to articulate your design decisions. You’ll become a better UX Designer because you’ll understand more people’s perspectives and have sound evidence for why you’re creating the way you are.

The most important thing to remember about feedback is that it’s never personal. Every piece of feedback should be welcome, whether you decide to use it to adapt your designs or not. Learning to hear feedback and use it in a positive way is an important skill in any creative field.

One way to encourage more regular feedback is by using an online tool that lets you share your work with others and allows for commenting and editing from your team. Also, tracking revisions along the way will help you show your work when it comes time to present.

Why choose Cacoo?

Cacoo is simple to use, easy to learn, and built with collaboration in mind.

Using our cloud-based editor, your team can collaborate on diagrams in real-time. With in-app comments right on diagrams and our presentation mode, you can get easy feedback to refine your work. Shared folders give your team gets access to all the diagrams they need. And sharing diagrams with important stakeholders takes seconds (no downloading or account creation required on their part).

You can create all kinds of professional diagrams; not just wireframes, but flowcharts, sitemaps, network diagrams, mind maps, and more.

Our Team plan gives you:

  • Advanced exporting options (PNG, PDF, PPT, PostScript, or SVG)
  • Revision history (see what changes were made and when)
  • Full access to integrations (including Google Drive, Dropbox, Adobe Creative Cloud, and more)
  • Team management (invite people to your Organization, create groups, and assign roles)
  • Advanced security (manage access to diagrams, so you know exactly who’s seeing them)

Try it out for yourself with our 14-day free trial. No credit card required.

We also offer a Plus plan for those who don’t need our more advanced collaboration features but are still interested in the joining the 2.5 million users who depend on Cacoo for their diagramming needs.

Try it today with our 14-day free trial!

Join the 2,500,000 users who choose Cacoo

Get started