Site map

Basics

Understanding design

• Ebooks, including "Save the Pixel"
• No-one looks at the screen
• Scanning - Why web users scan and what designers can do to help
• Content
• How people use web pages
• People are impatient
• Other factors affecting the web browsing experience
• The Brain's strengths

Principles of web design

• Simplicity in web design
• Trusting the user
• Don't Decorate, Communicate!
• Golden Rule of web design
• Conventions in web design
• Branding for web sites
• The Sphere of Design

Design Process

• Attention Map
• Design like no-one's watching
• The Design Spectrum
• Don't Decorate, Communicate!
• Golden Rule of web design
• Pursuit of the Original
• Simplicity in web design
• Think Then Do
• Work smart, not clever

Opinion

• Web Design v. "Design Toss"
• Stuff we love
• Learn to type!
• Pursuit of the Original
• Why code by hand
• Why most web sites suck
• The future web 2.0 social experience
• Web Sites and Buildings
• Harvey Nichols site critique: 2001
• Harvey Nichols site critique: 2004

Business

• Setting up in Web Design
• Outsourcing: How to use freelance talent effectively
• Pricing and selling web design
• 10 Free Ways to Promote your Business Online

Goal-oriented Design

• About goals
• Your goals
• Your site's goals
• Users' goals
• Win-win solutions
• Personas
• The Site Persona & Dialogue Process
• Splitting the experience

Graphic Design for the Web

Graphic design basics

• Clarity in web page design
• Colour
• Contrast
• Readabilty
• Effective text
• Imagery
• Attention Map

Page layout

• Layout for web page design
• Containment
• Alignment
• Grouping
• Rhythm and repetition
• Logical order

Visual techniques

• 3D Effects in graphic design for the web
• Logo design
• Text-based logos
• Favourite logos
• Current style in Web Design
• Web 2.0 Design Style Guide

Case studies

• Artorg: Worked example
• Case study: Business Improvement Network
• Case study: Foruse

Site Architecture

• Information Architecture models
• Information Architecture 101
• Navigation models for web sites
• Case study: Business Improvement Network
• Case study: Bytecon

Usability

• Behaviour of web sites and applications
• Trusting the user
• Clear hyperlinks
• Effective text: Benefits of text over graphics
• Logical order of page components
• Using mouseovers in web design
• Designing navigation for web pages
• Readabilty
• Case study: Kemik online art portfolio

Copywriting

• Writing for the Web
• Copywriting case study: Bytecon
• Case study: Business Improvement Network
• Case study: Foruse

Production

• How HTML, CSS and JavaScript work together in making web pages
• How to make a web site
• Why code by hand
• Basics of Search Engine Optimisation

HTML

• How to make a web site
• Introduction to HTML
• Anatomy of HTML tags
• Lists
• Tables

CSS

• Introduction to CSS
• Inheritance and Cascading Styles in CSS
• Block vs Inline display style in CSS

JavaScript/DHTML

• JavaScript 101: Hello World!
• Datasheet-style form using HTML, CSS and JavaScript
• Tabular list-style form using HTML, CSS and JavaScript

Recommended

• Computer systems
• Books
• Scratch Web Design Forums

• Basics
• Design process
• Opinion
• Business
• Goal-oriented design
• Graphic design
• Site architecture
• Accessibility
• Usability
• Copy writing
• Production
• HTML
• CSS
• JavaScript / DHTML
• Resources