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.

Develolpment first design

414 views

Published on

Developer first design is a way to make sure your finished website or app matches the vision of your design.

Published in: Internet
  • Be the first to comment

Develolpment first design

  1. 1. DEVELOPER FIRST DESIGN: Make Design Great Again. WordCamp Sacramento 2016 Ozzy Rodriguez @OzzyR
  2. 2. Design Development Production
  3. 3. Source: dr-dre-anatomy.tumblr.com
  4. 4. Style Guides Colors Typography Different variations of logos Can be as detailed as you’d like!
  5. 5. Style Guides: Colors
  6. 6. Style Guides: Typography
  7. 7. Style Guides: Typography Header (site title, description) Navigation menus Different buttons Body content Blockquotes Code blocks
  8. 8. Using a Grid Source: www.reactiongifs.com/heartache/
  9. 9. Using a Grid
  10. 10. Using a Grid How many columns? Gutters as a percentage of column width Change them!
  11. 11. Images
  12. 12. Images
  13. 13. Images Krista McPhee How to Resize an Image Without Losing Quality https://www.wpsitecare.com/how-to- resize-an-image/
  14. 14. Images: SVGs
  15. 15. Images: SVGs Dashicons Font Awesome Ionicons Icomoon CREATE YOUR OWN Fontello Fantastic.Me
  16. 16. Images: SVGs
  17. 17. Design, Development & Content
  18. 18. Action Based Design
  19. 19. Action Based Design Design for touch-only devices Design for Accessibility
  20. 20. DEVELOPER FIRST DESIGN: Make Design Great Again. WordCamp Sacramento 2016 Ozzy Rodriguez @OzzyR

×