Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Style Frameworks - w/o Notes

20,900 views

Published on

It has been argued that UX standards are just a seductive fantasy. No matter what we do, our carefully-crafted libraries and templates seem inevitably doomed, sacrificed to one-off solutions pushed live in the name of "Agile." Yet we, as designers, continue to find ourselves spending countless hours re-explaining basic interactions and citing best practices. Inevitably, someone will suggest the development of site-wide standards…

And the process begins again.

This session will present Style Frameworks, a new standards format designed to break this cycle. Style Frameworks consolidate visual and coding standards from marketing, user experience and engineering into a single, unified source supported by the entire company. This step-by-step walkthrough will cover everything required to create and effectively maintain a Style Framework. In the end, attendees will be provided a link to download a sample Style Framework they can freely modify and implement right away.

Published in: Design

Style Frameworks - w/o Notes

  1. STYLE FRAMEWORKS CREATING STANDARDS COLLABORATIVE
  2. MARTI GOLD @martigold MANAGING UX DIRECTOR TONIC3 www.tonic3.com www.martigold.com
  3. In RULE-BASED design, style guides are created so that UNINTENTIONAL DESIGNERS can ACCIDENTALLY create great designs. –Jared Spool “ ”
  4. “The problem is that design style guides NEVER WORK. PEOPLE STOP ” USING THEM. –Jared Spool
  5. THE NEXT DAY WAS TITLED “I’LL SHOW HIM!”
  6. GUESS WHAT?
  7. JARED WAS RIGHT
  8. WHY? BUT
  9. NEXT THREE YEARS? THE QUEST
  10. NOT STYLE GUIDE, STYLE FRAMEWORK BUT A
  11. THE RULES
  12. MARKETING STYLE GUIDE UX GUIDELINES DEVELOPMENT CODE REPOSITORY COLORS P P P FONTS P P P BUTTONS P P P LINKS P P P PAGINATION P P P NAVIGATION P P P ERROR MESSAGES P P P more…
  13. ESTIMATED 80% OVERLAP IN DEFINED ELEMENTS
  14. “ THERE’S NO WAY PROOF?” ITS THAT HIGH.
  15. THE 120 common elements & interactions* 81 are defined in ALL 3 repositories 31 are defined in 2 of the 3 ONLY8 ITEMS HAD NO OVERLAP * started with Bootstrap and added items CHART
  16. THAT IS A 93% OVERLAP IN DEFINED ELEMENTS
  17. 66 % OF YOUR STAFF IS REPLICATING WORK
  18. WHAT ARE THE CHANCES OF NO CONFLICTS?
  19. 0%
  20. IF PEOPLE THINK YOUR GROUP’S STANDARDS ARE WRONG… GUESS WHAT?
  21. THEY WILL IGNORE THEM.
  22. EVERYONE MARKETING USER EXPERIENCE PRODUCT MANAGERS ACCESSIBLE TO DEVELOPERS OFFSHORE TEAMS EXTERNAL AGENCIES OUTSIDE VENDORS ONE SOURCE
  23. RULE #2 INCLUDE ONLY THE ESSENTIALS
  24. GUESS WHAT?
  25. THE EYEDROPPER AKA STANDARDS KILLER
  26. RULE #4 HOLD ON LOOSELY
  27. Logo
  28. WHAT IS THIS?
  29. POPOVER? MODAL? POPUP? OVERLAY? ALERT BOX? LIGHTBOX? THE STORY
  30. THEY CODED THIS…
  31. SHE WANTED THIS…
  32. ONE OWNER
  33. GETTING STARTED
  34. THE PLATFORM
  35. ONLINE SCANNABLE OUTSIDE FIREWALL MUST RESPONSIVE SEARCHABLE OPEN TO FEEDBACK BE… MAINTAINED BY NON-PROGRAMMERS REQUIRE MINIMAL DEV SUPPORT CHEAP (OK…. FREE)
  36. SERIOUSLY? WHY NOT ASK FOR WORLD PEACE TOO?
  37. CREATE YOUR STYLE FRAMEWORK IN WORDPRESS FREE EASY TO SET UP EASY TO MAINTAIN EASY TO CUSTOMIZE EASY FOR NON-CODERS ALL FEATURES BUILT IN
  38. WARNING DO NOT REINVENT THE WHEEL
  39. LET’S TALK FORMAT
  40. PAGE MOST VIEWED ONE PER STANDARD LEAST VIEWED
  41. SIMPLE ORGANIZATION COMPLEX
  42. TOP LEVEL LANDING PAGES
  43. GRID MODULE SIZES RESPONSIVE BREAKS COLORS TYPOGRAPHY SCAFFOLDING
  44. TEXT LINKS ELEMENTS BUTTONS CONTAINERS LISTS TABLES ICONS DIVIDERS OTHERS…
  45. SHOW HIDE TABBED PANELS ACCORDION DRAWER MODALS TOOLTIPS SCROLL BARS SORTING FILTERING OTHERS… INTERACTIONS
  46. PAGINATION BREADCRUMBS PREVIOUS-NEXT SEARCH BOXES PROGRESS BARS DROP DOWN MENUS OTHERS… NAVIGATION
  47. CONTENT DATES & TIMES CURRENCY MEASUREMENTS PRICING IMAGES CHARTS MAPS TRADEMARKS SPELLING & USAGE OTHERS…
  48. FORMS FIELD LABELS TEXT FIELDS SELECT LISTS RADIO BUTTONS CHECK BOXES MANDATORY MARKER AUTO-COMPLETE STEPPERS GHOST TEXT OTHERS…
  49. ERRORS FIELD LEVEL FORM LEVEL PAGE LEVEL NULL RESULTS NON-ERROR ALERTS 404 PAGES DISAMBIGUATION OTHERS…
  50. FIXED ITEMS HEADERS FOOTERS CUSTOMER BAR LEGAL TEXT SHOPPING CARTS LOGIN OTHERS…
  51. OTHER EMAIL SPECS MOBILE APPS MEDIA SPECS ACCESSIBILITY SEO ISSUES OTHERS…
  52. SITE-WIDE SEARCH
  53. THINK BACK… DID WE EVER DEFINE A PAGE?
  54. NO
  55. STYLE FRAMEWORKS DEFINE TOOLS & MATERIALS NOT A BLUEPRINT FOR DESIGN
  56. LET’S TALK OWNERSHIP
  57. DISTRIBUTED WORKLOAD DATA CENTER MODEL
  58. EVERY STANDARD HAS AN OWNER RESEARCHING WRITING REPORTING TESTS UPDATING ESCALATION COMMUNICATION
  59. 3 OWNERS BUSINESS USER EXPERIENCE DEVELOPMENT
  60. TRANSPARENT DISCUSSIONS ALL COMMENTS ARE OPEN
  61. ALL COMMENTS ARE EMAILED TO OWNERS THEY CAN THEN RESPOND
  62. WHAT’S ON EACH PAGE
  63. “WHAT IS THIS?” NAME BRIEF DESCRIPTION PICTURE FOLD LAST UPDATED? OR WORKING EXAMPLE
  64. “TELL ME MORE” DETAIL DESCRIPTION SPECS PLATFORMS RELATED TOPICS VOCABULARY
  65. “I HAVE TO BUILD THIS” LINKS TO UX ASSETS TO CODE ASSETS EXAMPLE IN PRODUCTION
  66. “I WANT TO CHANGE THIS” OWNERS LINKS TO TEST DATA & BEST PRACTICE RESEARCH ANY OTHER INFORMATION
  67. HOW TO JUMP START A NEW STYLE FRAMEWORK
  68. GETTING BUY-IN
  69. LAYING THE GROUNDWORK INSTALL THE TEMPLATE ADD YOUR LOGO & COLORS EDIT A COUPLE OF PAGES
  70. STEAL THIS PRESENTATION (ITS ON SLIDESHARE)
  71. DON’T LET ONE OBJECTION KILL EVERYTHING FIREWALL? PROPRIETARY INFO? WORDPRESS OBJECTIONS? NO WAY WE’LL REDO EXISTING GUIDES?
  72. REMEMBER… RULE #1 THERE CAN BE ONLY ONE. RULE #2 INCLUDE ONLY THE ESSENTIALS. RULE #3 YOU ONLY HAVE FIVE MINUTES. RULE #4 HOLD ON LOOSELY. RULE #5 SAY WHAT YOU MEAN. RULE #6 THINK REPUBLIC, NOT DICTATORSHIP.
  73. THANK YOU! @martigold @tonic3com StyleFramework.com

×