A presentation at Design 4 Drupal by Ruth Leopold
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
for free. You
can too.