Legos

Style Frameworks

A Style Framework is a collaborative, style guide that contains the building blocks — text fields, buttons, accordions, pulldown menus — necessary for assembling any type of page, but does not define specific template layouts because future needs can’t be known. It is built with the expectation that a product’s (or products) design standards will change over time and always be up to date. Standards, therefore, need to be editable and amendable, but still definitive and accessible by any department, employee, or agency who needs them.

Because User Experience is a cross-department discipline, the standards defined in a Style Framework are intended for use by designers, marketing professionals and developers. Universal access to the Style Framework, which serves as the sole styles repository, ensures consistency across the organization with no redundancy or conflict. All departments responsible for user-facing materials benefit from access to common elements which have already been tested and approved, and are ready for use by designers.

A style framework requires the use of a multi-user content management system. WordPress is often used due to its ubiquitousness and relative ease of use for people with limited technological expertise, but any robust CMS can be used.

Description

Schedule Time & Gather Materials

Clock Icon

Schedule Time:

  • Time Needed: 2 Weeks (Minimum)

Expect the upkeep of the Style Framework to be ongoing

Gather Materials

Gather Materials:

  • 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

Metal framing

Step One

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

Step Two

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.

Step Three

Click on the WP Clone plugin link in the WordPress admin sidebar. Follow the on-screen instructions to import the Style Framework clone.

Step Four

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

Step Five

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:

Scaffolding

This category covers the basics.

  1. Page Dimensions and Grid
  2. Color Pallette
  3. Typefaces & fonts

Elements

These are the most common, simplest page elements and most essential pieces of formatting and interactivity.

  1. Links
  2. Backgrounds
  3. Containers
  4. Table and list formats

Interactions

As the capabilities of HTML, CSS, and JavaScript have grown, pages have become more dynamic and more customizable. These standards define the look and feel of these more complex page elements.

  1. Scroll Bars
  2. Tabbed Panels and Accordions
  3. Carousels, Modals, Light boxes
  4. Filtering and Sorting
  5. Media Players
  6. Tool Tips

Navigation

How will users navigate your content, and how will those interactions look?

    1. Pagination
    2. Breadcrumbs and Progress bar navigation
    3. Tag Clouds
    4. Menus

Content

This gets into specifics regarding consistent presentation of terminology and imagery on your site and within your company.

      1. Logos
      2. Accepted spelling and capitalization of commonly used terms
      3. Number formatting (Dates, Times, Currency)
      4. Imagery

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.

Step Six

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.

Step Seven

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.

Step Eight

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.

Detailed Specifications

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

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.

      1. 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.
      2. At the end of the page content, include any more miscellaneous information that doesn’t go anywhere else.

Comments

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.

Explore More Resources

Shipping & Delivery

Vestibulum curae torquent diam diam commodo parturient penatibus nunc dui adipiscing convallis bulum parturient suspendisse parturient a.Parturient in parturient scelerisque nibh lectus quam a natoque adipiscing a vestibulum hendrerit et pharetra fames.Consequat net

Vestibulum parturient suspendisse parturient a.Parturient in parturient scelerisque nibh lectus quam a natoque adipiscing a vestibulum hendrerit et pharetra fames.Consequat netus.

Scelerisque adipiscing bibendum sem vestibulum et in a a a purus lectus faucibus lobortis tincidunt purus lectus nisl class eros.Condimentum a et ullamcorper dictumst mus et tristique elementum nam inceptos hac vestibulum amet elit