Design and Layout, Graphic Design, Web Design

Within the Design and Layout, Graphic Design, Web Design area you'll find a wide range of annotated links to Web design tutorials, design and layout principles and tutorials, graphic design principles and tutorials, tips, and resources, and cross-platform and cross-browser issues. You'll also find helpful Web design style guides and Web sites devoted to Web design and layout, graphic design, design and layout, and related design topics.

In addition, you'll find recommended books on graphic design, design and typography, typography, Web design business, graphic design business, freelancing, Web design and layout, and more.

On this page

Articles, Tips, and Tutorials: Design Principles, Graphic Design, Web Design
Web Design Style Guides
Web Sites or Web Site Sections Devoted to Web Design
Other Web Design Links Resources
Recommended Books on Graphic Design, Design and Typography, Graphic Design Business, Freelancing, Web Design and Layout

Articles, Tips, and Tutorials on Basic Design Principles

Alignment
Covers alignment of page elements, including the use of margins, white-space, text blocks, types of margins (justified, right-aligned, left-aligned, centered), headlines, more. Section of the Page Design chapter from The Web Style Guide. [Article/tutorial dated 2002, updated 5 March 2004, by Patrick J. Lynch, Sarah Horton, Web Style Guide.]
Basic Design Principles
Excellent tutorial that explains basic design principles: proximity, visual hierarchy, symmetry/asymmetry, repetition, unity, contrast, dynamics, emphasis, more. Examples of each are included with this tutorial. [Article/tutorial updated 03/08/2006, maintained by Bill Trikojus, authorized by Prof. Helmut Lueckenhausen, and part of Swinburne Multimedia Design Tutorials.]
Defining the Principles of Design Through Metaphor or Allegory
Balance, proximity/unity, repetition/consistency, contrast, white space, and more with visual examples. Series at About.com [Article/tutorial by Jacci Howard Bear, About.com Guide for Desktop Publishing.]
Design Principles: Graphic Design Principles
Online course all about basic graphic design principles. Topics include: design: organizing elements, design principles: organizing intervals, balance around the optical center, balance the weight of graphic elements, balance positive and negative space, balance color, beware of individual color idiosyncrasies, avoid adjacent colors differing only in hue, consider the idiosyncrasies of color contrast, use color to create memorable moods, save bright or saturated colors for special uses, blue is for backgrounds, red and green for central elements, use depth cues to indicate importance/activity level, use similar colors to denote relationships, relate halftones with similar color tones, link color changes to dynamic events, use color consistently, never rely on color alone, consider perceptual disabilities, be aware of the gender connotations of colors, be aware of the social connotations of colors, develop color design under user conditions, computer type is not print type, choose a typeface appropriate to the material, consider readability, use italics sparingly, use typefaces consistently, shape of type affects cognition, density of type affects reader attention, create a rhythm, maintain visual consistency, use graphics to supplement non-visual information, don't let graphics distract, consider the gestalt of perceptual organization, put buttons and menus at the edge of the screen, use icons for recognizable concepts, make the affordance of objects obvious, page; don't scroll. [Article/tutorial series by Julie Jacobs and William Mueller, Design Principles for Interactive Texts.]
Demystifying Form and Function in Graphic Design Projects
“This is at the very heart of every good design, but what is it, and why do we need to remember it? As the rule suggests, this rule comes in 2 parts. What makes up the concept and who is going to see it? I can see that was clear as mud to some of you, so I will clarify.” [Article/tutorial dated 04/08/2008, by Lois Knight, for AGDesign (All Graphic Design).]
The Gestalt Principles
Brief, helpful explanations and examples of similarity, continuation, closure, proximity, and figure & ground. [Article/tutorial part of Graphic Design Tutorials, SFCC Graphic Design (Spokane Falls Community College).]
Graphic Design Basics - Principles of Design
Series of articles, tutorials at About.com that include the principles of design, visual examples, form and function, principles of graphic design basics classes series. [Article/tutorial by Jacci Howard Bear, About.com Guide for Desktop Publishing.]
How to Use the Grid System in Graphic Design
[Article/tutorial by Eric Miller, for About.com Guide for Graphic Design.]
Page Design
Online chapter from The Web Style Guide. Sections include visual hierarchy, consistency, page dimensions, page length, design grids for Web pages, page headers and footers, page layout, general design principles, and much more. [Article/tutorial dated 2002, updated 03/05/2004, by Patrick J. Lynch, Sarah Horton, Web Style Guide.]

