50 Totally Free Lessons in Graphic Design Theory
While many of us can create something that looks good in Photoshop or attractive when spliced into CSS, but do we actually understand the design theory behind what we create? Theory is the missing link for many un-trained but otherwise talented designers. Here are 50 excellent graphic design theory lessons to help you understand the ‘Whys’, not just the ‘Hows’.
-
1. Typography, Part 1
“Good typography depends on the visual contrast between one font and another, and the contrast between text blocks and the surrounding empty space.”
-
2. Five simple steps to better typography
“The kind of typography I’m talking about is not your typical “What font should I use” typography but rather your “knowing your hanging punctuation from your em-dash” typography.”
-
3. Typography tips for graphic design students
“What basic typographic advice would you give a third year graphic design student? I read the comments with great interest and here I’ve picked out a few of the most useful typography tips.”
-
4. Typeface Terminology
“An extensive collection of terms and definitions that relate to typography.”
-
5. How do I choose paring fonts ?
“It really does boil down to a judgment call. Usually, pairing type is done to create contrast, so, as DavidR points out, a good general rule is to not pick two fonts that are so similar they can be confused for each other at a glance.”
-
6. Learning About Type
“There are quite a few terms thrown around with regards to typography. Hopefully this article will help you understand more about the world of typography.”
-
7. A Guide to Web Typography
“Today we’re going to talk about web typography in terms of a recipe of four fundamental ingredients. If you’ve ever tried to cook a soufflé, you’ll know how important the recipe is. Follow this recipe and your typography will rise up like…that’s enough of the culinary metaphors, let’s cook.”
-
8. On Choosing a Type
“Fundamentally, the responsibility we bear is two-fold: first we owe it to the reader not to hinder their reading pleasure, but to aid it; second, we owe a responsibility to the typeface or typefaces we employ.”
-
9. Who shot the serif?
“Well, what you will discover, is that learning just a little about the terminology will help you to have a greater appreciation for type; it will also help you to identify different typefaces and fonts — and that in turn will help you make better, more informed choices about the fonts you use.”
-
10. Master Web Typography: 8 Detailed Typography Tips for the Web
“One of the most under–rated elements of beautiful Web design is the subtle art of typography. Part of this, I know, is a lack of a solid font support for Web sites. But never fear! Today I’ll show you some quick things you can do to appear to be a type master.”
Typography
Grid Based Design
-
11. Designing With a Grid Based Approach
“The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them.”
-
12. Columns and Grids
“One of the larger problems in working with grids in web pages is that you often can’t do much about vertical proportions. Often your content is dynamic, so the best you can do is approximate.”
-
13. The Grid: The Structure of Design
“Using a grid is one of those basic design principles. Most news designers are working with a grid someone else designed. No matter what you think about it, you need to understand how to use it.”
-
14. Feeling your way around grids
“Grids have long been used by designers to aid and measure composition; to create a framework with which to construct the design.”
-
15. Grid Based Layouts
“A grid is a technique that comes from print design but easily be applied to web design as well. In its strictest form a grid is literally a grid of X by Y pixels.”
-
16. Five simple steps to designing grid systems
“There are quite a few terms thrown around with regards to typography. Hopefully this article will help you understand more about the world of typography.”
-
17. Grids: Order Out of Chaos
“Many of the pages that you see everyday have a grid. You may not see it but it is there, holding up the design, establishing structure, guiding the page elements.”
-
18. Grid Based Design 101
“Designers of all types (web, print, etc.) are constantly facing issues involving the structure of their designs. Web designers are increasingly turning to grids to control the structure of web pages, and grids have long been used extensively in other design mediums.”
-
19. Grid-Based Design: Six Creative Column Techniques
“Grid systems bring visual structure and balance to site design. As a tool grids are useful for organizing and presenting information. Used properly, they can enhance the user experience by creating predictable patterns for users to follow.”
-
20. Seven Smooth Steps to Superb Grids
“While grid design is a simple concept, there are now so many tools and ways of doing it that it might get confusing for newcomers. So here is my way of doing things, i.e. how I would explain grid design to someone who’s never heard about it.”
Color Theory
-
1. Color Theory
“Color theory encompasses a multitude of definitions, concepts and design applications. All the information would fill several encyclopedias. As an introduction, here are a few basic concepts.”
-
22. Color Theory: Overview
“If you are involved in the creation or design of visual documents, an understanding of color will help when incorporating it into your own designs.”
-
23. Color Theory: A brief tutorial
“Color can be a touchy subject. Sometimes artists use colors that evoke certain emotions. Other times artists use colors simply because they like the way they look.”
-
24. Basic color schemes – Introduction to Color Theory
“With colors you can set a mood, attract attention, or make a statement. You can use color to energize, or to cool down. By selecting the right color scheme, you can create an ambiance of elegance, warmth or tranquility, or you can convey an image of playful youthfulness.”
-
25. Color Wheel Pro – See Color Theory in Action
“Color Theory is a set of principles used to create harmonious color combinations. Color relationships can be visually represented with a color wheel — the color spectrum wrapped onto a circle.”
-
26. Color Psychology
“Colors often have different meanings in various cultures. And even in Western societies, the meanings of various colors have changed over the years. But today in the U.S., researchers have generally found the following to be accurate.”
-
27. How Colors Impact Moods, Feelings, and Behaviors
“While perceptions of color are somewhat subjective, there are some color effects that have universal meaning.”
-
28. Information Applied To Graphic Design: Color Psychology
“Applied to web design, color psychology could offer a thermal map; an informative alternative to featureless blog calendars of archived entries.”
-
29. How does color effect us?
“Color is light and light is energy. Scientists have found that actual physiological changes take place in human beings when they are exposed to certain colors. Colors can stimulate, excite, depress, tranquilize, increase appetite and create a feeling of warmth or coolness.”
-
30. Color Psychology in Marketing
“Colors not only enhance the appearance of the item — they also influence our behavior. You will do well to consider the impact that the colors you use will have on your target audience.”
Design Theory
-
31. Principles of Design
“The principles of design suggest effective and pleasing ways to arrange text and graphics on the page as well as the arrangement of individual elements within illustration, logos, and the overall graphic design of a document.”
-
32. Graphic Design Basics
“Get a better understanding of the basics of graphic design by studying the elements and principles of graphic design that govern effective design and page layout.”
-
33. The Basics of Graphic Design
“Graphic design is the process of creating the appearance of a publication, presentation, or web site in an attractive, logical manner.”
-
34. Want to know how to design? Learn The Basics.
“The basic elements of design include colour, line, shape, scale, space, texture and value and these are the fundamental pieces that make up any piece of work.”
-
35. Approaching Graphic Design
“Basic design elements such as the rule of thirds, graphical composition and the weight of these graphical components is very important. On top of that, throw colour into the equation and things can start to get very tricky.”
-
36. Graphic Design Fundamentals
“If you can master these fundamental concepts, your graphical treatments — from PowerPoint slides to Microsoft Word documents to company brochures — will greatly improve.”
-
37. Get Some Hierarchy in Your Design
“Design hierarchy is all about the importance of visual information and giving it assigning levels of importance to make the message of the design get across.”
-
38. Graphic Fundamentals, 1. The Big Punch
“Many of the underlying principles behind graphic design have been bypassed and the results are not as potent as they could be. In this short series, I want to help to fill-in some of those gaps and provide a better understanding of what it’s all about.”
-
39. The History of Graphic Design and Its Audiences
“To insist that, or to prescribe how, the history of graphic design need be taught in any particular way is to unnecessarily limit the field in both methodology and pedagogy.”
-
40. In Search of Ethics in Graphic Design
“I envision this text as an addition to the AIGA’s existing publication on ethics, which currently includes sections concerning our responsibilities to the profession and our clients.”
UI & Usability
-
41. Call to Action Buttons
“The call-to-action button is an important tool in the user experience designer’s box of tricks. In this article I’ll give you a few pointers on providing effective ones.”
-
42. Complete Beginner’s Guide to Information Architecture
“The kind of typography I’m talking about is not your typical “What font should I use” typography but rather your “knowing your hanging punctuation from your em-dash” typography.”
-
43. A Few Lessons From Real World Usability
“We interact with so many objects during our day that we often don’t notice that someone actually stopped to thing about how we were going to use items.”
-
44. 12 Useful Techniques For Good User Interface Design
“Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. We also encouraged designers to disable pressed buttons, use shadows around modal windows and link to the sign-up page from the log-in page.”
-
45. 10 Useful Techniques To Improve Your User Interface Designs
“Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces.”
-
46. Investing in UX
“We wanted to test a hypothesis that companies who focus on UX will see it reflected in their stock price. The premise was to invest $5,000 in each company and hold the stock for 1 year.”
-
47. The Layers of Design: the style layer
“It’s a process in which each layer addresses specific design needs related to client aims, brand characteristics and site user habits and expectations.”
-
48. Evangelizing UX Across an Entire Organization
“This edition of Ask UXmatters discusses how to communicate and sell the UX message across all levels of an organization. Our experts share what strategies and tactics for evangelizing UX have worked for them.”
-
49. Closing the Usability Age Gap
“In this post, we discuss some of the things the separate Generation Y from older generations, and how we can create a great user experience for both demographics.”
-
50. Increasing Usability with User Feedback
“This post suggests some ways to improve your site’s usability based off of user feedback. These methods and programs will help you gather and act on user feedback.”
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Danny Outlaw
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
WOW.. GREATS INFO…
nicely… thanks a lot
Great resource! Thanks so much!
exellent resource!
Thanks a lot guys!
I learned so much from you! Not only psdtuts, but all the tuts family!
Cheers!
do we get a Bachelor in Arts diploma after going through every article?
Just finishing a Graphic Design for Beginners course and this is a great place to pick up from the basic principles they taught us. It may be boring for some of the more experienced out there, but having it all in one spot is a big help for others. Besides – we can Tweet the link and get more coverage for you!
Thanks for putting together – I know it takes a lot of time and effort to do so and it’s much appreciated!
Cheers,
Marie
This is simply awesome job! Thank you very much! I stumbled and dugg it!
It’s always important to think about “the basics.” Thanks for this terrific list.
What is 48>>>?????? :( !
Hello fokls , thanks for the info.
Great stuff thanks a lot
Great set of lessons! I recently decided to redesign a couple of sites I made, perfect timing. I need some of those design skills!
information wants to be free!
thank you for sharing this–i’m in college studying art, and this is a huge resource. there are many more who don’t have the time or money for college, and so thank you for them as well. this is truly invaluable.
Great list, thanks. That David Airey pic kind of jumps out at you! =)
human creativity has no limits
thanks Great job.
Good stuff. This is something I every designer should read. Thanks for posting!
I only hope this doesn’t help estimulating non-graduated (so called) designers to get even more away of a real design graduation school…
Last we professionals need is more predatory competition… like the neighbor’s nephew who “digs” photoshop.
This is totally one of the best resources for anything to do with design. Thank you so very much for this list.
pretty hot stufff ;)
WITN3ss The FITn3S$
yhhs tis is very useful nice one !
Thanks for sharing this “complete” guide. i have to read now xD
thanks Dannie, i have been reading ur article and i will keep reading it. its just d perfect guide an artist need. its really doing me good.
thanks.
bravo!
HI. MY NAME IS LUIS I´M FROM COLOMBIA. I´M NOT SPEAK ENGLISH SO MUCH BUT I TRY IT.
I WANT TELL YOU THAT I´M NEW IN THIS AREA OF GRAFIC DESING. I´M LOOKING FOR IF WAS POSIBLE THIS PAGE IN ESPANIH. SOMEONE KNOWS WHERE I CAN FIND IT.
OR HOW I DO TO TRANSLATE THIS PAGE.
THANK VERY MUCH.
VERY INTERESTING
This is very usefull for all now entries. I was searching these type of lessons. Thank you very much for providing these topics. Thanks Again.
hi nice article list great work and thanks for u sear this with us
quite a long list there.
i think i’ll just take some of them.
thx for sharing.
Hello I´m from Mexico, Thank you for this important information.
Nice article, but the Visit Lesson link for “37. Get Some Hierarchy in Your Design” leads to a domain squatter site. Is the link wrong, or has the original site been taken down since this article was published? Cheers.
Nice List Keep It Up!!!!
Excellent! :)
Great post this would be an incredible resource for someone starting out in graphic design, I will make sure I pass it on to anyone needing the help.
Wow!
I enjoy these lists but honestly, they’re way to long for me. I’m newer to some of these concepts and trying to decide between “Designing With a Grid Based Approach” “Columns and Grids” “The Grid: The Structure of Design” “Feeling your way around grids” “Grid Based Layouts” becomes a daunting task all in it’s own. Which should I look at first? Which one is actually informative and useful and really good?
I would prefer a much more condensed list of the best of them. I hope that was a helpful comment. The fact that you made this at all is awesome. So thanks.
the last thing we need is for people to think that they can do what professionals are doing well
Great resources on grid based design … many thanks
Some excellent resources here – although I wouldn’t have put usability in with graphic design theory. David Airey’s stuff is always good. I’m pretty sure I saw a good article on a blog somewhere about the Golden Rule, which would be a good addition. I also think symmetry / whitespace articles could have been added – instead of usability
A great resource for beginners, newbies should take note!
Wow! This is awesome. Thank you so much for this great roundup of Graphic Design Theories.
Now, if only I had the time to read all of them. :)
this is great, I like it, thanks
This is exactly what I need.Thanks
I am not “educated” in design. I do not have a degree of any kind, in fact. I am new to design. But I have to say that I have never, ever felt more unwelcome in all my life. I suppose you can teach someone design but not tolerance and acceptance.
Thank you for the list, Danny. I will use it.
Brilliant post! Great stuff. Thanks for sharing.
great job! thanks for such useful list :)
fantastic list of resources, cheers!!
Great Resource. Thanks!
Good stuff! Will keep it for good.
I wish it could all be in pdf’s… but I will try to read one-a-day, like vitamins.
Thanks!
Hey thanks! This is the holy grail I was searching for! I didn’t want to invest in a bunch of design books just yet- I knew there would be something online that would be a good beginning course.
it relay works.
Thanks for this info…very helpful resource. So good, in fact, I linked here from my site: Creative Shift — 50 Lessons
Je trouve que c’est le mensonge. soigner l ejaculation precoce