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 &
Systems in Craft
Courtney Bradford
Co-Founder & Designer, Telegraph
DotAll 2018 Berlin, Germany
Introduction
● ● ● ●
Courtney Bradford
Web Designer
Courtney Bradford
Web Designer
Courtney Bradford
Web Designer
Interface Designer
Courtney Bradford
Web Designer
Interface Designer
Courtney Bradford
Web Designer
Interface Designer
UX/UI Designer
Let’s Talk About
Design Systems
● ● ● ●
Design Systems
aren’t just for
Silicon Valley
and enterprises.
A Design System helps you…
Encourage collaboration
Design consistently
Manage your debt
Improve usability & accessibility
...
A Design System
can help us, create
better experiences
for people. 
“Styles come and go. Good design is a
language, not a style.”
MASSIMO VIGNELLI
Custom layout design
for each page.
Before smart phones made “responsive
design” necessary, there was little
consideration...
CSS Frameworks
Style Tiles
Atomic Design
UI Kits
What makes a Design System
different from a UI Kit?
Google Material
A UI Kit begins and ends with
visual presentation.
The HOW without the WHY.
Design Systems
Story First
“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 ...
North Star
Our goal with this is to move everyone towards a
common destination and give context to our work.
Courtesy of S...
“A good set of principles encodes that so everyone
can have this shared sense of what’s important for us
and what’s true t...
Core Styles
Core styles are how we establish
brand guidelines for our
components and templates.
Components
Components are the lego blocks of
our interface.
Standards
Standards are our guidelines for
how the components should be used
in application.
Don’t focus on scale.
Focus on impact and outcomes.
Let’s Create
A Design System
● ● ● ●
For Humans
By Humans
You can’t deliver the right solution
if you don’t understand customer
needs.
First, ask questions. La...
Know What You’re
Working With
• Document (screenshot) every
component
• Organize components
• Present to team/stakeholders...
VisionVision
Guidelines
Core Styles
Components
Vision
North Star
Making the world's information
accessible to everyone, regardless
of the language they speak.
Envisioned Future
North Star
Making the world's information
accessible to everyone, regardless
of the language they speak.
Core Ideology
North Star
Making the world's information
accessible to everyone, regardless
of the language they speak.
Vision
Guidelines
Core Styles
Components
Guidelines
Guidelines
Design Principles
Universal
Lilt is a global multi-
lingual company helping
businesses remove
language as a barrier. Our
d...
Design Principles
Human
Because machines aren't
enough, it's our humanity
and capacity for empathy
that connects us. Our
d...
Vision
Guidelines
Core Styles
Components
Core Styles
Core Styles
Typography
• Typefaces
• Weights
• Hierarchy
• Scale
Colors
• Palette
• Usage Guidelines
• Accessibility Best Practices
Patterns, Gradients, Shadows
UI Icons
UI icons should be
universally recognizable
shapes and scale smoothly
(remain clear at any size).
Names should be...
Spot Icons
Spot icons are used to
communicate concepts and
are typically displayed at
larger sizes than utility
icons. Be ...
Illustration
Illustrations, like spot icons,
are used to visually
communicate complex ideas.
Be sure to establish style
an...
Motion
Motion is a powerful tool in
the interactive designer’s
toolkit. Not just for
aesthetic effect, but it can
be used ...
Media Aspect Ratio Guide
Responsive Breakpoints
Responsive Grid
Spacing
Vision
Guidelines
Core Styles
Components
Components
Components
Atoms
Informed by:
• Site Architecture
• Content Strategy
Molecules
Informed by:
• Site Architecture
• Content Strategy
Templates
Informed by:
• Site Architecture
• Content Strategy
Priority Guides
outline content
and feature hierarchy.
Delivery —
Don’t overcomplicate it!
Sketch
Abstract
Let’s Build A Design
System in
● ● ● ●
Gathering
Definitions
Build Un-Opinionated
Utility Classes with
Tailwind.css
Tailwind.js
module.exports = {
textSizes: {
'xs': '.75rem', // 12px
'sm': '.875rem', // 14px
'base': '1rem', // 16px
}
},
...
Building Component Clases
.timing-1 {
transition-timing-function: ease;
}
.duration-1 {
transition-duration: .15s;
}
.prop...
Establishing Core Component Classes
1. Responsive Type Scale
2. Responsive Spacing Kit
3. Responsive Aspect Ratio Kit
4. I...
Responsive Type
Scale
Responsive Type
Scale
Responsive Type Scale
textSizes: {
'deka': '1.875rem', // 30px
'hecto': '2.25rem', // 36px
'kilo': '2.875rem', // 46px
'me...
Responsive Type Scale
textSizes: {
'deka': '1.875rem', // 30px
'hecto': '2.25rem', // 36px
'kilo': '2.875rem', // 46px
'me...
Spacing Kit
.space-b-1 {
@apply .mb-8;
}
.space-b-2 {
@apply .mb-10;
}
@screen md {
.space-b-1 {
@apply .mb-10;
}
.space-b...
Aspect Ratio Kit
.img--1x1 {
padding-bottom: 100%;
}
.img--4x3 {
padding-bottom: 75%;
}
.img--16x9 {
padding-bottom: 56.25...
Transition Kit
.a-timing-1 {
animation-timing-function: ease;
}
.a-delay-1 {
animation-delay: .5s
}
.a-duration—1 {
animat...
Transition Kit
.start-animations {
&.inView--a-fade-in {
animation-name: fadeIn;
}
&.inView--a-fade-in-up {
animation-name...
Atoms, Molecules, &
Field Structure
[EXPORT VIDEO]
Of Craft Fields being
built
Shared Molecule:
Contact List
Shared Field
Structures
Contact List
Molecule
<div class="contact-list">
{% if card.image.count() %}
<div class="contact-list__img">
{% include '_...
Profile List
Molecule
<div class="profile-list {{render.spacing(content)}}">
{% for block in content.profile %}
<div class...
Contact Info
Molecule
<h4 class="contact-info__header">
{% if block.firstName %}{{block.firstName}}{% endif %}
{% if block...
Agnostic Field
Handles
Instance agnostic field handles let us
work with template partials like we’re
building with legos.
Always
be
consistent.
Practical Application
in Craft Templates
_entry.twig
{% case "actionHero" %}
{% include '_molecules/hero--action' with {
content: block
}
%}
{% case "featureHero" ...
Core Components &
Macros
Colors Macro
{% macro colors(content) %}
{% spaceless %}
{% for value in content.colors.all() %}
{{ value.background }}
{{...
Spacing & Transition Kits Applied
{# Globals #}
{% import '_macros/global' as render %}
{# Article Template #}
<div class=...
Transition Macro
{% macro transitions(content) %}
{% spaceless %}
{% for value in content.transition %}
{{value.timing}}
{...
Button Macro
{% macro button(link, class, icon) %}
<a href="{{ link.url }}" class="{{ class }}"
{% if icon != 'no-icon' %}...
Ratio & Radius Kits
<figure class="img {{render.ratio(content)}} {{render.radius(content)}}">
{{render.single_image(conten...
And so on…
{% macro spacing(content) %}
{% spaceless %}
{{ content.spacing }}
{% endspaceless %}
{% endmacro %}
{% macro r...
Transitions
Dribbble Credit: @ChrisGannon
Thank you! Danke!
Design Processes & Systems in Craft
Courtney Bradford
@courtney271
DotAll 2018 ! Berlin, Germany
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Design Processes and Systems in Craft
Upcoming SlideShare
Loading in …5
×

Design Processes and Systems in Craft

744 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

×