Communicate Layout
Wireframes are like blueprints for a house. Architects create blueprints to convey the overall structure and layout of a house without getting into the details of colors or finishes. Wireframes serve a similar purpose and allow us to communicate the basic layout and functionality of a webpage without worrying about the visual design, like fonts and colors. Our wireframes are low-fidelity so they’re composed of simple shapes like rectangles and circles, basic fonts and shades of gray.
Determine Types of Content
While wireframes don’t usually contain final content, we do try to use copy that is representative of what would actually be on the page. This helps us figure out things like how much space each section will take up, how many resources to feature on each page, and what images will be needed. It also helps give writers a good idea of how their content will appear and interact with other parts of the web page.
Establish Hierarchy
Wireframes also help us establish hierarchy within a page. Headings or backgrounds can help draw attention to certain content; this prioritization helps users find the information they need. Changing the order items appear on a page can convey the level of importance; items near the top of the page may be more important than those at the bottom of the page.
Show the User’s Journey
Wireframes help us explore and refine the user's journey through the site with our clients. Sometimes we’ll use several wireframes to show how a user moves through a specific process on the site like checking out or signing up for something.
Wireframes may be napkin sketches, whiteboard drawings, or refined digital files, but they all serve the same purpose: communicate the basic components and functionality of the page without getting weighed down with visual details.
