Styleguides

An in-browser styleguide accurately describes type treatments for headings, links and common interface elements like drop-downs and buttons. The guIde serves as a litmus test throughout the project lifecycle to help quickly identify style regressions. The guide is a way to harmonize the look and feel of various and distinct departments and groups. The guide and its code can (and should) be leveraged for 3rd party integrations and future web properties.

Components

Components are reusable design patterns like lists of people, or photo treatments that enact the content strategy to form the building blocks of the site visitors and members can expect to interface with. Designing in-browser provides us a real-time understanding of how mobile and tablet users will experience the new website.

Prototypes

Alongside the styleguide, we like to begin to prototype and document components in-browser. 

Our lightweight but foundational approach will help everyone see very early on where we are headed, and make decisions with less impact on development later.

Resources

Examples

• EL online Curriculum (from fourkitchens) – though this is more of a prototype
• http://ux.edx.org - EDX PATTERN LIBRARY

Technologies

• github.com/kalamuna/kss-boostrap