Before solving complex design problems you need to understand the basic components of design at your disposal. Much as a musician seeks to understand pitch and rhythm, melody and tempo, a designer should seek a greater understanding and control over:
- Color Part I: Color Theory
- Color Part II: How to Use Color
Through learning these 7 components of design, the whole of your designs will become more than the sum of their elements and you’ll be better able to communicate your ideas.
I’ve written in greater detail about a few of these components and in the coming weeks I’ll write more detailed posts about the rest. Consider this post an introduction.
Also note that there are many ways one can break down and organize design principles. The 7 components described here are as organized by Alex White in The Elements of Graphic Design.
Unity exists when your design elements are in agreement; when they belong together and aren’t arbitrarily placed or added to the design. Agreement can be either visual, conceptual or both.
The 4 basic design principles of contrast, repetition, alignment, and proximity can be used to gain visual unity over your design. Elements that are aligned, repeat some basic characteristic like size, or are located in proximity to each other will appear to belong together. The last principle, contrast, is used to add variety.
Unity imparts order, but too much order can be dull and static. Variety adds interest, but too much can lead to a chaotic design. The key is to find a balance between unity and variety so as to have a well ordered design that is also visually interesting.
Elements can be conceptually unified by being about the same subject. An image of a steering wheel, a fuel pump, and a glove compartment are all unified around the concept of a car.
Gestalt is a German word for form and shape and here refers to the human mind’s ability to visually organize forms and shapes into a unified whole. When first looking at a design we see the whole instead of the parts. When someone says “this design works” it’s because gestalt is at play.
By controlling design elements and how each element affects those around it you affect the cumulative perception of the viewer. A small change in one element affects how the other elements in your design are perceived. This cumulative perception is gestalt.
We can manipulate gestalt through the same 4 basic principles mentioned above as well as through:
- figure/ground – the relationship of a subject to its surrounding space
- closure – the viewer’s tendency to complete unfished forms
- continuation – the arrangement of elements to lead the eye across the page and create flow in your design
Gestalt helps communicate your message through the cumulative perception of all your design elements.
Andy Rutledge has written a great series of posts on Gestalt principles which I encourage you to read
- Figure Ground Relationships
- Proximity, Uniform Connectedness, and Good Continuation
- Common Fate
Whitespace or negative space is the space between design elements. It’s just as, if not more, important than the space you fill and is one of the most neglected components of visual design.
Day only exists in comparison to night and in much the same way your positive space (where design elements are located) only exist in comparison to the empty space around them. Without whitespace, designs become crowded and chaotic. There’s no flow of movement from one element to the next.
Space is the context in which your message is perceived. Without ample space communication is difficult. Imagine a piece of music where every note in the piece was played by every instrument at the same time. The result would be noise and not music. Music needs space (time) between notes in order to build rhythm and melody. Visual design needs space between elements in order to effectively communicate.
Dominance is contrast taken to the extreme. By creating one element to dominate other elements on the page, you create an area of interest and a focal point to your design. Dominance gives viewers a way into your design. It lets them know right away where to look and from there you can guide them through the rest of your design.
Without dominance your visitors have to think about where to look first. Don’t make me think. Make it clear where I’m to look first. Give me an easy way to enter your design and begin to look about.
You can create dominance through manipulation of:
You can have more than one area of interest in your design, though one should be dominant. One should be the primary area of interest and be dominant over everything else.
While one element should be dominant you can create a hierarchy of dominance in order to guide people through your design. By creating a visual hierarchy in your design, you enable your page to be scanned and communicate the relative importance of different parts of the whole.
Which of the two layouts above is easier to read? The one without a clear hierarchy on the left or the one with a hierarchy on the right?
Once again the basic design principles help us create a hierarchy and help us move the eye from most important to least important elements. Contrast to make clear what’s most important and repetition, alignment, and proximity to lead the viewer across a single level of hierarchy and into the next.
Try not to create too many levels of hierarchy. It’s easy to discern most and least, but what’s in between tends not to be so easy to distinctly separate. Aim for 3 levels of hierarchy if you can, most important, least important, and everything else.
Balance is a state of equalized tension. It’s important for achieving gestalt. A balanced design is a more unified design.
Designer’s use visual weight to control design balance. Through the use of things like size, color, space, and density your design elements can visually balance each other to create a pleasing whole.
There are 4 types of balance, 2 of which are more important.
- Symmetrical – formal or static balance
- Asymmetrical – dynamic balance
- Radial – elements radiating from a central point
- Mosaic – balanced chaos lacking hierarchy and focal point
Symmetrical and asymmetrical balance are the two more important types of balance, with asymmetrical balance being the more interesting of the two. Kandinsky’s Composition #8 below is a good example of asymmetrical balance and dominance.
The dark circle in the upper right is the dominant element that pulls you into the piece. Notice how there is no equally dominant object on the right side to balance it, but rather a combination of elements is used to balance the painting.
In a balanced design the whole is more than the sum of its parts. When a design is unbalanced some of the parts become more visible which leads to competing messages instead of a single unified message.
Color aids organization through contrast and repetition. A good use of color in your design will help visitor comprehension of your overall message. Color provides direction as it relates elements to each other.
Random color choices negatively affect your message. A color scheme affects your message positively by helping achieve unity. You should plan for color early when creating a new design or your colors will end up being cosmetic and somewhat random.
Color theory defines classic color schemes as:
- Monochomatic – different shades and tints of a single color
- Analagous – colors adjacent on the color wheel
- Complementary – colors at opposite ends of the color wheel
- Split complementary – a main color and 2 addtional colors next to the complementary of the main color
- Triadic – 3 colors equally spaced around the color wheel
- Tetradic – 2 complimentary color pairs
Color evokes emotions. Psychology and cultural differences influence the way people react to and interpret color.
Darker colors are seen before lighter colors. Warmer colors move elements forward while cooler colors make elements recede into the background.
Whether you’re consciously aware of them or not, each of the above components will be present in your design.
You can choose how much or how little of any to include, but they will all be there to some degree no matter. Not being aware of them during design will lead to them being included haphazardly which might have negative consequences on your overall design.
As I mentioned at the start I’ve written more in depth about some of these 7 components in the past and over the next few weeks I’ll add more detailed posts about those I’ve yet to cover. This post is meant to serve as an introduction to each of those detailed posts, both written and yet to be written.
The 7 Components of Design
- Color Part I: Color Theory
- Color Part II: How to Use Color
Download a free sample from my book, Design Fundamentals.
This article has been shared on favSHARE.net. Go and vote it!
Thanks for sharing this blog. I am really appreciated with this blog Gestalt is powerful way in web development.
You are right but here are many others things which you neglect,i-e colors depends upon the basic theme.You can’t express your emotions,feelings & the message unless you choose the color according to them.
This was just an introduction. I think what you mention is covered in the last two parts of this series, which deal with color in much more detail than what’s covered here.
thanks nice post…
Great post regarding to the designing, i totally agree with you these seven components are quite necessary in the designing. good work Steven Bradley, Keep it up.
Exactly what I was looking for.
I am a bit confused thought over exact difference between the design components and the design principles.
No need to be confused. In this series I call them components, because the book that gave me the idea for the series called them components. No real difference between design components and design principles.
Where did you get these components from. Awesome work and I can understand the amount of research you have put on this.
I will ask my designers to visit this site regularly. Thanks
They all came from the book I mentioned at the start of the post. That was the starting point for the research for this post.
Great information. This is essential for designers. Thanks for posting.
dont leave out balance and consistency , they are essential and important principles too, thanks
I agree both are important, but I didn’t leave out either of them. Balance is listed as one of the 7 components and I would consider consistency as part of unity.
This has been helpful compared to what I learnt before.
Thanks Ekere. I’m glad I could help.