from scratch to launch #2 - design phase
TRANSCRIPT
![Page 1: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/1.jpg)
PHASEDESIGNWordPress Naperville Meetup February 21, 2017 #WPNaperville
6:00 - Networking 6:20 - Introductions 6:30 - Presentation
From Scratch to Launch #2
![Page 2: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/2.jpg)
Giving back TO SET TONELISTEN Community
Service
Modern Bold
Authentic
Social justice
Warm Impactful
![Page 3: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/3.jpg)
INSPIRATIONGATHER
![Page 4: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/4.jpg)
DOCUMENTING INSPIRATION
Bookmarking App & Extension
RAINDROP.IO
![Page 5: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/5.jpg)
Visual Asset Library
DOCUMENTING INSPIRATION
![Page 6: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/6.jpg)
PHOTOSVisual Asset Library
DOCUMENTING INSPIRATION
![Page 7: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/7.jpg)
PINTERESTVisual Asset Library & Bookmarks
DOCUMENTING INSPIRATION
![Page 8: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/8.jpg)
Too many to list
DOCUMENTING INSPIRATION
![Page 9: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/9.jpg)
TYPOGRAPHYSTART WITH
![Page 10: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/10.jpg)
Oliver Reichenstein, 2006
WEB DESIGN IS 95% TYPOGRAPHY
![Page 11: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/11.jpg)
![Page 12: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/12.jpg)
![Page 13: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/13.jpg)
![Page 14: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/14.jpg)
Avoid using more than 2-3 different typeface families (unless you really know what you are doing).
TYPOGRAPHY GUIDELINES
![Page 15: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/15.jpg)
Use a single space between sentences to avoid rivers.
TYPOGRAPHY GUIDELINES
Photo credit - Jeff Dahl
![Page 16: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/16.jpg)
Left aligned is best for readability(for L-R languages)
TYPOGRAPHY GUIDELINES
![Page 17: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/17.jpg)
The width of your text blocks should be limited to 60-75 characters.
TYPOGRAPHY GUIDELINES
No one wants to read lines of text that seem to never end and then try to find the start of the next line. Make it easy on your audience and limit your width on text blocks. They will thank you for that. Isn’t this block much harder to read? Imagine if it went on for many paragraphs. That would be awful.
![Page 18: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/18.jpg)
The wider the column, the greater the line-height (leading).
TYPOGRAPHY GUIDELINES
![Page 19: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/19.jpg)
Can you easily scan the article? Is there a clear/predictable structure?
TYPOGRAPHY HIERARCHY
![Page 20: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/20.jpg)
Too many to list
WEB DESIGN IS 95% TYPOGRAPHY
![Page 21: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/21.jpg)
![Page 22: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/22.jpg)
![Page 23: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/23.jpg)
![Page 24: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/24.jpg)
![Page 26: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/26.jpg)
![Page 27: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/27.jpg)
![Page 29: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/29.jpg)
![Page 30: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/30.jpg)
![Page 31: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/31.jpg)
![Page 32: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/32.jpg)
![Page 33: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/33.jpg)
Learning Typekit Blog Moments with Typography FontShop (love their email newsletter) Typewolf Cheatsheet OddBird’s Typography Blog Post Universal Typography Molten Leading / Fluid Line Height Typography Videos Playlist
TYPOGRAPHY RESOURCES
Tools Fontstand Typecast WP Typography plugin
Books, Bookmarks, and More Combining Typefaces On Web Typography Stacy's Typography Bookmarks
![Page 34: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/34.jpg)
COLORPLAY WITH
![Page 35: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/35.jpg)
![Page 36: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/36.jpg)
![Page 43: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/43.jpg)
Tools ColorMe Practical Color Theory
Accessibility Check Contrast Ratio Photoshop Add-on Colour Contrast Check (Jonathan Snook) Contrast Ratio (Lea Verou)
Palette Suggestions ColorFavs PaletteTab
More OddBird’s Recent Color Article Stacy's Color Bookmarks
COLOR RESOURCES
![Page 44: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/44.jpg)
DESIGN SOMETHINGNEXT STEPS
![Page 45: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/45.jpg)
![Page 46: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/46.jpg)
![Page 47: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/47.jpg)
YOUR CONTENTDesign
![Page 48: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/48.jpg)
ITEMS IN THESE PSD FILES MAY APPEAR DIFFERENT IN REAL LIFE
!
![Page 49: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/49.jpg)
![Page 50: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/50.jpg)
![Page 51: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/51.jpg)
+ many more
![Page 52: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/52.jpg)
EXAMPLESREAL WORLD
![Page 53: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/53.jpg)
![Page 54: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/54.jpg)
![Page 55: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/55.jpg)
![Page 56: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/56.jpg)
![Page 57: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/57.jpg)
![Page 58: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/58.jpg)
![Page 59: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/59.jpg)
![Page 60: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/60.jpg)
![Page 61: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/61.jpg)
![Page 62: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/62.jpg)
WITH COLOREXPLORING
![Page 63: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/63.jpg)
![Page 64: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/64.jpg)
![Page 65: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/65.jpg)
![Page 66: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/66.jpg)
![Page 67: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/67.jpg)
![Page 68: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/68.jpg)
![Page 69: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/69.jpg)
![Page 70: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/70.jpg)
![Page 71: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/71.jpg)
![Page 72: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/72.jpg)
![Page 73: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/73.jpg)
![Page 74: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/74.jpg)
![Page 75: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/75.jpg)
![Page 76: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/76.jpg)
![Page 77: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/77.jpg)
![Page 78: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/78.jpg)
![Page 79: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/79.jpg)
RESOURCES Design Process & Deliverables styletil.es danielmall.com/articles/rif-element-collages
stuffandnonsense.co.uk/blog/about/time_to_stop_showing_clients_static_design_visuals
typecast.com/seminars/post-comp
danielmall.com/articles/visual-inventory
rif.superfriend.ly/designs/round2
product.voxmedia.com/2013/1/24/5426808/an-inside-peek-into-the-polygon-design-process
![Page 80: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/80.jpg)
Sketch gives you the power, flexibility and speed you always wanted in a
lightweight and easy-to-use package.
sketchapp.com
![Page 82: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/82.jpg)
PHOTOSHOP
Work across desktop and mobile devices to create and enhance your photographs, web
and mobile app designs and more.
adobe.com
![Page 83: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/83.jpg)
CHICKEN CATPHOTOSHOP
![Page 84: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/84.jpg)
PHOTOSHOPCATASAURUS REX
![Page 85: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/85.jpg)
NICATLAS CAGEPHOTOSHOP
![Page 86: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/86.jpg)
PHOTOSHOPCHARACTER & PARAGRAPH STYLES
![Page 87: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/87.jpg)
PHOTOSHOPLAYER COMPS
![Page 88: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/88.jpg)
PHOTOSHOPLINKED SMART OBJECTS
![Page 89: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/89.jpg)
PHOTOSHOPCC LIBRARIES
![Page 90: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/90.jpg)
PHOTOSHOPIMAGE ASSETS
![Page 91: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/91.jpg)
PHOTOSHOPSMART GUIDES
![Page 92: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/92.jpg)
PHOTOSHOPMULTIPLE ARTBOARDS
![Page 95: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/95.jpg)
IS WEB DESIGN ASOLVED PROBLEM
![Page 96: From Scratch to Launch #2 - Design phase](https://reader033.vdocument.in/reader033/viewer/2022042619/58ce6d611a28abdc578b4d73/html5/thumbnails/96.jpg)
NEXT MEETUPFRONT-END
DEVELOPMENTMarch 21, 2017 #WPNaperville