Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design...

57
Colors Bob-Antoine MENELAS, Ph. D.

Transcript of Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design...

Page 1: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Colors

Bob-Antoine MENELAS, Ph. D.

Page 2: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Outline•  Introduction •   Power of colors •  Color proportion •  Accent •  Working with colors •  Primary, Secondary, tertiary colors •  Cool and warm colors •  Tints, shades and tons •  Choosing colors for design •  Conclusion

Page 3: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Introduction•  What is the most decisive element on a website?

You might think it is content, and right you are. •  Though, there are many circumstances affecting on

how this content is perceived by user and if it is eye-catching at all.

•  Firstly, you need to get readers’ attention and then you can leave everything on the content.

•  Colors play the ultimate role in design and in how a visitor feels on a website. You can manipulate design colors and so reach dreamlike success.

Page 4: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

First Impression is Irrevocable

•  Fancy cover draws attention, excites, get users interested in the website.

•  First impression is formed within maximum 7 seconds after a user opens a website.

•  It is a big achievement to manage this and so ensure yourself more readers and presumably higher conversion rates.

•  What helps users to form a quick impression of the site? o  It is the home page appeal. o  It includes all details, like Header design, background color,

content arrangement, and colors.

Page 5: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Outline•  Introduction •  Power of colors •  Color proportion •  Accent •  Working with colors •  Primary, Secondary, tertiary colors •  Cool and warm colors •  Tints, shades and tons •  Choosing colors for design •  Conclusion

Page 6: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Power of Color Psychology

•  This gives you a brief overview of the meanings that basic colors have.

•  This info is useful if you are going to mix colors for your design.

Page 7: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

White•  White is a color of perfection. •  It symbolizes purity, as a for example a bride’s

wedding dress. •  Besides, this is the color of cleanliness and bright

light. •  Blank board or sheet of paper is white, where this

color can be a symbol of creativity and innovation. •  White is a neutral color that won’t spoil the website

design.

Page 8: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Black•  Black is a dark color yet it has many good

meanings: intelligence, power, stability, professionalism.

•  It is the color of luxury and sophistication. •  This is another classic shade together with white,

and it can be very useful when used for web design.

Page 9: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Gray•  Gray is the most neutral color and it is rather calm. •  Color gray means stability and daily routine, it is the

symbol of casual things. •  Quantity of gray influences on the website

perception: o  too much gray can look a bit boring and

monatomic o a slight effect of gray will dilute the color scheme

and make bright elements more visible.

Page 10: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Brown•  is the color of Earth, and maybe that is the reason

why it is the color of mourning in India. •  Nevertheless, this color means stability and

friendship in Western Hemisphere. •  Moreover, material wealth is what people associate

brown with.

Page 11: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Orange•  Orange is one of the most, if not the most, positive

colors generally. •  Orange is the color of social stimulation, and so far

as it is both physically and mentally stimulating, it gets people to consideration and conversation.

•  It is awesome if your design and color scheme allows you to use a bit of orange.

•  It puts users in a good mood.

Page 12: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Yellow•  Yellow is the color of sun, so you don’t need to be

explained how positive it is. •  Yellow inspires to new thoughts and original ideas. •  If your website aims at teaching users or make them

take actions, you will need to make yellow your accent color.

•  It usually doesn’t perform as the dominant color, because it is so bright that can blind readers.

Page 13: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Red•  Red is hot, passionate, provocative, but it is also

catchy, attractive and fashionable. •  Red is the color of ambitions and adventures. •  This color stimulates to get risks and take actions. •  CTA buttons done in red are winning but only when

the primary color blends with them well. o  A call to action (CTA) is a marketing term that refers to the next step a

marketer wants its audience or reader to take.

Page 14: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Green•  Green is the color of nature surrounding people. •  Balance is what this color means in psychology. •  Green is good to be used on business sites, because

it means money and prosperity.

Page 15: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Blue•  Blue is the color we see every day above our

heads. •  This color brings a feel of trust, realism, and peace. •  Religious theme can make benefit from using this

color both as primary and accent.

Page 16: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Purple•  Purple is associated with imagination and dreams. •  It is the one to symbolize wisdom, respect, royalty

and wealth. •  Purple is powerful color with the leadership

meaning.

Page 17: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Outline•  Introduction •   Power of colors •  Color proportion •  Accent •  Working with colors •  Primary, Secondary, tertiary colors •  Cool and warm colors •  Tints, shades and tons •  Choosing colors for design •  Conclusion

Page 18: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Color Proportion•  Proportion of colors is a crucial point in design •  The ideal model is 60-30-10, where 60% of all website

design go to a dominant color, 30% of web space can be filled with the subdominant color(s), and 10% should be accentuated with an extra color.

