When Shopframe is commissioned to build a custom design, we follow proven techniques to always create a winning design.

Overview

1. We need to know what the site needs to do
2. We need to know what the site's visitors want
3. We need to get a good picture of the personality and style of the brand
4. We need to sketch out highly successful scenarios
5. We need to organise views into a site map
6. We need to sketch the essential features & look
7. We need to map your visitors' attention
8. We need to arrange the visual elements to work together

Step-by-step

Know what the site needs to do

We get really clear about what the goals of a site are. What does success look like? How will you know when we've got there?

Having this clear in our minds helps us:

1. make the thousands of design decisions between now and a finished product
2. communicate with you and maintain your confidence throughout the process
3. show that we've done what we set out to do

Know what the site's visitors want

Ideally, we'd like to show our designs to all your site's target users, and find out what works well for them. As this is not possible, we need another technique.

For all but the simplest of sites, we develop personas and scenarios, based on a simple goal-directed techniques

Get a good picture of the personality and style of the web site

User personas give us great insight into users' goals and behaviour.

But a web site often has its own goals that may be in conflict with the goals of the users. The site also often has Soft Goals, to support or develop its Brand.

We need a way to balance all these various forces optimally. We've developed the Site Persona, which embodies the site's personality, drive and goals in the same way that User Personas do for users. The Site Persona represents both the Brand and the Goals of the web site, which you work into the mix through dialogue with User Personas.

Picture your web site's interactions as a series of conversations between User Personas and the Site Persona. The users are trying to get what they want, and the Site Persona is trying to help them, while ensuring it does its own job.

Sketch out highly successful scenarios

Once we know what your site wants to achieve, and what your visitors want to achieve, it's time to start planning out the site's structure.

We don't start with a site map, as this is too restrictive. We prefer to sketch out the experience, using pencil & paper, just showing the most important aspects of the interaction between site and user.

(Sometimes, these are in the form of a scripted dialogue, where the user persona and site persona communicate as though in a conversation, which will eventually be translated into visual elements.)

A sketch will typically feature:

• Stars showing how a user arrives at the site (entry points)
• Circles showing actions, views or places (which may eventually become pages)
• Arrows showing how users may move around the site
• Speech bubbles representing what a user persona thinks at key places

Organise views into a site map

We need to plan out what pages will be on your site, how they might be grouped, and how users will easily find their way around.

Your site map will effectively merge all the views from the initial free sketches into a structure that's clear and economical. You want your visitors to be able to move freely from place to place, following their noses to their goals.

We think about

• What global or top-level links really need to be available on every page.
• Create enough sections that it will be easy to focus on what your customers want.
• Be careful not to over-segment. If you have too many sections, your site will look bigger and seem harder to navigate. Avoid creating sections that won't have enough content. ("No news is bad news").
• You need to include any other stuff that needs to be there (like Contact Us and Login), which might not feature on any of your sketches to date.
• Look for ways to use smart links and deep links that take users directly to what they're most likely to want next. Don't make them dig.

Sketch the essential features & look

Now we start designing the page, still working on paper at this point.

• Overall page structure and proportions
• Level 1 navigation (main site sections)
• Other global navigation (like login/out, site map, help, footer navigation)
• Main areas of screen real-estate
• Any key graphical elements

Map your visitors' attention

A key step in doing your page layout sketch is getting a good idea of where your visitors will want to look.

When we craft the page on the computer, our job is to balance the relative noticeability of all the visual elements on the page, so that visitors will be drawn to the things that are most important.

Things that increase noticeability

• Bigger things!
• Strong colours (used sparingly)
• High contrast (either shapes, lines or edges with significantly different tones)
• Movement (either actual animation or dynamic lines that give the impression of movement)
• Things with plenty of space around them (they're easier to identify and seem more important)
• Things placed at high-value positions on the page (e.g. towards the top-left and down the middle - depends on your layout)

Everything on your site must either:

• Help your visitors achieve their goals, or
• Support the site's goals without obstructing the visitor's goals

Arrange the visual elements to work together

This is when we take the sketch and build it in Photoshop. Having planned the design properly:-

• We know what the site has to achieve to succeed
• We know what your visitors are looking for, and what they're trying to achieve
• We understand the site's personality and what it wants to achieve while the visitors are on there
• We know what pages and sections are on my site
• We have a good idea of the right page layout that will help your visitors flow round the site easily, keeping them interested until they have done what they want
• We know what visual elements will be on my page, and their relative priority