Wireframes

Wireframes are very simple, very high-level “sketches” of website pages that focus on content priority, hierarchy, and page functionality. They are developed in parallel with (or shortly after) information architecture (IA). In the analogy of building a house, wireframes serve as the blueprints for how the house should be built.

The design team uses Adobe XD (and sometimes Axure) for wireframes, and they use a mobile-first approach to wireframes to understand how content will be placed on the page at each break point. It is also the preferred tool for prototyping, except when there is a need to represent large data sets in the prototype to understand its functionality, such as a course planning app. In these cases, they use plain HTML, CSS, and JavaScript.

Do:

  • Focus on content. What kinds of sections do you want on the page? What order should they be in? If applicable, what kinds of messaging should this page use?
  • Wireframe with enough detail to fully understand and explain functionality needs to the client and project team.
  • Solve basic, high-level user interface problems in wireframes. How will your filtering logic work? What happens if there are no results? Solve your “what-ifs” in wireframes.
  • Ensure all required content for a page is accounted for in wireframes. Do you need an image in your calendar event? Note that here, not in design.
  • Consult with your team, especially developers, early and often.

Don’t:

  • Choose any fonts, colors, or other design elements. Leave these items to be dealt with in mockups, and use the basic library items. Wireframes are deliberately somewhat “ugly.”
  • Reinvent the wheel. Know what components your template is expected to be built with. Use the ID Tools Axure template and library, and consult with a developer if you want to modify the content in a component or the way it behaves.
  • Go nuts with interactivity or details. Put the minimum content and functionality required into the wireframe for the client and team to fully understand how it will work.

Examples of Wireframes:

What’s the Difference between Wireframes and …

  • Mockups? Mockups focus on pixel-perfect design, including color and typography. Wireframes focus on content, priority, and functionality.
  • IA? IA works with information at the site level. Wireframes work with information and content priority at the page level.
  • Prototypes? Prototypes and wireframes may be built using the same tools and focus on content, priority, and functionality, but prototypes demonstrate these concepts across multiple “states” of a single page. For example, a filtering prototype may have states for filtered results, unfiltered results, and no results, which you can interact with to get a feeling of how the entire filtering tool will work. Wireframes only have one state and are limited to no interactivity. Prototypes may be built in Axure but can also be built with “prototype code”—HTML, CSS, and JavaScript that is written to get the idea across in the fastest manner possible and is not intended to be used in the final product.

Resources: