Designing for Enterprise

Creative Works

Transcript

1. designing for
   enterprise
   @JINA // CREATIVE WORKS // MEMPHIS // 2014
   

   View Slide

2. @jina
   

   View Slide

3. HOMETOWN // NASHVILLE
   

   View Slide

4. COLLEGE TOWN // MEMPHIS
   

   View Slide

5. MEMPHIS COLLEGE OF ART
   

   View Slide

6. ODEN MARKETING & DESIGN
   Interactive Design Intern
   ROCKET SCIENCE DESIGN
   Designer
   INFERNO
   Interactive Designer
   

   View Slide

7. CURRENT CITY — SAN FRANCISCO
   

   View Slide

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
   

   View Slide

9. SENIOR PRODUCT DESIGNER
   salesforce
   

   View Slide

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.”
    

    View Slide

11. design for
    enterprise has
    big challenges
    

    View Slide

12. quality,
    craft,
    & consistency
    

    View Slide

13. tons of content
    & complex
    navigation
    

    View Slide

14. accessibility
    

    View Slide

15. designing for the
    future while
    dealing with legacy
    

    View Slide

16. how can we
    design for
    enterprise?
    

    View Slide

17. design for
    sustainability
    

    View Slide

18. design for
    customization
    

    View Slide

19. design for
    scale
    

    View Slide

20. design
    pages
    

    View Slide

21. design
    pages
    

    View Slide

22. design
    systems
    

    View Slide

23. redlines?
    

    View Slide

24. View Slide

25. redlines for large-
    scale applications
    can be a nightmare
    

    View Slide

26. style guides
    are all the rage
    …AND THEY HAVE COME A LONG WAY
    

    View Slide

27. ALISTAPART.COM/ARTICLE/WRITINGAINTERFACESTYLEGUIDE
    

    View Slide

28. Design & Brand Standards
    Front-end Development Standards
    Keeping Style Guides Current & Useful
    

    View Slide

29. when style guides
    aren’t current,
    they’re not useful
    

    View Slide

30. don’t create
    a zombie
    

    View Slide

31. create a
    living style guide
    

    View Slide

32. SFDC-STYLEGUIDE.HEROKUAPP.COM
    

    View Slide

33. Responsive prototypes
    Responsive production framework
    iOS watch, phones, tablets
    Android watch, phones, tablets
    Win8 phones, tablets
    Multiple products, acquisitions, & partners
    

    View Slide

34. PRIMARY APPLICATION COLORS
    

    View Slide

35. APPLICATION AREA COLORS
    

    View Slide

36. what if a new color
    gets added?
    THE STYLE GUIDE NEEDS TO BE UPDATED, TOO
    

    View Slide

37. TYPEFACES
    

    View Slide

38. TYPE SIZES
    

    View Slide

39. how do we keep
    colors, spacing,
    & sizes consistent?
    

    View Slide

40. how do we make
    future design
    changes easier?
    

    View Slide

41. how do we keep
    our design
    system agnostic?
    

    View Slide

42. THEO: DESIGN PROPERTY CONVERTER
    

    View Slide

43. Sass
    LESS
    Stylus
    AURA
    JSON
    XML
    HTML (style guide)
    {
    

    View Slide

44. {
    "name": "COLOR_TEXT",
    "value": "#444",
    "category": "text-color",
    "comment": "Body text color"
    }
    // Body text color
    $color-text: #444;
    SASS
    JSON
    

    View Slide

45. {
    "name": "COLOR_TEXT",
    "value": "#444",
    "category": "text-color",
    "comment": "Body text color"
    }
    
    value="#444" />
    AURA
    JSON
    

    View Slide

46. {
    "name": "COLOR_TEXT",
    "value": "#444",
    "category": "text-color",
    "comment": "Body text color"
    }
    
    colorText
    #444
    
    The quick brown fox jumps
    over the lazy dog.
    
    Body text color
    
    HTML (STYLE GUIDE)
    JSON
    

    View Slide

47. CSS — hex
    iOS — RGBA
    ANDROID — 8-digit hex
    

    View Slide

48. CSS — rem/em/px
    iOS — pt
    ANDROID — sp/dip
    

    View Slide

49. developers
    pull in design
    properties
    

    View Slide

50. no more hard-
    coded values
    

    View Slide

51. GITHUB.COM/SALESFORCE-UX/THEO
    

    View Slide

52. assets stored in a
    repository as
    scalable vector
    

    View Slide

53. STANDARD ICONS
    

    View Slide

54. CUSTOM ICONS
    

    View Slide

55. ICON FONTS
    

    View Slide

56. DOCTYPES
    

    View Slide

57. blender: rasterizes
    SVG as a fallback
    into various sizes
    

    View Slide

58. GITHUB.COM/SALESFORCE-UX/BLENDER
    

    View Slide

59. assets display in
    our style guide
    automatically
    

    View Slide

60. COMPONENTS
    

    View Slide

61. EXAMPLES
    

    View Slide

62. single source
    of truth
    

    View Slide

63. a change in one
    place changes
    everywhere
    

    View Slide

64. true
    consistency
    

    View Slide

65. brand
    customization
    

    View Slide

66. UX +
    engineering
    collaboration
    

    View Slide

67. living design
    system
    A COLLABORATION WITH SALESFORCE UX + ENGINEERING
    

    View Slide

68. MEDIUM.COM/@SOENKEROHDE/LIVING-DESIGN-SYSTEM-3AB1F2280EF7
    

    View Slide

69. — GUSTAVE FLAUBERT
    “Be regular and orderly in
    your life so that you may
    be violent and original in
    your work.”
    

    View Slide

70. @SALESFORCEUX
    

    View Slide

71. DRIBBBLE.COM/SALESFORCE
    

    View Slide

72. TWITTER, DRIBBBLE,
    INSTAGRAM, & GITHUB
    @jina
    

    View Slide