design principles overview
TRANSCRIPT
Photo: Martin Addison on Flickr
First, some questions…
The Big Four• Contrast • Repetition • Alignment • Proximity
• Contrast • Repetition • Alignment • Proximity
The Big Four
Contrastjorgerieraflores.com
Ways to apply contrast:
• Color • Size • Shape
Colorpaper-leaf.com
Source: blog.digitaltutors.com
BAD GOOD
Contrast with Color
Contrast with Colorwonderbread.com
Contrast with Colorbeanstalkapp.com
Sources: 3.7designs.co & vwo.com
Contrast with Size
mixd.co.uk
Contrast with Size
Contrast with Sizepaul-rand.com
gnosh.co.uk
Contrast with Size
designschool.canva.com
Contrast with Shape
Contrast with Shapeduplos.org
Contrast with Shapecellzone.ca
Repetition
Photo: nico7martin on Flickr
dropbox.com
Repetition
Repetitiondropbox.com/jobs
whiplashmerch.com
Repetition
Alignment
Source: vwo.com
EDGE CENTER
huncwot.com
Alignment
dropbox.com
Alignment
lolcolors.com
Alignment
Alignmenttenonedesign.com
Proximityamazon.com
Proximityyogrow.co
Ready for more?giphy.com
Additional Principles• Emphasis • Figure Ground
Relationship
• Visual Hierarchy • White Space • Balance
Emphasisdropbox.com
Emphasisoreeartisans.com
Emphasishtcvive.com
Figure Ground Relationshipcayenne-mydevices.com
invisionapp.com/craft
Figure Ground Relationship
Figure Ground Relationshipgocub.es
Visual Hierarchy coetail.com
Visual Hierarchy hugeinc.com
Visual Hierarchy github.com/trending
White Space
White Spacealistapart.com
White Spacemedium.com
White Spacefastcodesign.com
White Spaceetsy.com
White Spacesamsung.com
Balancedropbox.com
Balancetenonedesign.com
Typographywebdesignerdepot.com
Typography
tomgabor.com
Typographychriswilhitedesign.com
weareisland.com
Typography
Typography
spyrestudios.com
• Limit the number of typefaces • Match the typeface to your focus • Stay consistent
Questions?Mykl Roventine [email protected] @myklroventine
Slides: bit.ly/ffdesign-principles
Photo: ed_needs_a_bicycle on Flickr