Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
2
• Designer of things 20+ years • Obsessed with typography • Love teaching about design
“If you have ever participated in the creation of something that humans would use, read, or otherwise interact with, then you have done design work.”
Jason Shen
“Design may be described as creativity deployed to a specific end.”
Sir George Cox
First, some questions
Four Basic Principles• Contrast • Repetition • Alignment • Proximity
Source: The Non-Designer’s Design Book by Robin Williams
http://paper-leaf.com/blog/2012/10/principles-of-design-quick-reference-poster/
http://paper-leaf.com/blog/2012/10/principles-of-design-quick-reference-poster/
http://paper-leaf.com/blog/2012/10/principles-of-design-quick-reference-poster/
http://paper-leaf.com/blog/2012/10/principles-of-design-quick-reference-poster/
Additional Principles• Simplicity • White Space • Consistency • Scale • Visual Hierarchy
Simplicity
giphy.com
Ausman101 on DeviantArt
Consistency
uxpassion.com
canva.com/templates/
17
designschool.canva.com
18
Never underestimate the importance of visual hierarchy
coetail.com
Putting The Pieces Together• Layout • Color • Typography • Photos & Images • Icons
graphicdesign.com/article/working-with-grid-systems/
Layout
sixrevisions.com
imamuseum.org
w3.org
serif.com
Color
giphy.com
26
Hex Colors• Annotation for the combination of Red,
Green, and Blue color values (RGB)
• HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign
29
chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka
design-seeds.com
coolors.co
color.adobe.com/create/color-wheel/
palettab.com
palettab.com
Typography
giphy.com
37
webdesignerdepot.com
38
tomgabor.com
Type Tips• Limit the number of typefaces
• Match the typeface to your focus
• Stay consistent
spyrestudios.com
40
fontpair.co
41
typeconnection.com
42
typ.io
fontsquirrel.com/fonts/list/hot_web
dafont.com
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
google.com/fonts
typekit.com
Photos & Images
giphy.com
49
The human brain processes visuals
60,000 times faster than text
dierk schaefer on Flickr
The Rule of Thirds
Wikimedia Commons
Images Size & Quality
• Physical Size*
• File Size
• Resolution
• File Type* IMPORTANT
52
pixlr.com
picmonkey.com
canva.com
photoshop.com/tools
54
croppola.com
creativecommons.org
compfight.com
Beyond Stock Photography
stocksy.com
gratisography.com
deathtothestockphoto.com
creativemarket.com
Icons
thenounproject.com
Choosing IconsBe creative
Don’t mix styles
Format/size is important
Give credit
thenounproject.com
iconfinder.com
“A designer knows he has achieved perfection not
when there is nothing left to add, but when there is
nothing left to take away.”Antoine de Saint-Exupéry
Look Around. Get Inspired.• Pay attention to what you
like about other sites • Find & follow creative
curators on the web and via social channels
• Listen to recommendations
• Apply what you learn
emiliokuffer on Flickr
ed_needs_a_bicycle on Flickr
Nate Grigg on Flickr
Related Documents
