45+ Free Lessons In Graphic Design Theory

Considering how many designers are self-taught, either in whole or in part, the importance of a solid foundation in graphic design theory is often overlooked. New designers often want to jump right into creating websites, rather than learning the basics of why some designs work and some don’t. But they’re putting themselves at a disadvantage to designers who do have formal training or have taken the time to learn the principles behind good design.

Below are more than 45 recent lessons in graphic design theory. Included are general theories, theories about user experience and usability, typographic theory, layout and grid theory, and color theory.

General Design Theory

The Lost Principles of Design
Covers a number of basic graphic design principles, including balance, contrast, emphasis and subordination, directional forces, proportion, scale, repetition and rhythm, and unity, all with illustrations.

Principles of Good Design: Balance
Discusses how important balance is to creating an effective design. It covers symmetrical and asymmetrical balance, as well as off-balance designs.

Web Design Tips: The Use of Balance
This covers how to create balance in your website designs. It’s a simple overview article, with a lot of practical advice in addition to theoretical discussion.

3 Graphic Design Principles for Instructional Design Success
While dealing specifically with instructional design, this article covers three important principles that can be applied regardless of the purpose of your design: using layouts to convey meaning and relationship, using pattern and repetition to organize content, and using just the right images and no more.

In Search of Ethics in Graphic Design
Ethical considerations are all too often overlooked in the world of graphic design. This article aims to change that by discussing a designer’s responsibility to their users.

Elements and Principles of Design
This page offers a basic but useful overview of the elements and principles of design, with basic illustrations of each concept. It’s a great starting point and incredibly easy to understand, because it’s aimed at young students.

11 Principles of Interaction Design Explained
Veering away from strictly graphic design, this useful article covers theories related to interactive design. Included are concepts such as matching experience and expectations, consistency, and functional minimalism. Some of the concepts could be carried over to non-interactive design (such as for print media).

Grid and Layout Theory

Grid-Based Web Design, Simplified
This covers the theory of grid-based design and gives practical advice on how to create your own grids, without over-complicating things.

Grids in Modern Web Design
A slideshow that explains the theory behind using a grid for a layout. It’s a quick introduction to grid theory, with a few practical examples.

Grids: Order Out of Chaos
A short article from About.com that discusses the basics of grid systems, why you should use them and what goes into designing them. Most of the information is geared to magazine and other print media, but many of the principles apply to all types of design.

Rule of Thirds, Visual Center, Grids
Another About.com article that discusses the theories of balance in page layout. The principles could be applied to either web or print design, but the article focuses on print design.

Gestalt Principles Applied in Design
This Six Revisions post covers the six basic principles of Gestalt theory — proximity, similarity, figure-ground, symmetry, “common fate” and closure — and how to apply them to your designs.

Understanding Visual Hierarchy in Web Design
This Webdesign Tuts+ post covers the basics of visual hierarchy from a very practical standpoint. By the time you finish the article, you’ll have a grasp of not only what hierarchy is and why it’s important, but also how to effectively incorporate it in your designs.

Grid Theory
This article covers grid theory in relation to Phi, the Rule of Thirds, and the 960 Grid system. It’s excerpted from Jason Beaird’s The Principles of Beautiful Web Design book.

Applying Divine Proportion to Your Web Designs
Discusses how to apply Phi (a ratio of roughly 1:1.618) in order to achieve more attractive and visually balanced designs. It also discusses the Rule of Thirds and has some practical advice for implementing each theory.

How Cognitive Biases Shape User Experience
This slightly more advanced article covers the psychology behind why users react to design elements the way they do. It also covers the cognitive biases of those involved in crafting the user experience and how they can negatively affect the result.

Principles for Usable Design
A quick overview of some important usability principles, including consistency, simplicity and communication. It offers a handful of tips for effectively implementing each principle.

11 Quick Tips for More Usable Content
This UX Booth article has some excellent ideas on how to make your website’s content more user-friendly. Some are directly related to design, while others are more related to the content itself (which should always be considered in context of the design).

What You Need to Know About Usability
Some solid background information on website usability, including why it’s important, some information on Jakob Nielsen’s heuristics, and some best practices for usability.

Typography

A 20 Minute Intro to Typography Basics
A quick, simple guide to good typography. This is a high-level overview that covers things like typeface classifications, the anatomy of type, kerning and tracking, alignment, and ligatures, among other topics.

The Elements of Typographic Style Applied to the Web
One of the most thorough guides to Web typography theory out there. It covers horizontal motion, vertical motion, blocks and paragraphs, the etiquette of hyphenation and pagination, and harmony and counterpoint, all in detail.

Designing for Seniors
If you ever have to create designs for older demographics, then this is a must read. It explains numerous ways to make type more seniors-friendly, including guidelines for typographic style and size, text length, white space and more.

Typography for Children
There are also guidelines for designing typography for children. This article covers things like legibility, readability and more, all related to how children perceive and respond to designs.

How to Create Great Web Typography in 10 Minutes
This article is a mix of theory and practical advice, and it covers vertical rhythm, font families, visual hierarchy and font colors, all of which are important in typography, regardless of medium.

Eight Tips for Type on the Web
A short article from Fonts.com that covers basic guidelines for creating good Web typography. Included are things like avoiding justified text, using smart punctuation and creating a typographic hierarchy.

Type and Color
Explains how to choose the proper colors for your typography, and the rationale behind using different colors when designing type.

Typography Tuesday: Hierarchy
Hierarchy is one of the most important concepts in typographic design, because it reinforces the priority of elements. Creating a sense of hierarchy is as simple as differentiating between such elements as headlines, body copy, headings and so on. This article covers a variety of ways to do that.

Type Study: Typographic Hierarchy
Here is a great lesson in typographic theory, walking you through the principles, with a fantastic example that evolves throughout the article.

The Typographic Scale
This covers another vital part of typography design: sizing your typography based on a pre-defined scale. This gives the text more order and reinforces relationships between the various typographic elements.

Color Theory

Color Theory for Designers, Part 1: The Meaning of Color
The first part in my own three-part series on color theory for designers. This article covers the meanings of different colors, including cultural differences in color meaning. Parts two and three go deeper into the concepts and terminology of color theory and into creating your own color schemes.

Color Theory Quick Reference Poster
While not strictly a theory lesson, this poster includes all of the basics you need to know about color theory, in an easy-to-reference format. It’s available as a print-ready PDF or as desktop wallpaper.

A Look Into Color Theory in Web Design
This Six Revisions article offers a great overview of color theory, including the color wheel, terminologies, relationships between colors, types of color in design, and color meanings.

How to Get a Professional Look With Color
This post from Webdesigner Depot covers all of the basics of using color to achieve a professional design. It goes into more advanced techniques for creating color schemes.

You have an excellent list, but I was hoping that you might consider my site, Creative Beacon, as well. There are a lot of in depth articles, and there are a lot of articles that talk about helpful things such as resume tips, ethics in the business of design, and so forth. I try my best to make it a helpful source for other designers.

You have an excellent list, but I was hoping that you might consider my site, Creative Beacon, as well. There are a lot of in depth articles, and there are a lot of articles that talk about helpful things such as resume tips, ethics in the business of design, and so forth.