The Lost Principles of Design
Fast access, global demand, short deadlines and quick turnaround have made it all too easy to stray away from the basics of design. If you had a professor in college who taught you design fundamentals, the basics should be engrained in you. If you are self-taught, you may have a book on your desk that you refer to on a daily basis. For the masses, the internet is both a valuable resource, and possibly the source of a design epidemic.
People have flooded the internet looking for design content, and while you might not need to learn the basics before attempting a stellar gradient in Photoshop, there will come a point where this style is left behind and a new style reaches popularity. In history, this lesson has repeated itself with movements like ‘Bauhaus‘ and ‘Swiss Modernism‘ which will soon label our current trends as part of design history.
The fact is, the fundamentals of design will never change. They are the glue that holds the design industry together and to reach success, we need to learn these from the very beginning.
Balance
Arranging parts to achieve a state of equilibrium between forces of influences.
Examples: Symmetrical, Asymmetrical, Radial
Contrast
Interaction of contradictory elements. Expresses the duality seen in opposites.
Examples: Large & Small, rough & smooth, thick & thin, light & dark, organic & geometric
Emphasis & Subordination
Establishing centers of interest which focus the viewer’s attention. If all the elements are given relatively equal weight, there will be no emphasis.
Directional Forces
Both implied and actual, they help guide the eye and mind movement of the viewer. They can also bind the work into a single entity.
Proportion
The size relationship of parts to the entire work, and each to the other. Very often associated with figural art. (the image shows the Golden Ratio)
Scale
The real, apparent size of an object seen in relation to other objects, people, its environment, or the proportions of the picture plane.
Repetition & Rhythm
The recurrence of a design element coupled with a certain order to the repetition. Provides continuity, flow, direction forces etc.
Unity within Variety
The force operating within a work of art which can give it the appearance of oneness or resolution. The consistency of the concept.
When any variety of these principles are combined a design becomes very successful and hard to ignore. That design commands your attention, it guides your eye through and keeps you visually entertained. Combining these principles together is referred to as Gestalt – a configuration, pattern, or organized field having specific properties that cannot be derived from the summation of its component parts; a unified whole.
Chad Engle is currently slaying pixels @BoomtownROI. He abides in coastal Charleston, SC and enjoys living on an island. You should follow, harass or chat to him on twitter @chadengle and @fuelcreativity .
Grab the Feed
Fantastic post. Understanding and applying the principles of design are vital and I absolutely love the example images.
Thanks Dan! Tried to make them simple but meaningful. :)
Hi
I am a young designer and these were taught to me as well but I think that these philosophies also need to be understood with the changing times cause then only can they be used again and the principles can be understood… but yes, once in a while we need to look at them to know what were that we should have begun from… :D
Excellent examples and description! Absolutely vital to achieve cohesive design. Thank you for the reminders and the utter simplicity of good design. Why do we try to complicate it so? Just do it the classic way! Thanks!!
Great article Chad
i m trying to write a book about webdesign principles and i was focused on same things,
we are at the same point and i m happy to see this^^
Awesome post, I haven’t done any design studies or what but it’s really easy to understand and it will help for desiging my IT website project for school !
Chad your twitter is the only one I actually check daily for inspiring content… not sure how you do it, but hats off.
Thanks for the kind words Sam!
I just share content that I find inspiring, creative or cool & figure if I like it at least one other person would so, that’s enough for a tweet.
Thank you for the great examples!
You picked out what im trying to tell students, when they ask about mysteries of webdesign.
The principles in design haven’t changed.
You can study them at a lot of places, digital, analog.
(Students sometimes forgot the difference between “knowing about design” and “creating design”. In German: “Kunst ist schön, macht aber viel Arbeit.” – Karl Valentin)
Forgive me if I’m getting the wrong end of the stick here but are you comparing the Bauhaus and Swiss Modernist movements with the trends of today (gradients as mentioned, but I’d add bevels and ‘glass’ effect to that)?
I’m almost certain you aren’t making this comparison though as the diagrams you use to illustrate the design basics are very Bauhaus in their styling. But I just thought I’d check…
The crux of this article is absolutely spot on: too many people view graphic design as something anyone can do as long as they have the tools – a 21st century DIY or knitting if you will. And far too many self-taught designers just dive in and copy everything around them without considering what they’re doing and, more importantly, why they’re doing it.
But a comparison between the trends of today and the classic, timeless Bauhaus and Swiss movements is well wide of the mark. These schools of design are still referenced constantly today and are as close to perfection as graphic design gets. In 5 or 10 years time we’ll be looking back at Web 2.0 and all that’s associated with it and cringing.
I’m not really comparing them in caliber, I was simply stating that we are in a movement and those were some amazing movements in our history. They are some of the best movements and I agree they are spot on. I am glad you found the parallel (do it yourself knitting) and what we have on the web today.
Thanks for the comment!
Great post! I liked the illustrations. Retweeted!
Martin, I agree with what you say about self-taught designers, but I feel that your quote about looking back at web 2.0 and cringing is a little off kilter. I feel that a core part of the “2.0″ movement if you will, is getting back to grids for layout (blueprint,960,elasticss, css grid frameworks) ,more whitespace, better typography and designers with a better sense of design. I feel like we will look back and cringe and the faux glass and uber gradients, but I also feel that a lot of change for good has come out of the 2.0 movement. Just some thoughts!
Great article! Great visuals!
I’m in total agreement that the basics are somehow lost or ignored.
I’m definitely guilty of some infractions along my learning curve, but yeah.. Know how to at least dog paddle before trying to dive into the deep end.
Worthwhile article, I think people can forget to distinguish between decoration and the trends of the day, and the underlying principles that make a visual communication effective.
I’m trying to remember the (seven I think) principles that were taught at Uni – alignment, proximity, repetition, contrast, negative space and something something. Might need to look it up.
Superb imagery and truely inspiring content.
Congrats!
I agree with all of this. I often see people not understand what happens when these elements are missing in a piece. It’s the difference between a guess based on seeing some one else’s work, and a decision based on understanding what and why you are doing something.
Style comes from choices. Making good ones leads to better designs period. I know it’s boring, but this stuff comes in handy. Stay positive, keep practicing, don’t worry about being better then the top guy, just be better then yourself and sooner or later it will start to all make sense to you.
Perfectly done!
Back to basics that will bring design back to life.
Great article, gave me a reminder of what to think of while designing in the future. Will save this article as inspiration.Finally I’m trying to avoid sounding like a 4 year old here but: I really liked the pictures!
Nice reminders. We had to paint each of these principals and/or cut them out of paper with xacto blades and schaedler rules. Painful, but effective.
This certainly brings back memories of art college. LOL! :)
thank you. thank you. thank you.
a gorgeous, simple reminder of the hidden architecture behind good design.
I appreciate your intentions, but I find these illustrations to be very distracting. They confuse the message. Why the dirty paper texture? Is it an attempt to appear like some sort of document which comes from a 1950s design manual?
Also, forget the images for a minute, the writing perplexes me. For instance:
“The force operating within a work of art which can give it the appearance of oneness or resolution. The consistency of the concept.”
Read that again. Out loud and slowly.
The force?.. Really?
Work of Art?.. I thought this was the principles of design?
Give it the appearance of oneness?.. Surely we are looking for substance, something that goes beyond appearance?
Before you reply, understand that I am not trying to offend anyone. I understand what makes good design and I appreciate the motive for this article. My criticism is with regards to the way the article was composed. That is all. This is a critique of Fuel Your Creativity, rather than the message of this article.
Thanks for the comment Yousseff! I am going to address your questions.
1. Illustrations
The message was to illustrate the concepts that the text was talking about. I am a designer and I chose muted colors that were easy to take in and didn’t scream for your attention over the text. The grungey background texture was there for aesthetic purposes. Although I think the 1950’s design manual idea would’ve been a better excuse!
(I find it interesting you are distracted by them and others have not been. Not an attack at you, just interesting how people can view the same thing in two different lights. Art/Design is very subjective.)
2. The Force
The force is a way to talk about what is going on in a design or creative piece. For example, in the illustration for Unity it pulls your eye through the shapes. You also know their is a pattern which unifies all the circle patterns together. Every design has some sort of flow that is supposed to direct your eye through it. In advertising it is a call to action or a logo that makes the consumer realize what they are supposed to want. Regardless if you’ve never thought of it this way or noticed it as a “force” it’s there.
3. Work of Art
This is a huge can of worms… Because now we are getting into the idea of, “Are artists, designers?” “Are designers, artists?”. It all depends on what you think the definition of art is. These are broad terms and could be carried into other creative fields besides design. The bigger question you are trying to get me to answer is “What is Art?”. I wrote 5 papers in college all above 10 pages and still haven’t figured that one out. It’s a hard one to answer that the creative industry has been trying to answer and solidify. Sure, there is definition for Art but what is it? What defines it? Was Paul Rand an artist? Is DiVinci a designer? Am I an artist? Are you? Big questions with not any really definitive answers.
4. Oneness
Unity within variety talks about how the piece has many different components but makes up one peace or work/design. So the design is “one” peace with many components. Navigation on a website is unified because its the same style or location. It varies because its different words or colors depending on the page.
I know you were not trying to offend anyone. I am not offended nor was my comment attacked you. The criticism is with the way the article composed. It also was the message because you challenged the wording and ideas of the article. Hopefully I’ve answered your questions and cleared things up for you.
well, joesef, i found the examples fascinating and sublime.
Very nice examples. This is usually something you would learn in a course called ‘Graphic Design I’. The very basics of design are still powerful and yet forgotten very often.
I’m actually getting a series of tattoos to attempt to cover each of the major principals of design. This is a good reminder for me to stop putting it off and get the next one.
Chris thats really awesome. Unique and a very creative tattoo idea. Now, go get that next one. :)
This is great. The basics in any field of endeavor are vital.
As a video editor and budding small business owner, I find the need for clear, concise basics like this, and particularly in design.
Do you (or anyone) have recommendations on good design books and references that can lay that foundation, as my studies in filmmaking ignore the design aspect, but I find that any visual medium should have design fundamentals underneath it.
Thanks! Great website and article.
Absolutely beautiful post Chad! Everyone needs to go back to the basics-great reminder.
Love the illustrations. Any chance of the original versions of these for wallpapers?
Thats a good idea. I will release them since people seem to like them so much. :) Thanks for the idea.
Excellent! Thank you for reminding us that the basics still apply… and can be used to created beautifully simple designs.
I studied all these principles in my first year at uni and at the time i found it laughable, but reading through it again a good design really is built on these foundations and once you have a good understanding of the principles it’s very easy to see improvements in almost every design out there.
Love the illustrations. Would make a nice poster (hint hint).
They’re not lost; you just have to search for them. I just took a class by Marshall Vandruff about composition which included all of these principles and more.
http://www.marshallart.com/seminars/info/composition/index.php
Excellent!
Awesome! Thank you for sharing. :)
Very nice, good refresher
Keyword, “lost,” indeed. In fact I’d say it’s one of my biggest criticisms on tutorials lately. I don’t understand how people expect their audience to learn how to create something when the principals that “make it look right” are all out of wack..
Agreed. It’s just the way the design blog world has captivated us all. We are flooded with content and forget the basics & new comers don’t know the basics and jump straight into the big stuff.
Could someone recommend a good book with this information?
Cheers,
D
As a web developer (programmer, coder, etc.) with a thorough knowledge of markup and CSS, but who would like to reach out and work more into design, this was very, very helpful. Many thanks for the effort to put it together!
Thankyou Chad for pointing out the fundamentals of design.
Definate food for thought.
To maintain passion of design, these principles are simplistic and easy enough to understand and view.
It’s great that the conceptual ideas and visuals has given good contributing comments.
I have facebooked and tweeted these principals, and although I am not a designer student and have a passion for the arts and design – fueling your contribrutions breathes creativity.
I watch, read and listen with huge interest!
Very well done Chad, it`s an article where i will refer to for sure in the future.
@Yousseff
In some points i understand what you mean but you should not forget that sometimes it can be very hard to express things like they are meant to be, especially on a blog in words. The important thing is that people understand what Chad tries to say and not if he used the one or other inappropriate adjective, verb or what ever.
These random dots and lines are great! Good work.
One of the best articles about design in a while. I must say that these simple pictures have complex meaning. This is the beauty of design.
Kudos Chad!
I just sent the article to my designer. Great keynotes.
I’d like to add alignment.
Fantastic post! I’ve studied (fine) arts since 1993, and I have to say that every “Academic” lesson is applyable in Web/Graphic Design. This is the reason why I love digital arts, too.
Let’s hope every “designer wannabe” out there, read your post.
cheers,
@RolandoPeralta
thx! usefull post
I agree excellent description.. basics still apply
Fantastic post! I instantly felt like I was in my 1st quarter of design school! I will definitely share this.
Thanks for sharing these sweet wallpapers, love the color combination.
Thank you for sharing these principles! I am Very new to design and I’ve been googling for a couple days for good articles, definitions, principles and tutorials for design. This is the most substantial article I’ve found. And it shows me design, while being difficult, is more difficult because of how simple the basics of it is… Have you found this to be true? Just curious if I’m on the right track… Thxx again :)
Yes, design is often difficult in order not to make things harder than they need to be. I am glad this article helped you learn basics.
Second time I read this article, still a great article. Design is slowly going extinct…
as a visual person this really resonated with me, very nicely done.
Great abstract. Back to design school!
good examples & explanation of the basics of design very vital Students & Designers.
Great attempt :-)) everyone need not interpret it the same way there are bound to be different perceptions like Youseff & yes ….. What is ART ? As you said difficult to define .