Website Development Pitfall 1: Starting with the design

By Angela Schuster

There are a number of pitfalls that should be avoided when developing a website and avoiding these pitfalls is not an easy task. This blog series focuses on five pitfalls (one a day) and how to avoid them.

Pitfall 1 is kicking off the process by working on how the site will look...

Pitfall 1: Starting with the design

Design is often the first aspect of a web project that people try to resolve, mostly likely because it's the most visual part of the project and easy to relate to. This should however, be about the fourth step (at least) in any good web development process.

A successful website development project, which will stay on budget, on schedule and actually provide you with a useful and usable business tool that will grow as your business grows, typically follows this process:

  • Begin with a scoping and requirements gathering stage

    This is where you sit down and think about what your website needs to achieve (related, of course to your business objectives).

    This includes (but isn't limited to): What your users want to achieve from visiting the site, what technological requirements you have, how it will be maintained, what tools will be associated with the site (calculators, enewsletters, forums etc), where the content will come from, who will manage the site, where it will be hosted and what standards (usability, accessibility, design) it needs to conform to.

    If you are only wanting to make adjustments or enhancements to an existing site, a website audit can be a handy tool as part of this stage. An audit lets you establish how your current website is performing against your requirements and will highlight areas for improvement.

  • Progress to identifying the site navigation

    This is where you label all of the information you want on the site and arrange this into logical hierarchical categories. For example you may want information about the team, the history of the company, the share price, the board members (ok this is boring but some sites do need this to add credibility and build trust). You could organise this under an ‘About us’ type section with each item of information having its own page under this header.

    This is called developing the site's information architecture (IA) or its navigation. Depending on the size of your site, a very small navigation structure or a very large navigation structure may be appropriate. The main rule is to make sure it is organised logically and intuitively for the user. Try to avoid internal terms and categorisation as they may not mean anything to your external audience.

  • Move onto developing 'wireframes'

    Wireframes show visually where the main elements will reside on a page. For example, where the logo will be, where the banner will be, where your navigation will be placed and where your content will go.

    Basically it’s what the site will look like but without graphics, pictures, colour or 'real' text. Think of it as a stick figure of the website. It’s very useful to work out how things will look on the site, how all of the pages and elements relate to each other but WITHOUT getting bogged down on whether that particular shade of blue is the right shade or not.

    Wireframes don't have to be flash, they can be drawn out with pencil on paper - it's going through the process thoughtfully that's important.

  • Then and only then, work on the design

    This is when your graphic designer basically colours in your wireframe and puts in the pretty pictures.

    While people in your company are sure to argue the toss at this point over colour combinations or imagery, at least, having followed the process outlined above, you know that whoever wins out regarding the design, a sound basis for your website has been established. This means that changing colour or images around will not adversely impact the overall direction of the site or your project.

As you can see, design comes way down the list. But, why is it important to do the other steps first? Well, the person programming the site will use all of the above, not just the design, to actually quote on and build the site.

It's like building a house. You don't give the builder the artists impression of the outside of the house and tell them to start building - more detail is required; blueprints, the floor plans and other specifications. Based on this information the builder will then be in a position to quote on the build and estimate how long it will take. Then you get them to start building.

Without working through the blueprint, you'll be constantly surprised by things the builder hadn't factored in, things you forgot to factor in or things that just aren't possible or practical. All of this adds extra costs and time to the build - be it a house or a website.

As you read our remaining pitfalls, you'll find out more about just what kind of things you should factor in before you get the design done and well before you start to build your new site.

To avoid pitfall number 1, make sure you start at the start and work out exactly what you want the site to do before you work out how you want it to look

Five pitfalls of website development - over five days

Each day this week we’ll release one pitfall that businesses all too often fall into when developing a new website or making over an existing one. That way they’re in nice bite sized chunks you can digest over 24 hours.

We'll give you an overview of the pitfall and how to avoid it so you can ensure your website development project is a success.

Read Pitfall 2: Getting an 'agency' to do it...