Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Accounting for Quantity and Scalability
Amy Vainieri & Courtney Clark
O’Reilly Design Conference, San Francisco
March 21, ...
When a technology
matures, design moves to
the foreground because
the underlying machinery
has been commoditized.
“
John M...
Hello.
Amy
@avainie
Courtney
@circlish
Who are you?
Have you used

a design system?
Who loves

a good design
system?
Who is…
still not
sure?
How do you
know if you need
a design system?
Your site has 20+ button styles
Your site will evolve

or grow over time.
sharing or turnover
You have a lot of project
So…what is a

design system?
1 2 3 4 5 6 7 8
ImagesviaTacoBell
+ More variation!
8 ingredients
=
50+ menu options!
Case Study
A design system in the wild.
AfterBefore
Wireframes
Digital design
system…
What are our ingredients?
Elements
Building Blocks
Pages
Basics
Basics
Elements
Building Blocks
Pages
Basics
Elements
Elements
Building Blocks
Pages
Basics
Building Blocks
Building Blocks
Elements
Building Blocks
Pages
Basics
Pages
Average Hero
Stat Boxes
Volunteer Openings

Teasers
Quote (with button)
Story Teasers
Image Gallery
Support Teasers
...
Why use

a design
system?
Scalability
Consistency
Efficiency

& Teamwork
Consistency
Efficiency & Teamwork
Scalability
Consistency
Efficiency & Teamwork
Scalability
Consistency
Efficiency & Teamwork
Scalability
This design system has
made my life rainbows
and unicorns.
“Dan Mouyard

Front-End Developer Extraordinaire
Consistency
Efficiency & Teamwork
Scalability
#DesignSystems Lesson
Scalability
Benefits Consistency
Efficiency

& Teamwork
After Launch
The story continues…
Extending

the system
1. What already exists?
2. What is the significance?
3. How will it be used again

in the future?
Ask:
Guard the
system, or it will
unravel quickly.
#DesignSystems Lesson
It was vital to understand
the genesis of the design
system. After that, it was
easy peasy to maintain

and extend the sys...
How do you get
buy in?
“
John Maeda

Design in Tech Report
‘Scale’ a company’s design
function through better
managing/leading of
designers and s...
Time
Developing & Refining System Implementing System
Money
Design System
Traditional Process
Frame it around investment.
Project Management
DevelopmentUser Experience
Design

System
Business Development
GovernanceDesign & Branding
What about
clients?
Teach your clients.
Share your approach.
#DesignSystems Lesson
Tips and Tricks
Be consistent!
Be organized!
Document!
Communicate!
Code!
Decide on the afterlife!
You have bigger
fish to fry.
#DesignSystems Lesson
Like fun
404 pages
and pre-
loaders.
Who wouldn’t want
more delight?
Ask us anything.
avainieri@taoti.com

@avainie
cclark@forumone.com

@circlish
#DesignSystems
Próxima SlideShare
Cargando en…5
×

Design Systems - O'Reilly Design Conference

225 visualizaciones

Publicado el

Atomic design, pattern libraries, modular design—the process of designing with a system goes by many names, but regardless of what you call it, the advantages of this process are clear. Whether you’re on a large team or a small one, taking on a huge project or a one-page website, working with a design system can help make your project more efficient and infinitely scalable, provided you take the time to set yourself and your team up for success.

Amy Vainieri and Courtney Clark explain how Forum One used a robust design system when recently tackling an enormous user experience and design challenge: a website for a large, service-based government organization targeted at millennials, with stakeholders in over 60 countries. Amy and Courtney share their strategy from this project and offer takeaways from the experience that have influenced their other ongoing projects.
You’ll learn how a design system works, the benefits of creating one, and options for how to implement a system on projects. You’ll also get some tips and tricks for creating a process and resources that can be easily implemented by developers.

Publicado en: Diseño
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Design Systems - O'Reilly Design Conference

  1. 1. Accounting for Quantity and Scalability Amy Vainieri & Courtney Clark O’Reilly Design Conference, San Francisco March 21, 2017 #DesignSystems Design Systems
  2. 2. When a technology matures, design moves to the foreground because the underlying machinery has been commoditized. “ John Maeda Design in Tech Report
  3. 3. Hello. Amy @avainie Courtney @circlish
  4. 4. Who are you?
  5. 5. Have you used
 a design system?
  6. 6. Who loves
 a good design system?
  7. 7. Who is… still not sure?
  8. 8. How do you know if you need a design system?
  9. 9. Your site has 20+ button styles
  10. 10. Your site will evolve
 or grow over time.
  11. 11. sharing or turnover You have a lot of project
  12. 12. So…what is a
 design system?
  13. 13. 1 2 3 4 5 6 7 8
  14. 14. ImagesviaTacoBell + More variation!
  15. 15. 8 ingredients = 50+ menu options!
  16. 16. Case Study A design system in the wild.
  17. 17. AfterBefore
  18. 18. Wireframes
  19. 19. Digital design system… What are our ingredients?
  20. 20. Elements Building Blocks Pages Basics
  21. 21. Basics
  22. 22. Elements Building Blocks Pages Basics
  23. 23. Elements
  24. 24. Elements Building Blocks Pages Basics
  25. 25. Building Blocks
  26. 26. Building Blocks
  27. 27. Elements Building Blocks Pages Basics
  28. 28. Pages Average Hero Stat Boxes Volunteer Openings
 Teasers Quote (with button) Story Teasers Image Gallery Support Teasers Share Bar
  29. 29. Why use
 a design system? Scalability Consistency Efficiency
 & Teamwork
  30. 30. Consistency Efficiency & Teamwork Scalability
  31. 31. Consistency Efficiency & Teamwork Scalability
  32. 32. Consistency Efficiency & Teamwork Scalability
  33. 33. This design system has made my life rainbows and unicorns. “Dan Mouyard Front-End Developer Extraordinaire
  34. 34. Consistency Efficiency & Teamwork Scalability
  35. 35. #DesignSystems Lesson Scalability Benefits Consistency Efficiency
 & Teamwork
  36. 36. After Launch The story continues…
  37. 37. Extending
 the system
  38. 38. 1. What already exists? 2. What is the significance? 3. How will it be used again
 in the future? Ask:
  39. 39. Guard the system, or it will unravel quickly. #DesignSystems Lesson
  40. 40. It was vital to understand the genesis of the design system. After that, it was easy peasy to maintain
 and extend the system. “ Sarah Coles Designer Extraordinaire
  41. 41. How do you get buy in?
  42. 42. “ John Maeda Design in Tech Report ‘Scale’ a company’s design function through better managing/leading of designers and shareable design systems
  43. 43. Time Developing & Refining System Implementing System Money Design System Traditional Process Frame it around investment.
  44. 44. Project Management DevelopmentUser Experience Design
 System Business Development GovernanceDesign & Branding
  45. 45. What about clients?
  46. 46. Teach your clients. Share your approach. #DesignSystems Lesson
  47. 47. Tips and Tricks
  48. 48. Be consistent!
  49. 49. Be organized!
  50. 50. Document!
  51. 51. Communicate!
  52. 52. Code!
  53. 53. Decide on the afterlife!
  54. 54. You have bigger fish to fry. #DesignSystems Lesson
  55. 55. Like fun 404 pages and pre- loaders.
  56. 56. Who wouldn’t want more delight?
  57. 57. Ask us anything. avainieri@taoti.com
 @avainie cclark@forumone.com
 @circlish #DesignSystems

×