Use of colors in Web design Nida Aslam, Front End Designer, Incepio
Why Colors are Important?• Over 80% of visual information is related to color.• Colors make us feel pleasure or disapproval, hot or cold, to be attracted or repelled, our appetite stimulated or suppressed?
Why Colors are Important?• COLOR is an important element of design that is used to create ideas, convey messages, invoke feelings, and accentuate areas of interest.• It affects the mood of viewers, Website designers should treat the association of color as seriously as the design of graphics and layout
The color wheel• The color wheel allows you to pick the colors that are harmonious together.• The wheel consists of 6 basic colors: red, orange, yellow, green, blue and purple. In addition to the basic colors, we have extra colors (mixes of the basic).
The color groups• Colors on the color wheel are can be separated into groups which are: • Primary Colors • Secondary colors • Tertiary colors • Complementary colors • Analogous colors
The color groups• Primary Colors : • There are three primary colors: • Red (#ff0000 in HTML or #f00 in CSS), • Yellow (#ffff00 in HTML or #ff0 in CSS) and • Blue (#0000ff in HTML or #00f in CSS). • We cannot get them by mixing any other color. The other extra colors can be formed by combining of these three colors.
The color groups• Secondary colors • Mix the primary colors together, and you get the secondary colors. There are also three of them: • Orange (#ff9900 in HTML or #f90 in CSS), Green (#00ff00 in HTML or #0f0 in CSS) and Purple (#ff00ff in HTML or #f0f in CSS
The color groups• Tertiary colors • To get one of tertiary colors you need to mix one primary color and one secondary color together. • The opportunities for tertiary colors are endless
The color groups• Complementary colors • Complementary colors are the ones that are located directly across each other on the color wheel: red and green, blue and orange, purple and yellow. • In combination with each other they compose a striking contrast. Such color combinations are usually used for standing out some elements on the website
The color groups• Analogous colors • These colors are located next to each other on the color wheel. • They usually look extremely good together. • Use such color combinations when you need your visitors to feel comfortable while looking at your website pages.
Color Groups Based on Emotions• There are color groups that are associated with emotions: warm, cool and neutral.
Red• Is mostly associated with boldness, excitement and desire. Red is the color of love, strength, power, energy, leadership and excitement.• It is a strong color, and you should be aware of some its negative associations, i.e. danger, alarms, traffic lights, etc.
Blue• Means patience, peace, tranquility, trustworthiness, love, stability.• It is one of the most beloved colors in web design.• It is associated with stability and depth, professionalism, trust and honor.
Yellow• Is the color that mostly associated with liveliness.• It is energetic and gives the feeling of happiness.• Also, it associates with curiosity, amusement, joy, intelligence, brightness, caution, etc.
Orange• Means cheerfulness and creativity.• It can be associated with friendliness, confidence, playfulness, courage, steadfastness, etc.
Purple• Traditionally associates with power, nobility and wealth.• Wisdom, royalty, independence, nobility, luxury, ambition, dignity, magic and mystery.
Green• Is the color of harmony, nature, healing, life, food and health.• It symbolizes growth, hope, freshness.• In countries with green money such as the U.S. it evokes thoughts and feelings of financial wealth
Brown• Is the color of relaxation and confidence. Brown means earthiness, nature, durability, tribal, comfort, reliability, etc.• It can be thought of sophisticated, solid and conventional.
Grey• Gives the sense of seriousness, conservatism and traditionalism. It can provoke the feeling purity and innocence.• It can be associated with security, reliability, intelligence, modesty, dignity, maturity, solid, practical, old age, sadness, quality, boring, practicality, professional, durability, quiet, gloominess.
Pink• Expresses tenderness, romance, femininity, truth, passivity, good will, emotional healing, care, peace, calming, affection, emotional maturity, nurturing, sweet tasting, sweet smelling, ethereal, delicacy, etc.
Black• Is a stylish and elegant color associated with power, sophistication, formality, health, etc. Black is an excellent technical color and helps to add some mystery to your design.• If used in background, it can enhance perspective and depth.• Black is great to use for art and photography websites to help other colors to vibrate.
White• White is associated with purity, simplicity, fresh, goodness, innocence easy, cleanliness, etc.• This color is great to use for a background or accent color, because it highlights other colors.
Nikehttp://www.nike.com/Nike changes their site often, but it isusually dark with mostly black and greyhues.The black shows the power in theirproduct, giving the impression that theysell quality products to sporty people.
White househttp://www.whitehouse.gov/The White House website is mostly whiteand light grey with some blue and redaccents. The white symbolizes hope andfreedom, showing a value for safety andpurity. The red and blue are of course theother USA colors, but the blue showsstability and peace, while the red showspassion and energy.
Amazonhttp://www.amazon.com/Amazon’s site is mostly white, which is thebest color to use for contrast andreadability. It also shows cleanliness andhelps users navigate the site freely. Thereare orange and blue accents to help peoplefeel at ease when on the site, as well asexcited and hopeful to find their perfectpurchase.
Verizonhttp://www22.verizon.com/Verizon’s main corporate branding color isred, which is used throughout the site. Thishelps stimulate the excitement of users,showing a company that sells an excitingand fast-paced product. The whitebackground is used similarly to Amazon,helping users navigate the site bydisplaying a clean and orderly site.
Best Buyhttp://www.bestbuy.com/Best Buy’s site showcases dark blue hues,showing their stability and power in theelectronic market. Buyers are making largepurchases from Best Buy and need to feelsecure and peaceful on their site. Theyellow emits happiness and helps peoplefeel excited and joyful while making theirpurchases.
Whole foodhttp://www.wholefoodsmarket.com/The main color used in Whole Foods corporatebranding, as well as their website, is green.Whole Foods sells healthy and organic food for apremium price. The green in their site designdoes well to show their healthful and pure valuesas well as their nature-loving products. They alsouse some pale yellow accents that are verycomplimentary to the green, and it gives a joyfulvalue to the site.
RGB (Red, Green, Blue)• For digital/web use• In Vector (.eps and .ai) and in JPEG, GIF, PNG format
RGB (Red, Green, Blue)• RGB is a device-dependent color model.• Different devices detect or reproduce a given RGB value differently• The color elements (such as phosphors or dyes) and their response to the individual R, G, and B levels vary from manufacturer to manufacturer, or even in the same device over time. Thus an RGB value does not define the same color across devices
CMYK (Cyan, Magenta, Yellow,Black)• For process 4/c printing (e.g. business card, brochure, letterhead)• In vector format (.eps or .ai)• Coated (C) format for printing on coated paper• Uncoated (UC) format for printing on uncoated paper
CMYK (Cyan, Magenta, Yellow,Black)• Note: The color you see on screen will not be the same as print. Do you know why?• A computer monitor mixes shades of red, green, and blue to create color pictures. A CMYK printer instead uses light-absorbing cyan, magenta and yellow inks, whose colors are mixed using dithering, half toning, or some other optical technique.
Pantone• Pantone is a standardized color matching system.• By standardizing the colors, different manufacturers in different locations can all reference a Pantone numbered color, making sure colors match without direct contact with one another.
Pantone• For spot color printing (e.g. business card, brochure, letterhead)• Standard language for color of identification• In vector format (.eps or .ai)• Coated (C) format for printing on coated paper• Uncoated (UC) format for printing on uncoated paper
Choosing the right colors• Colors give sites meaning without having to use descriptive words. They create a lot of impact.• As seen in many of the corporate sites, they create emotions and values that help show users what the company is about and what kind of products they are selling.
Choosing the right colors• Pairing colors can help change the meaning of a site altogether.• Pair a soft blue site that creates calming qualities with a bright orange, and you could change your site to be more exciting and joyful.
Choosing the right colors• When choosing the colors for your site, you need to first (as always) think of your audience. Is it a global audience? Is it primarily Western? Eastern? Are they older? Younger? Male? Female?• All of these things, and more can affect the color choices for your site
Choosing the right colors• Determine the following factors:• Age differences• Class Differences• Gender Differences• Trends
Choosing the right colors• Age differences • Young children tend to prefer brighter, more solid colors, while adults tend to prefer more subdued colors. If youre writing to an audience of children and youre using muted pastels and shades of grey, their parents might like it, but the kids will be long gone before the page finishes loading.
Choosing the right colors• Class differences • Marketing research in the United States has shown that working class people tend to prefer colors that you can name: like blue, red, green, etc. • While more highly educated classes tend to prefer colors that are more obscure: taupe, azure, mauve, etc.
Choosing the right colors• Gender differences • In many cultures, men tend to prefer cooler colors (blues and greens) while women tend to prefer warmer colors (reds and oranges).
Choosing the right colors• Trends • Colors, like everything else in design, go through ins and outs in popularity. • Black Web pages were all the rage a few years ago, and now you hardly see it at all.
Choosing the right colors• Trends • Colors also tend towards seasonality, in other words, the designs reflect the season they were built in: winter blacks, whites, and greys; spring greens and bright colors; summer yellows; fall browns and golds.
Tips: Choosing the right colorsTip1.If you wish your textcontent to be easilyreadable, choosecontrasting colors. It isimportant to makecontrast between the textand background.
Tips: Choosing the right colorsTip2.Use less colors. Don’tmake your website to looklike a circus. For the bestimpact you can use onecolor on headlines andanother color (thecomplementary one) forthe text.
Tips: Choosing the right colorsTip3.Use enough colors. Useless, but enough. If youuse too little colors, yourisk to make your websiteboring. Or use little colorsbut just use other meansto underline the elementsin that case.
Tips: Choosing the right colorsTip4.If you need to attract thevisitor’s eye, use intensecolors. But be careful, as Ifthe color scheme is toointense, it attracts the eyein too many directions,and the techniques willlose its effectiveness.
Tips: Choosing the right colorsTip5.Derive inspiration fromnature: you can find reallygreat complementarycolor schemes.
Thanks for watchingand listeningTwitter: @nidaaslamabout.me/nidaaslam