COMP 126: Practical Web Design & Development for Everyone
UI DESIGN:
COLOR & TYPOGRAPHY
COLOR
What are the associations? What mood, reputation, or tone do you hope to evoke?
WhAT does color do?
- LEGIBILITY. aka readability, which is to say: high contrast.
- VISUAL APPEAL. This is less about taste or preference and more about creating a harmonious experience. (Unless disharmony is your goal for very specific reasons, and you really know what you're doing.)
- BRAND RECOGNITION. Choose a striking brand color or color combination, and stick with it.
CONSIDERATIONS
Design in grayscale first
- Start in pure b&w then build in grays/lower opacity accordingly to increase/lower impact
- Use the "squint test" to see if your layout reflects the hierarchy you're trying to create
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121617/Screen_Shot_2021-11-18_at_10.23.23_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121627/Screen_Shot_2021-11-18_at_10.26.28_AM.png)
dominant/brand color
If you have an existing logo or signage to work with, consider sticking with that
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121561/Screen_Shot_2021-11-18_at_10.14.22_AM.png)
Research other websites/apps in your space, and rule out any really obvious colors
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121573/Screen_Shot_2021-11-17_at_11.07.05_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121577/Screen_Shot_2021-11-17_at_11.07.20_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121581/Screen_Shot_2021-11-17_at_11.07.35_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121583/Screen_Shot_2021-11-17_at_11.10.52_AM.png)
DON'T BE REDUNDANT
Secondary color/s & neutrals
Remember:
- Rule of thumb: One dominant/brand color, 1-2 secondary colors, + neutrals for text & background
- 60/30/10 rule: it can be broken, but it's a good place to start
- High contrast between text & background is a must for accessibility & usability
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121956/Screen_Shot_2021-11-18_at_12.21.46_PM.png)
Analogous color schemes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121787/Screen_Shot_2021-11-18_at_11.22.54_AM.png)
- Colors are beside each other on the color wheel
- Very harmonious, but make sure there's enough contrast
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121807/Screen_Shot_2021-11-18_at_11.29.41_AM.png)
Complementary color schemes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121787/Screen_Shot_2021-11-18_at_11.22.54_AM.png)
- Colors are opposite one another on the color wheel
- Great for contrast, but you should use one as primary and one as accent to keep things harmonious
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121891/Screen_Shot_2021-11-18_at_11.39.42_AM.png)
Monochromatic color schemes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121787/Screen_Shot_2021-11-18_at_11.22.54_AM.png)
- A single base hue paired with its shades and tints
- Also very harmonious, but again, make sure there's enough contrast to emphasize calls to action
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121815/Screen_Shot_2021-11-18_at_11.30.24_AM.png)
Triadic color schemes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121787/Screen_Shot_2021-11-18_at_11.22.54_AM.png)
- Three colors evenly spaced across the color wheel
- Conveys a sense of high energy
- Should be used carefully, as it can lead to a cluttered, busy look if not balanced
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121824/Screen_Shot_2021-11-18_at_11.33.38_AM.png)
Primary color schemes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121787/Screen_Shot_2021-11-18_at_11.22.54_AM.png)
- Variations on the primary colors of red, blue, and yellow
- Similar to triadic scheme, but less perfectly triadic
- Very high energy & bold
- Can look childish if too on the nose
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121827/Screen_Shot_2021-11-18_at_11.35.24_AM.png)
Other APProaches
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121934/Screen_Shot_2021-11-18_at_12.22.53_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121936/Screen_Shot_2021-11-18_at_12.24.11_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121940/Screen_Shot_2021-11-18_at_12.02.47_PM.png)
pastel
muted
gradient
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121944/Screen_Shot_2021-11-18_at_12.27.56_PM.png)
b&w with pops
TYPOGRAPHY
TYPEFACE
FONTS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/10002297/Screenshot_2022-11-14_at_4.20.26_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/10002299/Screenshot_2022-11-14_at_4.20.48_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/10005023/Serif.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/10005024/spectral-humanist-serif.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/10005025/baskerville-transitional-serif.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/10005026/rozha-one-modern-serif.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/10005038/Screenshot_2022-11-14_at_5.12.15_PM.png)
classic ~ traditional
legal ~ academic
bold ~ old-style
friendly ~ authoritative
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/10005023/Serif.png)
readable small ~ gov't ~ education
headers ~ titles
headers ~ titles ~ clarity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/10005050/cabin-humanist-ss.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/10005078/Screenshot_2022-11-15_at_12.16.41_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/10005087/Screenshot_2022-11-15_at_12.18.04_PM.png)
other types
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/10005110/Screenshot_2022-11-15_at_12.25.52_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/10005117/Screenshot_2022-11-15_at_12.26.39_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9121955/choose-a-typeface.png)
126-Color & Typography
By tkjn
126-Color & Typography
- 1,548