ROAR Resources

5 Design: What You Need to Know About Designing Your Website

You’ve done the wireframe and now you’re about to get stuck in to the design with your designers.

But what do you need to know to make the design process go as smoothly as possible and ensure you get the right design for your business?

Let’s find out:

Designing is the cool bit, the part of the project everyone loves! When you see your wireframe blossom into a beautiful design all the hard work seems worthwhile. But before you get to enjoy the fruits of this though you’ve got to give us designers some direction.

The Design Brief

We web designers love briefs and so it really helps to get as much information about how you want your website to look and your visual preferences before we produce any designs. At digitalROAR we have a little questionnaire that helps elicit this information from our customers. Here are a few of the questions we ask:

  1. How good is your website at representing your brand?
  2. List 5 websites you love and their addresses.
  3. List 5 websites you hate and their addresses.
  4. Are there any identities you admire which have some relevance to your own product/service?
  5. Are there any colours you would like to use or to avoid?
  6. Etc…

We also make sure our designers have re-read the original website brief and set aside some time for you to talk with them directly all of which gives context to the design.

If you are a larger organisation you may already have a style guide which specifies your corporate colours, positioning of your logo, font usage and so forth. This is also something which needs to be added to the design mix.

In the past we’ve had briefs which have been a little tricky to accomplish, for example, “I want it to look cool, simple, exciting, creative, business-like and friendly”. It’s almost impossible for any designer to produce something which is all these things simultaneously. Especially, as they can be mutually exclusive: Friendly designs tend not to be business-like and exciting designs are rarely simple. So a word of warning here is to be careful not to create an unachievable design brief.

Sample Content

To help produce a better design you will need to provide us with some actual content. (These are the spaces in your wireframe denoted for content. Read more about 3 Specification: What is a Wireframe?.) This can be a tremendous help because it gives the designer the physical size of information required, the written style for the website, how you intend to use headings, and so on.

You may also want to provide graphics and pictures including; your logo, your corporate font, your graphics library of pictures, etc.. Anything you can give us which gets the design closer to the finished article is going to enhance the design.

The Designs!

The homepage is usually the first to get designed. It is also takes the longest time because we’re setting the style and tone for the entire site.

Some web design agencies prefer gathering all the information and then producing one design, the theory being that if the brief is good enough then they should be able to get close to the bull’s-eye in one shot. Some take alternative approaches, for example creating designs which conform to the brief but are polar opposites of one another (multi-coloured versus monochrome or funky versus conventional or elaborate versus simplistic). The idea being that it gives you more choice but also enables any design contradictions they can be worked out across two designs. Either method is fine as long as you get a design which you like and suits your customers.

Designing is the cool bit, the part of the project everyone loves! When you see your wireframe blossom into a beautiful design all the hard work seems worthwhile.

Once the home page is signed off it’s a relatively simple task to get the remaining pages designed and refined.

If you find yourself wanting to make endless adjustments to the design then that signifies that something is fundamentally wrong. ‘Fiddling’ can really delay the project so there comes a point where you have to engage the 80:20 rule as finding design perfection could increase the length of time it takes to complete the design phase by up to 80%.

Here are a few pointers to help you through the design process:

  1. Don’t panic if it’s not right first time – it’s a process and can take a while for the designer to ‘get’ where you’re coming from.
  2. Be guided by your designer – they’ll know how to create a design that works.
  3. BUT, if you hate it and its just plain wrong don’t be afraid to say!
  4. Don’t fall into the trap of wanting everything to catch your Browser’s eye (logo, headline, telephone number, text, graphics, etc.). The design should make your eye flow down the screen seeing things in an order which leads you to the next action.
  5. Remember, less is more – don’t succumb to the idea that you need everything on one page.
  6. Don’t keep ‘trying things out’ on the design. A good designer will probably have thought and tried a number of approaches before settling on the one they present to you. 
  7. Don’t review the design according to what you like. It’s how your target audience will react that’s most important.  Find some tame clients and ask for their opinions. 

Limit who comments on the aesthetics of the design. The old adage that a camel is a horse designed by a committee is very true. Everyone will have their own opinion and the more people you ask the more diluted the concept will become and the harder (and longer) the whole design process becomes.

And that last point leads us on to…

Usability Studies

Now you’ve got the designs you need to get some feedback on them. Find a few colleagues, friends (or better still) potential customers, show them the designs and start asking them questions:

  1. What do we do?
  2. Where’s our contact information?
  3. What stands out as most important?
  4. What would you click on first?
  5. What’s confusing?
  6. What’s clear?
  7. What do you remember about the site

You can add to this list whatever is relevant to your business but the answers to these questions will be worth their weight in gold to you and certainly worth some tea and cakes for each of your participants!

Repeat this exercise as many times as you practically can for all the pages you have designed. (Performing this exercise usually captures about 80% of the usability issues and can uncover aspects about how people will use your website you may never have considered.)

If you don’t have access to a group of testers you can get some anonymous testers to help you out online at www.fivesecondtest.com. You upload your design, ask a question you want answered and random testers will give their feedback.

Style Guides

A style guide is a very important component in the design phase and is often missed. It defines how all the visual elements appear on the screen including;

  1. Hyperlink colour (both before and after it is clicked)
  2. Heading styles.  For example;
  3. Heading 1 (Title)
  4. Heading 2 (Sub-title)
  5. Heading 3 (Sub-sub-title)
  6. Body text
  7. Bulleted/Numbered lists
  8. Spacings between elements on the page
  9. And so on…

Designers know what constituents make up a style guide but it's always good practice to have one.

Favicons

Google Favicon

At the top of your browser, you'll see a tab with the page title displayed, to the left of this you'll often see a little icon. This is called a favicon (a portmanteau of "favourite" and "icon") and if you drag it to your desktop will display the logo of the company. It's a minor point of detail to remember but definitely a nice touch.

Post Design Wireframe Jiggle

Experience shows that it is very normal to find the design phase flushes out any imperfections in the wireframe. So we might need to go back and modify the wireframe to bring it up to date with the design as there may now be functionality changes to consider. 

Licence Check

Inevitably we designers will have used what are called ‘stock’ images. They are usually high quality graphics (photographs, animations, movies, etc.) found on sites such as; iStock and Shutterstock. What's important for you is that you hold the licence to use any of these images on your website.

In recent years Getty Images has fiercely (and litigiously) protected its copyright and anyone found infringing it is likely to face some fairly aggressive demands and costings. Rather than becoming entangled in a legal battle it’s always simpler to have license proof for your images. This is something we typically hand over to our customers or alternatively we ask them to purchase the imagery directly.

Well, we hope that's been of help and that you have everything you need to make the design phase of your web build go creatively and smoothly.

 

NEXT: 6 Web Development: A Behind the Scenes Look

 

digitalROAR LogodigitalROAR is a Web Design agency based in Staffordshire. We build websites that convert visitors into customers and enquiries through great design, rock-solid technology and innovative Digital Marketing. Let's make Contact.