Project 2_4: Adding Color

Color can be added as a solid color, as a gradient and/or as a transparent color. Gradients can be color to white, color to black or color to transparency.

Don't use more than 3—4 colors maximum! You may need several colors if you're planning on color-code (use individual colors for) the days or the stages, but not more than 4.

Adobe Color Wheel located here

Color should be used as a level of information — this site is a great resource on color combinations and provides Hex numbers for the web.

Gradient color generator is located here

For more color information please read here.

By adding color you can run into issues with legibility. Make sure there's enough contrast between the text and its background. Using color can also compromise overall contrast (resulting in washed-out looks) so you might want to keep some of the blacks in the composition.

Just like before color should be used to further:

• Enforce/enhance visual hierarchy (combined with headlines, for example)
• Separate or highlight information/sections
• Visually group information/sections
• Consider all elements from the previous: Text, Line, Shape, Color

The color choice is yours but choose a color that ensures enough contrast for legibility (yellow text on white wouldn't have enough contrast, for example).

One of your variations will be used for part 2_5.

**2_4 — Due Thursday October 6**

Below is 2_4:

Restrictions and Rules:

Same as in previous assignment:

• Variations of black can be used as a whole background color! Do not use gradients.
• Only 1 font (Inter)
• Shapes here are technically speaking background-color declarations in CSS. The backgrounds are "naturally" rectangular or square
• 4 colors maximum
• The background-color declarations can be applied to elements such as h1, h3, h3, p, span, div etc.

Task:

As a start pick one of the previous compositions. Then create at least three responsive compositions with added lines. Before you start coding, make sure you start new HTML and CSS files for each of the composition. Avoid overwriting previous assignments or variations. Keep each result of each phase.

Tips:

• This site is a great resource on color combinations
• Don’t mix up too many different sizes and weights
• Avoid centering elements
• Combine different proportions
• Create contrast (big/small, thin/bold, tight/open, narrow/wide..)
• Group chunks of information and look for relations between those groups (sizes, spaces, alignments)