Design for Developers

A presentation at Design 4 Drupal in January 2021 in by Ruth Leopold

Slide 1

Slide 1

Design for Developers Ruth Leopold

Slide 2

Slide 2

Slide 3

Slide 3

Ran Segall - Flux

Slide 4

Slide 4

Slide 5

Slide 5

https://darkpatterns.org/types-of-dark-pattern.html

Slide 6

Slide 6

https://www.youtube.com/watch?v=_7FWr2Nvf9I

Slide 7

Slide 7

Slide 8

Slide 8

Elements of Design

Slide 9

Slide 9

colortesting.com

Slide 10

Slide 10

Slide 11

Slide 11

picmonkey.com

Slide 12

Slide 12

tallys.github.io/color-theory

Slide 13

Slide 13

Color Palette Tools From one color: mycolor.space From multiple: coolors.co/generate From scratch: colorhunt.co

Slide 14

Slide 14

Slide 15

Slide 15

Serif Sans Serif Script Display

Slide 16

Slide 16

Elements of Design: ● Color ● Type ● Lines ● Shapes ● Imagery ● Iconography ● Animation

Slide 17

Slide 17

https://www.gardnermuseum.org/experience/rooms

Slide 18

Slide 18

C.R.A.P. Principles of Design

Slide 19

Slide 19

C.R.A.P. Principles of Design: Contrast Repetition Alignment Proximity

Slide 20

Slide 20

Contrast

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Normal text is 16px regular Large text is 18.66px bold or 24px

Slide 30

Slide 30

Common Contrast Issues in Drupal ● Skip to main content link ● Local action tabs

Slide 31

Slide 31

Repetition

Slide 32

Slide 32

Slide 33

Slide 33

Consistency: ● Spacing ● Breakpoints ● Component patterns

Slide 34

Slide 34

Limit styles: ● 2 fonts ● 60 30 10 rule

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

Alignment

Slide 38

Slide 38

Slide 39

Slide 39

Slide 40

Slide 40

Readability: ● Left align for readability ● Right align only 1-3 words or a short single line ● Don’t justify text in a CMS ● Avoid centering paragraphs of text ● Keep line length to 50-75 characters

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

Slide 46

Slide 46

Slide 47

Slide 47

Proximity

Slide 48

Slide 48

Slide 49

Slide 49

Slide 50

Slide 50

Slide 51

Slide 51

Slide 52

Slide 52

Slide 53

Slide 53

Example

Slide 54

Slide 54

Slide 55

Slide 55

Slide 56

Slide 56

Slide 57

Slide 57

Bridging the Gap

Slide 58

Slide 58

Slide 59

Slide 59

Thanks for listening! @RuthNaoLeo