Home | Audio | DIY | Guitar | iPods | Music | Brain/Problem Solving | Links| Site Map

This work is licensed under a Creative Commons License.

Graphic Design Index


One of the most important components in designing a Web site, is to use proper graphic design techniques. One of the best sites availble in introducing graphic design is www.webdesignfromscratch.com We are using their pages primarily because we feel that this is such a valuable resource and use it to teach students in our Web Design classes. The problem is that we often run into problems trying to access pages at Scratchmedia, since they are located in Europe. We have contacted them, and have thrown them some financial support. We hope to increase our financial support to them in the future. Likewise, we would encourage all of our readers who are not students in the classroom to visit them and provide them with some financial support.

Graphic design basics

Clarity in web page design
Making a clear web page depends on making the most important elements appear important, less important stuff less important, related stuff look related, and different stuff look different.
General guidelines on how to use colour in web pages.
The importance of contrast in graphic design for the web
Making pages easy to read by design
Effective text
The strengths of using HTML text rather than words as graphics in web design
How to use imagery to best effect
Attention Map
A low-tech tool for planning page layout, helping you plan what your page should do before you get your hands dirty

Page layout

Layout for web page design
Overview of the major graphic design devices
Containment is a layout tool that says visually "This thing is part of that"
Using alignment in visual design for the web to associate related elements
Associating elements through relative positioning in space
Rhythm and repetition
A further technique for associating elements is through repeating common styling
Logical order
Importance of logical order of visual components in web page design

Visual techniques

3D Effects in graphic design for the web
Guidelines on how to use 3D effects effectively in graphic design for the web
Logo design
The four attributes of an effective logo: shape, presence, weight, and contrast
Text-based logos
Why text-based logotypes are very effective
Favourite logos
A collection of my favourite logos from around the web, with analysis of why I think they work.

Case studies

Artorg: Worked example
Tweaking the layout to ehance the user experience of a nice community site for graphic artists
Case study: Business Improvement Network
Applies a totally new look and feel to the web site of a business networking organisation
Case study: Foruse
A new clean look and a simpler tone of voice for the site of a usabilty engineering company


Home | Audio | DIY | Guitar | iPods | Music | Links | Brain and Problem Solving | Site Map | Contact


Creative Commons License