$30 off During Our Annual Pro Sale. View Details »

Designing for Enterprise

jina
October 06, 2014

Designing for Enterprise

Creative Works

jina

October 06, 2014
Tweet

More Decks by jina

Other Decks in Design

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