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.

Framer vs CSS Grid

198 views

Published on

A quick look at two powerful, but radically different prototyping tools available to designers in 2017.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Framer vs CSS Grid

  1. 1. Prototyping is…
  2. 2. Making ideas real
  3. 3. Agenda Overview: Framer vs CSS Grid Framer • What is it? • How it works • Animation example • States example • Pros and cons CSS Grid • How it works • Grid template example • NYT breakdown • Pros and Cons Resources Questions Hack Time!
  4. 4. Framer CSS Grid
  5. 5. Framer Interactive prototyping tool. 50% Code. 50% Design. 2016 $15/month CSS Grid Layout method designed for the two-dimensional layout of items. 100% Code 2016 Free
  6. 6. Framer
  7. 7. Framer
  8. 8. Framer - Animation, Event Animation
  9. 9. Framer - Animation, Event Flows
  10. 10. Framer - Animation, Event States
  11. 11. Framer - Animation, Event framer.cloud/pMKQl framer.cloud/lhdYh
  12. 12. Framer - Animation, Event Pros Cons great community very powerful not real code $$ might date closed system steep learning curve
  13. 13. CSS Grid
  14. 14. CSS Grid “CSS Grid simplifies existing layout patterns and adds new possibilities for graphic design.”
  15. 15. CSS Grid
  16. 16. CSS Grid display: grid;
  17. 17. CSS Grid How does it work?
  18. 18. CSS Grid
  19. 19. CSS Grid Example
  20. 20. CSS Grid
  21. 21. CSS Grid
  22. 22. CSS Grid Pros Cons fast in browser lots of resources free weird syntax steep learning curve web only, layout only
  23. 23. CSS Grid Communities Offline meetup.com/CSS-Layout-Club framer.com/community/meetups Online facebook.com/groups/framerjs gridbyexample.com - Rachel Andrews
  24. 24. CSS Grid Thanks!

×