In any area of ​​design, color plays a huge role, from print to digital media. Color can help convey different emotions, capture your target audience, and communicate action. In our design system, color was one of the first areas we considered moving forward. This will ensure that we have a good foundation or building block for all the work we are going to cover. Color will help convey user interaction and different elements and components on the page. It will also play a large part in the overall impression of the new site when a prospective student visits the site for the first time.

When deciding on the appropriate color for a website, the target audience should be taken into consideration. The color used for an elder-focused product may not sit well with teenagers or the younger generation. Also, excessive use of extremely bright colors like red, yellow, blue etc. it causes eye strain and may turn visitors away. As a university, our audiences are diverse. This includes a wide range of nationalities and age groups that we need to consider.

Choosing a color scheme for a site should be a careful thought process and also consider people with disabilities to enable everyone to make your information available. Along with color theory, a color palette should convey a message or ideology and also make that experience memorable from the end-user side.

Color theory

As mentioned earlier color can convey different emotions and indicate different meanings to certain audiences. Nuance, context, content, liveliness, culture, location, tone are all important elements in trying to convey a message, product or similar.

• Red – it is attractive and powerful, even for getting a visitor to take action. Red evokes emotions.
• Orange – It is known to promote positive thinking and boost creativity.
• Yellow – it means happiness and creativity.
• Green – Green symbolizes prosperity and wealth. Green also invokes confidence and is one of the trendier/business colors.
• Blue – it is a conservative color with an incredibly high confidence value and is known to have a calming effect
• Black – it’s useful for sites that are about photography and art.
• Viola – It is used in religious places and vacation spots.

One of the most important tools in color theory is the color wheel shown below:

This is the most basic tool for combining colors and has been around since the 16th century^th century. Its main purpose is to ensure that all the colors you choose from it look good together. From here we can create combinations of colors, tints, shades and tones.

• Primary colors – these include red, yellow and blue.
• Secondary colors – green, orange and purple and are made by mixing two primary colors.
• Tertiary colors – six colors on the wheel created by mixing primary and secondary colors.
• Warm colors – lively and energetic
• Cold colours – give an impression of calm
• Tints – created by adding white to a color
• Nuances – created by adding black to a color
• tones – created by adding gray to a color

With these basic color theories in mind, we can then move on to the color schemes described in the list below:

• Complementary color scheme – opposite colors on the wheel (red and green)
• Similar color scheme – colors that are next to each other on the wheel (green and blue)
• Triadic color scheme – bright colors evenly distributed around the wheel (green, purple and orange)
• Split-complementary color scheme – variation on the complementary scheme, uses two adjacent colors to complement the base color. (green, orange and purple)
• Rectangular (tetrad) color scheme – four colors arranged in two complementary pairs (red, orange, green and blue)
• Square Color Scheme – similar to rectangle but equally spaced dots on wheel (red, blue, green, and yellow)

Proposed color palette

Our existing color palette is simply not viable enough to move forward, we have created an updated palette which will address a number of issues such as accessibility, different nationalities and age groups. Our proposed modern palette will allow us to easily differentiate parts of the site, allow UI elements to stand out for user journey and user interaction. Our proposed colors can be found below —

Above is our proposed color scheme to go along with the new website. Each color and its purpose are described below:

• Blue – logos, main brand components, small background areas, links and navigation.
• Grey – body text, backgrounds, secondary buttons, headers, dividing lines, small background areas
• Red – image gradient maps, large typographic elements, icons, dividing lines, small background areas
• Green – image gradient maps, large typographic elements, icons, dividing lines, small background areas
• Silver user interface – dividers, footer background
• UI navy – Hover states of UI components
• Orange user interface – primary call-to-action buttons
• Green user interface – success status for UI components
• Yellow user interface – warning state for user interface components
• Red user interface – error state for user interface components

Background colors are used for various content areas.

Accessibility

“The strength of the Web lies in its universality. Access by all, regardless of disability, is essential.
Tim Berners-Lee, director of W3C and inventor of the World Wide Web”

One of the main things we’re looking into as we move forward with our new website design is the issue of accessibility. When designing for the web, we need to consider people with disabilities which include visual, hearing, physical, speech, cognitive and neurological disabilities.

We aim to make our website accessible in four different ways:

• Perceptible: Making text and media perceivable for everyone
• Operable: Helps users navigate content easily
• Understandable: Make multimedia texts understandable
• Robust: Maximize compatibility

From a designer’s point of view, we have to overcome several problems that will affect how people can perceive information. Some examples and solutions are listed below —

• Some people cannot read text if there is not enough contrast between the text and the background – Foreground texts must have sufficient contrast with the background colors. This will include text on images, gradients, buttons and menus, etc. Bright colors should be avoided.
• Using color to convey information – while there is nothing theoretically wrong with this, more information should be provided. For example, you can mark a required field on a form red, this should also be accompanied by an asterisk or similar to convey the meaning. A description above the form should therefore read something like « Required fields are in red and marked with a * ».
• Interactive elements should be easy to identify – this will cover things like links and buttons. Text in elements should be meaningful and useful to the user. Elements should also be consistent and have different states when interacting.

Our proposed color palette has been carefully checked against a number of tools to ensure we can use colors that will enable our site to be used by a global audience. An example of this is shown below by our primary red color:

Running this type of test is a win-win. It will not only benefit people with color blindness, but also the average user, for example in strong sunlight when viewing a page on a mobile device. Running these tests regularly along with the latest legislation will enable our users to find the information they want and need anytime, anywhere, no matter how they access it.

Conclusion

There are many tools available on the web for choosing a color scheme like Bullets, Coolers AND Color trends. Tools like this and many others don’t exist to simply “paint a website”, colors should be chosen with purpose and intention. The most impactful websites are those that keep the use of color to a minimum. Often the biggest statement your site can make is in its simplicity. Color is a powerful tool in building a successful website, it can connect and communicate with a target audience and allows your site to stand out and give it a unique identity.