Deft Creative Articles

The steps involved in a web design project

November 9th, 2006

The two most common questions I’m asked when discussing a web design project are “How much will it cost” and “How long will it take”. The answers to these can vary a lot between projects, but what does remain much the same are the steps involved in taking the project from conception through to completion.

Hopefully this article will explain a bit about how we approach projects and carry then through to going “live” with the completed site.

Step 1) Assessment of your needs

The main crux of this step is to decide why you need a website. What do you want it to achieve for your business? Some examples of this may be;

• Produce new, qualified leads
• Leverage other advertising, e.g. a landing site for a direct mail campaign
• Improve customer service
• Build an email subscriber list
• Provide detailed product info/specs
• Answer FAQs to save taking calls from customers
• Provide testimonials
• Keep customers current on changing info in your industry
• Increase the image/prestige of your business
• Reduce your overheads (postage, printing, etc.)
• Educate about your company, service or product
• Provide articles to visitors
• Provide maps or directions
• Provide an online booking/tracking system for your service

There may be others as well.

With this step we’ll also research other companies in your industry, your competitors etc. to see what they are doing well, and also what they are not doing well which can be improved on. If necessary any niche market opportunities will be explored and competition analysed.

Step 2) Proposed site structure

Next step is to take all the research and information from step 1 and create a proposed site map. This will most likely be a simple list, or if it’s clearer, a diagram will be drawn up. This will show the menu and sub menu hierarchy, including page names and their content, and the linking scheme between all the pages.

Step 3) Design concepts

This is where the real “design” process begins. Based on existing branding/corporate colours if any, a static “mock-up” of your homepage will be created, showing exactly what the web page will look like, but without any functionality yet.

The concept will usually need a little refinement based on client feedback before it is signed off. From there internal pages will be mocked up if they are radically different from the homepage. Once we have all agreed on the design of the site itself, it is time to make it work…

Step 4) Coding the templates and testing

The static design concepts are taken and chopped up into component parts ready for coding. Using XHTML and CSS the code is written which allows a web browser (such as Internet Explorer) to render the web page in the correct way, with the right graphics and style information applied.

The W3C (World Wide Web Consortium) layout guidelines as to how XHTML and CSS code should be written. By following these guidelines it is possible to get the code to validate. A bit like running a page of text through a spell-checker, a similar tool exists for website code. Having clean and well written code is important for many reasons (to be covered in a later article) but brings many benefits.

The end of this stage involves running our coded templates through as many different browser software and computer platforms as possible, testing for consistency of layout, and making sure everything works no matter how a visitor might be viewing your website. There are dozens of permutations possible, involving MACs and PCs, Windows 98, 2000, XP etc, various browsers (of which there are many) and different versions of each. All have their own unique way of interpreting your website, and so it is important to test for any potential problems that may arise.

Step 5) Site structure and content population

The coded templates are then used to build the structure of the website. The duplicated pages are linked together to create a blank “skeleton” of the site. The content (text and images etc.) is then inserted and arranged on the pages to fill out the site. Relevant meta tags and page titles are also inserted at this stage.

At this stage the website will be uploaded to a staging server for review and further testing.

Step 6) Go live!

Assuming everybody is happy with the completed website, it will now be uploaded to the live server for all the world to see. This means it will be displayed whenever someone types in your domain name (i.e. www.your-company-name.com).

We will also give Google a nudge to come and visit your new website and add it to it’s index of listings.

Conclusion

There may be other stages involved dependent on the complexity of the project, as well as ongoing tweaks and maintenance as required, but hopefully this gives you some idea of what’s involved at each stage. Some companies may work differently, but this method seems to work well for us.

Entry Filed under: Deft Touch