Philz Coffee: Web style guide
Role: Design, creative direction
For the Philz Coffee website project I had developed the initial look and feel for the home page and some of the key company pages. Because I wasn’t able to work on the entire project by myself I worked with other designers to help design out some of the other pages of the website. In addition to providing creative direction I put together a web style guide to help the other designers understand the overarching vision I had for the site.
It was important to start the web style guide off with an understanding of the Philz experience and how that would translate to the website experience. I also started the style guide off with the customer personas to help everyone understand who we were making the site for. Other things included in the web style guide were fonts, colors, web patterns, redlines/specifications, and photo guidelines. Even though I wasn’t doing all of the design work having a strong web style guide document helped drive consistency through every designer that touched the project.
Web style guide cover
User personas and intro
Web fonts and color palette
Website grid system
Redlines and photography style
Web style guide back cover