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!

Web Design → Developing a Client Project This page is part of the Web Design project.

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!

Your learning resources

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.

Related Qualifications

Stub

This section is a stub. You can help Wikiversity by expanding it.