Designing for Enterprise

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?

24. None

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