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.

Design Processes and Systems in Craft

479 views

Published on

Delivered at DotAll 2018 in Berlin, Germany on September 27, 2018

Design shouldn't be a siloed practice, but a collaborative effort rooted in process. How do we get there?

In this session, we'll look at how we can reframe our design approach to be more human-centric and systems-minded. We'll look at each step of the process, through the lens of real-world examples, to explore how we can cultivate design thinking within multidisciplinary teams to solve complex problems. And how CraftCMS is uniquely suited to drive this forward on the web!

Published in: Design
  • Be the first to comment

Design Processes and Systems in Craft

  1. 1. Design Processes & Systems in Craft Courtney Bradford Co-Founder & Designer, Telegraph DotAll 2018 Berlin, Germany
  2. 2. Introduction ● ● ● ●
  3. 3. Courtney Bradford Web Designer
  4. 4. Courtney Bradford Web Designer
  5. 5. Courtney Bradford Web Designer Interface Designer
  6. 6. Courtney Bradford Web Designer Interface Designer
  7. 7. Courtney Bradford Web Designer Interface Designer UX/UI Designer
  8. 8. Let’s Talk About Design Systems ● ● ● ●
  9. 9. Design Systems aren’t just for Silicon Valley and enterprises.
  10. 10. A Design System helps you… Encourage collaboration Design consistently Manage your debt Improve usability & accessibility Release new features faster Learn and iterate more quickly  Focus on opportunities for impact
  11. 11. A Design System can help us, create better experiences for people. 
  12. 12. “Styles come and go. Good design is a language, not a style.” MASSIMO VIGNELLI
  13. 13. Custom layout design for each page. Before smart phones made “responsive design” necessary, there was little consideration given to flexible, consistent interface design.
  14. 14. CSS Frameworks
  15. 15. Style Tiles
  16. 16. Atomic Design
  17. 17. UI Kits
  18. 18. What makes a Design System different from a UI Kit?
  19. 19. Google Material
  20. 20. A UI Kit begins and ends with visual presentation. The HOW without the WHY.
  21. 21. Design Systems Story First
  22. 22. “I think what’s most important is you have to have a North Star or vision set. If people don’t have that, the mess builds up.”   STANLEY WOOD SPOTIFY 
  23. 23. North Star Our goal with this is to move everyone towards a common destination and give context to our work. Courtesy of Shopify Polaris
  24. 24. “A good set of principles encodes that so everyone can have this shared sense of what’s important for us and what’s true to us. When push comes to shove and you have to make a trade off, how are you, in those moments, as a team or a company going to prioritize? What are you going to care about the most?” JULIE ZHUO FACEBOOK
  25. 25. Core Styles Core styles are how we establish brand guidelines for our components and templates.
  26. 26. Components Components are the lego blocks of our interface.
  27. 27. Standards Standards are our guidelines for how the components should be used in application.
  28. 28. Don’t focus on scale. Focus on impact and outcomes.
  29. 29. Let’s Create A Design System ● ● ● ●
  30. 30. For Humans By Humans You can’t deliver the right solution if you don’t understand customer needs. First, ask questions. Later, test your designs to get feedback.
  31. 31. Know What You’re Working With • Document (screenshot) every component • Organize components • Present to team/stakeholders • Identify opportunities to unify and simplify Photo courtesy of InVision
  32. 32. VisionVision Guidelines Core Styles Components Vision
  33. 33. North Star Making the world's information accessible to everyone, regardless of the language they speak. Envisioned Future
  34. 34. North Star Making the world's information accessible to everyone, regardless of the language they speak. Core Ideology
  35. 35. North Star Making the world's information accessible to everyone, regardless of the language they speak.
  36. 36. Vision Guidelines Core Styles Components Guidelines Guidelines
  37. 37. Design Principles Universal Lilt is a global multi- lingual company helping businesses remove language as a barrier. Our design language should be as approachable, accessible, and iconic. Unified Each piece is part of a greater whole and uniquely contributes to our "human-in-loop" methodology. Our design language should be consistent and connected, shying away from isolated outliers. Pioneering We pioneering technical innovations for translation services that surprise and delight. We introduce the unexpected, but always as a means of empowering our customers.
  38. 38. Design Principles Human Because machines aren't enough, it's our humanity and capacity for empathy that connects us. Our design language should communicate with users in a familiar, human tone. Efficient We value our customer's time and recognize that a faster experience feels like an effortless one. Our site should move as fast as we do. Transitions should be efficient and coherent.
  39. 39. Vision Guidelines Core Styles Components Core Styles Core Styles
  40. 40. Typography • Typefaces • Weights • Hierarchy • Scale
  41. 41. Colors • Palette • Usage Guidelines • Accessibility Best Practices
  42. 42. Patterns, Gradients, Shadows
  43. 43. UI Icons UI icons should be universally recognizable shapes and scale smoothly (remain clear at any size). Names should be logical and easy to recall.
  44. 44. Spot Icons Spot icons are used to communicate concepts and are typically displayed at larger sizes than utility icons. Be sure to establish style rules (color, stroke, shading) and use-cases as these will be specific to your brand.
  45. 45. Illustration Illustrations, like spot icons, are used to visually communicate complex ideas. Be sure to establish style and concept guidelines (e.g. what’s appropriate content and tone?).
  46. 46. Motion Motion is a powerful tool in the interactive designer’s toolkit. Not just for aesthetic effect, but it can be used to help guide a user’s experience and provide timely feedback.
  47. 47. Media Aspect Ratio Guide
  48. 48. Responsive Breakpoints
  49. 49. Responsive Grid
  50. 50. Spacing
  51. 51. Vision Guidelines Core Styles Components Components Components
  52. 52. Atoms Informed by: • Site Architecture • Content Strategy
  53. 53. Molecules Informed by: • Site Architecture • Content Strategy
  54. 54. Templates Informed by: • Site Architecture • Content Strategy
  55. 55. Priority Guides outline content and feature hierarchy.
  56. 56. Delivery — Don’t overcomplicate it!
  57. 57. Sketch
  58. 58. Abstract
  59. 59. Let’s Build A Design System in ● ● ● ●
  60. 60. Gathering Definitions
  61. 61. Build Un-Opinionated Utility Classes with Tailwind.css
  62. 62. Tailwind.js module.exports = { textSizes: { 'xs': '.75rem', // 12px 'sm': '.875rem', // 14px 'base': '1rem', // 16px } }, modules: { textSizes: [‘responsive'] } Config .text-xs {font-size: .75rem;} @media (min-width: 576px) { .sm:text-xs { font-size: .75rem; } } @media (min-width: 768px) { .md:text-xs { font-size: .75rem; } } Output
  63. 63. Building Component Clases .timing-1 { transition-timing-function: ease; } .duration-1 { transition-duration: .15s; } .property-all { transition-property: all; } core/transitions--core.css .btn { @apply timing-1 duration-1 property-all font-medium inline-block cursor-pointer no-underline; } atoms/buttons.css
  64. 64. Establishing Core Component Classes 1. Responsive Type Scale 2. Responsive Spacing Kit 3. Responsive Aspect Ratio Kit 4. In-View and On-Load Transition Kit
  65. 65. Responsive Type Scale
  66. 66. Responsive Type Scale
  67. 67. Responsive Type Scale textSizes: { 'deka': '1.875rem', // 30px 'hecto': '2.25rem', // 36px 'kilo': '2.875rem', // 46px 'mega': '3.375rem', // 54px 'giga': '4.75rem' // 76px }, // 30/36 .header-hecto { @apply .text-deka; } @screen md { .header-hecto { @apply .text-hecto; } }
  68. 68. Responsive Type Scale textSizes: { 'deka': '1.875rem', // 30px 'hecto': '2.25rem', // 36px 'kilo': '2.875rem', // 46px 'mega': '3.375rem', // 54px 'giga': '4.75rem' // 76px }, // 36/54 .header-mega { @apply .text-hecto; } @screen md { .header-mega { @apply .text-mega; } }
  69. 69. Spacing Kit .space-b-1 { @apply .mb-8; } .space-b-2 { @apply .mb-10; } @screen md { .space-b-1 { @apply .mb-10; } .space-b-2 { @apply .mb-16; } }
  70. 70. Aspect Ratio Kit .img--1x1 { padding-bottom: 100%; } .img--4x3 { padding-bottom: 75%; } .img--16x9 { padding-bottom: 56.25%; }
  71. 71. Transition Kit .a-timing-1 { animation-timing-function: ease; } .a-delay-1 { animation-delay: .5s } .a-duration—1 { animation-duration: 1.5s } .a-fade-in { animation-name: fadeIn; } .a-fade-in-up { animation-name: fadeInUp; } .a-fade-in-right { animation-name: fadeInRight; }
  72. 72. Transition Kit .start-animations { &.inView--a-fade-in { animation-name: fadeIn; } &.inView--a-fade-in-up { animation-name: fadeInUp; } &.inView--a-fade-in-right { animation-name: fadeInRight; } }
  73. 73. Atoms, Molecules, & Field Structure
  74. 74. [EXPORT VIDEO] Of Craft Fields being built
  75. 75. Shared Molecule: Contact List
  76. 76. Shared Field Structures
  77. 77. Contact List Molecule <div class="contact-list"> {% if card.image.count() %} <div class="contact-list__img"> {% include '_atoms/figure' with { content: block } %} </div> {% endif %} <div class="contact-list__content"> {% include '_molecules/contact-info' with { content: block } %} </div> </div>
  78. 78. Profile List Molecule <div class="profile-list {{render.spacing(content)}}"> {% for block in content.profile %} <div class="profile-list__profile {{render.transitio {% if card.image.count() %} <div class="profile-list__img"> {% include '_atoms/figure' with { content: block } %} </div> {% endif %} <div class=“profile-list__content"> {% include '_molecules/contact-info' with { content: block } %} </div> {% endfor %}
  79. 79. Contact Info Molecule <h4 class="contact-info__header"> {% if block.firstName %}{{block.firstName}}{% endif %} {% if block.lastName %}{{block.lastName}}{% endif %} </h4> <div class="contact-info__meta"> {% if block.phone|length %} <a href="tel:{{block.phone}}" class="contact- info__phone">{{block.phone}}</a> {% endif %} {% if block.email|length %} <a href="mailto:{{block.email}}" class="contact- info__mail">{{block.email}}</a> {% endif %} </div>
  80. 80. Agnostic Field Handles Instance agnostic field handles let us work with template partials like we’re building with legos.
  81. 81. Always be consistent.
  82. 82. Practical Application in Craft Templates
  83. 83. _entry.twig {% case "actionHero" %} {% include '_molecules/hero--action' with { content: block } %} {% case "featureHero" %} {% include ‘_molecules/hero--feature’ with { content: block } %} {% case "highlightCards" %} {% include ‘_molecules/cards--highlight' with { content: block } %} {% case “sectionHeader" %}
  84. 84. Core Components & Macros
  85. 85. Colors Macro {% macro colors(content) %} {% spaceless %} {% for value in content.colors.all() %} {{ value.background }} {{ value.text }} {% endfor %} {% endspaceless %} {% endmacro %}
  86. 86. Spacing & Transition Kits Applied {# Globals #} {% import '_macros/global' as render %} {# Article Template #} <div class="basic-article {{render.spacing(content)}}"> <div class="article {{render.transitions(content)}}"> {{content.article}} </div> </div>
  87. 87. Transition Macro {% macro transitions(content) %} {% spaceless %} {% for value in content.transition %} {{value.timing}} {{value.delay}} {{value.duration}} {{value.initialize}} {% if value.initialize == 'inView' %} inView--{% endif %}{{value.transition}} {% endfor %} {% endspaceless %} {% endmacro %}
  88. 88. Button Macro {% macro button(link, class, icon) %} <a href="{{ link.url }}" class="{{ class }}" {% if icon != 'no-icon' %} <span class="icon --sm ml-1"> <svg><use xlink:href=“symbols.svg#{{icon}}”> </use></svg> </span> {% endif %} </a> {% endmacro %}
  89. 89. Ratio & Radius Kits <figure class="img {{render.ratio(content)}} {{render.radius(content)}}"> {{render.single_image(content.image.one())}} </figure>
  90. 90. And so on… {% macro spacing(content) %} {% spaceless %} {{ content.spacing }} {% endspaceless %} {% endmacro %} {% macro radius(content) %} {% spaceless %} {{ content.radius }} {% endspaceless %} {% endmacro %} {% macro align(content) %} {% spaceless %} {{ content. alignment }} {% endspaceless %} {% endmacro %} {% macro pattern(content) %} {% if content.pattern != 'no-pattern' %} bg-pattern {{ content.pattern }} {% endif %} {% endmacro %}
  91. 91. Transitions
  92. 92. Dribbble Credit: @ChrisGannon
  93. 93. Thank you! Danke! Design Processes & Systems in Craft Courtney Bradford @courtney271 DotAll 2018 ! Berlin, Germany

×