Open Advice/Use of Color and Images in Design Practices

Use of Color and Images in Design Practices

by Eugene Trounev

in: Open Advice

This text is available under the CC-BY-SA license. (see also: Open Advice/Info)

Contents 1 Colors and textures 2 Texts and spaces 3 Attraction and information 4 Conclusion 5 about the author

Since the most ancient times people have used the power of images and color to

pass information,

draw attention, and

distract attention.

The infamous saying goes “A picture is worth a thousand words”, and it could not be more to the point. From the way we dress, to flashy neon light of downtown stores across the globe – every color, every shape and every curve has a purpose.

Knowing the purpose however is not that hard, since all of those variations of hues and lines are put together to be read and felt by every one of us. It is true therefore that a great design must come straight from the heart, as it is supposed to speak to the heart in the first place. Nonetheless, just the heart alone would not be able to make a great design, if some rules are not set and followed at first.

Colors and textures

There are many different ways to classify the colors into categories, but many of them focus on physical or chemical properties of light or ink, and though they are important in the end, those will not help you make an appealing design.

The one way that I found works best is to split colors into:

warm and cool.

Simply speaking, warm colors are those closer to the shade of red. They are: red, orange and yellow. Cool colors, on the other end, are the ones running towards blue. They are: green, blue and to a lesser extend violet. It is important to remember that cool is also calm and breathy, while warm is impulsive and dangerous. So, depending on what feelings you wish to awaken within your audience, you should use either warmer or cooler colors. Draw attention with warm and inform with cool. Overuse of either will result in either overheating – creating negative feelings in your viewer, or freezing-over – causing indifference.

It is important to remember that black, white and grays are colors, too. These, however, are neutral. They cause no feeling, but rather set an atmosphere. The properties of these will be discussed later.

Every image is first and foremost a collection of colors, and as such will abide by the rules of color management. Determining the dominant color of your image is the key to success. Try to see the big picture, and do not concentrate on details. A good way to do this is by setting an image against some dark background, then taking a few steps back and observing it from a distance. Which color do you see the most of?

Not all images have a dominant color, however. Sometimes you may come across color bloat, where no matter how hard you look you can not determine which hue dominates. Try to avoid such pictures, as they will inevitably confuse your viewer. When confronted with imagery like that, people tend to look away quickly and it will not give a good impression, no matter what it speaks of.

Beside color, pictures also have a texture, as ultimately they are nothing but a collection of textured colors. Detecting the dominant texture of an image is not as straight forward as its color, as textures are seldom obvious, especially in photographs. There are however a few pointers to help you. Human nature causes us to be drawn to curved, so called “natural” shapes, while angular, sharp-looking shapes are considered less attractive. That is why an image of a curved, green leaf would appeal to more people then that of a metal spike.

To summarize: the key to a successful, appealing design is a good, well balanced combination between color and texture in the images used.

Texts and spaces

An equally important aspect of any good design is the use of text and spaces around it. And just like it is with the image textures and color, you should always remember that people like to breathe. This means that there should be sufficient space in and around the text to make it easier to spot, read and understand.

Consider an example of two pages – one coming from a romantic novel, while the other is taken straight from a legal document. You would most likely prefer the romantic novel over a legal document any day, but do you know why? The answer is simply because you like to breathe. A page from any romantic novel is likely to contain three important elements:

a) conversations;

b) paragraphs;

c) extra wide margins, while most legal documents normally contain neither.

All of the aforementioned elements make the page feel alive and dynamic, while the absence of those make it look like a solid wall of text. Human eyes, being more accustomed to a certain degree of variety of sights, feel more at ease when presented with spacious, fluid layouts.

This does not however imply that every text must have all those three elements in order to seem more attractive. Far from it. Any text can be made easy and enjoyable by injecting enough air into the flow.

Air, or space, can come through a variety of ways, such as: letter, line and paragraph spacing; content, section, and page margins; and finally letter size. Try to keep at least one character-toll space between your paragraphs and lines, and two character-toll space between sections in your text. Allow generous spacing around the text on a page by setting your margins wide enough. Try to never go below 10-points font size for your paragraph text, while keeping headings large enough to stand out.

Attraction and information

Just like animals, human beings are often attracted by bright splotches of color and unusual texture, and the more captivating the sight is, the more oblivious people become towards other potential points of interest. This simple rule of attraction has been used since the most ancient times by females and males alike to drive the attention of others away from certain things they did not want to be noticed. The best example of such a trickery is the work of a street magician, who often distracts viewers’ attention by use of smoke, flames or flashy attire.

It is important to remember here that words are visual too, as they produce specific associations and visions. The very same trick that can be done with smoke and fires can also be achieved through creative use of wording. By far the best example of a trickery done with words is our every day price tags. Ever wondered why retailers love those .99s and .95s so much? That is because $9.95, or even $9.99 looks more attractive than $10.00, even though in reality they have the same impact on your wallet. Trow an “old” $10.00 price tag noticeably crossed through with a thick red line into the mix and you got yourself a great customer magnet.

Conclusion

Great, attractive design is achieved by following these simple rules:

a) choose your imagery wisely;

b) make good use of colors and textures to create an atmosphere;

c) give your viewer some room to breathe;

d) draw the attention away from the parts that matter the least, and towards those that matter the most.

This short essay is not meant to cover the whole wide spectrum of various design styles, techniques and rules, but rather to give you – the reader – a starting point you could carry on building upon.

about the author

An active member of Free Software and KDE for about 6 years, Eugene Trounev started in KDEGames and followed through the entire KDE3-to-KDE4 transition. Nowadays he is mostly taking care of KDE’s web presence and main desktop appearance.