While at Razorfish, I had helped out on some client work for the Children's Hospital of Denver, Colorado. Razorfish had redesigned Children's website prior to my hire. After an application or website redesign, our company helps the client manage and operate the website with a "Style Guide." I contributed to the building and formatting of the Style Guide. Think of this document as a handbook and guide to creating a consistent brand experience for Children's customers or anyone using their website. The guidelines refer to the makeup and modular system of the applicable page type, blocks and elements, and should always be used in conjunction with the Children’s Colorado Brand Guidelines. For example, I provided instructions on where and when certain media players or components could or should be used.




The images displayed to the right are page examples from within the style guide.


*I had no prior experience with Style Guides


What I learned:

  • Style Guides are a communication tool between designers, developers, and the client.
  • They create standards for future visual, and content-based updates.
  • The usage for these can be for design or development, and should be clear and easy to navigate.

The left rail above displays the outline of the guide, similar to a table of contents.

The right column above shows the "Blocks" section within the style guide that lists all of the websites components that are used on the website.

What I had helped most with, was the building of the component pages or "blocks." These would include standards and usage protocols for things such as Hero Images, Featured Link Lists, Department/Phone Directory, etc..

When you click open a specific block/component, in this case above, Healthcare Professional Card, you can see the table of contents for this component. Scrolling downward you can see:

High Level Interaction Notes are a way of instructing the architect where and when he can use this component.

The Content Matrix illustrates which components should exist in the system.

Example layouts show imagery of how the component would look like on different platforms like desktop, mobile, tablet.