Graphic Design Skills for Web Page Design

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, price cut to only £9.99 to help in tough times!

 

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

Latest

White on White Web Design Style (Jun 29 2009)

An overview of white-on-white web page design, a clean, appealing, modern web design style that draws focus to the content.

The 10 best-designed web sites in the world

My personal list of 10 favourite sites, and why.

8 Clean web site designs for inspiration

I love collecting links to sites that inspire me to push my own design further, and I thought I'd share my favourites to help inspire you too. The first set perfectly illustrates the core principles of pixel-saving in minimal, clean layouts that focus on the content.

8 Rich web site designs for inspiration

This bunch of sites are all graphcally intense, using a lot of pixels to create a rich experience that doesn't get in the way of successful communication.

9 Functional web site designs for inspiration

A varied group of excellent home page designs that are quite different, but manage to combine brand & functionality effectively on first view.

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

Zoom Your Content

Knowing how to size your content appropriately is a fundamental and critical basic skill. All is explained in this article.

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

NEW - Some Great Web Logos for Inspiration July 24, 2008

Sharing my personal collection of almost 50 favourite logos gathered from round the web, with notes on what works & why.

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

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

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, price cut to only £9.99 to help in tough times!

 

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

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