Visual Harmony In Design Part 4: Visual Echo
Over the past few weeks, we’ve looked briefly at how designers can achieve visual harmony in their compositions. We’ve seen how repetition of elements brings harmony and attracts attention and how “thematic reference” establishes a connection between themes in both the content and the design elements. In the final part of this short series, we’ll discuss the idea of “visual echo”. A visual echo establishes an attractive sense of unity between design elements in a layout, whether that layout is for the web or for print.
Echo Through Color
One easy way to achieve a visual echo is to reuse or echo the colors in a photograph or illustration in the colors, typography and styles of your layout. Use the eyedropper tool in Photoshop or your graphics editor to pick out a color from your image, or use Kuler to create a color scheme from an image.
Look at this poster for the movie Collateral. The main photograph is very subdued in terms of color, but the golden skin color on Tom Cruise’s face is echoed in both the actor’s names and the movie title.
The Friendly Duck site is deceptively simple. The white and orange colors in the duck illustration are echoed in the type, the speech bubble and in the circular chart on the page you can see below. This is not an accident. This design would be nowhere near as effective if each of those design elements were completely different colors.
Echo Through Typography
Echo can also be achieved through typography. The same style of typography on the Kidd 81 site appears in the logo and header, in the introduction and in the sidebar. Often when a design appears weak, it is because the designer hasn’t followed through with the use of typography. This designer has not been afraid to use the hand-drawn style in several sections of the site. For practical purposes, such as Search Engine Optimisation, the designer will be required to use a web safe font for the main text on the site, but on this site the echo is strong and meaninful.
Rikcat industry is a similar but more subtle example of echo in typography. The type in the logo, navigation and sidebar is the same sans-serif typeface while the headings use a serif font. The use of black on white and white on black provides an interesting contrast.
Echo Through Style
You can also create echo through style. This advertising for female icons is a combination of hand-scrawled, grungy typography combined with a stylised black and white photograph sitting slightly skewed on a pink background. It doesn’t say “I’m a girly, girl”, it shouts “I’m a hardcore, rockin’ woman!”
Everywhere you look you’ll find examples of visual harmony. As I mentioned in the first post of this series, harmony doesn’t mean the design has to be only for a “nice” subject, it just means that all the elements agree with each other. They can be rough, course and shocking or as nice as pie as long as you are making the choices about colors, styles, typography and textures.
That finishes this short series on achieving harmony in your compositions. I hope you’ve found it useful.
