Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing for Enterprise

67bb0a8cd6c1993dba0bfe302852f729?s=47 jina
October 06, 2014

Designing for Enterprise

Creative Works

67bb0a8cd6c1993dba0bfe302852f729?s=128

jina

October 06, 2014
Tweet

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