Where to Start with Wireframes
In his book The Design of Everyday Things, Don Norman states that “two of the most important characteristics of good design are discoverability and understanding.” Wireframes are an effective way to aid in the design of these characteristics. Creating wireframes helps designers discover and iterate website and mobile apps. They help answer questions such as can the user achieve their goals, or is the user interaction effective?
After designers sketch out a rough draft of an app or website interface, the next step is wireframing. A wireframe is a two-dimensional representation of the interface which focuses on spacing, functionality, and content placement. Wireframes are the interface skeleton and do not include high fidelity styling, graphics, or color at this stage of the design process. It’s essential to keep in mind that wireframes are guides to where the major navigation and content elements of your site are going to appear on the page. Since the goal of the illustrations is not to depict visual design, keep it simple.
A typical wireframe will include a logo, search field, and breadcrumb placement on the page. Headers, navigation, share buttons, and footers are essential as well. Designers will include a placeholder for the body content, including placement of the main content and contact information. It is an excellent way to provide documentation on how the product should function and the team’s design. Wireframes are a communication tool that can help coordinate with stakeholders from all areas.
A useful wireframe will answer the following questions:
- What information to convey on a particular page or module?
- How will we structure the information?
- How will we organize the content on the page(s) or module (s)?
- What are the primary interface features needed to help the user accomplish their goals?
Some key points to keep in mind while creating your wireframes include:
- Show basic screen layout
- Use real navigation labels
- Share with the team early and often
- Use grayscale
- Show information hierarchy
- Don’t show styling, colors, or images
- Use generic typography
- Don’t overuse lorem ipsum placeholder text
- Don’t spend too much time on detailed buttons or graphics
Sometimes a quick sketch is all you need to start your wireframes, but for a more detailed structure, the product designers can use several types of tools to help show user flows between screens. Three popular wireframe tools include Balsamique, Invision, and Sketch. These tools allow designers to create blueprints for their product’s structure, content, hierarchy, functionality, and interactive behavior. It is important to keep speed and simplicity in mind when creating wireframes. It is a low-cost way to iterate your project and share ideas with stakeholders.
