 |
 |
|
|
h1>Graphic Design
The core visual skills for designing pages that are easy to understand and use.
See the Current Style page for my rolling low-down update on the state-of-the-art in web graphic design today.
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.
- Colour
- General guidelines on how to use colour in web pages.
- Contrast
- The importance of contrast in graphic design for the web
- Readabilty
- Making pages easy to read by design
- Effective text
- The strengths of using HTML text rather than words as graphics in web design
- Imagery
- 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
- Containment is a layout tool that says visually "This thing is part of that"
- Alignment
- Using alignment in visual design for the web to associate related elements
- Grouping
- 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
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
Other resources
- Design Melt Down
- Wonderful insight into all kinds of aspects of web design, with a focus on "2.0" style.
- Free icons for your site
- A fantastic collection of icons, collated by Kirk Montgomery, published for free or under GPL/CC licenses etc. Some really nice stuff here!
Further reading
Web Style Guide (2nd edition)
By Patrick J. Lynch, Sarah Horton
Level Introductory
In my opinion, the nearest book to Web Design from Scratch.
Web Style Guide broadly covers the essntials of graphic design and information architecture for the web.
Recommended to everyone who's ever asked me for this web site in a downloadable form, and everyone starting out in the web industry (in any capacity).
google_ad_client = "pub-3085598127019466";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text";
google_ad_channel ="7447188674";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "000000";
google_color_url = "000000";
google_color_text = "000000";
//-->
|
|
|
|
|
|  |
|
