[ux series] 4 - contrast in design

Download [UX Series] 4 - Contrast in design

Post on 21-Feb-2017

449 views

Category:

Design

1 download

Embed Size (px)

TRANSCRIPT

FileNewTemplate

Constrast in designVu Phuong Hoang2015/08

Elements have different importance.How to emphasize ? Contrast1

ContentWhat is contrast?Why do we need contrast?How to use contrast?SizeColorValueShapePositionMovementTexture

2

1. What is contrast?

What do you see?

3

1. What is contrast?

2 black circles!

4

1. What is contrast?

How about this?

5

1. What is contrast?

BIG RED CIRCLEsmall green circle

Why not 2 circles ?6

1. What is contrast?Its basically the difference.Noticing difference is human's survival mechanismto quick differentiate a friend from predatorsThats why its so powerful.Contrast attracts attention.

7

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 therere good and bad contrasts.

8

Too low contrast doesnt work!CAN YOU READ THIS?how about this?

Text and background have similar saturation9

Too low contrast doesnt work!CAN YOU READ THIS?how about this?

Text and background have similar saturation10

Too high contrast doesnt work, either!

FIFA11

Too high contrast doesnt work, either!

My episode was banned :(

Episode about pokemon Porygon was banned12

3. How to use contrast?SizeColorValueShapePositionMovementTexture

13

3.1. Size in contrast

14

3.1. Size in contrast

15

16

3.1. Size in contrast

PlayStation 417

3.2. Color in contrast

18

3.2. Color in contrast

Famous iPod advertisement poster19

3.2. Color in contrast

20

3.2. Color in contrast

Use black & white version to determine the contrast21

3.2. Color in contrast

Assassins Creed round menu: Selected item is marked with red border22

3.2. Color in contrast

Main button FIND MATCH in Star Craft II uses different color23

3.3. Contrast value

24

3.3. Contrast value

25

3.3. Contrast value

26

3.3. Contrast value

27

3.3. Contrast value

VS

28

3.3. Contrast value

XBOX TV: selected row is highlighted, others are dimmed29

3.3. Contrast value

Wakfu Raider: Not available characters are grey out30

3.3. Contrast value

Heroes of the storm: selected team is highlighted with light, brighter color (and animation)31

3.4. Shape in contrast

32

3.4. Shape in contrast

Anebstar: almost other things are in rectangular shape -> Circular images attract attention33

3.4. Shape in contrast

Heroes of the storm: completed quests are highlighted with light, brighter color and different icons34

3.4. Shape in contrast

Wakfu Raiders: The boss has different look35

3.5. Position in contrast

36

3.5. Position in contrast

Delibarapp.com: selected tab is in front of the others37

3.5. Position in contrast

Cars 2: The Video Game: selected option is in the centre (and bigger, more colorful, and have description)38

3.6. Movement in contrast

39

3.6. Movement in contrast

iOS: the important icons are static, the rest can be moved40

3.6. Movement in contrast

Wakfu Raiders: The moving arrow attracts attention41

3.6. Movement in contrast

Wakfu Raiders: Selected characters have moving border effect42

Texture in contrast

Less use than other properties: 1 - it takes time for user to recognize the pattern, then compare them2 it distracts43

Texture in contrast

44

1 property for contrast is not enough

LINES 98: Classical game use only color to make balls different45

Combine them for good contrast!

Bejeweled 3 uses color and shape46

Combine them for good contrast!

Threes: uses color, shape, animation (and sound)47

Combine them for good contrast!

FF XIV: uses color, shape, position, value for contrast.48

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

FF XIV: uses color, shape, position, value for contrast.49

Any questions?

50

Recommended

View more >