Wireframes: Message, Flow & Layout Before Design

In simple terms: good website design starts with good wireframing.

Wireframes are the architectural layout of what your site will be. They’re like a skeleton for your website.

website-wireframes---website-layout-planning

The whole User Experience of your new site is defined through the wireframes, and we follow tested layouts, usability research, and years of experience in creating them.

This process helps us focus on what your buyers need to do on each page without the distractions of the “look & feel.”

Here’s how we will create your wireframes:

We define the goal of each key page

For key pages in the user flows, we need to define what we want buyers to accomplish; do we want them to:

  • Click on a certain CTA?

  • Understand something?

  • Get certain key message and then go to another page?

  • Fill up a form?

So, we’ll define what the most wanted action buyers should take on each key page, then...

We’ll figure out the messaging

We’ll define what needs to be said so that your buyers can accomplish the goal.  To do this we take into account:

  • What’s important to your buyers

  • Their key questions

  • Their doubts and hesitations

Because if we know that, figuring out the layout of the page becomes a fact-based exercise and not guesswork.

So once the messaging is done...


We’ll sketch out the layout

The layout is like the architect’s plan of the site: what goes where, what’s more important than what, and we start defining how buyers will experience the page. We include in this step the formatting we had done while writing the copy.

Lastly, we’ll add some notes about how we want the page to work

What kind of imagery, functionality and behaviors should be built in during design and development to support the goal of the page.  

This is stuff like:

  • Types of images to use

  • Button behavior

  • Interactive functions (what stuff is user activated vs. just displayed, etc etc)

In other words, coolness is engineered to support your goal.  Not mere useless gimmicks.

A wireframe is 90% thinking & planning and only 10% sketching.

Most, if not all of your website’s functionality is decided at this stage.  

This is how great User Experience is created.

website redesign ebook