Part 2: Creating Wireframes

Wireframing Guide

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 of wireframes

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, 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.

Design 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

Wireframe 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.

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 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 discuss how to use one of our own tools, Cacoo.

Cacoo
Cacoo, a cloud-based diagramming tool, offers everything you’ll need to construct your initial wireframes, including an extensive library of wireframing templates and shapes.

With Cacoo, you can share your diagrams via email, social media, or a direct link to get feedback from your team, stakeholders, or anyone else you need to along the way. Whomever you share it with doesn’t need an account to view or comment on your work.

Cacoo also makes it easy to collaborate with other team members with simultaneous editing. You can work together on the same diagram to edit your work in real time.

With month-to-month and yearly subscriptions, you can get the wireframing power you need at an affordable price. And, we offer a 14-day free-trial plan for new members.

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.

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 upper left-hand of your menu is a drop-down by the Cacoo logo. This is where you can control your grid options:

  • If you go to Browse > Show Grid, your canvas will be transformed into a grid.
  • If you select the drop-down again, you can go to Browse > Snap to Grid to optionally have all of your items automatically snap to the grid system when you’re moving or placing objects.
  • You can “Hide grid” or “Unsnap to grid” at any time if you’d rather design without these features.

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.

Select a simple square from the Stencil library and set the parameters using your Inspector tool. If you’re using the grid feature, line it up with your grid, and you’re ready to get started.

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, 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, H2, H3, 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 viewers 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 of 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.

Additional Cacoo Resources:

Ready to start wireframing?

Get Started