Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design...
Transcript of Colors - UQAC · • Cool and warm colors • Tints, shades and tons • Choosing colors for design...
Colors
Bob-Antoine MENELAS, Ph. D.
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
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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
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
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.
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.
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.
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.
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.
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
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.
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
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
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
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.
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
Warm and cool colors• White, black and gray are considered to be neutral.
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
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
• 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,
Warm vs cool colors
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
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.
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
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
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.
•
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.
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.
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.
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.
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.
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.
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
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/