listen up

In every industry there is a sub language. Words, phrases, shorthand that really only speaks to those that already get it. So here we are, designers, talking about a bunch of stuff that makes no sense to you. I want to change that. Today, let’s unpack “wireframes”.
So in a nut shell, a wireframe is a super boxy, boring, series of blocks, framing out each page. It’s really best to think of these like you would a blueprint for a home. It shows spacing, size, content, and relationships. Is the kitchen right next to the living room? or the dinning room? How big is the bathroom, will it fit a tub AND a shower? Or just the tub?

Same thing with the wireframe and your website. We spend time researching your needs, your content, your plans, etc. and have the wireframe to show what came out of that. Where is the logo in relation to the navigation, how much space are we giving that introduction, etc. It all matters, because it’s where we plan to take your design. Just like a home builder builds off those blueprints.

Key things we are showing you in a wireframe design concept:

1. General sizing of the major objects, content areas, images, and videos.
2. What goes on each page. This page contains the following items...  sort of thing.
3. About how much content we are expecting. An intro paragraph is not the same as a full page about us novel.
4. Key strategy points, messaging models, calls to action, forms, and interaction points
5. Navigation patterns

In a wireframe stage, we are NOT showing you:

1. Color or style. These wireframes are almost always grey and plain.
2. Typography selections. We default to helvetica for simplicity.
3. Branding elements. We may not even have your logo in place at this point, but we try to.
4. Content. Most often the headlines are instructions or what should be written here. Body copy is always gibberish filler
5. Images. These are empty shells with an image icon. Images are dynamic things that can be managed at any time in the CMS.

What feedback should you be giving at the wireframe stage?

1. Does the overall layout fit your needs?
2. Do you have the content needed? Sure this stat section is nice, and you may see the value, but do you actually have any metrics to fit that?
3. Does the page feel like it flows well for your user?
4. Do you agree with the presented strategy for positioning your company as the authority, yet still empathetic, and a clear call to action for the visitor?
5. Is there more or less content in your plan than we have designed space for?

So what is the next step after we talk through the wireframes?

Generally we expect a round or two of revisions here.  We want to try to dial this in so when we are designing the full site creative, we know the objectives are clear with the content and overall layout strategy. We can move forward with confidence that we are both on the same page and can create something great together.
Once those wireframe revisions are completed, we move to the full site design. These site designs follow the wireframes like a blueprint. The style and color, the typography and margins may push some items around a bit. But the the end result should be pretty close to what we finished with at the wireframe stage.
 
Questions? Happy to help! emails us at [email protected]