Published December 05, 2019
The Answer is B.
You wouldn’t set out to build a house without drawing up some blueprints—you'd likely only make it halfway through construction before running into all sorts of structural problems or design flaws.
Having a plan in place prevents needing to work out solutions on the fly, because you’ve taken the time to consider the end result in advance, and framed your design with that goal in mind. A website is much the same.
A wireframe is a low-fidelity blueprint of a web page which maps out key elements of the user experience. It allows you to lay out thoughts quickly and refine as you go—visual elements such as style, color and graphics are typically absent at this stage.
Wireframes depict what the screen does—rather than what it looks like—so the prime focus is on the priority and layout of the content on the page, and on the functions and interactive elements available to the user.
There are a ton of great programs on the market to assist in creating a wireframe quickly—Sketch, InVision, Adobe XD, and Balsamiq come to mind—but often, the best tool is a pencil and paper. (Okay, a whiteboard if you’re feeling fancy.)
Sketch out boxes to block out sections of content, and lines to represent copy. When constructing your wireframe, consider the following:
- What is the most important content on this page?
- How will my user digest this content?
- What do I want my user to do next?
- Is there a way to arrange the elements differently so that my user is more likely to take that action?
Once your team has locked down your wireframe, you’re ready to start thinking about the visual elements by creating a mockup or designing your site!
Subscribe to the 'Inbound & Down' Question of the Day
Sign up to receive a new inbound multiple choice question delivered to your inbox every morning.
Explore more inbound learning on the 'Inbound & Down' Podcast.