HTML & CSS
Article

New Series: Harmony In Design

By Jennifer Farley

It’s time for another short series on design principles. Over the next 3 weeks I’ll post short articles about visual harmony in design and how you can achieve it in your work.

Visual Harmony basically means binding or agreement between the elements in your design both aesthetically and thematically. Over the next few weeks we’ll look at examples of harmony in design under the following headings:

  • Repetition
  • Thematic Reference
  • Visual Echo

Visual harmony is achieved through a balance of unity and variety. That can mean choosing complementary or analogous color schemes to achieve color harmony, or choosing typefaces that are concordant or contrasting but not conflicting.  A common trait between elements could be texture, patterns, color, shape or size.

As an example, if you take a look at the odosketch site, you’ll see it uses complementary colors and also has an entirely sketchy theme. A visual echo is created by the correlation between colors, sketch paper texture, typography, logo design and the actual content of the site.

odosketch

Harmony doesn’t mean boring or dull. And it doesn’t mean you should seek harmony only in design work about “nice things.”  You can create a harmonious design piece about war, famine, cancer, death. The design elements may be different than in a happy piece, but they are still in visual and thematic agreement with each other.

infantry-poster

Poster by Harry Pearce of Lippa Pearce/Pentagram

A0 Burma poster AW.qxd

Poster by Harry Pearce of Lippa Pearce/Pentagram

In the Burma poster there is repetition in the color of the fire and the orange used in the text and the small logo. There is thematic reference between the burning letters and the information on the poster about villagers driven from their homes.

You can see harmony is all aspects of visual art from sculpture to painting and cinema. Just look a bit more closely at your everyday surroundings and you’ll see it in almost everything around you that has been “designed.”

Next week we’ll look at the use of repetition, I hope you can join me.

  • http://www.iraqtimeline.com/maxdesign Black Max

    I’m looking forward to this series. Thank you for providing it, Jennifer.

  • http://www.laughingliondesign.net Jennifer Farley

    Thanks Max, you’re very welcome.

  • hey

    login button not working in firefox 3

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.