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.

1. STYLE
FRAMEWORKS
CREATING
STANDARDS
COLLABORATIVE

2. MARTI GOLD
@martigold
MANAGING UX DIRECTOR
TONIC3
www.tonic3.com
www.martigold.com

4. In RULE-BASED design,
style guides are created
so that
UNINTENTIONAL DESIGNERS
can ACCIDENTALLY
create great designs.
–Jared Spool
“
”

6. “The problem is that
design style guides
NEVER WORK.
PEOPLE STOP
”
USING THEM.
–Jared Spool

8. THE NEXT DAY WAS TITLED
“I’LL SHOW HIM!”

10. GUESS
WHAT?

11. JARED WAS RIGHT

12. WHY? BUT

13. NEXT THREE YEARS?
THE
QUEST

14. NOT STYLE GUIDE,
STYLE
FRAMEWORK
BUT A

16. THE
RULES

19. 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…

20. ESTIMATED
80%
OVERLAP
IN DEFINED ELEMENTS

21. “
THERE’S NO WAY
PROOF?”
ITS THAT HIGH.

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

23. THAT IS A
93%
OVERLAP
IN DEFINED ELEMENTS

24. 66
%
OF YOUR STAFF IS
REPLICATING WORK

25. WHAT ARE THE
CHANCES OF
NO CONFLICTS?

26. 0%

27. IF PEOPLE THINK YOUR GROUP’S
STANDARDS ARE WRONG…
GUESS
WHAT?

28. THEY WILL IGNORE THEM.

29. EVERYONE MARKETING
USER EXPERIENCE
PRODUCT MANAGERS
ACCESSIBLE TO
DEVELOPERS
OFFSHORE TEAMS
EXTERNAL AGENCIES
OUTSIDE VENDORS
ONE SOURCE

30. RULE #2
INCLUDE ONLY
THE ESSENTIALS

32. GUESS
WHAT?

33. THE
EYEDROPPER
AKA
STANDARDS
KILLER

37. RULE #4
HOLD ON
LOOSELY

38. Logo

41. WHAT IS THIS?

42. POPOVER?
MODAL?
POPUP?
OVERLAY?
ALERT BOX?
LIGHTBOX?
THE STORY

43. THEY CODED THIS…

44. SHE WANTED THIS…

46. ONE
OWNER

48. GETTING
STARTED

49. THE
PLATFORM

50. ONLINE
SCANNABLE
OUTSIDE FIREWALL
MUST
RESPONSIVE
SEARCHABLE
OPEN TO FEEDBACK
BE…
MAINTAINED BY NON-PROGRAMMERS
REQUIRE MINIMAL DEV SUPPORT
CHEAP (OK…. FREE)

51. SERIOUSLY?
WHY NOT ASK FOR
WORLD PEACE TOO?

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

53. WARNING
DO NOT REINVENT
THE WHEEL

54. LET’S TALK
FORMAT

55. PAGE
MOST VIEWED
ONE
PER STANDARD
LEAST VIEWED

56. SIMPLE
ORGANIZATION
COMPLEX

57. TOP LEVEL
LANDING PAGES

58. GRID
MODULE SIZES
RESPONSIVE BREAKS
COLORS
TYPOGRAPHY
SCAFFOLDING

59. TEXT LINKS
ELEMENTS
BUTTONS
CONTAINERS
LISTS
TABLES
ICONS
DIVIDERS
OTHERS…

60. SHOW HIDE
TABBED PANELS
ACCORDION
DRAWER
MODALS
TOOLTIPS
SCROLL BARS
SORTING
FILTERING
OTHERS…
INTERACTIONS

61. PAGINATION
BREADCRUMBS
PREVIOUS-NEXT
SEARCH BOXES
PROGRESS BARS
DROP DOWN MENUS
OTHERS…
NAVIGATION

62. CONTENT
DATES & TIMES
CURRENCY
MEASUREMENTS
PRICING
IMAGES
CHARTS
MAPS
TRADEMARKS
SPELLING & USAGE
OTHERS…

63. FORMS
FIELD LABELS
TEXT FIELDS
SELECT LISTS
RADIO BUTTONS
CHECK BOXES
MANDATORY MARKER
AUTO-COMPLETE
STEPPERS
GHOST TEXT
OTHERS…

64. ERRORS
FIELD LEVEL
FORM LEVEL
PAGE LEVEL
NULL RESULTS
NON-ERROR ALERTS
404 PAGES
DISAMBIGUATION
OTHERS…

65. FIXED
ITEMS
HEADERS
FOOTERS
CUSTOMER BAR
LEGAL TEXT
SHOPPING CARTS
LOGIN
OTHERS…

66. OTHER
EMAIL SPECS
MOBILE APPS
MEDIA SPECS
ACCESSIBILITY
SEO ISSUES
OTHERS…

67. SITE-WIDE
SEARCH

68. THINK BACK…
DID WE EVER
DEFINE A PAGE?

69. NO

70. STYLE FRAMEWORKS DEFINE
TOOLS & MATERIALS
NOT
A BLUEPRINT FOR DESIGN

71. LET’S TALK
OWNERSHIP

72. DISTRIBUTED
WORKLOAD
DATA CENTER
MODEL

73. EVERY STANDARD
HAS
AN
OWNER
RESEARCHING
WRITING
REPORTING TESTS
UPDATING
ESCALATION
COMMUNICATION

74. 3
OWNERS
BUSINESS
USER EXPERIENCE
DEVELOPMENT

76. TRANSPARENT
DISCUSSIONS
ALL COMMENTS
ARE OPEN

77. ALL
COMMENTS
ARE EMAILED TO OWNERS
THEY CAN THEN
RESPOND

78. WHAT’S ON EACH
PAGE

79. “WHAT IS THIS?”
NAME
BRIEF
DESCRIPTION
PICTURE
FOLD
LAST UPDATED?
OR
WORKING
EXAMPLE

80. “TELL ME MORE”
DETAIL
DESCRIPTION
SPECS
PLATFORMS
RELATED TOPICS
VOCABULARY

81. “I HAVE TO BUILD THIS”
LINKS
TO UX ASSETS
TO CODE ASSETS
EXAMPLE IN
PRODUCTION

82. “I WANT TO CHANGE THIS”
OWNERS
LINKS
TO TEST DATA
& BEST PRACTICE
RESEARCH
ANY OTHER
INFORMATION

83. HOW TO
JUMP START
A NEW STYLE FRAMEWORK

85. GETTING
BUY-IN

88. LAYING THE
GROUNDWORK
INSTALL THE TEMPLATE
ADD YOUR LOGO & COLORS
EDIT A COUPLE OF PAGES

89. STEAL
THIS PRESENTATION
(ITS ON SLIDESHARE)

90. DON’T LET
ONE OBJECTION
KILL EVERYTHING
FIREWALL?
PROPRIETARY INFO?
WORDPRESS OBJECTIONS?
NO WAY WE’LL REDO EXISTING GUIDES?

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

92. THANK YOU!
@martigold
@tonic3com
StyleFramework.com