Learning Design

The information below includes definitions, examples, projects, and overall any documentation of information that will help me retain and display what I know. The content is organized in chronological order to show improvement with the most recent at the top of the page.

Color Design

I completed a 3 hour Color Design course on Codecademy. I practiced using CSS while learning design principles such as:

HSLA

I learned that you can set color in css using hsla(hue, saturation, light, alpha). This is preferred for designers because of its intuitive change for making something brighter for example.

Warm Colors

Warm colors range between red and yellow. This also includes browns and tans. These colors are associated with warmth and can promote a feeling of aggression/are considered bold. Hue values of 0-60: red->orange->yellow.

Cool Colors

Warm colors range between blue, purple and green. This also includes grays/greys. These colors are associated with calming and soothing feelings in addition to winter climates or water. Hue values of 140-280: green->blue->purple.

Tints and Shades

Increasing lightness of a color results in tints of a hue. Decreasing lightness results in shades of a hue. Tints happen when white is added to a color and shades occur when black is added to a color. Change the third value L in HSLA to create tints and shades.

Color Contrast

Colors opposite of each other on the color wheel have higher contrast while nearby colors have lower contrast. It's important to have contrast levels that provide clarity to the users and promote ease of use and legibility.

Color Schemes

Color schemes or color palettes are the result of pairing two ore more colors together. There are 4 different color schemes to consider:

Monochromatic

This is the most basic color scheme. It uses one color with varying shades and tints. Each color in the scheme is derived from the base color. It is important to have high contrast by using colors on the ends of the spectrum in order to eliminate the monotonous feeling. This color scheme is nice because it provides an immediate sense of harmony.

*Use different color/shade/tint for buttons that do different things such as a subscribe for emails button versus a download button. The "page hero" is a design term that refers to the banner of image that is often paired with text and a background and is put front and center of a page. Re-use same shades in different elements, to create harmony, but still ensure contrast. It is helpful to give distinct sections of content their own background color to make visual groups that convey how the information is grouped.

Complementary Designs

This scheme utilizes colors opposite from each other on the color wheel:

It is common in logos and uniforms like the Los Angeles Lakers have purple and yellow in their logos and the University of Virginia colors are blue and orange. This color scheme is also popular on websites since it has high contrast. They can clash, however, if used for large areas right next to each other.

Analogous Color Schemes

This scheme applies three or more colors that are next to each other on the color wheel. Usually there is one dominant color paired with a second supporting color and a third accent color. This scheme creates a visually pleasing and calming display. This scheme can provide a low-contrast experience however. This should not be used for content that needs a user's direct attention, but rather for creating backgrounds that don't compete with the main content of the site.

Triadic Color Schemes

This scheme consists of three colors that are equidistant from each other on the color wheel. Like complementary color schemes, it provides pops of color and allows some flexibility in the range of colors you can use. Triadic color schemes are useful because they create a feeling of equality, virbrancy, and security in a design.

Color Psychology

Designers must determine the "feel" of their website. Every color has a different feeling and meaning. Color psychology can affect how people perceive a design and its related colors. Choosing the right colors can help visually convey the right context and mood of a product or service. Colors evoke emotions; here is a list of words usually associated with these colors:

It is important to also remember that colors can have different meanings in different parts of the world so you should choose ones that reinforce the overall message and tone of the website.

Picture of colors and their associated wordsImage from Codecademy

Summary

Color for UI

Using color to create a usable experience rather than just choosing harmonious colors. We must ensure our audience understands how to interact with our product and make effective decisions to doing what they want. You must look at a site hollistically through the eyes of a user. Applying the right colors to actions and messaging that the user will perceive and act on will be a powerful tool in improving the UI.

In this lesson, I explored: