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!

1. Design Processes &
Systems in Craft
Courtney Bradford
Co-Founder & Designer, Telegraph
DotAll 2018 Berlin, Germany

2. Introduction
● ● ● ●

3. Courtney Bradford
Web Designer

5. Courtney Bradford
Web Designer

6. Courtney Bradford
Web Designer
Interface Designer

7. Courtney Bradford
Web Designer
Interface Designer

8. Courtney Bradford
Web Designer
Interface Designer
UX/UI Designer

10. Let’s Talk About
Design Systems
● ● ● ●

11. Design Systems
aren’t just for
Silicon Valley
and enterprises.

12. 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

13. A Design System
can help us, create
better experiences
for people.

14. “Styles come and go. Good design is a
language, not a style.”
MASSIMO VIGNELLI

15. Custom layout design
for each page.
Before smart phones made “responsive
design” necessary, there was little
consideration given to flexible, consistent
interface design.

16. CSS Frameworks

17. Style Tiles

18. Atomic Design

19. UI Kits

20. What makes a Design System
different from a UI Kit?

21. Google Material

22. A UI Kit begins and ends with
visual presentation.
The HOW without the WHY.

23. Design Systems
Story First

24. “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

25. North Star
Our goal with this is to move everyone towards a
common destination and give context to our work.
Courtesy of Shopify Polaris

26. “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

28. Core Styles
Core styles are how we establish
brand guidelines for our
components and templates.

29. Components
Components are the lego blocks of
our interface.

30. Standards
Standards are our guidelines for
how the components should be used
in application.

31. Don’t focus on scale.
Focus on impact and outcomes.

32. Let’s Create
A Design System
● ● ● ●

33. 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.

34. 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

35. VisionVision
Guidelines
Core Styles
Components
Vision

36. North Star
Making the world's information
accessible to everyone, regardless
of the language they speak.
Envisioned Future

37. North Star
Making the world's information
accessible to everyone, regardless
of the language they speak.
Core Ideology

38. North Star
Making the world's information
accessible to everyone, regardless
of the language they speak.

39. Vision
Guidelines
Core Styles
Components
Guidelines
Guidelines

40. 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.

41. 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.

42. Vision
Guidelines
Core Styles
Components
Core Styles
Core Styles

43. Typography
• Typefaces
• Weights
• Hierarchy
• Scale

44. Colors
• Palette
• Usage Guidelines
• Accessibility Best Practices

48. Patterns, Gradients, Shadows

49. 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.

50. 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.

51. 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?).

53. 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.

55. Media Aspect Ratio Guide

56. Responsive Breakpoints

57. Responsive Grid

58. Spacing

59. Vision
Guidelines
Core Styles
Components
Components
Components

60. Atoms
Informed by:
• Site Architecture
• Content Strategy

61. Molecules
Informed by:
• Site Architecture
• Content Strategy

62. Templates
Informed by:
• Site Architecture
• Content Strategy

63. Priority Guides
outline content
and feature hierarchy.

64. Delivery —
Don’t overcomplicate it!

66. Sketch

67. Abstract

72. Let’s Build A Design
System in
● ● ● ●

73. Gathering
Definitions

74. Build Un-Opinionated
Utility Classes with
Tailwind.css

75. 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

76. 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

77. 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

78. Responsive Type
Scale

79. Responsive Type
Scale

80. 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;
}
}

81. 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;
}
}

82. 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;
}
}

83. Aspect Ratio Kit
.img--1x1 {
padding-bottom: 100%;
}
.img--4x3 {
padding-bottom: 75%;
}
.img--16x9 {
padding-bottom: 56.25%;
}

84. 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;
}

85. 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;
}
}

87. Atoms, Molecules, &
Field Structure

88. [EXPORT VIDEO]
Of Craft Fields being
built

89. Shared Molecule:
Contact List

90. Shared Field
Structures

91. 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>

92. 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 %}

93. 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>

94. Agnostic Field
Handles
Instance agnostic field handles let us
work with template partials like we’re
building with legos.

95. Always
be
consistent.

96. Practical Application
in Craft Templates

98. _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" %}

99. Core Components &
Macros

100. Colors Macro
{% macro colors(content) %}
{% spaceless %}
{% for value in content.colors.all() %}
{{ value.background }}
{{ value.text }}
{% endfor %}
{% endspaceless %}
{% endmacro %}

101. 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>

102. 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 %}

103. 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 %}

104. Ratio & Radius Kits
<figure class="img {{render.ratio(content)}} {{render.radius(content)}}">
{{render.single_image(content.image.one())}}
</figure>

105. 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 %}

107. Transitions

110. Dribbble Credit: @ChrisGannon

111. Thank you! Danke!
Design Processes & Systems in Craft
Courtney Bradford
@courtney271
DotAll 2018 ! Berlin, Germany