In the summer of 2000, we completed a redesign that touched every page and module state of the site. Now I had to figure out how to deliver it to Engineering.

Engineering as an audience

When we were nearing a final design, it was my task to turn prototypes into tools that developers could use to build the site. This involved listening to how developers would build the site. They would build the site out of modular UI components. They would also have to rebuild the entire site in two months. In a single document, they needed to be able to digest how a page was composed of as well how it was to look and work. I had to create a styleguide that would document the look and feel of the site.

Examples from the styleguide

A template guide on every page

At the top of every page in the styleguide was a page thumbnail created in HTML. It was a high-level guide to the page design and a module reference. The engineers loved it. View an example page

Modules and their many states

Each page in the styleguide was cross-linked to an fuller explanation for the modules that were on the page. The fuller details contained details on the module functionality and a visual design specs. Browse an example module type from the styleguide

Skills

• HTML / CSS development
• Cross-team communication and negotiation (and respect for the engineering team)