Design Processes and Systems in Craft

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

Courtney Bradford
Web 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
Release new features faster
Learn and iterate more quickly
Focus on opportunities for impact

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 given to flexible, consistent
interface design.

What makes a Design System
different from a UI Kit?

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

“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

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

“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

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. Later, test
your designs to get feedback.

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

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
Core Ideology

North Star

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

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.

Vision
Guidelines
Core Styles
Components
Core Styles
Core Styles

Typography
• Typefaces
• Weights
• Hierarchy
• Scale

Colors
• Palette
• Usage Guidelines
• Accessibility Best Practices

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.

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.

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

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.

Vision
Guidelines
Core Styles
Components
Components
Components

Atoms
Informed by:
• Site Architecture
• Content Strategy

Molecules
Informed by:

Templates
Informed by:

Priority Guides
outline content
and feature hierarchy.

Delivery —
Don’t overcomplicate it!

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

Build Un-Opinionated
Utility Classes with
Tailwind.css

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

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

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

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

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

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

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 {
animation-duration: 1.5s
}
.a-fade-in {
animation-name: fadeIn;
}
.a-fade-in-up {
animation-name: fadeInUp;
}
.a-fade-in-right {
animation-name: fadeInRight;
}

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

Atoms, Molecules, &
Field Structure

[EXPORT VIDEO]
Of Craft Fields being
built

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>

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

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>

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

Practical Application
in Craft Templates

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

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

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>

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

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

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

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

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

Design Processes and Systems in Craft

Recommended

Recommended

More Related Content

Similar to Design Processes and Systems in Craft

Similar to Design Processes and Systems in Craft (20)

Recently uploaded

Recently uploaded (20)

Design Processes and Systems in Craft