Typography is also an important aspect of design. See also Typography for articles, tutorials, and books on typography for Web sites.

Articles, Tips, and Tutorials on Graphic Design

See also above, Basic Design Principles, which includes basic graphic design principles, too.

A Brief History of Grids
[Article/tutorial dated 03/18/2008, by Lucienne Roberts , for Graphics.com.]
Learning Graphic Design
Terrific forum discussion on learning graphic design. Lots of helpful insight in how to think creatively and develop your graphic design skills, and plenty of good advice throughout this thread. [Online forum discussion dated 07/05/2008, via SitePoint Forums.]
Maximalism: The Graphic Design of Decadence & Excess
[Article/tutorial dated 04/23/2008, by Charlotte River, for Graphics.com.]

top ‘On this page’ menu

Articles, Tips, and Tutorials on Web Design and Cross-Platform, Cross-Browser Web Design

Articles, Tips, and Tutorials on Web Design

2007: More Web Design Trends & Cliches
Lots of examples and discussion of 2007 trends at year end. Includes screenshots, links to examples. List includes cute cartoons and mascots; swirls, drips and flourishes; broken borders (and no borders); oversize RSS icons; high-texture designs; rich color with dark gray backgrounds. Interesting article. [Article/tutorial dated 12/10/2007, by author name, for Modern Life.]
Applying Divine Proportion To Your Web Designs
Explains divine proportion, divine ratio, the golden section, provides lots of screenshots and examples - all in terms of applying these to Web site design work. Shows how to figure out the divine ratio and apply it to your layout, and links to free and commercial tools to help with this, too. [Article/tutorial dated 05/29/2008, by Vitaly Friedman and Sven Lennartz, Smashing Magazine.]
Back to the User: Creating User-Focused Web Sites
Chapter 1 excerpt from the New Riders book, Back to the User: Creating User-Focused Web Sites. This article at WDVL covers how to think like users with your site design. Learn how to integrate Web design, content, and navigation with branding and marketing as well. [Article dated 01/31/2002 by New Riders authors Tammy Sachs, Gary McClain, Ph.D. for WDVL]
Clutter Versus Clicking in Web Design
ClickZ's Gerry McGovern discusses various approaches to navigational design, the pros and cons, examples and discussion. Good article. [Article dated 07/19/2001, Gerry McGovern, for ClickZ.]
Design Grids for Web Pages
Covers designing using a grid as a basis, basic design principles for balance, consistency, and designing vertical Web pages, and for screens of information. Section of the Page Design chapter from The Web Style Guide. [Article/tutorial dated 2002, updated 5 March 2004, by Patrick J. Lynch, Sarah Horton, Web Style Guide.]
Designing Web Usability
At WDVL, chapter 4 excerpt from the book by the same name, published by New Riders, Jakob Nielson, author. Excellent chapter on design for search engine implementation at your site. Good insight. [Article dated 05/04/2001 WDVL.]
Eyetracking Study of Web Readers
Jakob Nielsen's commentary about Pointer's Study of how readers read the Web. Interesting reading, links to various resources and info. [Article dated 05/14/2000 by Jakob Nielsen, Useit.com.]
The Principles of Beautiful Web Design
Great article explaining important principles for Web page design and layout. Packed with plenty of examples, screenshots, and helpful insight. This tutorial is actually the first chapter from the highly recommended book by the same name, The Principles of Beautiful Web Design, by Jason Beaird (SitePoint, January 2007). [Article/tutorial dated 04/02/2007, by Jason Beaird, for SitePoint.]
Registration Revamp
By Janice Crotty Fraser, WebTechniques. Usable navigation for registration forms based on keeping it as simple as possible, eliminating unnecessary steps, clicks, info, more. Excellent points made. [Article dated 09/2001 by Janice Crotty Fraser, Webtechniques.]
Text as Design
By Wendy Peck, Webreference.com. Great multi-faceted article about using text to create some very inspiring designs. Includes several Web site examples, too. Reviews ideas with several graphics programs - Photoshop, PaintShop Pro, CorelDraw, Fireworks, Flash, and links to more resources. [Article dated 02/15/2000 by Wendy Peck, Graphics Experts, WebReference.com]
Top Ten New Mistakes of Web Design
Jakob Nielsen's updated (May 30, 1999) Alertbox article from his 1997 article. Contains many good thoughts and tips about usability and Web design. [Article dated 05/30/1999, by Jakob Nielsen, Useit.com.]
Top Ten Web Design Mistakes of 2003
Jakob Nielsen once again evaluates where things are with Web Design. The list has changed from his earlier articles on this. Interesting reading. [12/22/2003, by Jakob Nielsen, Useit.com.]
Top Ten Web Design Mistakes of 2005
Jakob Nielsen once again evaluates where things are with Web Design at the end of 2005. As always, the new list changes, but some things remain, and there are new additions, too. This one covers legibility problems, non-standard links, Flash, content that isn't written for the Web, bad search, browser incompatibilities, cumbersome forms, lack of contact information, frozen layouts with fixed widths, and inadequate photo enlargement. [10/22/2005, by Jakob Nielsen, Useit.com.]
Web Standards... it's not easy... but it's worth it
by Rachel Andrew. Good insight about the advantages and disadvantages of Web standards, including what it all means, why it matters, a section on tables vs. css-p, Netscape 4 issues. [Article dated 2001, by Rachel Andrew, edgeofmyseat.com.]
Wireframing with Fireworks CS3
Terrific tutorial explaining how to create wireframes using Fireworks CS3. Also explains what wireframes are and how they're helpful. Tutorial goes through each step of how to create wireframes, and includes helpful screenshots. [Article/tutorial dated 04/16/2007, by Michael Tuminello, for Adobe Fireworks Developer Center.]
Your Web Site's First Impression Happens Only Once
by Shirley Kaiser, editor of WebsiteTips.com. From SKDesigns' Website Tips Newsletter, this issue covers the initial impact of your site, questions to ask, items to consider. [Article dated 05/2001 by Shirley Kaiser, SKDesigns.com.]

