Style Framework - SXSW2015
•
6 likes•2,606 views
A updated version of my original Style Framework presentation. From SXSW 2015 Core Conversation.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (13)
Similar to Style Framework - SXSW2015
Similar to Style Framework - SXSW2015 (20)
Recently uploaded
Recently uploaded (20)
Style Framework - SXSW2015
- 2. My name is Marti Gold. You can find me at @martigold I’m the Managing Director of User Experience for Tonic3. www.tonic3.com | @tonic3com We are a division of W3 Digital Agency www.w3americas.com Offices in Buenos Aires, Sao Paulo and Dallas MARTI GOLDMANAGING UX DIRECTOR TONIC3 @martigold @tonic3com
- 3. This is usability expert Jared Spool. At a BigD Conference a few years ago, my friend Adam Polanksy came up to me just before Jared Spool’s keynote address, and said, “Jared is gonna make you really mad.” “Why?” I asked. “I’ve heard this talk before. Just trust me - he’s gonna make you mad.” And then he walked away. What Adam knew was that, as the Creative Director for Travelocity, I had been busting my rear end on a new Style Guide for about six months. I was convinced, and had told everyone in the company, that this was TRULY important work — it would cut down churn, give us a more consistent user experience, save development time, etc… So Jared was breezing along, being very entertaining, and about half way through he began talking about something he called “Rules Based Design” - which he said was usually presented through Style Guides. Then, in front of ALL my direct reports and colleagues, he said… <click>
- 4. –Jared Spool style guides are created so that UNINTENTIONAL DESIGNERS can ACCIDENTALLY create great designs. “ ” In RULE-BASED design,
- 5. This was my face. <pause> But wait, its gets worse. My boss, the person funding all the resources necessary for me to create my Style Guide Masterpiece, was also in the audience. Jared was kind enough to continue… <click>
- 6. I was pretending to be polite and pay attention to him, but inside I was doing this… “The problem is that design style guides NEVER WORK. ” PEOPLE STOP –Jared Spool USING THEM. #STYLEFRAME #SXSW
- 8. So, on Monday, my new personal TV show was titled, “I’ll Show Him!” I told everyone Jared was CLEARLY now so far removed from real world, hands- on UX that he was just plain wrong. I managed to re-sell this idea to pretty much everyone. So we kept working. THE NEXT DAY WAS TITLED “I’LL SHOW HIM!”
- 10. I was pretending to be polite and pay attention to him, but inside I was doing this… HOW MANY OF YOU HAVE #STYLEFRAME #SXSW USED OR BUILT THIS TYPE OF STYLE GUIDE?
- 11. I was pretending to be polite and pay attention to him, but inside I was doing this…
- 12. I was pretending to be polite and pay attention to him, but inside I was doing this… DID IT #STYLEFRAME #SXSW MAGICALLY MAKE YOUR SITE CONSISTENT?
- 13. MINE DID NOT. I HAD TO ADMIT…
- 14. JARED WAS RIGHT
- 17. STYLE FRAMEWORK BUT A NOT STYLE GUIDE, #STYLEFRAME #SXSW
- 19. RULES THE
- 22. 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…
- 23. IN YOU ORG? OF OVERLAPPING ELEMENTS PERCENTAGE WHAT’S THE
- 24. 80% I GUESSED OVERLAP IN MOST ORGANIZATIONS
- 25. THERE’S NO WAY ITS THAT HIGH. “ PROOF?” #STYLEFRAME #SXSW
- 26. are defined in ALL 3 repositories84 124 common elements & interactions* are defined in 2 of the 332 ITEMS HAD NO OVERLAP8ONLY * started with Bootstrap and added items CHART THE
- 27. 93% THAT IS A OVERLAP IN DEFINED ELEMENTS #STYLEFRAME #SXSW
- 28. NO CONFLICTS? WHAT ARE THE CHANCES OF
- 29. 0%
- 30. SO GUESS WHAT? CONFLICTS MEAN AT LEAST ONE IS WRONG.
- 31. THEY WILL IGNORE THEM.
- 32. EVERYONEMARKETING USER EXPERIENCE PRODUCT MANAGERS ACCESSIBLE TO DEVELOPERS OFFSHORE TEAMS EXTERNAL AGENCIES OUTSIDE VENDORS ONE SOURCE #STYLEFRAME #SXSW
- 36. WHAT DO YOU DO? YOU HAVE A SPRINT DEMO TOMORROW… YOU MUST KNOW THE COLOR OF THAT BUTTON…
- 38. READ BE HONEST…. HOW MANY PEOPLE HAVE ACTUALLY YOUR STANDARDS? HAVE YOU?
- 41. “PERFECTION IS UNATTAINBLE” #STYLEFRAME #SXSW – Roy McAfee in Tin Cup
- 43. #STYLEFRAME #SXSW ANY “PIXEL PERFECTIONISTS” IN THE AUDIENCE?
- 45. WHAT IS THIS?
- 47. THEY CODED THIS…
- 48. SHE MEANT THIS… #STYLEFRAME #SXSW
- 53. #STYLEFRAME #SXSW HOW MANY OF THE RULESDOES YOUR STYLE GUIDE BREAK?
- 54. Mine broke ALL of them. #STYLEFRAME #SXSW
- 55. GETTING STARTED
- 56. LET’S TALK WHAT MIGHT THIS LOOK LIKE?
- 59. PAGE MOST VIEWED STUFF ONE PER STANDARD LEAST VIEWED STUFF #STYLEFRAME #SXSW WHY?
- 61. “WE’RE GONNA HAVE A MONTAGE” OR “HOW I LEARNED TO SOLVE THIS PROBLEM SPEED READERS GET READY…
- 64. SHOW HIDE INTERACTIONS ACCORDION DRAWER MODALS TOOLTIPS TABBED PANELS SCROLL BARS OTHERS… SORTING FILTERING
- 65. PAGINATION NAVIGATION BREADCRUMBS PREVIOUS-NEXT SEARCH BOXES PROGRESS BARS DROP DOWN MENUS OTHERS…
- 66. CONTENT DATES & TIMES CURRENCY MEASUREMENTS PRICING TRADEMARKS SPELLING & USAGE OTHERS… IMAGES CHARTS MAPS
- 67. FORMS FIELD LABELS TEXT FIELDS SELECT LISTS RADIO BUTTONS CHECK BOXES MANDATORY MARKER OTHERS… AUTO-COMPLETE STEPPERS GHOST TEXT
- 68. ERRORS FIELD LEVEL FORM LEVEL PAGE LEVEL NULL RESULTS NON-ERROR ALERTS 404 PAGES OTHERS… DISAMBIGUATION
- 69. FIXED ITEMS HEADERS FOOTERS CUSTOMER BAR LEGAL TEXT SHOPPING CARTS LOGIN OTHERS…
- 70. OTHER EMAIL SPECS MOBILE APPS MEDIA SPECS ACCESSIBILITY SEO ISSUES OTHERS…
- 71. SITE-WIDE SEARCH
- 73. “WHAT IS THIS?” BRIEF DESCRIPTION PICTURE NAME FOLD LAST UPDATED? WORKING EXAMPLE OR
- 74. “TELL ME MORE” DETAIL DESCRIPTION SPECS PLATFORMS RELATED TOPICS VOCABULARY
- 75. “I HAVE TO BUILD THIS” LINKS TO UX ASSETS EXAMPLE IN PRODUCTION TO CODE ASSETS
- 76. “I WANT TO CHANGE THIS” OWNERS ANY OTHER INFORMATION LINKS TO TEST DATA & BEST PRACTICE RESEARCH
- 77. whew!
- 78. THINK BACK… DID THIS FRAMEWORK EVER DEFINE A PAGE? #STYLEFRAME #SXSW
- 79. NO
- 80. STYLE FRAMEWORKS DEFINE TOOLS & MATERIALS A BLUEPRINT FOR DESIGN NOT #STYLEFRAME #SXSW
- 81. WHO OWNS IT? LET’S TALK OWNERSHIP
- 82. OWNER RESEARCHING WRITING REPORTING TESTS UPDATING COMMUNICATION ESCALATION AN EVERY STANDARD NEEDS
- 83. SO… HOW CAN YOU PREVENT DICTATORSHIPS?
- 85. BUSINESS 3 USER EXPERIENCE DEVELOPMENT OWNERS #STYLEFRAME #SXSW FOR EACH STANDARD
- 88. COMMENTS ARE PUBLIC MY SOLUTION? OWNER RESPONSES ARE ALSO PUBLIC
- 89. NO MORE PRIVATE EMAIL DISCUSSIONS CLOSED MEETINGS “FORGOTTEN” CONSULTATIONS TRANSPARENCY MEANS
- 90. WHAT PLATFORM?
- 91. ONLINE OUTSIDE FIREWALL QUICKLY SCANNABLE MUST RESPONSIVE SEARCHABLE OPEN TO FEEDBACK & MODIFICATION BE… MAINTAINED BY NON-PROGRAMMERS REQUIRE MINIMAL DEV SUPPORT CHEAP (OK…. FREE) #STYLEFRAME #SXSW
- 92. SERIOUSLY? WHY NOT ASK FOR WORLD PEACE TOO?
- 94. I CREATE MY STYLE FRAMEWORKS IN WORDPRESS EASY TO SET UP EASY TO MAINTAIN EASY TO CUSTOMIZE NON-CODERS CAN DO IT ALL FEATURES BUILT IN FREE #STYLEFRAME #SXSW BECAUSE I’M NOT A DEVELOPER
- 95. WARNING DO NOT REINVENT THE WHEEL #STYLEFRAME #SXSW
- 96. HOW CAN YOU JUMP STARTA NEW STYLE FRAMEWORK? #STYLEFRAME #SXSW
- 98. HOW DO I GET BUY IN? BUT….
- 100. LAYING THE GROUNDWORK INSTALL THE TEMPLATE ADD YOUR LOGO & COLORS EDIT A COUPLE OF PAGES
- 101. THIS PRESENTATION STEAL (ITS ON SLIDESHARE)
- 102. KILL EVERYTHING ONE OBJECTION FIREWALL? WORDPRESS OBJECTIONS? NO WAY WE’LL REDO EXISTING GUIDES? DON’T LET PROPRIETARY INFO?
- 103. THERE CAN BE ONLY ONE. RULE #1 RULE #2 YOU ONLY HAVE FIVE MINUTES. SAY WHAT YOU MEAN. RULE #4 RULE #3 HOLD ON LOOSELY. THINK REPUBLIC, NOT DICTATORSHIP. RULE #5 REMEMBER… #STYLEFRAME #SXSW