Visual Harmony In Design Part 3: Thematic Reference

Last week we looked at how designers can use repetition to create visual harmony in their designs. This week we turn our attention to the concept of “thematic reference”.  Thematic reference is a somewhat grandiose term used to describe how to establish connections between themes in a design. For example if you were designing a site for brides, you would most likely avoid dark drab colors, images of skulls and crossbones and harsh distorted type. That is not a suitable theme for anything related to weddings. One way to achieve visual harmony is to pick a theme and use design elements – images, type, textures, colors – that reflect that theme.

Let’s take a simple example of this in action using The Fruit Box web site. This function of this site is to let potential customers know about its service of fruit delivery. For starters, the logo features a brightly colored box of fruit. The main image on the home page is a photograph of some brightly colored, juicy fruit. The colors used in the navigation bar and the contact information at the top of the page are brightly colored orange, red and green, reminiscent of juicy fruits. So the actual content and design re-enforce each other. It all seems very simple doesn’t it? But often making a site seem simple and eye-catching can be a difficult task.

FruitBox

This packaging for Rochdale Cider was designed by Supply. The brief required that the rebranding should fit into a theme of history and tradition. The retro stencil-style typography complements the copy used on the label and box along with the old style apple brand mark on the front of the bottle. The natural-looking yellowed paper adds to an overall theme of nostalgia whilst still looking modern.

RochdaleCider2

RochdaleCider

Images from The Dieline

Opera Live has a wonderful interactive trailer on it’s web site. The artwork style conveys a theme of old times. The beautiful ink drawings and accompanying opera music echo each other. The italic text used in the captions bolster the elegant feeling of opera. All the elements come together in a harmonious way.

opera1

opera

And that briefly sums up the concept of thematic reference in design. Next week, in the final part of this short series on harmony, we’ll look at the idea of visual echo.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • XLCowBoy

    Another way to look at this is branding. And branding consistency.

    Your brand’s visual style = printed visual style = website visual style.

  • http://paulavery.ca jpavery

    Small companies have a hard time with branding. Marketing material can be so miss-matched.

    Design elements on websites can be horrible and do not go together on any plain.

    I wonder how large a company needs to be before it can afford to pay attention proper design… or maybe the answer is they cannot afford to ignore it.