Download - [UX Series] 4 - Contrast in design

Constrast in design

Vu Phuong Hoang2015/08

Content

1. What is contrast?

2. Why do we need contrast?

3. How to use contrast?1. Size

2. Color

3. Value

4. Shape

5. Position

6. Movement

7. Texture


What do you see?


2 black circles!


How about this?


BIG RED CIRCLE small green circle


• It’s basically the difference.

• Noticing difference is human's survival mechanism

• to quick differentiate a friend from predators

• That’s why it’s so powerful.

• Contrast attracts attention.

2. Why do we need contrast?• To emphasize an element among others.

• To help users noticing the optimal choice.• They just want “good enough” options, remember?

• But there’re good and bad contrasts.

Too low contrast doesn’t work!

CAN YOU READ THIS?

how about this?

Too high contrast doesn’t work, either!

Too high contrast doesn’t work, either!

My episode

was banned :(

3. How to use contrast?

1. Size

2. Color

3. Value

4. Shape

5. Position

6. Movement

7. Texture

3.1. Size in contrast

3.2. Color in contrast

3.3. Contrast value

3.3. Contrast value

VS

3.3. Contrast value

3.4. Shape in contrast

3.5. Position in contrast

3.6. Movement in contrast

Texture in contrast

1 property for contrast is not enough

Combine them for good contrast!

Use them not just for contrast!For similarity, too!

Any questions?

Download - [UX Series] 4 - Contrast in design

Top Related