Design for Developers Ruth Leopold

Ran Segall - Flux

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

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

Elements of Design

colortesting.com

picmonkey.com

tallys.github.io/color-theory

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

Serif Sans Serif Script Display

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

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

C.R.A.P. Principles of Design

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

Contrast

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

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

Repetition

Consistency: ● Spacing ● Breakpoints ● Component patterns

Limit styles: ● 2 fonts ● 60 30 10 rule

Alignment

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

Proximity

Example

Bridging the Gap

Thanks for listening! @RuthNaoLeo