Designing for Enterprise

Creative Works

Transcript

1. designing for enterprise @JINA // CREATIVE WORKS // MEMPHIS // 2014
2. @jina
3. HOMETOWN // NASHVILLE
4. COLLEGE TOWN // MEMPHIS
5. MEMPHIS COLLEGE OF ART
6. ODEN MARKETING & DESIGN Interactive Design Intern ROCKET SCIENCE DESIGN Designer INFERNO Interactive Designer
7. CURRENT CITY — SAN FRANCISCO
8. 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
9. SENIOR PRODUCT DESIGNER salesforce
10. — 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.”
11. design for enterprise has big challenges
12. quality, craft, & consistency
13. tons of content & complex navigation
14. accessibility
15. designing for the future while dealing with legacy
16. how can we design for enterprise?
17. design for sustainability
18. design for customization
19. design for scale
20. design pages
21. design pages
22. design systems
23. redlines?
25. redlines for large- scale applications can be a nightmare
26. style guides are all the rage …AND THEY HAVE COME A LONG WAY
27. ALISTAPART.COM/ARTICLE/WRITINGAINTERFACESTYLEGUIDE
28. Design & Brand Standards Front-end Development Standards Keeping Style Guides Current & Useful
29. when style guides aren’t current, they’re not useful
30. don’t create a zombie
31. create a living style guide
32. SFDC-STYLEGUIDE.HEROKUAPP.COM
33. Responsive prototypes Responsive production framework iOS watch, phones, tablets Android watch, phones, tablets Win8 phones, tablets Multiple products, acquisitions, & partners
34. PRIMARY APPLICATION COLORS
35. APPLICATION AREA COLORS
36. what if a new color gets added? THE STYLE GUIDE NEEDS TO BE UPDATED, TOO
37. TYPEFACES
38. TYPE SIZES
39. how do we keep colors, spacing, & sizes consistent?
40. how do we make future design changes easier?
41. how do we keep our design system agnostic?
42. THEO: DESIGN PROPERTY CONVERTER
43. Sass LESS Stylus AURA JSON XML HTML (style guide) {
44. { "name": "COLOR_TEXT", "value": "#444", "category": "text-color", "comment": "Body text color" } // Body text color $color-text: #444; SASS JSON
45. { "name": "COLOR_TEXT", "value": "#444", "category": "text-color", "comment": "Body text color" } <!-- Body text color --> <aura:var name="colorText" value="#444" /> AURA JSON
46. { "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
47. CSS — hex iOS — RGBA ANDROID — 8-digit hex
48. CSS — rem/em/px iOS — pt ANDROID — sp/dip
49. developers pull in design properties
50. no more hard- coded values
51. GITHUB.COM/SALESFORCE-UX/THEO
52. assets stored in a repository as scalable vector
53. STANDARD ICONS
54. CUSTOM ICONS
55. ICON FONTS
56. DOCTYPES
57. blender: rasterizes SVG as a fallback into various sizes
58. GITHUB.COM/SALESFORCE-UX/BLENDER
59. assets display in our style guide automatically
60. COMPONENTS
61. EXAMPLES
62. single source of truth
63. a change in one place changes everywhere
64. true consistency
65. brand customization
66. UX + engineering collaboration
67. living design system A COLLABORATION WITH SALESFORCE UX + ENGINEERING
68. MEDIUM.COM/@SOENKEROHDE/LIVING-DESIGN-SYSTEM-3AB1F2280EF7
69. — GUSTAVE FLAUBERT “Be regular and orderly in your life so that you may be violent and original in your work.”
70. @SALESFORCEUX
71. DRIBBBLE.COM/SALESFORCE
72. TWITTER, DRIBBBLE, INSTAGRAM, & GITHUB @jina