Composition and harmony 101


What makes an effective design? We’re always concerned about typography, colors or graphic elements and sometimes we don’t pay the right attention to the composition and harmony “rules”. I mean, the composition is frequently based on what we feel it’s right, but there are some tricks to make it more precise. We are going to understand the design and composition elements and its arrangements.

WHAT IS COMPOSITION, AFTER ALL?

Composition is basically the arrangement of shapes, colors and elements in order to guide the reader’s eye making him understand and remember it, also looking pleasant. As we always say, there are no real rules for design, but there are principles that fits for most works. Don’t be completely restricted to what we say here, but know how to use it in your projects.

DESIGN AND COMPOSITION ELEMENTS

These following elements are the ones we must pay attention when making the composition of a layout.

color
Color is a strong element that can create harmony, contrast, define spaces and much more. Besides that, colors can express feelings and sensations, so be careful when choosing them. Last week we published a complete article about color theory which you can see here and learn more about color harmonies, color wheel, warm and cool colors beyond other things.

color1

color2

color3

line
This element is important to indicate movement and make the layout flow. Being straight, curved, horizontal, vertical or diagonal can mean different things. The important thing is know how to use it, being explicit or not. Take a look at the images and see how the lines create a nice flow in different designs.

line1

line2

line4

shape
Shapes are closed lines and like these ones, shapes can indicate movement, as well as balance the composition and distribute weight. The primary shapes are basic geometric figures, but it’s just the beginning. The organic ones can make great compositions, due to its infinity of forms.

shape1

shape2

shape3

texture
The texture refers to the feeling you have about a surface, like rough, smooth, etc. It’s also related to repeated pattern on a surface. Using a nice texture can make your work much more rich and interesting. The images show texture as a surface and as the whole image.

texture1

texture2

texture3

tone
Tone is about light and dark and how they give volume to the image, giving a three-dimensional quality. It doesn’t mean that it’s only referred to black and white, but also for colors.

tone1

porportion
We call proportion the relation of size/weight of elements in a layout. That’s what keep the balance. Talking about proportion and composition, we must remember the “Rule of the thirds” and the “Golden ratio”.

Rule of the thirds

This rule is pretty well known, specially by photographers (nowadays many digital cameras displays the rule of thirds’ grid). The image is divided two horizontal and two vertical invisible lines. The intersection of them is the point of attention, where should be the important elements. See this rule in application in the ads below.

thirds1

thirds2

Golden Ratio

The golden ratio is a mathematical constant approximately to 1.618, represented by the greek letter phi (Φ or φ). We can see this ratio when the proportion of the sum of two parts and the larger part is in the same proportion than the larger and smaller parts, like the image below explains. Besides the equation there is a golden rectangle, which is its application.

golden1

You can make a golden rectangle with paper, ruler and a compass creating the exact proportions.

golden2

Studies indicate that we are programmed to see this proportion as comfortable and pleasant. There are also speculations about some Da Vince’s paintings, saying that they are based on these proportions. Just for curiosity, the pentagram is based on this proportion. Think about these proportions when creating a layout, even if you want to completely disobey them, it’s always important to have the knowledge to do that.

unity
The unity is the characteristic that makes all components of a layout work as a single piece, talking it the same language, keeping a pattern or style. You can easily notice that, for example, in a kind of illustration in a layout (1), the unity of colors (2) or the unity of elements (3) as you see in the following images.

unity1

unity2

unity3

balance
The balance is a property of distributing weighs in the space. Being symmetrical or asymmetrical is not the point, it depends on your whole composition. But you need to know that if you want to keep the balance, you must place carefully “lighter” and “heavier” elements. You can see below balance using: many elements around the main shape (1), dividing the weigh with the logo and element (2) and a horizontal symmetrical distribution of elements (3).

balance1

balance2

balance3

negative-and-positive-space
The positive space is where the shapes and elements are. All the “empty” space around it is the negative space. Don’t ever think that the negative space isn’t important, because it’s an element as any other – that’s why designers always talk about “white space”.
neg1

neg2

neg3

Conclusion

The balance of all these elements presented here are supposed to make a good composition, but most important than any rule is using your own perception. As designers, we know that each project has its particularities. Experiment, provoke, try something new for every project. Now you tell us other aspects to consider when making compositions, besides the ones in this article.