top ‘On this page’ menu

Cross-Platform, Cross-Browser Web Design Articles and Tutorials

In addition to the links below on cross-platform, cross-browser design, see also WebsiteTips.com's sections, CSS: Solutions to Cross-Browser, Cross-Platform Issues, and Cross-Browser, Cross-Platform Compatibility Testing Tools.

Creative Use of PNG Transparency in Web Design
Explains browser support for PNG transparency, dealing with older browsers, and more. Since IE7 supports PNG transparency (finally!), possibilities open up but dealing with older browsers is still an issue. Lots of helpful information here on approaches, browser support, and more. [Article/tutorial dated 05/28/2007, by Jeff Croft, for Digital Web Magazine.]
Cross Browser and Cross Platform Issues
Fabulous article about what to keep in mind with your Web site design and development. Covers differences in gamma, default character width size, liquid pages, screen variations, cross-browser differences, browser support for various graphics formats, and accessibility. [Article dated 2005, devx Project Cool.]
Real-World Browser Size Stats, Part II
by Adrian Roselli for Evolt.org. Discusses not only screen resolution but also viewable browser area stats and the importance of considering the viewing area that the user is actually using and not just the screen resolution. Author also offers means of checking those on your own sites in Part I of this article. [Article by Adrian Roselli, for evolt.org.]
Screen Resolutions and Aspect Ratios Worldwide
[Article/tutorial dated 11/27/2007, by Stuart Brown, for Modern Life.]
Web Page Widths: Defining the Width of Your Site for Different Browser Resolutions
Helpful article that discusses key design and development points to consider for the width of your Web site. [Article dated 2005, by Jennifer Kyrnin, About.com's Guide to Web Design / HTML.]
Why Don't You Code For Netscape?
by Jeffrey Zeldman for A List Apart, December 7. 2001. Consider forward compatibility design that's far more accessible, follows W3C recommendations, is standards compliant, and works in any browser. Zeldman discusses the issues and why. Editor note December, 2005: Don't let the 2001 date fool you. What Zeldman wrote then still applies today. [Article dated 12/07/2001, by Jeffrey Zeldman for A List Apart.]

top ‘On this page’ menu

Web Design Style Guides

A Google search for “Web styleguide” and similar terms will pop up so many results. How do you know which are worth your time? The listing below provides links to just a few of the many online that are exceptional.

Style Guide To Online Hypertext
W3C's Tim Berners-Lee's style guide to creating online content. This is a must-see. Initially written in 1995, but updated to remain relevant. [Web Style Guide by Tim Berners-Lee, W3C.]
Web Presentation Guide 5.0 for Digital Government
(was Access Washington Styleguide) For Washington State government. Well done. Covers 508 guidelines, accessibility issues, much more. [Web Style Guide by Information Services Board, part of the Washington State Department of Information Services.]
Web Publishing Manual, by Sun Microsystems
Recently revised, updated. Very thorough, helpful information, addressing many issues of Web site design - purposes, target audience, links, page length, graphics, image maps, navigation, security, quality, netiquette, content, selling, language, java, further reading, more. Highly recommended.[Web Style Guide by Sun Microsystems.]
Web Style Guide
Also in book form, this Web site contains theory and philosophy on designing, building, and implementing a website. Some of the categories are Interface Design, Site Design, Page Design, Web Graphics, Web Multimedia and Animation, more. Excellent resource. [Website: Web Style Guide.]
Web Style Guide: Monash University
Fabulous online style guide that covers branding, templates, accessibility, markup and other technical standards, usability, quality assurance, and more. Very helpful information here. [Web Style Guide dated 2005, Monash University.]
Web Style Guide: UCSF School of Medicine
Incredibly thorough, detailed, and well-organized Web style guide for the UCSF School of Medicine. Covers style libraries, standard elements, custom elements, editorial standards, and incredibly helpful detail throughout each section. You can download the entire style guide as a PDF file for reference, too. Terrific. [Web Style Guide dated 2005, for UCSF School of Medicine.]

top ‘On this page’ menu

Web Sites or Web Site Sections About Web Design

The following listing contains Web sites or sections of Web sites whose purposes are to provide tips, tutorials, articles, resources and other information related to Web site design.

A List Apart
Exceptional site for high quality articles, tutorials, and a forum all related to Web design and development. By Jeffrey Zeldman.
Alertbox: Current Issues in Web Usability
Jakob Nielsen's Alertbox with bi-weekly articles on usability for Web sites. Highly popular articles and well-known usability expert. His articles and opinions are mostly respected, some controversial, but always a good read. [Articles by Jakob Nielsen, Useit.com.]
Dan's Web Tips
by Daniel Tobias. Lots of hints and tips about Web site development. Good resource, info, well written articles.
Developer.com
Programmers and developers resource. Excellent.
Digital Web Magazine
Fantastic site for high quality articles, tutorials, reviews, interviews, classifieds, daily news, and more about Web design and development. Created and produced by Nick Finck and staff. Exceptional.
evolt.org
One of the best sites around the Web for articles and tips related to design, development, programming, and related for beginners through advanced. Also home of the well known, popular discussion list, thelist. Well organized site with excellent resources.
New Architect (formerly WebTechniques)
You can find archives of all the WebTechniques articles and tutorials here, which was a highly regarded, well respected magazine, packed with articles, tutorials, tips, and charts, and for beginners through advanced.
Robin's Blog
Best-selling author Robin Williams' blog on all things Web design. Categories include her books and other books, articles, tutorials, browser issues, CSS, class notes, photography, job hunting, planning and organizing, and much more. See also the forum there.
SitePoint
Another highly regarded and well respected Web site, covering Web site design and development. It used to carry far more for developers than designers, but you'll now find quite a bit here for designers, covering all aspects of Web site design, planning, long-term maintenance, running a Web design business, freelancing, and more. There are articles, tutorials, tips, newsletters, daily blogs, online forums, and well-written books on various aspects of Web design, too. Top-notch, constantly updated.
Web Design Practices
Fantastic Web site with case studies done on a range of Web design practices, such as a variety of navigation approaches, e-commerce functions, and page layout. Fascinating information, and well done. [Web site by Heidi P. Adkisson.]
Web Design Reference Guide
An entire section at InformIt on a wide range of Web design topics by a number of top-notch experts, such as Faruk Ates, Andy Clarke, Kris Hadlock, Robert Hoekman, Jr., Molly Holzschlag, Sarah Horton, Miraz Jordan, Jonathan and Lisa Price, Catherine Seda, Dave Shea, and Dave Taylor. Topics include Web Basics, Publishing on the Web: Putting Files on the Server, Web Design Process and Workflow, Project Management, Mark My WWWord: HTML and XHTML, Standards Compliance, Layouts, Forms, Meta Tags and Search, Usability, Accessibility, Enhancing Web Page Interaction, Web Graphics, Web Page Optimization, Multimedia, Content, Overview of Servers, Server Programming Basics, Careers in Web Design, Tools, Tutorials, Intellectual Property for Web Designers. [Web site section part of informit.com.]
Web Developers Virtual Library
The Original Encyclopedia of Web Technology. Encyclopedia of Web design, tutorials and discussion. Extensive resource for Web developers and designers, including tutorials on a variety of topics — authoring, design, graphics, software listings and reviews, resources, several discussion lists, newsletter, much more. Excellent resource.
Web Page Design For Designers
A valuable resource of information for Web designers by Joe Gillespie. This site gives ideas, tips and tricks for graphics and palettes, Web pages, navigation, Web design, includes many helpful link sites. Great site. Although Joe retired during 2005, all the archives are here.
WebDeveloper.com: Design
Another extensive resource for Web site designers and developers. Tutorials, links, helpful tips, latest news. Excellent site.
Webmaster T's World of Design
Tutorials, references and resources for HTML, marketing and Web site promotion, search engine placement and info, more, including an E-zine. Great resource.
Webmonkey
Filled to the brim with articles, tips, and tutorials by leading industry experts, Webmonkey is one of the main sources for Web design and development information for beginners through advanced.
WebReference.com
Many excellent tutorials here on graphics, design, e-commerce, Javascript, including Dmitry's Lab. Another great resource, and links to even more. WebReference.com has been one of the main sites for Web design and development information for beginners through advanced.

top ‘On this page’ menu

Recommended Books on Graphic Design, Design and Typography, Graphic Design Business, Freelancing, Web Design and Layout

Books on Graphic Design

Books on Design and Typography

For short reviews of the above Design and Typography books, see Web Resources Recommended Books on Typography here at WebsiteTips.com.

Books on Graphic Design Business, Freelancing

For helpful Web Site Resources on graphic design business or Web design business, see also Web Resources Web Design Business here at WebsiteTips.com.

For helpful Web Site Resources on typography, see also Web Resources Typography here at WebsiteTips.com.

Books on Web Design and Layout

Deliver First Class Web Sites: 101 Essential Checklists
By Shirley Kaiser. Published by SitePoint Books, July 2006. While the entire book is packed with helpful checklists and explanations, examples, and references to help with designing Web sites, several chapters are specifically devoted to various aspects of design for Web sites. For example, Chapter 6: Color - Preparing a Color-friendly Work Environment, Choosing a Color Scheme, Using Color to Enhance Functionality. Chapter 13: Design - Basic Design Principles, Effective Typography, Brainstorming, Finalizing the Design. Other chapters cover planning your Web site, initial questions to answer, preparing and managing Web site content, usability, information architecture, navigation, W3C Recommendations and standards, accessibility, Web site optimization, search engine optimization, testing, launching your Web site, post-launch follow-up and long-term maintenance, and much more. In addition, all those who purchase the book have special access to downloadable, printable checklists to use for all your projects. More information: Companion Site for Deliver First Class Web Sites: 101 Essential Checklists, author's Web site: SKDesigns.
Web Style Guide: Basic Design Principles for Creating Web Sites, Second Edition
By Patrick J. Lynch, Sarah Horton. Published by Yale University Press, March 2002. This best-selling book contains easy-to-understand theory and philosophy on designing, building, and implementing a Web site, along with helpful illustrations and resources. Some of the categories are Interface Design, Site Design, Page Design, Web Graphics, Web Multimedia and Animation, more. Excellent book. Also visit webstyleguide.com for an online version of the book and to learn more about this exceptional publication.