Improving communication between designers and developers

DESIGN SYSTEM OPSANTON ZVONKOV

ABOUT MEANTON ZVONKOV

@QVIK

‣ Graduated from Aalto University 2013 ‣ Media technology & content production

‣ Software developer @ Qvik since 2011 ‣ Doing all kinds of stuff… ‣ 65% iOS developer ‣ 25% Front-end developer ‣ 7% backend developer ‣ 3% UI designer

AGENDA‣ It is about improving collaboration

between designers and developers ‣ What is a design system? ‣ How that would help you improve the

collaboration? ‣ Advanced design systems ‣ What is design system ops? ‣ Examples, more sources

@QVIK3

TRADITIONAL WAY

@QVIKDeveloper

“The design is ready”Designer

TRADITIONAL WAY‣ Design files or screenshots are used as

reference on what to implement ‣ Designer communicates verbally when

something is done ‣ Designer/developer extracts the needed

bits from the design files ‣ fonts, images, icons, colors ‣ different export may be needed for

different platforms (web, iOS, native, keynote, …)

@QVIK5

CHALLENGES‣ Lack of single source of truth ‣ Mismatching information between multiple

design files ‣ Manual work exporting assets ‣ sprites for web, iOS/Android images for

different resolutions, … ‣ Manual work transferring assets ‣ Files duplicated in cloud (Google Drive) and

project version control (Git) ‣ “When things are ready to be implemented?” ‣ Change management not trivial

@QVIK6

A DESIGN SYSTEMINTRODUCING

@QVIK

DESIGN SYSTEM TOKENS

FONTS Font files Font sizes

Font colors

IMAGES Images Icons

Screenshots

COLORS A set of colors

used in the app

OTHER ELEMENTS Marginals padding line sizes

animation durations

@QVIK

A DESIGN SYSTEM‣ Single source of truth for your brand &

images ‣ Not only images, but all the tokens

necessary, for all platforms ‣ Helps you centralize your design

information ‣ Helps you share it to people who may

want to use it ‣ Nicely introduced by Salesforce UX team

in a blog post

@QVIK9

THE FIRST STEP TO YOUR OWN DESIGN SYSTEM‣ Move all the tokens into one place ‣ platform images and fonts into appropriate

folders ‣ add one place when you define your font

usage, button styles, colors etc. ‣ it can be sketch page, pdf, json file, web

page ‣ keep it up to date! ‣ This will help you to communicate your

brand to all the people who needs to use it@QVIK10

@QVIK

H1: OPEN SANSCOND. BOLD 63/60#3B343A, ALL CAPSH2: OPEN SANS COND. BOLD 39/39, #3B343A, ALL CAPSIngressi: Open Sans Light 21/38, #4E434C.This text is used for descriptive paragraph, accompanying the main headline or H2 title.

Paragraph: Open Sans Regular 14/22. Space after paragraph: 22

link in paragraph: #FC2580

Bolded text with Open Sans Semibold and #4E434C

italic with Open Sans Italic

H3 Open Sans Reg 19/21 #4E434CSubheader for paragraph text, used inbetween paragraphs

Highlight-caption: Open Sans 13/20.Used in small special paragraphs or image captions.

H4 HIGHLIGHTS: OPEN SANS BOLD 13/17, ALL CAPS, CHARACTER SPACING +1

CTA-BUTTON TEXT: OPEN SANS CONDENSED 14/15, #FC2580, WITH »-MARK AT THE END

PRIMARY: #FC2580

PRIMARY ACTIVE #C72368

SECONDARY: #FC2580 LINE 1

SECONDARY: #FC2580 LINE 3

QVIK.FI - FONTS

@QVIK

links online,special highlights offline

H1, H2,H3, H4, ingressiparagraphs

only links, special highlights such as badges etc to grasp attention

main pink formost occasions

special purplefor very specialoccasions

main background secondary background

special background

special background,highlight texts

TYPOGRAPHY COLOURS

BRANDING MAIN COLOURS

TIGHT MAIN PALETTE

#FC2580

#FC2580

#FC2580

#DF2774#5E4175#3B343A

#3B343A

#3B343A#4E434C#6F686D

#4E434C

#ECECEC

#ECECEC#FFFFFF

#FFFFFF

#FFFFFF

QVIK.FI - COLORS

@QVIK

QVIK.FI - IMAGES (1X, 2X, ICONS, VECTOR, …)

AUTOMATE ASSET EXPORTS‣ Find out how your design tools can make

