2_4: Responsive Grid Layout: Adding Color
Due: Tuesday, Oct 4 (beginning of class)
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.
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/distinguish information or sections/ (days, stages, times, artists)
- Visually group information or sections
- Add visual interest and contrast
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).
Restrictions and Rules
Same as in 1_3 plus color.
CSS
All you need to know about CSS color definitions is explained in this post.
Task
Create three responsive layouts. .
Your Box folder should look like this now:
