Every website designer has to start somewhere. Sometimes even a seasoned professional can benefit from seeing the process broken down into stages, and how each one follows on from the last. So what are the fundamental steps in website design?
Defining the site’s purpose
If you’re not clear what a site is meant to achieve, then you’re unlikely to achieve it. So start by defining the site’s purpose. Ask your boss or clients what they want the site to do – a client survey can be very useful for this. What is its overall purpose, in general terms, and what will this look to them in reality.
Set goals based on this purpose. Try to make them SMART – Specific, Measurable, Achievable, Relevant and Time-bound. An ill-defined goal, or one whose results can’t be measured, won’t tell you whether the work you’ve done has succeeded, and will provide you with far less clarity at the start of the design process. So rather than just accepting ‘we want more customers to buy our t-shirts’ look for goals like ‘we want 100 customers a month to buy t-shirts through the website’.
Create an outline showing the structure of the site – what pages there will be and which ones will sit beneath which in the hierarchy of the site. This will look something like a flowchart or family tree, with sets of pages branching out from the home page.
There are a few factors to consider when designing the outline. Easy navigation is top of the list. Grouping similar pages together will make them more intuitive to find, as will simplicity and keeping the hierarchy shallow, without too many layers. A shallow hierarchy also helps the site’s profile in search engines, which don’t tend to dig very deeply.
Having planned the structure of the site, think about the structure of individual pages. Create wireframes, line drawings showing a page without content, but with all the parts of its layout on display. For example, is there a logo that will show up in the top right corner of every page? How large will the company brand header be? Where will the navigation bars sit, and the site search option? You don’t need to reinvent the wheel – some elements are common to most good websites, and you can get the basics down by looking at others’ work. Just remember not to worry about details of appearance at this point.
OK, now you get to think about appearance. This is the part that inexperienced designers will leap to – the colours, the shapes, the pictures, the flashing buttons that you want the customer to click. But without all the structure you’ve just put in place, this can lead to something messy, inconsistent or hard to navigate.
This is the time to decide on colours for everything from backgrounds to fonts to the lines around text boxes. It’s also the time to pick the fonts, as well as the pictures and logos appearing on each page. In short, it’s when you can unleash your creative side, making a design that’s the last word in elegance or fun or whatever style your client’s asked for.
That done, it’s down to the hard slog of creating all the pages in your hierarchy, applying that design to every page. This is the time for page authoring tools such as Dreamweaver, which help you turn your grand vision into a reality, over and again, for every page.
Most of this software uses a ‘what you see is what you get’ approach. As you drag, drop and draw on the page, you’re seeing exactly what the site will look like. This means that you don’t have to worry about, or even understand, the programming code working behind the page – the software will do that for you. This is about applying a design, not programming.
Finally comes a stage that it’s easy, and potentially disastrous, to skip – testing the site. Before unveiling it, check it all the way through. Look over every detail of every page. Click on all the buttons and links to be sure that they work. Carefully read the text and correct any spelling, grammar or punctuation errors. Little details like this can completely undermine the professional appeal of an otherwise perfect website.
By now, you’ll have been thinking about the site for so long that it may be hard to see the wood for the trees. So if you can, get other people to check over the site. Your clients have a vested interest in getting it right, and knowledge about the content, so if they can provide someone that’s perfect.
And at last, the launch
After all of that, your website is finally ready for launch. Upload the content, let people know it’s there, and get ready for their gasps of approval. Because you just made that happen.