Style Frameworks - w/o Notes
92
STYLE FRAMEWORKS COLLABORATIVE CREATING STANDARDS
-
Upload
marti-gold-tonic3 -
Category
Design
-
view
16 -
download
2
description
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.
Transcript of Style Frameworks - w/o Notes
STYLEFRAMEWORKS
COLLABORATIVECREATING
STANDARDS
MARTI GOLD
@martigold
MANAGING UX DIRECTOR
TONIC3
www.tonic3.comwww.martigold.com
–Jared Spool
style guides are createdso thatUNINTENTIONAL DESIGNERS can ACCIDENTALLYcreate great designs.
“
”
In RULE-BASED design,
“The problem is thatdesign style guides
NEVER WORK.
”PEOPLE STOP
–Jared Spool
USING THEM.
THE NEXT DAY WAS TITLED
“I’LL SHOW HIM!”
GUESSWHAT?
JARED WAS
RIGHT
WHY?BUT
NEXT THREE YEARS?
THEQUEST
STYLEFRAMEWORK
BUT ANOT STYLE GUIDE,
RULESTHE
MARKETINGSTYLE GUIDE
UXGUIDELINES
DEVELOPMENT CODE REPOSITORY
COLORS P P PFONTS P P PBUTTONS P P PLINKS P P PPAGINATION P P PNAVIGATION P P PERROR MESSAGES P P Pmore…
80%ESTIMATED
OVERLAPIN DEFINED ELEMENTS
THERE’S NO WAYITS THAT HIGH.
“
PROOF?”
are defined in ALL 3 repositories81120 common elements & interactions*
are defined in 2 of the 331ITEMS HAD NO OVERLAP8ONLY
* started with Bootstrap and added items
CHARTTHE
93%THAT IS A
OVERLAPIN DEFINED ELEMENTS
66REPLICATING WORK
OF YOUR STAFF IS
%
NO CONFLICTS?WHAT ARE THECHANCES OF
0%
GUESSWHAT?
IF PEOPLE THINK YOUR GROUP’S STANDARDS ARE WRONG…
THEY WILL IGNORE THEM.
EVERYONEMARKETINGUSER EXPERIENCE
PRODUCT MANAGERS
ACCESSIBLE TO
DEVELOPERS
OFFSHORE TEAMSEXTERNAL AGENCIESOUTSIDE VENDORS
ONE SOURCE
INCLUDE ONLYTHE ESSENTIALS
RULE #2
GUESSWHAT?
THEEYEDROPPER
STANDARDSKILLER
AKA
HOLD ONLOOSELY
RULE #4
Logo
WHAT IS THIS?
MODAL?POPUP?
OVERLAY?
POPOVER?
ALERT BOX?
LIGHTBOX?
THE STORY
THEY CODED THIS…
SHE WANTED THIS…
ONEOWNER
GETTINGSTARTED
THEPLATFORM
ONLINE
OUTSIDE FIREWALL
SCANNABLE
MUSTRESPONSIVE
SEARCHABLE
OPEN TO FEEDBACK
BE…MAINTAINED BY NON-PROGRAMMERS
REQUIRE MINIMAL DEV SUPPORTCHEAP (OK…. FREE)
SERIOUSLY?
WHY NOT ASK FORWORLD PEACE TOO?
CREATE YOUR STYLE FRAMEWORK IN
WORDPRESS
EASY TO SET UPEASY TO MAINTAINEASY TO CUSTOMIZEEASY FOR NON-CODERSALL FEATURES BUILT IN
FREE
WARNING
DO NOT REINVENTTHE WHEEL
LET’S TALKFORMAT
PAGEMOST VIEWED
ONEPER STANDARD
LEAST VIEWED
SIMPLE
ORGANIZATION
COMPLEX
TOP LEVELLANDING PAGES
GRID
SCAFFOLDINGCOLORSTYPOGRAPHY
MODULE SIZESRESPONSIVE BREAKS
TEXT LINKS
ELEMENTS
LISTSTABLES
BUTTONSCONTAINERS
ICONSDIVIDERS
OTHERS…
SHOW HIDE
INTERACTIONS
ACCORDIONDRAWERMODALS
TOOLTIPS
TABBED PANELS
SCROLL BARS
OTHERS…
SORTINGFILTERING
PAGINATION
NAVIGATION
BREADCRUMBSPREVIOUS-NEXTSEARCH BOXESPROGRESS BARSDROP DOWN MENUSOTHERS…
CONTENT
DATES & TIMESCURRENCYMEASUREMENTSPRICING
TRADEMARKSSPELLING & USAGEOTHERS…
IMAGESCHARTSMAPS
FORMS
FIELD LABELSTEXT FIELDSSELECT LISTSRADIO BUTTONSCHECK BOXESMANDATORY MARKER
OTHERS…
AUTO-COMPLETESTEPPERSGHOST TEXT
ERRORS
FIELD LEVELFORM LEVELPAGE LEVELNULL RESULTSNON-ERROR ALERTS404 PAGES
OTHERS…DISAMBIGUATION
FIXEDITEMS
HEADERSFOOTERSCUSTOMER BARLEGAL TEXTSHOPPING CARTSLOGINOTHERS…
OTHER
EMAIL SPECSMOBILE APPSMEDIA SPECSACCESSIBILITYSEO ISSUESOTHERS…
SITE-WIDESEARCH
THINK BACK…
DID WE EVER
DEFINE A PAGE?
NO
STYLE FRAMEWORKS DEFINE
TOOLS & MATERIALS
A BLUEPRINT FOR DESIGNNOT
LET’S TALKOWNERSHIP
DISTRIBUTEDWORKLOADDATA CENTERMODEL
OWNER
RESEARCHINGWRITINGREPORTING TESTSUPDATING
COMMUNICATIONESCALATION
ANEVERY STANDARDHAS
BUSINESS
3USER EXPERIENCEDEVELOPMENT
OWNERS
DISCUSSIONSTRANSPARENT
ALL COMMENTSARE OPEN
COMMENTSARE EMAILED TO OWNERS
ALL
THEY CAN THEN
RESPOND
WHAT’S ON
EACHPAGE
“WHAT IS THIS?”
BRIEFDESCRIPTION
PICTURE
NAME
FOLD
LAST UPDATED?
WORKINGEXAMPLE
OR
“TELL ME MORE”DETAIL
DESCRIPTION
SPECS
PLATFORMS
RELATED TOPICS
VOCABULARY
“I HAVE TO BUILD THIS”LINKS
TO UX ASSETS
EXAMPLE INPRODUCTION
TO CODE ASSETS
“I WANT TO CHANGE THIS”
OWNERS
ANY OTHERINFORMATION
LINKSTO TEST DATA
& BEST PRACTICE RESEARCH
HOW TOJUMP START
A NEW STYLE FRAMEWORK
GETTINGBUY-IN
LAYING THEGROUNDWORK
INSTALL THE TEMPLATEADD YOUR LOGO & COLORSEDIT A COUPLE OF PAGES
THIS PRESENTATIONSTEAL
(ITS ON SLIDESHARE)
KILL EVERYTHINGONE OBJECTION
FIREWALL?
WORDPRESS OBJECTIONS?NO WAY WE’LL REDO EXISTING GUIDES?
DON’T LET
PROPRIETARY INFO?
THERE CAN BE ONLY ONE.RULE #1
RULE #2INCLUDE ONLY THE ESSENTIALS.RULE #3YOU ONLY HAVE FIVE MINUTES.
SAY WHAT YOU MEAN.RULE #5
RULE #4HOLD ON LOOSELY.
THINK REPUBLIC, NOT DICTATORSHIP.RULE #6
REMEMBER…