•  You don’t need to stick to this pattern, if you need more colors on your site. o  You can add a few of subdominant, i.e. secondary colors,

but keep them all just 30% of the whole space. o  Use tint and shade of the same color.

Page 19: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Outline•  Introduction •   Power of colors •  Color proportion •  Accent •  Working with colors •  Primary, Secondary, tertiary colors •  Cool and warm colors •  Tints, shades and tons •  Choosing colors for design •  Conclusion

Page 20: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Accent colorso  Accent colors are called so because they highlight certain details.

•  In a web site, elements that you may want to emphasize are: o  CTA o  Navigation button o  Scroll buttons o  Promotional elements

Page 21: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

CTA•  call to action. •  Action is what you want to get from the user, so

lead them to the way they need to act – make CTA buttons flaring among other content.

Page 22: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Navigation menu•  Usually navigation menu has a top position on a

website to make it jumping on visitors right with a site opening.

•  Colors can intensify the menu exposure. •  And you can’t use the primary color for this,

because it will blend with the biggest part of the page, so accent (secondary) color appears to be very useful here.

Page 23: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Contact info•  Many users surf the web for a needed website just

because they need to get a phone number of the company/person/restaurant.

•  That is why, it is reasonable to place contact info in the Header and highlight it with a bright accent color.

•  It does not exclude the power of typography, which means that this info should be typed with a bigger font.

Page 24: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Scroll buttons•  Whether you have a background photo gallery with

arrows to flip through, or your website navigation is scrollable, you need to prioritize these scroll buttons.

•  So far, as you can’t make them half-size of the website page, you need to lay stress on them within color.

•  You make it easier for users to experience you webpage by doing so.

Page 25: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Promotional elements•  Promotional elements are different stuffs you use to

get your product or content advertised. •  For example, these are social media follow/sharing

buttons: o  find such designs of these to correlate with your

color scheme and repeat your accent color.

Page 26: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Outline•  Introduction •   Power of colors •  Color proportion •  Accent •  Working with colors •  Primary, Secondary, tertiary colors •  Cool and warm colors •  Tints, shades and tons •  Choosing colors for design •  Conclusion

Page 27: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Working with colors

•  There is three ways you can vary colors to increase their visibility:

•  Hue control the overall tone of the color from red to violet across the spectrum

•  Saturation control the intensity of the color from its richest version to a shade of gray

•  Brightness control to relative Chroma of the color goes from black to white with the pure color as the middle.

Page 28: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Outline•  Introduction •   Power of colors •  Color proportion •  Accent •  Working with colors •  Primary, Secondary, tertiary colors •  Cool and warm colors •  Tints, shades and tons •  Choosing colors for design •  Conclusion

Page 29: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Primary Colors•  Yellow, Red and Blue, are at the top of any color

structure. •  That is because you can think of the three

Primaries as the original parents of all the future generations of colors.

•  Typically you want to avoid using a pure primary primary color as they can often be too intense on their own

•  However a primary color combination can work if you vary the brightness or saturation of the color

Page 30: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Secondary colors•  Are made by mixing two primary colors •  For example :

o green is made by combining blue and yellow o  blue and red combined to make purple.

•  A secondary color combination uses all three secondary color options: Green Orange and Purple

Page 31: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Tertiary colors •  Color Theory teaches us that each Tertiary color is

the result of one Primary Color mixed with one of its nearest

•  These create the most appealing color combination being not too intense or too dark.

•  However rarely would you use all of the tertiary colors and one design.

•  More likely you’ll choose a small subset of colors on the warm or on the cool side of the spectrum.

Page 32: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Outline•  Introduction •   Power of colors •  Color proportion •  Accent •  Working with colors •  Primary, Secondary, tertiary colors •  Cool and warm colors •  Tints, shades and tons •  Choosing colors for design •  Conclusion

Page 33: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Warm and cool colors•  White, black and gray are considered to be neutral.

Page 34: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Warm colors •  represent the right side of the color wheel. •  Range from yellow to magenta •  In a design warm colors tend to pop •  they worked well for accent colors or calls to action

Page 35: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Cool colors•  are represented on the left side of the color wheel •  These range from green to violet •  tend to be less activating than warm colors •  that makes them a good choice for secondary

accent o  like links or icons that don’t as they do not require much user attention

Page 36: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

•  Cool colors also tend to have a calming effect •  which makes them useful for sites that are more

focused on content •  making them great for small rooms that you want to

appear larger. If you have a tiny bedroom or powder room that you want to enlarge visually,

Page 37: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Warm vs cool colors