References, further information and resources:

24 Responses to Composition and harmony 101

  1. Raul May 5, 2009 at 6:30 am #

    great article. learnt something new today

  2. Erik Teichmann May 5, 2009 at 6:43 am #

    Nice article, and some great examples. At least this was a productive way to procrastinate this morning.

  3. Richard May 5, 2009 at 8:48 am #

    Effective is a very important word. There is a lot of thinking and talking that is concerned with understanding a situation or with describing a situation. From such understanding, perhaps action can be taken.

  4. mao May 5, 2009 at 7:50 am #

    @Erik You are welcome erik. I wish I could procastinate in a procductive way all the time.

  5. Val P. May 5, 2009 at 8:11 am #

    Great article. Lots of good examples and the topics were concisely but adequately explained. I plan to refer quite a few folks this way.

  6. Nathan Sarlow May 5, 2009 at 10:28 am #

    This is also a useful tool for working out Golden Ratios
    http://goldenratiocalculator.com/

  7. kixvix May 5, 2009 at 10:31 am #

    Nice article! Agree on how important negative space is. For a design to look good, there should always be some “breathing space”. Really good examples too.

    Cheers!

  8. Josh C May 5, 2009 at 8:42 am #

    Great walk-through, thank you. It’s one thing to look at a great design and another to really understand why it is so appealing.

  9. estefany May 5, 2009 at 10:36 am #

    Thank you guys for all the feedback, we make all these articles hoping that they will be really useful for you. The idea of this one was make a clear and simple explanation, which is hard to find in articles about general composition. Thank you all!

  10. Administrare imobile June 5, 2010 at 6:18 am #

    These are great examples to show. My favorite is the beer one and the girl in black and white.
    I like them.

  11. Rocksy Fave August 11, 2010 at 5:50 pm #

    Very Ineresting and excellent designs

  12. Sharyn Young March 6, 2012 at 11:40 pm #

    Thanks for sharing these great examples.

  13. mao March 7, 2012 at 4:37 am #

    @Sharyn you are very welcome :)

Trackbacks/Pingbacks

  1. progg.ru - May 4, 2009

    Composition and harmony 101…

    Thank you for submitting this cool story – Trackback from progg.ru…

  2. Pro Arte Quartet » Tone (literature) - May 5, 2009

    […] Composition and harmony 101 […]

  3. Claves para el diseño efectivo « - May 5, 2009

    […] elementos y de su uso nos hablan de una forma muy ilustrativa en snap2objects para obtener las claves de un diseño efectivo. […]

  4. CorelDRAW Classes @ LVS Online » Blog Archive » Web design links - May 5, 2009

    […] Composition and Harmony 101 is a blog post on a great site called Snap2Objects that’s full of interesting things besides […]

  5. Piso 13 - May 6, 2009

    […] Link Publicado por piso13 Archivado en General No hay comentarios » […]

  6. Pearl Fryar update, plus some Odds-n-Ends « The Whispering Crane Institute - May 18, 2009

    […] of those design principles that seems easy enough to explain but always turns into a very drawn out, complicated, […]

  7. Design - Composition and harmony 101 | ErnieDavis.me - May 22, 2009

    […] http://www.snap2objects.com/2009/05/04/composition-and-harmony-101/ […]

  8. Composition & Harmony 101 | Guider Blog - May 22, 2009

    […] http://www.snap2objects.com/2009/05/04/composition-and-harmony-101/ […]

  9. Knask på ein fredag: Mai › the unborn chikken - May 28, 2009

    […] Snap2Objects Designinspirasjon (les) […]

  10. NID 2010 Preperation « NiK oN FlAsh - January 3, 2010

    […] update2(3rd jan,2010): This is great explanation on colors n their impact 1.http://www.snap2objects.com/2009/05/04/composition-and-harmony-101/ 2.http://www.snap2objects.com/2009/03/24/color-theory-101/ This post wont die here I will add more […]

  11. Composition assignments & tips for better graphic design | Emerald Interaction - July 1, 2011

    […] Composition and Harmony 101 […]

Powered by WordPress. Designed by Woo Themes