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[edit | edit source]
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[edit | edit source]
- 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[edit | edit source]
Books[edit | edit source]
- 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:
- Information Design - From Interview to Content
- Site Design - Site structure, navigation and usability.
- 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[edit | edit source]
- 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[edit | edit source]
- 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[edit | edit source]
- 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[edit | edit source]