This summer I want to bring you a set of blog posts about Visual Webdesign. Recently I started noticing basic design knowledge is lost in the digital world. In the responsive era many webdesigns have become... well... kinda boring. Its all colored boxes. Many sites look quite similar. The only difference between the wireframes and the design is color. And I think Visual Webdesigners can do better. We've become lazy.
This series is intended to stop designers for a single moment to realize we can do better. Visual Design is so impressive and so valuable to every project - that you need to get the basics right.
I think there are 5 elements to visual webdesign: color, typography, shapes, pictures and motion. I want to dive into these elements one by one. My aim is to put a blog online weekly for the next 5 weeks - diving into one of the elements every week. This week we'll start with Color.
There are many aspects to color. Did you know only 1 in 4 people will recognize the colors as they were intended? Other aspects to it are that there are cultural differences to colors. Yellow in Europe will often resemble the sun or another positive. In other countries such as Egypt or India it resembles mourning. So you have to take this into account.
Colors are able to represent an emotion or a feeling. Just imagine the traffic sign next time you drive your car. Red is stop, green is go. Supermarkets use special lighting to make the products look good. Meat-companies sometimes add a supplement to color your meat - otherwise you won't trust its color. Color is something you often don't notice, but its always there.
A webdesigner will use knowledge of colors. You would be surprised how often a corporate styleguide has been made for print and the online designer has to translate it. Good translation often means you have to change the color. Not only do you translate it from CMYK to RGB, 9 out of 10 times you have to adjust the color as well!
Know your colors and know when to use them. Make sure you use them to get your message across. Be communicative with your visitor through color. The easiest example are the correct and error messages as shown above. It isn't a coincidence that the v is green and the X is in a red dot.
Colors can help giving your viewer an instant recognition. A few years ago I worked on McDonalds projects whilst they were making a transition from the yellow M on red to the more natural-looking yellow M on green. I thought that was an amazing transition. Because to be honest it doesn't matter if you see the yellow M on red, green or even stand-alone - it will always be McDonalds. If they would have changed the color of the M, that would have been something different. I don't think people would still connect to it as well.
When a company is consistent in the use of colors it creates recognition. The image above shows the yellow arches of McDonalds. For the international visitors of this blog - the left image is the shape of the logo of a Dutch supermarket called Albert Heijn. They use the blue (and shape) very consistent thus creating a strong brand. The webdesigner has to make an inventory of the brand colors and use them consistently.
So, can companies claim colors? Yes, they can! The image above already showed how McDonalds and Albert Heijn claimed colors. I always use the image below to indicate to people how important colors are to a brand. I take two brands, two competitors in the same market and swap their colors. You could do something similar to FedEx and UPS for instance.
I've started to use Heineken for this years ago when I wrote some courses for the LOI. Heineken is Holland's most famous beer-brand. Heineken is very consistent in its communication. Green is Heineken. Watch any commercial, any poster, any other communication: you'll feel the green. Bavaria is another Dutch beer using blue as a color. So I always show people the image below to show how important colors really are to a brand.
Here you can see the Bavaria logo in the Heineken colors and vice versa. Thats how important colors are to a brand. Webdesigners need to be aware of this. Really get to know the brand you work for. Your client wants you to understand them. One way of showing it as a webdesigner is to know the brand.
When I create concepts for clients or am involved in pitches you can almost always expect me to make a presentation not in the design of the agency - but in the design of the client. I noticed it helps them to trust you as you've already shown you know their brand.
As of January 1st 2017 there's an UN resolution that specifies equal rights for people with a restriction (for instance color-blindness). This means your website has to conform to the Web Content Accessibility Guidelines, short: WCAG. We're currently at version 2.0 and that'll go to 3.0 in the not too distant future - because 2.0 is not device-minded enough in my opinion, there's too much focus on desktop websites.
Anyway, for webdesigners that, amongst others, means your designs should have enough contrast in color. I've been working following the WCAG for the past two or three years now and its not always easy. You'll have to combine the brand colors (often not WCAG safe), rules of WCAG and still make your design awesome. When it does work that's brilliant though!
Luckily there are many contrast checks out there. You can use Contrastchecker, Contrast Ratio or my personal favourite Contrast-A. If you're using FireFox there's an Add-on you could install.
This blog-post could have gone on for a few more pages to be honest. I'm only touching the basics of color. I could have gone on about the meaning of various colors or how to translate from CMYK to RGB and so much more.
I just wanted to show a glimpse of the knowledge a visual designer or webdesigner should possess on color. Next week I'll continue these summer-blogs by diving into typography. Be sure to get back, because I will use Comic Sans for the article. Yes I will.
Thanks for reading!
Corné
This series is intended to stop designers for a single moment to realize we can do better. Visual Design is so impressive and so valuable to every project - that you need to get the basics right.
Visual Webdesign
Color
Emotion
Colors are able to represent an emotion or a feeling. Just imagine the traffic sign next time you drive your car. Red is stop, green is go. Supermarkets use special lighting to make the products look good. Meat-companies sometimes add a supplement to color your meat - otherwise you won't trust its color. Color is something you often don't notice, but its always there.
A webdesigner will use knowledge of colors. You would be surprised how often a corporate styleguide has been made for print and the online designer has to translate it. Good translation often means you have to change the color. Not only do you translate it from CMYK to RGB, 9 out of 10 times you have to adjust the color as well!
Know your colors and know when to use them. Make sure you use them to get your message across. Be communicative with your visitor through color. The easiest example are the correct and error messages as shown above. It isn't a coincidence that the v is green and the X is in a red dot.
Recognition
Colors can help giving your viewer an instant recognition. A few years ago I worked on McDonalds projects whilst they were making a transition from the yellow M on red to the more natural-looking yellow M on green. I thought that was an amazing transition. Because to be honest it doesn't matter if you see the yellow M on red, green or even stand-alone - it will always be McDonalds. If they would have changed the color of the M, that would have been something different. I don't think people would still connect to it as well.
When a company is consistent in the use of colors it creates recognition. The image above shows the yellow arches of McDonalds. For the international visitors of this blog - the left image is the shape of the logo of a Dutch supermarket called Albert Heijn. They use the blue (and shape) very consistent thus creating a strong brand. The webdesigner has to make an inventory of the brand colors and use them consistently.
Branding
So, can companies claim colors? Yes, they can! The image above already showed how McDonalds and Albert Heijn claimed colors. I always use the image below to indicate to people how important colors are to a brand. I take two brands, two competitors in the same market and swap their colors. You could do something similar to FedEx and UPS for instance.
I've started to use Heineken for this years ago when I wrote some courses for the LOI. Heineken is Holland's most famous beer-brand. Heineken is very consistent in its communication. Green is Heineken. Watch any commercial, any poster, any other communication: you'll feel the green. Bavaria is another Dutch beer using blue as a color. So I always show people the image below to show how important colors really are to a brand.
Here you can see the Bavaria logo in the Heineken colors and vice versa. Thats how important colors are to a brand. Webdesigners need to be aware of this. Really get to know the brand you work for. Your client wants you to understand them. One way of showing it as a webdesigner is to know the brand.
When I create concepts for clients or am involved in pitches you can almost always expect me to make a presentation not in the design of the agency - but in the design of the client. I noticed it helps them to trust you as you've already shown you know their brand.
WCAG
As of January 1st 2017 there's an UN resolution that specifies equal rights for people with a restriction (for instance color-blindness). This means your website has to conform to the Web Content Accessibility Guidelines, short: WCAG. We're currently at version 2.0 and that'll go to 3.0 in the not too distant future - because 2.0 is not device-minded enough in my opinion, there's too much focus on desktop websites.
Anyway, for webdesigners that, amongst others, means your designs should have enough contrast in color. I've been working following the WCAG for the past two or three years now and its not always easy. You'll have to combine the brand colors (often not WCAG safe), rules of WCAG and still make your design awesome. When it does work that's brilliant though!
Luckily there are many contrast checks out there. You can use Contrastchecker, Contrast Ratio or my personal favourite Contrast-A. If you're using FireFox there's an Add-on you could install.
Summary
This blog-post could have gone on for a few more pages to be honest. I'm only touching the basics of color. I could have gone on about the meaning of various colors or how to translate from CMYK to RGB and so much more.
I just wanted to show a glimpse of the knowledge a visual designer or webdesigner should possess on color. Next week I'll continue these summer-blogs by diving into typography. Be sure to get back, because I will use Comic Sans for the article. Yes I will.
Thanks for reading!
Corné
Reacties
Een reactie posten