Webdesigntuts+ |
| Selecting Your Own Color Scheme Posted: 05 Aug 2013 05:42 AM PDT  By now you should have a good idea of what color is, what each of the colors mean and have a good understanding of the different types of color scheme available to you. However, knowing all of that doesn’t help if you have no idea where to get started, or how to put that information into action. The Impact of Color in Your ProjectsColor is one of those things that seems really simple – but can be really difficult to get just right. And, as it’s one of the really visual, focal parts to any design, then it’s so, so easy to notice when something doesn’t quite sit right. If such a major part of your design doesn’t feel right, or represent your company, service or brand well, then it can make all the difference between users that stay and explore and those that disappear. Owing to this, when you’re choosing a color scheme you need to be really aware of the impact that color can have in your design – both good and bad. It’s absolutely fine to roll with your own color schemes and stray away from the default types (such as complementary), but when you’re just starting out in working with creating your own color schemes you’re probably better sticking with the main color scheme types. That way, it makes it more difficult – though not impossible – to take a wrong step and end up with a bad color scheme. Choosing Suitable Color SchemesFirst up, we’ll look at how you can start choosing a suitable color scheme for your project.  What you need to be thinking about here is what colors are suited to your brand, company or industry on the whole. There’s a fantastic infographic over at Column Five Media which talks about the colors used in the top 100 brands around the world.  Not only is this really interesting, as we get a look at what colors are used in some top brands and companies around the world, but it gives us a fascinating insight into which colors work best – or are more often used – in particular industries. As you can see in the infographic, all of the main colors available to you are suited for different industries – and the colors that may be suitable all come down to the general interpreted meanings that we discussed in the previous articles. What I love to do is create mind-maps exploring the different tones and ideas that I have for a project – and look at the kind of message that the brand might want to project online. Then, compare this mind-map of ideas to the color meanings and see which match up the most – and that can help you to see which colors might be best suited for the project or brand. How Many Colors Should I Use?Sometimes, this question really is a matter of preference. However, it’s worth nothing that in the Column Five Media infographic, out of the top 100 brands only 5% chose to use more than two colors in their main color schemes. Note: In only fairly recent times, when printing budgets were more relevant than online exposure, the amount of process colors used in brand printed material was a very real consideration. That said, use as many colors as you feel is suitable – in some instances, you could use color to differentiate between sections on a website. In that sort of instance you may have up to four or five different colors to include in your color scheme, which can match up to each of the sections. Although the ultimate choice is down to you, I would recommend that you at least work with two or three colors in your main color scheme – not including a neutral light or dark color for text or backgrounds. Having two or three colors in your color scheme simply affords you the chance to experiment and offer more of a contrast between areas than if you were to work with varying shades and tints of one color. Choosing Color Schemes From PhotosHave you ever looked at a photo and thought how magical or breathtaking the colors appeared? Sometimes, these beautiful colors can be translated into a usable color scheme that you can put into action. All it takes to choose a great color scheme from a photo is a little practice and a lot of patience – for if you’re a perfectionist like me, then you’ll spend a while tweaking the colors until they’re just right. Choosing Your PhotoThe key to choosing a good photo to work with is to find one that has variety and one that you perhaps find quite striking. It doesn’t matter whether your picture is more vintage or monochromatic in style (i.e. with a similar hue or color running through the whole image) or whether it’s more vibrant and has many colors – you can still find a usable color scheme somewhere within it. Once you have a photo – or a few, if you want to try creating several schemes at once – open it up in your favourite graphics program and just go crazy. I have a template that I like to use in Photoshop (containing just a few small rectangular shapes) as a starting point for where I put the colors I choose. When choosing a color scheme from a photo, I try to stick to one color scheme type (such as monochromatic or complementary) and then try to pick out colors that might match that style in the photo. So for example, I’ll look at the photo and try and see what colors stand out to me most – it doesn’t mean they’re bright, they may be muted or only a small part of the photo, but I will try and pick out the few colors that make the photo what it is to me.   Once I’ve started looking at the photo a little more, and I have more of an understanding of the style I’m after, I’ll continue to play around – simply with the eye picker tool – to see what colors work together best. It can be a case of choosing just one color as a focus, with two other colors that can be used as more of an accent. Then, start putting these colors into the template and move them around until you’re happy with the positioning and the hierarchy of the colors. I often also try to work with getting both a dark (near or almost black) and light (nearer white) color alongside the main focal colors that I can choose. This can then help with balancing out the colors and structure on a page, as well as providing possible text colors if none of your main colors in your scheme are suitable. Honestly, the main aim here is to just play around – sometimes the colors you come out with won’t be suitable and sometimes you won’t be able to find a decent color scheme in the photo – but make sure you experiment with the colors until you create a color scheme that feels more uniform and will create a good harmony in your design. Adobe Kuler iPhone AppIf you’re struggling with creating your own colors schemes from photos, Adobe have also recently released an iPhone app for Adobe Kuler, and with it comes a super neat way of choosing color schemes from photographs. You can switch to camera mode and choose from your existing photos or you can take a photo of something directly where you are.  What’s brilliant about the Adobe Kuler app is that it offers you a really innovative way of choosing colors. If you’re taking a photo directly from the Kuler app in the “Live” view then you’ll start to see little circles moving all over the photo that you can see. What’s happening here is that the app is constantly searching and picking out what it deems to be the most valuable colors in that photo as it stands, then putting them together into a little color scheme for you.  If you’re not confident about choosing your own color schemes from photos then using the Kuler app is a great way of helping you understand what makes a good color scheme from a photo. Feel free to take plenty of photos – with both fewer, more muted colors and many, bright and colorful colors – and use the Kuler app to really analyse why these color schemes work and why the app has picked them. Then, in time you can start to work on creating your own color schemes from photos and be more confident about the choices you then make. Further ReadingFor more detailed instructions on using the iOS Kuler app, take a look at Capture Colors With the Adobe Kuler App for the iPhone by Vectortuts+ editor Sharon Milne.  |
| Understanding the Qualities and Characteristics of Color Posted: 05 Aug 2013 05:21 AM PDT  Moving on from our previous article on defining and recognizing colors, let’s now explore the qualities and characteristics of colors. RedA part of the warmer color family, the primary color red is a strong, emotionally-intense color.  Naturally enhancing the metabolic rate in people, it has also been shown to increase respiration rates and blood pressure when people are exposed to it. It’s used in traffic systems a lot (think road signs and traffic lights) as red is a high-visibility color which has plenty of impact. Some associations of the color red include:
What is interesting about red is how it has two almost-direct opposite associations: love and war. Due to red being known as a high-impact color that often represents danger, it’s also associated with many memorable war images. However, red is known quite heavily for love and matters of the heart – with varying shades of red (from stronger, darker colors to lighter variations such as pink) being heavily associated with Valentine’s Day in Western culture. In other cultures, red has completely different meanings. In China, red is associated with both prosperity and happiness, as well as being a symbol of good luck. In India, red represents purity and is then often used as a color used in many weddings. However, in South Africa red is the color used most in mourning. When using red, it’s often wise use it more as an accent color than a focal color for the whole of a website. While in some situations it works well as the main focal color, most of the time using too much red in a design can cause feelings of irritation, agitation and even anger. However, using too little red can also create a feeling of cautiousness and manipulation. Owing to these two extremes, it can be quite difficult using red to build the right balance. However, using red as an accent color – particularly on features that you want to enhance or make particular note of, such as buttons or other elements that push a user to make a decision – can be quite effective. OrangeAnother color belonging to the warm family, orange is often seen as a bright, optimistic and uplifting color.  Both youthful and impulsive, orange often acts as a mental stimulant and is seen to be quite balancing. Some associations of the color orange include:
Orange is often seen associated with the third season in the yearly cycle: Autumn (or Fall). Due to the changing colors in the seasons, orange offers a warm transition from the brighter colors of summer before the harsher, cooler colors of Winter set in. Orange is also the main color associated with Halloween, which also takes places in the height of Autumn on October 31st. As well as the associations with nature, orange is seen as a color which evokes enthusiasm and spontaneity in people. A color that encourages adventure and risk-taking, orange (due to its citric associations) also acts as an appetite stimulant, so may be useful in website designs where food or the appetite of the user is relevant. And thinking about what we said earlier about a lot of the associations orange has with autumn and the transition between seasons – why not translate this into your designs, using orange as a color that offers transitions between two different areas of your design? When using orange, it’s definitely useful to think of your target market and audience. When young people are your target audience, orange seems to be a popular color. As well as this, orange can be used to get people talking or thinking. YellowThe last of the main warm colors, yellow is a bright, creative color.  Known for its ability to promote clear thinking and quick decision making, yellow is probably most associated with happiness, positive energy and sunshine. Some associations of the color yellow include:
Yellow, one of the three primary colors, is seen chiefly as a happiness-invoking, creative color and can therefore be used effectively to create designs that evoke feelings of happiness and clarity. A very energetic color, yellow also has a degree of activity that it can pass along in your designs. You can use yellow to create enthusiasm and enhance areas in your design that need action to be taken. In other cultures yellow has wildly different associations and meanings. In Egypt, yellow is widely used as the color for mourning and in the Middle Ages, yellow clothing was worn to signify those that had died. In India, yellow is a color that is often used by merchants. And in Japan, yellow is a symbol of courage and therefore has positive associations. When designing with yellow, you need to be aware that using too much yellow can sometimes introduce feelings of anxiety – due to it being such a bright, “fast-moving” color too much yellow can lead to an unbalanced feel for your website. Instead, try to introduce other colors alongside yellow and use yellow as a highlight on a page, to lend focus to the more important aspects of a design. However, due to the effects yellow has on a person (going back to the “fast-moving” sense it appears to offer), you can sometimes use yellow to your advantage – for example, yellow appears to induce quicker decision making and therefore having yellow buttons in e-commerce designs may work extremely well – as long as it is in fitting with the rest of your design. Due to yellow feeling quite unstable it wouldn’t be a good idea to use yellow in a website where you want to invoke a feeling of stability or security. It also seems that historically men perceive yellow to be a childish color, so it wouldn’t be a good color choice for men’s product websites – though it would be right at home when used for a younger audience. GreenBelonging to the cooler family of colors, green is a rejuvenating color and is often described as a natural peacemaker, due to its many associations with relaxing aspects of nature.  Some associations of the color green include:
A combination of blue and yellow, green offers the mental clarity and enthusiasm of yellow mixed with the more emotionally calm and stable blue. In nature, we see green around us all the time – in leaves, grass, flowers and much more. Because of this, a lot of the associations we have with the color green are related quite heavily to nature and similar themes such as rebirth and fertility. Green is often referred to as a color that offers a sense of stability and balance. It could therefore work well to use green in designs where you want to show how a product or service is reliable or safe to use. On the other side of the coin, green also has lots of associations with jealousy, envy, and possessiveness – so you need to be careful about how you use the colors and ensure you use green more to add balance to a website. Green has strong links with the recycling market, with green being used in the major recycling logos in the UK and Europe alone. Therefore, it makes sense to use green in designs that relate to recycling or any “green” product, service or company. In other cultures, green generally has good connotations. In Ireland, as well as appearing on the national flag, it’s a color that is heavily associated with St. Patrick’s Day. Green is also the color of the lucky four-leaf clover, which is probably the most well-known symbol of luck in the world. Green is the traditional color in Islam and is also mentioned in a good light a lot in the Quran, with many of those in Paradise described as wearing “green garments”. BlueThe coolest of all the main colors, blue is often seen as a very reliable and tranquil color, most likely due to the most obvious association of blue with the sea and the sky.  A conservative color, it is often used well in designs that represent cleanliness and an air of responsibility. Some associations of the color blue include:
The final of the primary colors (alongside red and yellow), blue is a stress-reducing color that is often used in designs for masculine and corporate audiences. Blue is a color that invokes the feeling of trust, honesty and security and therefore lends itself well in particular to designs for products, services or companies that want to evoke those feelings in their audiences. With its many associations with both the sky and the sea, blue also works well on designs that want to quite heavily promote those things. For example, if a product relates heavily to the sea (a surfing product, for example) then blue can be used to bring out those familiar feelings relating to the sea and help the audience relate to the product or website more. The same can be said for any colors that relate to actual, real things – such as anything in nature, like grass or flowers. Blue is also known to be an appetite suppressor, so it wouldn’t be a suitable color to use in designs that involve food in some way. You also need to be aware how using too much blue can be stifling and can almost seem old-fashioned, depending on the shades used. Some of the best times to use blue in your designs will be for websites that are focused on masculine audiences and also for corporate businesses. That isn’t to say you can’t use blue on other styles of design – don’t be afraid to experiment and have fun with using colors where you might not expect them. Like with the general associations, there are many different connotations that come with the color blue in different cultures as well. In the Western culture, there is the “something blue” tradition, often used in weddings where the bride is offered something blue (as well as the other traditional “something old” and “something new”) as a token of good luck in her new married life. However, in Iran, blue is the color that is used in mourning. Violet/PurpleThe last of the cooler color family, purple is seen as quite a mysterious color, usually representing ambition, royalty and power.  Some associations with the color purple include:
A good combination of both red and blue, purple is intriguing and has both the calming, tranquil effect of blue and the energy that red offers. Purple is often seen as a color of luxury and works well in designs that need to show that bit more of an extravagant edge to it. Unlike blues and greens, purple is a rare color to come across in nature. For example, purple flowers such as lilies, orchids and lavender are rare to come across but are very fragile and delicate, yet very precious and treated with great respect. Purple is a popular culture in many cultures, for many different reasons. In Thailand, purple is the color of mourning for widows whereas in Egypt, it is known widely as the favourite color of Cleopatra, who was the last pharaoh of Ancient Egypt. In many other cultures, purple is the traditional color worn by royalty or people with authority. And in the US, there is the “Purple Heart”, a significant US Military decoration awarded in the name of the President to those wounded or killed in battle. When using purple, you need to be careful of using it too much – while certain amounts can definitely promote a more majestic, extravagant or luxurious feel to your design too much purple can also irritate and has even been heard to aggravate depression in some people. It has been found that most children prefer the color purple to other colors, so it would likely be a really effective color to use in your designs that have a younger audience. Using purple in your designs can be used to boost imagination or creativity and lighter shades of purple also work really well in feminine designs. Color SchemesColor schemes are an arrangement of colors that, once put together, can be used in any form of design – including your designs on the web. It’s hard work to come up with a good color scheme – and it’s easy to notice when colors feel or seem “off” or not quite right. However, when you do make the effort to create a good and effective color scheme – and you put it to good use – this will make all the difference between a good design and one that is mediocre. There are a few main color schemes, including: monochromatic, analogous, complementary, split complementary, triadic and tetradic. Note: You might hear the next few terms used quite a bit when discussing color schemes. Here’s a handy little glossary to help you out if you need it:
MonochromaticMonochromatic color schemes use one hue (such as blue) and then use various tints or shades of that original color.  These are the easiest color schemes to create as it only involves the one hue – so you know that the few base colors you choose will work in harmony with one another. AnalogousAnalogous color schemes are created by choosing hues that are next to each other on the color wheel. So, for example, blue-green, green and yellow-green.  The easiest way to use an analogous color scheme is to choose one of the colors as the main, dominant color and then use the other two more sparsely, as accent colors to the first. ComplementaryComplementary color schemes are created by choosing two colors that are opposites on the color wheel – for example, red and green or purple and yellow. Because of these colors being exact opposites, they offer extremely high contrast and have a high impact.  Complementary color schemes can be hard to pull off for this reason and work better when you have elements of a design you want to stand out, rather than using them in fuller doses across the whole of a design. Split ComplementarySplit complementary color schemes are created by taking one color and then taking the two colors that are either side of what would be the first colors complementary.  For example, if your main color is purple, then your other two colors will be either side of the purple’s complementary color yellow – so yellow-green and yellow-orange. As this color scheme is quite close to the complementary color scheme, it is still going to have quite the impact when used, though it can feel a little more balanced and calmer than full-on complementary schemes. Again, when using a split complementary color scheme it is easier to use one of the colors as the main focus, with the other two colors being used as an accent. TriadicTriadic color schemes use three colors that are evenly spaced around the color wheel, for example purple, orange and green.  Using triadic color schemes means you usually end up with quite a bright and vibrant color scheme, though this can be toned down slightly by using varying shades and tints of the colors. Like with the previous color schemes, triadic colors schemes work best when letting one color have more of a focus, with the other two working as accent colors. TetradicTetradic color schemes work by pairing up two sets of complementary color schemes. It almost works by almost creating a rectangle around the color wheel. An example of a tetradic color scheme is red, green, blue and orange.  What’s great about the tetradic color scheme is that it offers a lot of variety when it comes to choosing the colors that you use, and may offer you more ideas when you’re designing your website. Again, though, like with all of the other color schemes a tetradic color scheme works best by allowing one of the colors to be the focus, with the rest being used as accent colors. ConclusionThat concludes our look at the characteristics of colors. In the next part of Design School for Developers, we’ll examine practical ways of choosing a color scheme.  |
| You are subscribed to email updates from Webdesigntuts+ To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No comments:
Post a Comment