Wireframes

34 prog-wireframes

Wireframes are to software design as blueprints are to home or building design. They are a tool for designers to think through interactions and workflows. They are used at the Program level to validate design intent with stakeholders and users.

Explore More.

Related Mindset:

Experience

Segment:

Program

Inputs:

A defined feature for the Program

Outputs:

Wireframes detailing the workflow of the feature

Wireframes are a tool used by designers to communicate the way a user will accomplish tasks or acquire information through an application or website.

They are focused on defining layout, information architecture, and interaction. Color, typography, photography, copy, texture, and any other elements of visual design are reserved until a later phase of the project. Wireframes take less time to change and can be iterated upon independent from visual design aspects. This decoupling is part of what allows designers to work effectively in the product development process.

Wireframes often begin using low fidelity tools such as whiteboards or sketching with paper and pen. Sometimes they evolve into higher fidelity vector-based outputs with tools such as Sketch or Illustrator. When necessary, Wireframes may be annotated and packaged as a formal deliverable and shared with stakeholders or other departments for feedback or further work.

Common Pitfalls

  • Taking wireframes too far - There is much discussion in the UX Design world about the proper role and function of Wireframes in the design process. Wireframes occupy a middle ground of many aspects of a design. Though they show the intended layout of an interface, visual styling on an interface often impacts layout so severely that it must be reconsidered by the visual designer. Wireframes also begin the process of defining many of the interactions in an interface, but as a static representation they do a poor job of showing what the interaction actually looks like. Wireframes should be treated as exhaust required to get the design process moving. They are often essential to gaining momentum and getting a project started, but rarely needed at the end or after completion of a project. Designers can easily get caught up in Wireframes for the sake of Wireframes. Keeping Wireframes complete and up-to-date at later stages of a project is both exhausting and a waste of time.
  • Over-annotating - Annotations on Wireframes allow a designer to explain his or her intention for the product with words when the picture is not self explanatory. Designers should use annotations to the extent that they would require interpretation by another party the designer cannot easily communicate with or when the Wireframes will be the primary design artifact being iterated on for a long time. When this isn’t the case, it’s better to move on to visual compositions or some kind of working prototype - artifacts that more closely resemble real working software.
  • Overlooking user flow (and other aspects of design) - Designers working on Wireframes are typically involved in other aspects of an interface’s design that aren’t as explicitly related to screens like user flows, information architecture, or storyboards. By getting into Wireframes too quickly or deeply, designers can often forget about other important aspects of building their product.

Tools

There are many tools available to begin wireframing, especially software that makes it easy to start a wireframe and take it to a visual composition or generate a prototype.

At Universal Mind, we recommend the following tools for wireframing:

  • Whiteboard to get started laying out a page or collaborate on a wireframe idea
  • Pencil/pen and paper for quick sketches
  • Sketch for refined Wireframes
  • Adobe Illustrator for refined Wireframes
  • Apple Keynote (for annotations)