Web Design/Developing a Client Project
< Web Design|
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!
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:
- 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
- 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
HTML: What is HTML, Advanced HTML Tutorial, HTML Challenges, Lists and Tables, The Structure of HTML, Pen and Paper HTML activities
CSS: Learning Basic HTML and CSS, CSS challenges, Embedded CSS, Basic HTML and CSS Tutorial, Inline CSS, Develop cascading style sheets, CSS3 Animations
PHP: Simple functions in PHP, Dynamic websites, PHP challenges, Dynamic websites with PHP, Generating a receipt with PHP, Responding to HTML forms with PHP,
JavaScript: An Introduction to Programming with JavaScript, JavaScript Challenges, Getting to know JavaScript events, Getting to know the Document Object Model with JavaScript, JavaScript pen-n-paper activities, Web Programming Intro, Produce basic client side script for dynamic web pages
XML: XML challenges
Databases: Creating Database Tables
Projects: A small website project, A step-by-step web design project, Build a basic web page, Build a small website
Challenges: Web design, HTML, AJAX, CSS, JavaScript, PHP, XML, Information Architecture, Algorithms
Activities: Web design group learning activities, Pen and Paper HTML activities, A Web Design Quiz show, Ordering Tasks for a Web Project, Paired Bio Pages, Scoping a Small Project, Emerging Technologies Research Activities
Project management: An introduction to Project Management, Developing a Client Project
Design: Accessibility, Design Principles for Web Design, Design Suggestions
Testing: Testing Website performance, Website Performance Test Plan
Publishing: Getting Your Site On the Web
Certification and standards: Cert IV Website Qualifications in Australia, Australian Qualifications, Web design qualifications
Professional development: Contribute to personal skill development and learning, Useful Applications, Useful Books, Emerging Technologies, Using the Internet as a Learning Tool
Course meta-information: Web Design, About the web design learning project, New Structure, Sample Timetable