exporting easier for you ‣ Style Inventory - collect colors & styles &

fonts from the design to a Sketch sheet ‣ Photoshop can export assets for you,

when you name your layers appropriately

@QVIK14

SAVE STYLES DIRECTLY TO THE PROJECT‣ Teach your designers how you can add/

modify assets of your project(s) ‣ Makes the communication easier; assets

are ready to use when the project is updated ‣ Pretty demanding for designers, especially if

you develop multiple platforms ‣ Will still need a single source of truth, if

multiple projects (imagine scale of companies as Yle, Spotify, Salesforce, …)

@QVIK15

BRAND.AI - DESIGN SYSTEM CLOUD‣ Your design system tokens in cloud ‣ sketch plugin to use the design system

in your sketch files ‣ can be edited online ‣ can export iOS, Android, SASS, LESS

etc. ‣ not versioned; devs need to download

zip archives… ‣ pretty limited exports at least for iOS

@QVIK16

MORE TOOLS‣ https://sympli.io/ - promising way to drag

& drop styles into your project ‣ Sketch & photoshop to Android Studio

& Xcode ‣ https://zeplin.io - helps the handover

from photoshop & sketch ‣ generates assets for different

platforms ‣ one source for colors etc.

@QVIK17

THE THERMONUCLEAR LEVELDESIGN SYSTEMS

@QVIK

DUMP THE CLOUD; ENTER GIT‣ Use json to store color values, font values etc. ‣ robust version control; users will easily see if

updates are available ‣ branches can be used for trying out new things

by designers ‣ can make your design system living ‣ Make it single source of truth ‣ Can use scripts etc. for repeated tasks ‣ Git is hard for devs, even harder for designers

@QVIK19

@QVIK20

AUTOMATE TASKS‣ Use scripts to generate platform specific assets

after the changes are committed to Git ‣ ie. generate image sprite from all the images. ‣ salesforce open sourced Theo to do some of

the work ‣ css/sass/less for web development ‣ Android style files & proper images ‣ proper image sizes for iOS + generated

class to use colors in code

@QVIK21

AUTOMATE TASKS #2‣ Generate your style guide each time the

system has changed ‣ re-generate your keynote/powerpoint

templates ‣ Notify your users easily when changes are

available ‣ Generate npm module (javascript) / pod

version (iOS) for every system ‣ Automatic UI testing ‣ is the design system applied properly?

@QVIK22

INTRODUCE DESIGN SYSTEM OPS‣ If you want to do this seriously, introduce

this role in your organization ‣ It should be a person or a team who have

understanding of both, designers and developers world

‣ The design system ops will find/develop the best tools, and teaches the organization to make best use of ‘em

‣ remember: it is all about making the design system communication more effective, not just playing around with cool tools

@QVIK23

… OR START SLOWLY‣ git-sketch-plugin - using git inside sketch ‣ gemba.io - “Drag and drop assets to Git”

LIVE WORLD EXAMPLESDESIGN SYSTEMS IN THE WILD

@QVIK

SALESFORCE - LIVING DESIGN SYSTEM‣ https://medium.com/salesforce-ux/living-

design-system-3ab1f2280ef7#.elup0lhxn ‣ https://www.lightningdesignsystem.com/ ‣ website that introduces the system ‣ libraries for web/iOS/Android to make use

of the design system ‣ the most sophisticated one around

@QVIK

OTHER DESIGN SYSTEM -RELATED STUFF‣ http://atomicdesign.bradfrost.com/ ‣ - very promising looking book on the

topic, in progress ‣ AirBnb ‣ http://airbnb.design/building-a-visual-

language ‣ Spotify ‣ https://medium.com/@hellostanley/

design-doesnt-scale-4d81e12cbc3e#.5o52cwwuh

@QVIK

STYLE GUIDES‣ https://disqus.com/pages/style-guide/ ‣ https://www.mozilla.org/en-US/styleguide/

websites/sandstone/ ‣ https://www.yelp.com/styleguide

@QVIK

SUMMARY‣ Design system is a collection of your

design tokens ‣ LVL1: Create one location for the design

system to act as single source of truth for your brand & designs

‣ LVL2: Automate your asset exports / imports

‣ LVL3: Ditch your cloud in favour of Git ‣ LVL4: Introduce Design system ops and

start using Git; automate even more with Git hooks

@QVIK

THANKS! QUESTIONS?THAT’S IT

@QVIK