Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Designing for Enterprise
Search
jina
October 06, 2014
Design
4
170
Designing for Enterprise
Creative Works
jina
October 06, 2014
Tweet
Share
More Decks by jina
See All by jina
Design Systems are for People
jina
1
780
Design Tokens in Design Systems
jina
9
27k
Designing a Design System
jina
34
7k
Living Design Systems
jina
42
43k
Lightning Design System
jina
6
610
Sass & Style Guides
jina
11
440
Refactoring Web Interfaces
jina
20
940
In Search of the Single Source of Truth
jina
1
340
Sass Basics #1
jina
4
310
Other Decks in Design
See All in Design
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
220
Baby Bear Genius
yvonnehsuanho
PRO
0
600
改正障害者差別解消法の概要説明
securecat
0
130
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
3
850
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
3
2.7k
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
3
750
ウェブディレクターを救うBacklog
wattlaa
0
400
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
5
930
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
350
Sci-Fi: Descenso
elrtovar
0
200
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
720
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
1
9.6k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
4 Signs Your Business is Dying
shpigford
178
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Speed Design
sergeychernyshev
9
270
Teambox: Starting and Learning
jrom
130
8.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Designing for Performance
lara
604
67k
It's Worth the Effort
3n
181
27k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Transcript
designing for enterprise @JINA // CREATIVE WORKS // MEMPHIS //
2014
@jina
HOMETOWN // NASHVILLE
COLLEGE TOWN // MEMPHIS
MEMPHIS COLLEGE OF ART
ODEN MARKETING & DESIGN Interactive Design Intern ROCKET SCIENCE DESIGN
Designer INFERNO Interactive Designer
CURRENT CITY — SAN FRANCISCO
APPLE, INC Front-end UI Developer Visual Interaction Designer CRUSH +
LOVELY Interaction Designer ENGINE YARD User Experience Designer GITHUB Designer DO.COM (formerly by Salesforce) Product Designer
SENIOR PRODUCT DESIGNER salesforce
— PAUL SAFFO “It used to be that designers made
an object and walked away. Today the emphasis must shift to designing the entire life cycle.”
design for enterprise has big challenges
quality, craft, & consistency
tons of content & complex navigation
accessibility
designing for the future while dealing with legacy
how can we design for enterprise?
design for sustainability
design for customization
design for scale
design pages
design pages
design systems
redlines?
None
redlines for large- scale applications can be a nightmare
style guides are all the rage …AND THEY HAVE COME
A LONG WAY
ALISTAPART.COM/ARTICLE/WRITINGAINTERFACESTYLEGUIDE
Design & Brand Standards Front-end Development Standards Keeping Style Guides
Current & Useful
when style guides aren’t current, they’re not useful
don’t create a zombie
create a living style guide
SFDC-STYLEGUIDE.HEROKUAPP.COM
Responsive prototypes Responsive production framework iOS watch, phones, tablets Android
watch, phones, tablets Win8 phones, tablets Multiple products, acquisitions, & partners
PRIMARY APPLICATION COLORS
APPLICATION AREA COLORS
what if a new color gets added? THE STYLE GUIDE
NEEDS TO BE UPDATED, TOO
TYPEFACES
TYPE SIZES
how do we keep colors, spacing, & sizes consistent?
how do we make future design changes easier?
how do we keep our design system agnostic?
THEO: DESIGN PROPERTY CONVERTER
Sass LESS Stylus AURA JSON XML HTML (style guide) {
{ "name": "COLOR_TEXT", "value": "#444", "category": "text-color", "comment": "Body text
color" } // Body text color $color-text: #444; SASS JSON
{ "name": "COLOR_TEXT", "value": "#444", "category": "text-color", "comment": "Body text
color" } <!-- Body text color --> <aura:var name="colorText" value="#444" /> AURA JSON
{ "name": "COLOR_TEXT", "value": "#444", "category": "text-color", "comment": "Body text
color" } <tr> <td>colorText</td> <td>#444</td> <td style="color:#444;"> The quick brown fox jumps over the lazy dog. </td> <td>Body text color</td> </tr> HTML (STYLE GUIDE) JSON
CSS — hex iOS — RGBA ANDROID — 8-digit hex
CSS — rem/em/px iOS — pt ANDROID — sp/dip
developers pull in design properties
no more hard- coded values
GITHUB.COM/SALESFORCE-UX/THEO
assets stored in a repository as scalable vector
STANDARD ICONS
CUSTOM ICONS
ICON FONTS
DOCTYPES
blender: rasterizes SVG as a fallback into various sizes
GITHUB.COM/SALESFORCE-UX/BLENDER
assets display in our style guide automatically
COMPONENTS
EXAMPLES
single source of truth
a change in one place changes everywhere
true consistency
brand customization
UX + engineering collaboration
living design system A COLLABORATION WITH SALESFORCE UX + ENGINEERING
MEDIUM.COM/@SOENKEROHDE/LIVING-DESIGN-SYSTEM-3AB1F2280EF7
— GUSTAVE FLAUBERT “Be regular and orderly in your life
so that you may be violent and original in your work.”
@SALESFORCEUX
DRIBBBLE.COM/SALESFORCE
TWITTER, DRIBBBLE, INSTAGRAM, & GITHUB @jina