Site Map

Design Basics

Understanding design

• 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

Business

• Setting up in Web Design
• Outsourcing: How to use freelance talent effectively
• Pricing and selling web design

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

Case studies

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

Site Architecture

• 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

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

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