Schedule Time & Gather Materials
- Time Needed: 2 Weeks (Minimum)
Expect the upkeep of the Style Framework to be ongoing
- Documentation of existing design standards
- In-browser Developer tools
- Screen capture software (for images)
- WordPress installation
- Style Framework base site download from StyleFramework.com
Carry Out This Method
If you have not yet done so, install WordPress on your own local server and install the WP Clone plugin. (If you will be using a different CMS, skip to step 4.)
Fill out the form at the Style Framework website to get your own copy of the default Style Framework theme and structure. Having this available will save you a great deal of work.
Click on the WP Clone plugin link in the WordPress admin sidebar. Follow the on-screen instructions to import the Style Framework clone.
If you plan to use a different CMS. Then install it, making sure the site is not (or not yet) publicly accessible. The CMS you use must have a collaboration or discussion feature, but upon installation, temporarily turn off the ability to comment (as well as the ability to register as a new user, if possible).
You can begin by creating the top level folders or navigational structure for your design standards. Here is a partial list of important categories and examples of each:
This category covers the basics.
- Page Dimensions and Grid
- Color Pallette
- Typefaces & fonts
These are the most common, simplest page elements and most essential pieces of formatting and interactivity.
- Table and list formats
- Scroll Bars
- Tabbed Panels and Accordions
- Carousels, Modals, Light boxes
- Filtering and Sorting
- Media Players
- Tool Tips
How will users navigate your content, and how will those interactions look?
- Breadcrumbs and Progress bar navigation
- Tag Clouds
This gets into specifics regarding consistent presentation of terminology and imagery on your site and within your company.
- Accepted spelling and capitalization of commonly used terms
- Number formatting (Dates, Times, Currency)
Beyond this point, your style framework may need to include further detail regarding the design of forms and form elements, how alerts and error messaging are displayed, what is included in your header and/or footer, and accessibility requirements. See StyleFramework.com for more examples.
Go through any existing design and style documentation and migrate that data into your Style Framework site. You may come across a conflict when looking at different style guides for the same company or product; use your best judgment for now, but make a note of those discrepancies so you can use the Style Framework system to clear them up after you launch.
Take screenshots of examples as shown on the live site whenever possible, or collect screenshots previously taken for the style guides that already exist. Post those on your Style Framework alongside the standards they define. Vocabulary inconsistencies mean that images are invaluable.
On each standard page, include the following information in this order:
What is it?
A quick summary and image should be at the top so users know when they’ve clicked on the right standard.
Additionally, explain why this page element needs a consistent standard, and what the priorities should be when determining the standard.
Here is where you explain what the standards are. Be specific about colors, sizes, responsiveness, interactive behaviors like click and hover interactions, and when this particular page element should be used.
If this page element requires any external downloads, code snippets, libraries, or images, include links to those assets.
More information, like research backing up the choices made for this standard, synonymous terminology, and contact information for employees in charge of this design element.
- For every design element, there should be a UX/Design owner, a Business/Marketing owner, and a Development owner. These should be added as Admin-level users so they can edit pages as necessary whenever a style element undergoes a change.
- At the end of the page content, include any more miscellaneous information that doesn’t go anywhere else.
This is one of the most vital things to include, because this is where suggestions for revision and discussions over standard validity will occur. Set up your comments so an e-mail is automatically sent to your three owners whenever a comment is posted. This allows for transparency of communication regarding standards that possibly need alteration.
Once your base design standards are included and you have the go-ahead to do so, you can socialize the style framework and add users who have permission to comment.
Try These Tips
- Marti Gold’s book “UX Style Frameworks: Creating Collaborative Standards” is the primary source for this method. It goes into considerable detail regarding page elements to include, how to get buy-in and recruit help, and the philosophy behind this method. If you need further guidance, you can refer to it or StyleFramework.com.
- Getting executive buy-in for such an undertaking may be difficult for any number of reasons – it is a time-consuming task, many content management systems have security issues, executives may be averse to making their design standards public. Do your best to counter their concerns by offering alternatives or suggesting security measures, but be prepared for a hard “no.”
- Understanding the “why” of this method is essential to using it properly. Make sure everyone with editing or ownership capabilities knows the point of a collaborative, CMS-based style framework and comment churn is far less likely.