Designing a website

Sitting down to design your website can be a daunting experience, you’ve bought your domain name and hosting package, now what? You head over to google and type “designing a website”, click search and millions of results are returned from, web design agencies to step-by-step guides and web design software. You start clicking through the step-by-step guides, before you know it you’re reading about screen resolutions, page layout, jpegs, html, css, etc.

We’ve all been there, we start by looking for information on a particular topic and get swept along by the shear volume of information available, sure we pick up valuable information along the way but it’s not always relevant to what we need to get the job done. So stop, put down the mouse, step away from the computer and grab a pen and some paper we’re going to delve into the world of Information Architecture.

Requirements Gathering

The first step to creating a good website is to define the sites goals. It may sound like an obvious thing to do, but think of all those terrible sites you’ve been to in the past. Do you think the people designing those sites thought about their goals? Defining the sites goals will establish a clear idea of what you are about to do and what you are trying to achieve, without them why bother building a site?

To define your goals start by asking yourself or your company some questions designed to clarify the purpose of the site:

• What is your personal vision or mission of the company?
• Why will people visit your site?
• Who is the site intended for?

The first question is very important and will help define your website. The answer should explain what it is that you want to achieve. It doesn’t have to be complicated, it could even be a one line statement e.g.

• AMAZON.COM – Earth’s Biggest BookStore
• EBAY.COM – The World’s Online Market Place
• FACEBOOK.COM – Connect and share with the people in your life.

The answers from the last question “Who is the site intended for?” can be turned into audience goals (i.e. what users of the site will be trying to achieve).

Depending on whether you are designing for yourself or a company will dictate how much filtering of the answers you’ll have to do. Either way you should have a list of answers that need to be refined into goals.

Start by rephrasing your answers into a list of goals and group similar ones together. Once you have done this you need to prioritise the list and give the ones that you grouped category names. You now have a clear set of goals, a purpose for your website.

Site Content

By now you should know what your site is going to be about and who it is for and can now start to think about the actual content of the site. Using your list of goals create a new list of content elements required for the site. It may help to break these elements into two types static and dynamic. About Us, Privacy Policy and Terms and Conditions are examples of static content. Site searches, user login and newsletter subscription are all examples of dynamic content. By separating the two types of content you will also be able to see, primarily from the dynamic types, the functionality required for your site. Once you have this list it is a good idea to go and look on the Internet for similar websites or competitors and see if there are any pages or elements you have missed.

Next you need to prioritise your content elements list and work out whether you have the necessary skills, technology, budget and time to achieve them, inevitably some may drop off the list or be considered out of scope for the first iteration. Once you are done you can begin to organise the content elements which will provide the basis for the site structure. Start by grouping the content elements and when you are happy with the groups, name them. This will help define the major sections of your website and in turn your site structure.

At this point you may want to consider how you go about gathering and collating the actual content for pages of your website and may find content templates useful.

Site Structure

By now you should know what your sites purpose is, who it is for and the type of content it is going to contain. The next step is to define the structure of the site upon which everything else is built.

You can start by creating a hierarchical map of the site, very similar to a table of contents for a document. Using the major sections defined earlier you can start to create a site structure listing e.g.

• Section 1
  • Section 1.1
  • Section 1.2
• Section 2
  • Section 2.1
  • Section 2.1.1

Many people find it difficult to work with lists like these when thinking about how the site is going to fit together, which is where sitemaps can help. They give a more visual representation of the site structure and how the content elements are grouped and relate to each other. You can download software that can help you develop a sitemap in an intuitive and visual way (e.g. smartdraw.com), but to begin with a pencil, ruler and a large sheet of paper will do fine.

Now we are ready to define the navigation for your site. Take a look at the site structure and identify the major sections, these should be the candidates for the main consistent navigation system that appears on every page allowing your users to quickly switch between sections. As a rule of thumb try to limit the main navigation to around 5 elements.

You may also have pages that are related to each other and wish to show local navigation between them e.g. in a FAQ page sidebar show links to related FAQs.

Where possible you should try to document the main and local navigation for a page, it can be as simple as a list or short description. This will prove invaluable when you get around to looking at page layout.

Visual design

When you read the title of this guide I bet you didn’t think it would take this long to get to graphical element of designing your website. Just before you go and fire up your favourite graphics package and start mocking up pages, lets just consider page layout first.

Before you start introducing colour, photos, icons, logos, etc. you need to work out what content elements require prominent placement on the page. There are two commonly used techniques to depict layout of content without the distraction of graphical elements, theses are wireframes and grey boxes.

Start by looking at all the page types you have defined in your site structure, most of the pages should have many common elements across the main sections (e.g. branding, navigation, page titles, sidebar, footer), but may have slightly different purposes (e.g. sales pages as opposed to user control panel). Try to come up with two or three page types that you can use as the basis for all of the others. This is an iterative process so expect to revise your wireframes or grey boxes several time.

OK, now you’re ready to pull out the sketch pad and fire up that graphics package, integrating the page layouts with graphical elements and producing mock-ups that look as close to the actual pages as possible.

You now have all of the material you need to start constructing a prototype website. Whether you decide to hand code the website yourself, use a package like WordPress or employ a professional designer to do it, everything should effortlessly fall into place because you have taken the time to plan your site first.