Page 38: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Outline•  Introduction •   Power of colors •  Color proportion •  Accent •  Working with colors •  Primary, Secondary, tertiary colors •  Cool and warm colors •  Tints, shades and tons •  Choosing colors for design •  Conclusion

Page 39: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Tints, Shades, and Tones•  If a color is made lighter by adding white, the result

is called a tint. •  If black is added, the darker version is called a

shade. •  And if gray is added, the result is a different tone.

Page 40: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Outline•  Introduction •   Power of colors •  Color proportion •  Accent •  Working with colors •  Primary, Secondary, tertiary colors •  Cool and warm colors •  Tints, shades and tons •  Choosing colors for design •  Conclusion

Page 41: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Choosing colors for design

•  Here we will see some basic techniques for combining colors o We see basic color chords based on the color

wheel. o Analogous o Complementary o  Triad o  Split-Complementary o  Rectangle (tetradic) o  Square

Page 42: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Analogous •  Analogous color schemes use colors that are next to

each other on the color wheel. •  They usually match well and create serene and

comfortable designs. •  Analogous color schemes are often found in nature and

are harmonious and pleasing to the eye. •  Make sure you have enough contrast when choosing an

analogous color scheme. •  Choose one color to dominate, a second to support.

The third color is used (along with black, white or gray) as an accent.

• 

Page 43: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Complementary •  Colors that are opposite each other on the color

wheel are considered to be complementary colors (example: red and green).

•  The high contrast of complementary colors creates a vibrant look especially when used at full saturation. This color scheme must be managed well so it is not jarring.

•  Complementary colors are tricky to use in large doses, but work well when you want something to stand out.

•  Complementary colors are really bad for text.

Page 44: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Triad •  A triadic color scheme uses colors that are evenly

spaced around the color wheel. •  Triadic color harmonies tend to be quite vibrant,

even if you use pale or unsaturated versions of your hues.

•  To use a triadic harmony successfully, the colors should be carefully balanced - let one color dominate and use the two others for accent.

Page 45: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Split-Complementary•  The split-complementary color scheme is a variation

of the complementary color scheme. In addition to the base color, it uses the two colors adjacent to its complement.

•  This color scheme has the same strong visual contrast as the complementary color scheme, but has less tension.

•  The split-complimentary color scheme is often a good choice for beginners, because it is difficult to mess up.

Page 46: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Rectangle (tetradic)•  The rectangle or tetradic color scheme uses four

colors arranged into two complementary pairs. •  This rich color scheme offers plenty of possibilities for

variation. •  The tetradic color scheme works best if you let one

color be dominant. •  You should also pay attention to the balance

between warm and cool colors in your design.

Page 47: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Square •  The square color scheme is similar to the rectangle,

but with all four colors spaced evenly around the color circle.

•  The square color scheme works best if you let one color be dominant.

•  You should also pay attention to the balance between warm and cool colors in your design.

Page 48: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Accent for Monochromatic Color

•  Monochromatic color scheme means a usage of one color, yet different shades of it.

•  It is impossible to stay with one tint for the whole design, or you make your visitors bored and feel asleep.

•  Accent color should be the brightest shade you include in your color palette.

•  For example, you design your site in blue shades: you have blue-gray, sky blue, medium blue and tiffany blue. o An accent tone, would be medium blue, as it is

the deepest and brightest one in the row. o  If you pick orange color combo, then you can

make brown and apricot tones to be dominant and subdominant, respectively; bright orange will serve for accents.

Page 49: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Outline•  Introduction •   Power of colors •  Color proportion •  Accent •  Working with colors •  Primary, Secondary, tertiary colors •  Cool and warm colors •  Tints, shades and tons •  Choosing colors for design •  Examples

Page 50: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered

Examples•  Blue Shades •  https://ghost.org/?utm_source=roon.io&utm_medium=redirect&utm_campaign=ghost •  Black and White Website with Blue Accent Color •  http://nycfcinternal.dev.husani.com/ •  Blue and White Website with Red Color for Accents •  http://www.socialclout.com/ •  Website with Complex Color Combination •  http://www.maispastel.com.br/ •  Black Monochromatic Website Design with Yellow Accents •  http://www.motocms.com/html-templates/moto-cms-html-templates-type/49603.html •  Colorful Design and Brigh Accents •  http://vizicities.com/ •  Website with Blue-green Accent Shade •  http://www.swathealth.com/ •  Pastel Design and Red CTA •  http://format.com/ •  Website with Green Color to Make Accents •  https://www.geckoboard.com/

Page 51: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered
Page 52: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered
Page 53: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered
Page 54: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered
Page 55: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered
Page 56: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered
Page 57: Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design • Conclusion . Warm and cool colors • White, black and gray are considered