Wireframes and Why You Need Them

Before we beginning designing your website, we'll go through a process called wireframing. While I can be tempting to just right into the the fun part of creating a website — colors! pictures! fonts! — the wireframing step is crucial to creating an organized structure for your content and ensuring that your website works well before looking good.


What is a Wireframe, Exactly?

Wireframes are black and white layouts for each page of your site that outline the specific size and placement of page elements, features, and navigation elements for your website.

They are intentionally simple and devoid of color, imagery, and typography so we can be sure to focus on the site's hierarchy rather than aesthetic.

example_wireframes.png

Why Do I Need One?
 

helps to visualize your sitemap

Sitemaps show a list of each of the pages on your site and how they are connected together but doesn't give a visual example of how you might move from one page to the next. I'll use your wireframes to show how we will move people through your website by creating strategic content hierarchy and compelling calls to action.
 

catalyst for Conversation 

The wireframe can be the catalyst to important conversations about your website you hadn't thought to include. Seeing the basic layout of pages can reveal gaps in the pre-planned content or sitemap and help us to better plan and prepare for a successful website.
 

Saves times and rounds of revisions

Knowing what we're building before we build it can save a tremendous amount of time. Wireframes give us an opportunity to iron out usability kinks before we start getting into coding a website. While code can be changes, it takes a lot longer to make a significant edit once development of the site begins and the wireframing process helps to catch these big changes in the early stages.

example_designs.png

BACK TO RESOURCE LIBRARY