Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From Scratch to Launch #2 - Design phase

Part of a series for WordPress Naperville meet up group.

  • Login to see the comments

From Scratch to Launch #2 - Design phase

  1. 1. PHASE DESIGN WordPress Naperville Meetup February 21, 2017 #WPNaperville 6:00 - Networking 6:20 - Introductions 6:30 - Presentation From Scratch to Launch #2
  2. 2. Giving back TO SET TONE LISTEN Community Service Modern Bold Authentic Social justice Warm Impactful
  3. 3. INSPIRATION GATHER
  4. 4. DOCUMENTING INSPIRATION Bookmarking App & Extension RAINDROP.IO
  5. 5. Visual Asset Library DOCUMENTING INSPIRATION
  6. 6. PHOTOS Visual Asset Library DOCUMENTING INSPIRATION
  7. 7. PINTEREST Visual Asset Library & Bookmarks DOCUMENTING INSPIRATION
  8. 8. Too many to list DOCUMENTING INSPIRATION
  9. 9. TYPOGRAPHY START WITH
  10. 10. Oliver Reichenstein, 2006 WEB DESIGN IS 95% TYPOGRAPHY
  11. 11. Avoid using more than 2-3 different typeface families (unless you really know what you are doing). TYPOGRAPHY GUIDELINES
  12. 12. Use a single space between sentences to avoid rivers. TYPOGRAPHY GUIDELINES Photo credit - Jeff Dahl
  13. 13. Left aligned is best for readability
 (for L-R languages) TYPOGRAPHY GUIDELINES
  14. 14. 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.
  15. 15. The wider the column, the greater the line-height (leading). TYPOGRAPHY GUIDELINES
  16. 16. Can you easily scan the article? Is there a clear/predictable structure? TYPOGRAPHY HIERARCHY
  17. 17. Too many to list WEB DESIGN IS 95% TYPOGRAPHY
  18. 18. 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
  19. 19. COLOR PLAY WITH
  20. 20. 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
  21. 21. DESIGN SOMETHING NEXT STEPS
  22. 22. YOUR CONTENT Design
  23. 23. ITEMS IN THESE PSD FILES MAY APPEAR DIFFERENT IN REAL LIFE !
  24. 24. + many more
  25. 25. EXAMPLES REAL WORLD
  26. 26. WITH COLOR EXPLORING
  27. 27. 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
  28. 28. Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. sketchapp.com
  29. 29. PHOTOSHOP Work across desktop and mobile devices to create and enhance your photographs, web and mobile app designs and more. adobe.com
  30. 30. CHICKEN CAT PHOTOSHOP
  31. 31. PHOTOSHOP CATASAURUS REX
  32. 32. NICATLAS CAGE PHOTOSHOP
  33. 33. PHOTOSHOP CHARACTER & PARAGRAPH STYLES
  34. 34. PHOTOSHOP LAYER COMPS
  35. 35. PHOTOSHOP LINKED SMART OBJECTS
  36. 36. PHOTOSHOP CC LIBRARIES
  37. 37. PHOTOSHOP IMAGE ASSETS
  38. 38. PHOTOSHOP SMART GUIDES
  39. 39. PHOTOSHOP MULTIPLE 
 ARTBOARDS
  40. 40. EXTRACT TOOL
  41. 41. MOBILE APPS
  42. 42. IS WEB DESIGN A SOLVED PROBLEM
  43. 43. NEXT MEETUP FRONT-END DEVELOPMENT March 21, 2017 #WPNaperville

×