Emotional Impact Of Color's In Web Design

Category: Education

Presentation Description

Each color has it's emotional connection the way we think and design.


By: buyhosting (15 month(s) ago)


By: hakufarm (27 month(s) ago)


Presentation Transcript


Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in someone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself.  Colors are divided into warm colors (reds, oranges, and yellows ) , cool colors (green, blues and purples) , and neutral colors ( black, white , gray and brighter accent colors ) . Warm colors are more stimulating, while cool ones feel more calming . Let’s start with …


WARM COLORS Red Orange Yellow #FE0000 R: 254 G: 0 B : 0 #FF7F00 R: 255 G: 127 B : 0 #FFD401 R: 255 G: 212 B : 1


RED (Primary Color ) The most stimulating color , red is used to catch attention and raise alarm . As an energizing color , and it be used to symbolize power and even youth, but this makes it ill-advised for sites striving for a relaxed feel. v The dark shades of red in this design give a powerful and elegant feel to the site.


Orange (Secondary Color ) Orange retains some of red’s energizing properties, but to a lesser degree , making a bit calmer. It’s commonly used to show cheerfulness and playfulness. v Orange is used here to give a friendly and inviting impression.


Yellow (Primary Color ) The impact of yellow varies with its vibrancy (light or dark shades ), but in general it is usually warming and energetic. Bright yellow is extremely stimulating, middle shades are more welcoming, and darker shades (such as gold) give an air of antiquity and timelessness. The bright yellow header and graphics used throughout this site give a sense of energy and positivity. v


COOL COLORS Green Dark Blue Purple #008001 R: 0 G: 128 B : 1 #343399 R: 52 G: 51 B : 153 # 81007F R: 129 G: 0 B : 127


Green (Secondary Color ) The bridge between warm and dark colors , green is a pleasing mix of energy and relaxation. It typically signifies positive growth, and in Westernculture represents money and environmental themes. v The extremely muted greens of this site give it a very down-to-earth and natural feeling.


Dark Blue (Primary Color ) Dark blue is still calming, but it tends to be more somber and reliable than light blue – a more down-to-earth color favored by companies known for professionalism. v This site combines a range of blues, which gives it a refreshing feeling overall.


Purple (Secondary Color ) The color of royalty, purple conjures sensations of luxury, sometimes even decadence. Lighter shades exude romance, while darker ones can represent more mysterious elements. v The dark shade used here evokes the royal heritage of purple, which is very appropriate for the Asprey luxury goods brand.


NEUTRAL COLORS Black White Gray #000000 R: 0 G: 0 B : 0 #FFFFFF R: 255 G: 255 B : 255 #959595 R: 149 G: 149 B: 149 Ivory Beige Brown #FEFFF1 R: 254 G: 255 B : 241 #D1B48C R : 209 G: 180 B : 1 # 974B00 R: 151 G: 75 B : 0


Black Black is the strongest of all colors , which is why it’s almost always used for the font color of text. While it will support the other colors used around it, on it’s own it can create feelings of power and sophistication . v The black here, mixed with dark grays and lime green, and an overall grungy theme, adds to the edginess of the design.


White As a primary color , white gives off an air of cleanliness, purity, and virtue . As a secondary color , it draws attention to more stimulating elements , making it ideal for supporting roles. v White combined with gray gives a soft and clean feeling to this design.


Gray Just like its intermediary role between black and white, gray gives the impression of neutrality. However, in an expert’s hands, changing its shade can give it varying degrees of black’s attention- drawing and white’s attention-repelling qualities, making it a uniquely powerful tool to the master designer. v The light gray background here adds to the modern feeling created by the typography.


Ivory Ivory and cream are sophisticated colors , with some of the warmth of brown and a lot of the coolness of white. They’re generally quiet, and can often evoke a sense of history. Ivory is a calm color , with some of the pureness associated with white, though it’s a bit warmer. v The ivory combined with other light colors and jewely tones makes this site have a very elegant overall appearance.


Biege Beige is somewhat unique in the color spectrum, as it can take on cool or warm tones depending on the colors surrounding it. It has the warmth of brown and the coolness of white, and, like brown, is sometimes seen as dull. v The light tan background here lends a more conservative and elegant feeling to the overall design.


Brown Brown is associated with the earth, wood, and stone. It’s a completely natural color and a warm neutral. Brown can be associated with dependability and reliability, with steadfastness, and with earthiness. It can also be considered dull. v The orangish -brown here gives a very earthy and dependable feeling.


Calm, Responsible, Sadness In Brief While the information contained here might seem just a bit overwhelming, color theory is as much about the feeling a particular shade evokes than anything else. But here’s a quick reference guide for the common meanings of the colors discussed above: Passion, Love, Anger Happiness, Hope, Deceit Energy, Happiness, Vitality Creativity, Royalty, Wealth New Beginnings, Abundance, Nature Mystery, Elegance, Evil Moody, Conservative, Formality Nature, Wholesomeness, Dependability Conservative, Piety, Dull Purity, Cleanliness, Virtue Calm, Elegant, Purity


Few Handy Tools As you know, color theory is a topic with a lot of depth, and even the basics are a lot to digest at once. So here is a list of external resources to aid in your use of color , whether you’re a beginner or an expert. Stylify Me – A reverse-engineering device, this calculates the color codes of any other site by entering the URL at the top, allowing you to discover the specific colors used on your favorite sites . - http://stylifyme.com/ Adobe Color CC – An old standard in color assistance tools ( though formerly known as Kuler ), years later its still considered one of the best and most reliable tools for identifying the numeric values of hues . - https:// color.adobe.com Flat UI Color Picker – A quick and convenient tool for color selection, as long as you’re using a flat UI . - http:// www.flatuicolorpicker.com Paletton – Great for beginners, this is an easy-to-use tool for identify corresponding colors in a number of different schemes. - http://paletton.com/ Material Palette – Input two colors , and this tool will determine the range of recommended colors , with specific values . - http://www.materialpalette.com/ COLOURlovers – Is a creative community where people from around the world create and share  colors , palettes and patterns, discuss the latest trends and explore colorful articles ... All in the spirit of love . - http://www.colourlovers.com/


Source - https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/ Source - https://studio.uxpin.com/ebooks/color-theory-web-ui-design-practical-principles/ Curated from publicly available resources and trademarks are properties of their respective owners.

authorStream Live Help