Graphic Design Skills for Web Page Design

Tutorial on the core visual graphic design skills for designing web pages that are easy to understand and easy to use.

See the Current Style page for my rolling low-down update on the state-of-the-art in web graphic design today.

Then my Web 2.0 Design Style Guide analyses the key 2.0 features in more detail, explaining why each one works, and how best to use them.

Read “Save the Pixel - the Art of Simple Web Design”

For the best professional insight into how to create super-simple, effective designs, get Ben Hunt's new e-book.

It features 10 brand new chapters teaching pro pixel-saving skills, plus 22 worked example case studies. Buy it now, only £15

Howie Jacobson, author of “Adwords for Dummies”, says...

“Save the Pixel is the best book on web design and usability I've ever read, and one of the best books on internet marketing in general. If you're sending traffic to your web site via Google AdWords and you haven't discovered the strategies and tactics in Save the Pixel, I guarantee you're throwing away money.

“It's not just information, but a systematic way of designing a site for your customers rather than your web designer's online portfolio. Save the Pixel is the one book I insist my clients read before I'll roll out an AdWords campaign for them.”

Tutorials on Graphic Design for Web Design

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
Readability: 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
Favourite logos: A collection of my favourite logos from around the web, with analysis of why I think they work.
Real Web2.0 Design & Branding: Web 2.0 design is not the same as star flashes and shiny table effects - it's about simple, bold, honest brand experiences.

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

The 10 best-designed web sites in the world: My personal list of 10 favourite sites, and why.
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!; I can recommend LogoMaid for affordable, high-quality logo design

Read it offline

Buy the entire Graphic Design section as a PDF e-book on our Downloads page

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).

Buy now from