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

colourlovers.com

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