Wireframes

The Screen Options allow you to choose which dashboard metab...

WireframesWireframes are very simple, very high-level "sketches" of we... are very simple, very high-level “sketches” of website pages that focus on contentContent consists of text, images, headings, and other inform... priority, hierarchy, and pageA page is often used to present “static” information abo... functionalityFunctionality is a very general term we use to describe any .... They are developed in parallel with (or shortly after) information architectureInformation architecture (IA) focuses on organizing, structu... (IAInformation architecture (IA) focuses on organizing, structu...). In the analogy of building a house, wireframes serve as the blueprints for how the house should be built.

The design teamThe design team is a group of talented designers who are res... 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 pageA page is often used to present “static” information abo... 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, CSSCSS is a programming language that we use to "style" a web p..., 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 mockupsA mockup is a static, high-fidelity example of how a web pag..., and use the basic library items. Wireframes are deliberately somewhat “ugly.”
  • Reinvent the wheel. Know what components your templateA template is a collection of components, functionality, and... 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: