Creative Works
designing forenterprise@JINA // CREATIVE WORKS // MEMPHIS // 2014
View Slide
@jina
HOMETOWN // NASHVILLE
COLLEGE TOWN // MEMPHIS
MEMPHIS COLLEGE OF ART
ODEN MARKETING & DESIGNInteractive Design InternROCKET SCIENCE DESIGNDesignerINFERNOInteractive Designer
CURRENT CITY — SAN FRANCISCO
APPLE, INCFront-end UI DeveloperVisual Interaction DesignerCRUSH + LOVELYInteraction DesignerENGINE YARDUser Experience DesignerGITHUBDesignerDO.COM (formerly by Salesforce)Product Designer
SENIOR PRODUCT DESIGNERsalesforce
— PAUL SAFFO“It used to be that designers madean object and walked away.Today the emphasis must shift todesigning the entire life cycle.”
design forenterprise hasbig challenges
quality,craft,& consistency
tons of content& complexnavigation
accessibility
designing for thefuture whiledealing with legacy
how can wedesign forenterprise?
design forsustainability
design forcustomization
design forscale
designpages
designsystems
redlines?
redlines for large-scale applicationscan be a nightmare
style guidesare all the rage…AND THEY HAVE COME A LONG WAY
ALISTAPART.COM/ARTICLE/WRITINGAINTERFACESTYLEGUIDE
Design & Brand StandardsFront-end Development StandardsKeeping Style Guides Current & Useful
when style guidesaren’t current,they’re not useful
don’t createa zombie
create aliving style guide
SFDC-STYLEGUIDE.HEROKUAPP.COM
Responsive prototypesResponsive production frameworkiOS watch, phones, tabletsAndroid watch, phones, tabletsWin8 phones, tabletsMultiple products, acquisitions, & partners
PRIMARY APPLICATION COLORS
APPLICATION AREA COLORS
what if a new colorgets added?THE STYLE GUIDE NEEDS TO BE UPDATED, TOO
TYPEFACES
TYPE SIZES
how do we keepcolors, spacing,& sizes consistent?
how do we makefuture designchanges easier?
how do we keepour designsystem agnostic?
THEO: DESIGN PROPERTY CONVERTER
SassLESSStylusAURAJSONXMLHTML (style guide){
{"name": "COLOR_TEXT","value": "#444","category": "text-color","comment": "Body text color"}// Body text color$color-text: #444;SASSJSON
{"name": "COLOR_TEXT","value": "#444","category": "text-color","comment": "Body text color"}value="#444" />AURAJSON
{"name": "COLOR_TEXT","value": "#444","category": "text-color","comment": "Body text color"}colorText#444The quick brown fox jumpsover the lazy dog.Body text colorHTML (STYLE GUIDE)JSON
CSS — hexiOS — RGBAANDROID — 8-digit hex
CSS — rem/em/pxiOS — ptANDROID — sp/dip
developerspull in designproperties
no more hard-coded values
GITHUB.COM/SALESFORCE-UX/THEO
assets stored in arepository asscalable vector
STANDARD ICONS
CUSTOM ICONS
ICON FONTS
DOCTYPES
blender: rasterizesSVG as a fallbackinto various sizes
GITHUB.COM/SALESFORCE-UX/BLENDER
assets display inour style guideautomatically
COMPONENTS
EXAMPLES
single sourceof truth
a change in oneplace changeseverywhere
trueconsistency
brandcustomization
UX +engineeringcollaboration
living designsystemA COLLABORATION WITH SALESFORCE UX + ENGINEERING
MEDIUM.COM/@SOENKEROHDE/LIVING-DESIGN-SYSTEM-3AB1F2280EF7
— GUSTAVE FLAUBERT“Be regular and orderly inyour life so that you maybe violent and original inyour work.”
@SALESFORCEUX
DRIBBBLE.COM/SALESFORCE
TWITTER, DRIBBBLE,INSTAGRAM, & GITHUB@jina