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.

Foundation: Prototype to Production

17,454 views

Published on

Learn more about Foundation 6: http://foundation.zurb.com/
In today’s fast moving world, you shouldn’t need to throw away your prototype when it’s time to take it into production. You expect your backend tools to grow and scale with your application, your frontend framework should as well. In this talk we’ll cover how the Foundation framework takes you from prototype to production, maximizing your productivity while creating an amazing final product.

On the prototyping front, we’ll cover how Foundation gets you up and running quickly with minimal dependencies, letting you rapidly produce proof of concepts and interactive components without writing any custom javascript. From there, we’ll jump into how Foundation lets you optimize for production by moving to semantic css classes, paring down your frontend file size to use only what you need, easily implementing custom designs without overriding tons of code, and integrating custom javascript plugins and implementations seamlessly with the core framework.

Published in: Design

Foundation: Prototype to Production

  1. 1. Foundation Prototype To Production @kbal11 @ZURB @ZURBFoundation
  2. 2. Hi there. I’m from ZURB.
  3. 3. We’re a team of T-shaped product designers who help grow businesses.
  4. 4. We also make…
  5. 5. Foundation for Sites Foundation for Email
  6. 6. Front-end platform for reaching
 anyone on any device
  7. 7. Foundation by the Numbers 27,000 Daily Google Searches 880+ Contributors 24,200 Github Stars
  8. 8. Why a Framework?
  9. 9. Why a Framework? We take care of tons of stuff for you.
  10. 10. Lower cost of ownership. We take care of tons of stuff for you.
  11. 11. Battle tested. Dozens of clients large and small.
  12. 12. Less QA and debugging. We’ve fixed it all already.
  13. 13. Responsiveness Mobile First Isn’t Just a Slogan
  14. 14. Standardization Bring new team up to speed and reduce thrash.
  15. 15. Refined and refined and refined. We’ve gone through 6 major version of Foundation for Sites alone.
  16. 16. Supported by an organization. ZURB, duh.
  17. 17. Aren’t Frameworks Just For Prototyping?
  18. 18. Prototype VS Production
  19. 19. Prototyping • Low Fidelity • Quick Iteration • Optimize for Development Speed
  20. 20. Production • High Fidelity • Stable • Highly Customized • Optimize for End User Speed
  21. 21. Prototype
  22. 22. Production
  23. 23. Prototyping With Foundation
  24. 24. Prototyping • Low Fidelity • Quick Iteration • Optimize for Development Speed
  25. 25. Low Fidelity
  26. 26. Wireframe in Code
  27. 27. Quick Iteration
  28. 28. Consolidated Settings
  29. 29. The ZURB Stack
  30. 30. Optimize For Development Speed
  31. 31. Built-In Responsive Grid
  32. 32. Interactivity Without Javascript
  33. 33. 30+ Components Out Of The Box
  34. 34. What About Production?
  35. 35. Production • High Fidelity • Stable • Highly Customized • Optimize for End User Speed
  36. 36. High Fidelity
  37. 37. Semantic
  38. 38. Accessibility Baked In
  39. 39. Stable
  40. 40. Battle Tested
  41. 41. Highly Customized
  42. 42. Extensible
  43. 43. “Foundational”
  44. 44. Optimize For End User Speed
  45. 45. Streamlined
  46. 46. Fast
  47. 47. More Important Than Ever
  48. 48. The Rise Of Design
  49. 49. Design And Development
  50. 50. Design And Development
  51. 51. Common Language
  52. 52. Speed of Change
  53. 53. Best Practices Like…
  54. 54. Mobile First Development Because we hear people use phones
  55. 55. SCSS CSS With Superpowers
  56. 56. Accessibility Every Device Doesn’t Just Mean Phones
  57. 57. ES2016 21 years old and ready to party
  58. 58. Unified Event Listeners Everybody’s doing it
  59. 59. Foundation In Production
  60. 60. Build On A Solid Foundation
  61. 61. Thank You! @kbal11 @ZURB @ZURBFoundation

×