Download - Design Principles Overview
![Page 1: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/1.jpg)
Photo: Martin Addison on Flickr
![Page 2: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/2.jpg)
First, some questions…
![Page 3: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/3.jpg)
![Page 4: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/4.jpg)
The Big Four• Contrast • Repetition • Alignment • Proximity
![Page 5: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/5.jpg)
• Contrast • Repetition • Alignment • Proximity
The Big Four
![Page 6: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/6.jpg)
Contrastjorgerieraflores.com
![Page 7: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/7.jpg)
Ways to apply contrast:
• Color • Size • Shape
![Page 8: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/8.jpg)
Colorpaper-leaf.com
![Page 9: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/9.jpg)
Source: blog.digitaltutors.com
BAD GOOD
Contrast with Color
![Page 10: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/10.jpg)
Contrast with Colorwonderbread.com
![Page 11: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/11.jpg)
Contrast with Colorbeanstalkapp.com
![Page 12: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/12.jpg)
Sources: 3.7designs.co & vwo.com
Contrast with Size
![Page 13: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/13.jpg)
mixd.co.uk
Contrast with Size
![Page 14: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/14.jpg)
Contrast with Sizepaul-rand.com
![Page 15: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/15.jpg)
gnosh.co.uk
Contrast with Size
![Page 16: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/16.jpg)
designschool.canva.com
Contrast with Shape
![Page 17: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/17.jpg)
Contrast with Shapeduplos.org
![Page 18: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/18.jpg)
Contrast with Shapecellzone.ca
![Page 19: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/19.jpg)
Repetition
Photo: nico7martin on Flickr
![Page 20: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/20.jpg)
dropbox.com
Repetition
![Page 21: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/21.jpg)
Repetitiondropbox.com/jobs
![Page 22: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/22.jpg)
whiplashmerch.com
Repetition
![Page 23: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/23.jpg)
Alignment
Source: vwo.com
EDGE CENTER
![Page 24: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/24.jpg)
huncwot.com
Alignment
![Page 25: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/25.jpg)
dropbox.com
Alignment
![Page 26: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/26.jpg)
lolcolors.com
Alignment
![Page 27: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/27.jpg)
Alignmenttenonedesign.com
![Page 28: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/28.jpg)
Proximityamazon.com
![Page 29: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/29.jpg)
Proximityyogrow.co
![Page 30: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/30.jpg)
Ready for more?giphy.com
![Page 31: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/31.jpg)
Additional Principles• Emphasis • Figure Ground
Relationship
• Visual Hierarchy • White Space • Balance
![Page 32: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/32.jpg)
Emphasisdropbox.com
![Page 33: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/33.jpg)
Emphasisoreeartisans.com
![Page 34: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/34.jpg)
Emphasishtcvive.com
![Page 35: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/35.jpg)
Figure Ground Relationshipcayenne-mydevices.com
![Page 36: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/36.jpg)
invisionapp.com/craft
Figure Ground Relationship
![Page 37: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/37.jpg)
Figure Ground Relationshipgocub.es
![Page 38: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/38.jpg)
Visual Hierarchy coetail.com
![Page 39: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/39.jpg)
Visual Hierarchy hugeinc.com
![Page 40: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/40.jpg)
Visual Hierarchy github.com/trending
![Page 41: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/41.jpg)
White Space
![Page 42: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/42.jpg)
White Spacealistapart.com
![Page 43: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/43.jpg)
White Spacemedium.com
![Page 44: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/44.jpg)
White Spacefastcodesign.com
![Page 45: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/45.jpg)
White Spaceetsy.com
![Page 46: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/46.jpg)
White Spacesamsung.com
![Page 47: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/47.jpg)
Balancedropbox.com
![Page 48: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/48.jpg)
Balancetenonedesign.com
![Page 49: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/49.jpg)
Typographywebdesignerdepot.com
![Page 50: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/50.jpg)
Typography
tomgabor.com
![Page 51: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/51.jpg)
Typographychriswilhitedesign.com
![Page 52: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/52.jpg)
weareisland.com
Typography
![Page 53: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/53.jpg)
Typography
spyrestudios.com
• Limit the number of typefaces • Match the typeface to your focus • Stay consistent
![Page 54: Design Principles Overview](https://reader031.vdocument.in/reader031/viewer/2022013013/58f2dd541a28ab942c8b45dd/html5/thumbnails/54.jpg)
Questions?Mykl Roventine [email protected] @myklroventine
Slides: bit.ly/ffdesign-principles
Photo: ed_needs_a_bicycle on Flickr