Web Design/Developing a Client Project

Once you feel that you're starting to feel more confident with your HTML/CSS skills (see Intermediate HTML and CSS), you might want to flex your muscles and create your first real client project! This will give you a real experience of the web design process - from project conception through to hand-over and beyond!

Module Aim
In this section we'll aim to discover the process of web design through a real client project. Specifically we'll aim to:


 * Determine the needs of our client and their users
 * Define our project.
 * Plan and budget our project.
 * Design the Information Architecture (the way the sites information will be organised) for the site.
 * Design basic visual prototypes for the site
 * Implement the site
 * Conduct user (usability + accessibility) testing

Suggested Activities

 * A scaffolded Web Project - Step out and begin your first project with the help of a bit of scaffolding from some professionals!
 * An introduction to Project Management - Discover the essence of project management: what are we trying to control?
 * Completing the three Adobe tutorial below and applying them to your own client project.
 * Information Architecture Challenges - A chance to practise the process of going from site goals through to site prototype (these might be fun to do in a group!)
 * Validating your websites performance - Plan, test and document the performance of your client website!

Books

 * Web Re-design 2.0 - The best way to learn a professional web-design process is to work with a professional web designer - but failing that, this great book written by professional webdesigners outlining the process that they use (together with the resources they use) is the next best thing!

Online tutorials
 Are not available 


 * Adobe have an excellent series stepping you through the information design process:
 * 1) Information Design - From Interview to Content
 * 2) Site Design - Site structure, navigation and usability.
 * 3) Page Design - Layout grids through to prototype.
 * Webmonkey's Info Architecture tutorial - A practical step-by-step guide for researching and documenting your websites information architecture.
 * WebDesignFromScratch's Web Design Process - Ben Hunt share's his own web design process from 10 years of experience in one concise page!

Tools

 * Information Architecture Institute Tools - Bringing new Information Architecture tools to the community so we can learn from each other. Some great free templates and toolkits!

Theory articles

 * What is Information Architecture - "Effective IA must reflect the way people think" - an excellent tutorial with tips, step-by-step guidelines and tools.

Online references

 * The Web Style Guide - The first chapter contains lots of info about the process of Web Design, including Information Architecture and defining your site.
 * WebDesign from Scratch - Lots of information about designing for your users, the tutorials demonstrate the process of putting "together a design that is appealing to use as well as to look at," covering some basic Information Architecture and Usability.