Session 3: Color and composition

Session 3: Color and composition slides

Objective: Practice basic design principles for color and composition

Lecture:

Why we pick certain colors
Color is relative
Albers: "There is no such thing as color, only the interaction of color"
- Understanding color relationships
- Color identification, transparency
- The associative nature of color
Color models
- CMYK, RGB, HEX, HSB/HSL
- Color in CSS, Sketch, Figma
Color process
- Choosing primary, secondary, tertiary colors
- Black and white
- Accessibility is good for everyone

Reading:

Create one screen that shows the same color on two different backgrounds, but the framed color looks different
Create another screen that shows two different colors on two different color backgrounds, where the two framed colors look the same
Create an interface that shows four different text colors (Default, Secondary, Disabled, Accent) and five different background colors (Brand, Black, Error, Warning, Success + white) that would be described as "festive"
Create an interface that shows four different text colors (Default, Secondary, Disabled, Accent) and five different background colors (Brand, Black, Error, Warning, Success + white) that would be described as "trustworthy"
In Figma, create them all in one document using a mobile template of your choice, click the play button, then click "share prototype" for the link. Place this link (not the link to your Figma file) in the artifact sheet.
Bad UX example