Sometimes us web designers get bogged down in code and forget about the graphic design aspect. A friend of mine over at Handglovery posts tips and tricks about Creative Suite applications such as Abodbe Illustrator, InDesign and Photoshop. Check out her blog!
Logos have such a significant impact on a brands visual identity (see my post on visual identity). However, it is important then when using your logo for various promotions and campaigns, the logo can be adapted to suit the design. This doesn’t mean going and redesigning the logo and companies create guidelines around what you can change and what you can’t.
One of the finest examples I have seen of this is the I LOVE NEW YORK logo. In order to stop designers from reinventing the wheel, they established a set of logos that can be used in various circumstances.
This set allows designers to have a creative and unique implementation of the logo and comply to I LOVE NEW YORK’s style guide.
Within their style guide, they also have a ‘Logo usage don’ts’ section with clearly outlines what not to do with their logo, which are as follows:
Visual identity represents a product, service or organisation in a unique way. Visual branding is displayed by a number of components such as colour, typefaces, symbols, spacing and so on. A visual identity is generally associated with a logo and a name, however, these are commonly combined as one thing. For example, Facebook is the name, but the logo is the ‘f’ component of the name.
Visual identity sometimes becomes complex is large organisations where they have subsections of the company. They might overcome this hurdle by having unique colour palettes for the subsections and various combinations of the same logo.
Visual identity not only effects any printed material for a product, service or organisation, but more importantly, their only presence. It is important to establish a style guide for the visual identity of a product and document all components involved that create it. This ensures wherever the identity is published, it is consistent.
A good example where visual identity is applied well is Twitter. The name uses the metaphor of a bird ‘tweeting’ for the general concept of the site. This is reflected in the logo, the function of the site (tweeting different things throughout the day) and also can come down to the old saying “a little birdy told me so”.
Twitter has kept colour to a minimum, blue and white, and the bird logo does not have any gradients or great detail. This design ensures that it is easily rendered across all devices and browsers and is also suitable for print where necessary.
The connection with the name and the symbol helps users become quickly familiar with their visual identity and therefore their site is remembered, and easily accessed.
Lists to-do is an iOS application that helps you organise tasks, lists and reminders. This type of app is found on many peoples phones. In order to be competitive and stand out from the crowd, the visual identity of the application must have a memorable name and meaningful and unique logo. ‘Lists to do’ is not a memorable and catchy name and would be hard for the user to distinguish it from its competitors. Their logo is a simple tick, which is hard for the user to understand its meaning and is similar to many of the applications competitors. This is an example of where the visual identity may be affecting the products ability to sell and compete in a high demand market.
Colour on the web is vital, you need colour. It helps create an identity for your web presence, it helps you be recognized, it aids when presenting ideas, it creates visual cues for users… The list goes on. Colour is important!
When you see this colour, what do you think of? If it’s not Facebook, well done! But for most of us who spend hours and hours on Facebook, this is what this colour makes recognize. Facebook uses this blue everywhere on their site, it’s their visual identity.
What about this one? Twitter! I think you get the point. Using the wrong colour can also impair your visual identity. If you wanted to create a new social media site and used one of these two colours, you wouldn’t stand out. Research your competitors and try using something unique.
Now that I have discussed the importance of colour, we need to ask the question, how do we choose what colour to use? What do colours MEAN.
Let’s talk green. Green is often associated with the environment, nature and ecology. If you are designing a logo for an environmental law firm, you want to use a colour that portrays their message and purpose. Just because you think pink is a really awesome colour, it doesn’t mean it is fit for purpose in every case. It is important for users to be able to relate to an organisations logo, and understand the message they are trying to send. Using green for an environmental law firm will ensure users see the law firm as an eco-friendly workplace. In saying that, you don’t want to go to another law firm and use their colour palette. Choose appropriate colours, but always try and have that creative touch. This is what will make you stand out.
But what if I can’t see colour very well? Did you know that up to 10% of men are colour blind? Can you imagine how frustrating it would be if you were browsing the web and you could hardly read a website because of the colours chosen? Or imagine if you were visually impaired and trying to read something with low colour contrast? It would be awful, frustrating and most of the time, you would just leave the site.
The Web Content Accessibility Guidelines version 2 (WCAG 2.0) states that the visual presentation of text and images of text has a contrast ratio of at least 4.5:1. To test for this, you can simply download the free Colour Contrast Analyser from Vision Australia. All the instructions are on the site and it is so easy to do!
So if you haven’t figured out by now, I love colour, especially when it is used right. I even have these awesome hex colour leggings from Black Milk Clothing! One of my other loves… But I will just leave you with this for today.
P.S. To read more on colour, see colormatters.com. I have never found a site better for learning about colour!
.png)
