Why We Start Your Website Design With a Prototype

without comments Estimated reading time: 4 minutes

by Scott de Fasselle

grayscreen website prototype

Information design is the blueprint for your website–it’s the “floor plan” that includes your site’s navigation and how content is organized on site pages, and it’s the first step to executing a successful new website design. If you think about it, website design a lot like building a house. Would you worry about the color/style of the carpet, walls and counters before anything else? Or, would you review the floor plan with the builder to make sure that the home will include all of the spaces you need? With website design, this infrastructure is reviewed using a grayscreen website prototype, allowing us (the designer) and you (the client) to focus on the most important aspect of your new website: information design.

Starting with a prototype allows for a great deal of flexibility and makes it easy to test different ideas as we work together. Once the information design of the site is solid, then we can move into adding text, color, and visual style to the site.

What does a grayscreen prototype look like?

Here’s the grayscreen prototype we created recently when we redesigned our site.

If you compare it to our home page, you’ll see many similarities and a few differences, and that’s fine because the design and layout had to evolve slightly as we started to place actual text and content into the page.

We should ask the following questions to make the site as easy as possible for visitors:

How will visitors find information?

Why is this the first priority? If your site has great content for your visitors, but no one can find it, it doesn’t matter.

What do you do when you’re on a website you’ve never been to before and you can’t find what you’re looking for? Most likely, you close the window or go to Google to find what you need somewhere else.

It’s common to think that every visitor to your site will enter the site from the home page, but that’s not the case. Google wants to send people directly to pages that have the content they are looking for. So visitors will often enter your site through a product page, a service page, or even an old blog post. By providing visitors clear and easy to understand navigation, you will give them the confidence that they can find any additional information they need.

How will content be organized on different types of pages?

Once we’ve established how the visitor will find their way around the site, it’s time to talk about how different types of pages on the site will address the visitor’s needs and the actions you want the visitor to take.

Relevant content and the action the visitor should take will differ depending on the type of page they are on. A product page might have e-commerce, while a blog page might features a form to sign-up for your monthly newsletter.

Obviously those pages will have some similar types of content, such as text, but a product page might have groups of bullet points covering features, benefits, and warranty, while a blog post will tend to have paragraphs with 500 – 1500 words total.

At this stage we don’t need to worry about the appearance of the e-commerce, or the newsletter sign-up, or every word of text on a page. The goal is to establish the overall plan for how things will be organized so it’s easy for the visitor to take the next step.

How will the information design adjust for smartphones, tablets, and desktop computers?

Given the constantly growing number of phones and tablets used to access the internet, it’s critical that the site’s content be easy to find regardless of the device someone is using to view your site. The best way to do this is to visit the prototype on the devices you and your co-workers have.

It’s important to find what works well and what areas can be improved. For example, it might be easy to access critical info from a desktop computer, but harder to reach the same info from a smartphone. Discovering those challenges early while prototyping the website makes it much easier to test alternatives quickly.

You have to walk before you can run.

We know you’re excited to see the appearance of your new site, and your designer is undoubted excited to reach that stage too. However, racing ahead to a concept design with color, actual text, images, and a visual style, without prototyping the site is like trying to run before you can walk.

If you and your designer don’t think about, discuss, and test how visitors will access the info they need, your site isn’t likely to reach it’s goals.


We were convinced of the benefits of grayscreen prototyping when we read A Website That Works by Mark O’Brien. It’s an excellent book that’s a quick read.

Written by Scott de Fasselle

May 30th, 2014 at 5:15 pm

Leave a Reply