In February 2014, as we released our revamped business page to the world, we also made the Yelp.com styleguide public. It details all of our user interface elements and code, and it’s an incredibly solid foundation for everything we do on Yelp’s frontend. Now designers can have the same ease-of-use as developers.
Yelp’s new business page was the harbinger of our public styleguide, and our product team couldn’t have been prouder to share our work with the world. It was a great moment, one we consider a milestone for Yelp’s design and frontend. But it’s never smart to linger too long on a success, and we quickly embarked on new products and features.
Consistency in UI is key, and as we kept designing new screens, our designer found herself constantly opening up the original business page file, and duplicating the layers or groups as needed. With only a few people working on design for Yelp.com, this was sustainable for a long time.
Then, we started growing. Fast. More people started working on interfaces for dub-dub-dub (as in, www.yelp.com), and they all needed consistency as well. Making everyone open up the biz page doc wasn’t viable, and so we put together the styleguide PSD, which you can now download for free.
What you’ll get
This document includes each of the elements we use to make Yelp.com. Everything’s neatly organized into sections, and because we’re a little bit obsessive (in a good way), every layer is named and ordered in an easy-to-understand way. In addition to all of our styles, we also included our custom 12 column layout (in both overlay layers and guides) and Teehan+Lax’s excellent 6px baseline grid. We’ve also included overlays for a 1024-x-768px browser window, because even though people are more than willing to scroll, folks with small monitors still need to be able to catch the scent of information.
Why make an internal document public?
Our styleguide embodies Yelp.com’s visual design foundation, and sharing the frontend version with the community has only been a good thing. On the one hand, we’re becoming more transparent about how we code our web app, and we’re contributing our knowledge about designing and building with components. In other words, we’re having a great time giving back. On the other hand, it’s an incredibly useful tool for everyone who designs for Yelp on the web, providing a ready-made and well-crafted foundation for almost everything we might need to create. It also provides a good amount of accountability: it’s clear when a design deviates from the styleguide — which makes it easier to correct errors or oversights. And, of course, it’s time saving for designers and developers alike.
But mostly, we’d like to make your life a little bit easier. So go on. Download it, and then show us what you make.
If you appreciate consistent grids, classic typographic measures, and local businesses, maybe you’re the kind of person we’d love to work with. Yelp’s hiring UI Designers, Product Managers, and more.
