Graphic Design Skills for Web Page Design
Tutorials 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”
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”
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.”
Read it offline
Buy the entire Graphic Design section as a PDF e-book:
only £2.50 GBP
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
Search this site
On “Save the Pixel”
Newsletter
Subscribe to my newsletter to stay updated on what I'm doing and thinking about in web design.
-
Floor 3
111 Buckingham Palace RoadLondonSW1W 0WQUK - Phone
- +44 (0)207 1600 989
