Colours
There's no doubt that choosing colours is an integral part to designing a website. Many design considerations are necessary in order to create a legible and smart site that complements it's theme and enhances it's content. When I began to decide on colours for my site, I wanted to make my site fun and engaging. I wanted my site to have a childlike element to it's design, as Mini Steps is a site that sells children's shoes. Mini Steps sells both boys and girls shoes, I was careful not to select colours that seemed biased to a particular gender.
The colours I chose would be used in the company's logo, background, headings and text. I wanted to have colours that would work with my website's theme, that wouldn't clash with product images or interfere with the text. I decided that a neutral background would be the way to achieve this, I incorporated this neutral footprint into the background to keep the site looking fun.
The original image was darker than this image but I used photoshop to increase it's opacity to 60%, I found that this made the image more subtle and did not compete with the rest of the site.
Le Couriers table of legibility, pictured below, displays the effect of colour combinations on the legibility of text. The most legible colour combination is black on yellow, which is ranked number one, the legibility then decreases in ascending order. Black on yellow isn't a particularly attractive combination but there are better combinations further down this table.
(WebAIM: Color Contrast Checker 2017)Colour associations are used all the time in advertising, film and in literature. Common colour associations are listed in the following table. I am looking to promote a site and products which are intended for children, children and toddlers tend to be fun and have lots of confidence and I wanted my site to reflect these qualities. I settled on orange and blue as my main colours for my logo and I wanted these colours to run through my website.
A hex code is a 6-digit code which represents red, green and blue. There are 16 million possible colors (HTML Color Codes- What's your color 2017). Hex codes allow designers to pin point specific colours by using a color picker, then these exact colours can be replicated throughout the site. Below is a table showing a selection of colours and their corresponding hex codes.
There are a number of colour schemes that can be used when building a colour palette, using the 12-point colour wheel. Different colour schemes can be seen in the diagram below.
The analogous colour scheme added more interest to the palette than the monochromatic colour scheme but I needed an extra colour to make certain elements of my site stand out.
I settled on a complementary colour scheme, which was created by pairing colours from opposite ends of the colour wheel, notably orange and blue. The blue stood out very well from the orange and I used grey for the colour of text. The colour scheme is fun and isn't gender biased which was what I was hoping to achieve. My colour palette and hex codes are shown below.
REFERENCES
Color Theory for Presentations: How to Choose the Perfect Colors for Your Designs (2017). [Online] Available from: http://blog.visme.co/how-to-choose-a-color-scheme/ [Accessed 13 December 2017].
HTML Color Codes - What's your color (2017). [Online] Available from: https://www.hexcolortool.com/#7b5656 [Accessed 13 December 2017].
Color Vision - by Cal Henderson (2017). [Online] Available from: https://www.iamcal.com/misc/colors/ [Accessed 13 December 2017].
WebAIM: Color Contrast Checker (2017). [Online] Available from: https://webaim.org/resources/contrastchecker/ [Accessed 13 December 2017].
CASUAL GENIUS – Hameedia – Medium (2017). [Online] Available from: https://medium.com/@hameediasocialmedia/casual-genius-67be79fdd7e6 [Accessed 22 December 2017].
Coolors (2017). [Online] Available from: https://coolors.co/ [Accessed 22 December 2017].
Color Wheel Patterns - WallsKid (2017). [Online] Available from: http://www.wallskid.com/c/color-wheel-patterns_rcEpw0mbKTQznxqxsuwQ*9YX4A5NerTHO8E*BdAN4JI/ [Accessed 22 December 2017].
Hex Colour Code Dark Blue Waters Design - DRAWING ART GALLERY (2017). [Online] Available from: https://drawinglics.com/photos/493999/hex-colour-code-dark-blue-waters-design-hex-color-code.py [Accessed 22 December 2017].
ResearchGate | Share and discover research (2017). [Online] Available from: https://www.researchgate.net/ [Accessed 22 December 2017].
The colours I chose would be used in the company's logo, background, headings and text. I wanted to have colours that would work with my website's theme, that wouldn't clash with product images or interfere with the text. I decided that a neutral background would be the way to achieve this, I incorporated this neutral footprint into the background to keep the site looking fun.
The original image was darker than this image but I used photoshop to increase it's opacity to 60%, I found that this made the image more subtle and did not compete with the rest of the site.
Le Couriers table of legibility, pictured below, displays the effect of colour combinations on the legibility of text. The most legible colour combination is black on yellow, which is ranked number one, the legibility then decreases in ascending order. Black on yellow isn't a particularly attractive combination but there are better combinations further down this table.
Le Couriers table of legibility (ResearchGate | Share and discover research 2017)
1 in 12 people have some sort of color deficiency (Color Vision- by Cal Henderson 2017). This statistic is quite staggering and it reinforces the need to be careful when selecting colours. Red and green are colours which are difficult to see in those with colour blindness. I have avoided red and green colour schemes and I tested my site for colour blindness with the online tool pictured below.
(Color Vision - by Cal Henderson 2017)
I settled on using dark grey for my text in the main body of my website as it appears softer than black. I wanted to make sure that my text was legible, I tested the colour of my text against the darkest colour found in my background image (I did this by using the following site: https://www.iamcal.com). I used the colour contrast checker as pictured below, as you can see the results were passes for both normal sized and larger sized text.
(WebAIM: Color Contrast Checker 2017)Colour associations are used all the time in advertising, film and in literature. Common colour associations are listed in the following table. I am looking to promote a site and products which are intended for children, children and toddlers tend to be fun and have lots of confidence and I wanted my site to reflect these qualities. I settled on orange and blue as my main colours for my logo and I wanted these colours to run through my website.
(Color Theory for Presentations: How to Choose the Perfect Colors for Your Designs 2017)
A hex code is a 6-digit code which represents red, green and blue. There are 16 million possible colors (HTML Color Codes- What's your color 2017). Hex codes allow designers to pin point specific colours by using a color picker, then these exact colours can be replicated throughout the site. Below is a table showing a selection of colours and their corresponding hex codes.
(Hex Colour Code Dark Blue Waters Design - DRAWING ART GALLERY 2017)
There are a number of colour schemes that can be used when building a colour palette, using the 12-point colour wheel. Different colour schemes can be seen in the diagram below.
(CASUAL GENIUS – Hameedia – Medium 2017)
I experimented with three different colour schemes: monochromatic, analogous and complimentary. Monochromatic colour schemes are made up by shades, tints and different tones within a specific hue. I found this colour scheme tasteful but slightly uninspiring and flat. I wanted to project a sense of fun and excitement in my site but this could not be achieved using this colour scheme.
Analogous colour schemes are created when the three colours next to each other are selected from the 12-point colour wheel.
(Color Wheel Patterns - WallsKid 2017)
I settled on a complementary colour scheme, which was created by pairing colours from opposite ends of the colour wheel, notably orange and blue. The blue stood out very well from the orange and I used grey for the colour of text. The colour scheme is fun and isn't gender biased which was what I was hoping to achieve. My colour palette and hex codes are shown below.
(Coolors 2017)
Color Theory for Presentations: How to Choose the Perfect Colors for Your Designs (2017). [Online] Available from: http://blog.visme.co/how-to-choose-a-color-scheme/ [Accessed 13 December 2017].
HTML Color Codes - What's your color (2017). [Online] Available from: https://www.hexcolortool.com/#7b5656 [Accessed 13 December 2017].
Color Vision - by Cal Henderson (2017). [Online] Available from: https://www.iamcal.com/misc/colors/ [Accessed 13 December 2017].
WebAIM: Color Contrast Checker (2017). [Online] Available from: https://webaim.org/resources/contrastchecker/ [Accessed 13 December 2017].
CASUAL GENIUS – Hameedia – Medium (2017). [Online] Available from: https://medium.com/@hameediasocialmedia/casual-genius-67be79fdd7e6 [Accessed 22 December 2017].
Coolors (2017). [Online] Available from: https://coolors.co/ [Accessed 22 December 2017].
Color Wheel Patterns - WallsKid (2017). [Online] Available from: http://www.wallskid.com/c/color-wheel-patterns_rcEpw0mbKTQznxqxsuwQ*9YX4A5NerTHO8E*BdAN4JI/ [Accessed 22 December 2017].
Hex Colour Code Dark Blue Waters Design - DRAWING ART GALLERY (2017). [Online] Available from: https://drawinglics.com/photos/493999/hex-colour-code-dark-blue-waters-design-hex-color-code.py [Accessed 22 December 2017].
ResearchGate | Share and discover research (2017). [Online] Available from: https://www.researchgate.net/ [Accessed 22 December 2017].
Comments
Post a Comment