Spotlight on ZURB – One Super Awesome Interaction Design Company

You may have bookmarked one of their CSS or Javascript tutorials, or you could have read one of their concise and refreshing articles on Smashing Magazine, you may even use one of their web apps, or it could be that you downloaded one of the many useful development tools they offer… Whether you noticed or not, in one way or another you have crossed paths with ZURB at some point or the other over the last few years.

ZURB are not your run-of-the-mill churn-em-out-and-move-on interaction companies, they’re different. They are open and refreshingly unique. Which initially seemed a little bit of an enigma to me. I mean, why would they freely offer so much? If you have ever read ZURBs approachable blog, you have to wonder why they would publish such honest posts discussing their design strategies? Typically, these type of companies are normally, maybe not secretive, but they certainly like to keep their cards close to their chest. And what about the wholesale sharing of development techniques? And that leads to another question, why do they even need to develop the apps that they do? Why?
Why would I even question all of this? Why not just run with it and enjoy everything that ZURB offers? As it turns out I had to and needed to understand why. So, I got in touch with them and asked: “Why?”.

As you would expect, they were very helpful and sent a truck-load of material, (they are involved in loads), which was great. But nothing really that answered my original ‘why do you do this?’ question, until I was directed towards an article on their blog, entitled The Dreadful Mission Statement. Here lay my answers.
Normally, I am not one that puts much stock into any companies mantra or purpose statement and I would certainly not take much notice of any mission statement they may have. But ZURBs mission statement was different, it caught my attention and absolutely explained everything:

“Build a design business that teaches people how to create better products & services through our consulting, products, education, books, training and events.”

Writing a mission statement is one thing, living by it and believing in it is another. But with ZURB, you really do get the sense that they not only live by it daily, but more importantly, it is clearly evident that the entire ZURB team believe in it as well.

That does explains everything – the tutorials, web apps, development tools, ZURBwired, ZURBsoapbox… everything – all of their creations seem to stem from their mantra: Design for People; from their purpose: Help people design for people; and from a simple yet highly believeable mission statement.

Inspired by these statements, they not help their clients connect with people through better user interfaces (with clients such as: eBay, Facebook, Yahoo, NYSE, Britney Spears, Playlist, 100+ others), they also complement their design and development consulting with products, tutorials, events, tips and tricks to help everyone else design better interfaces for people.

So, that is why.

The motivation behind this article has been to hopefully inspire other interaction companies to follow ZURBs example. Having a policy of openness, sharing and educating will not only present you in a positive light, but will also help the design community as a whole. Just imagine if every web business shared as much, how great would that be? Imagine how much we (as designers and developers) would know and how much better we would be.

From CSS tutorials, to web apps, to Javascript plugins and even design marathons, you will find almost everything that ZURB is involved in and has shared below.


The impressive apps that ZURB develop are aimed to aid anybody building a web product and to to get stuff done quicker. A CEO might use Notable to communicate changes she wants to see worked on. A marketer might use Verify to test if people would like a green or a red button on their website. A developer or an engineer might use Bounce with a client to enhance a website. There apps have been designed to be the common ground between techies and non techies alike when building a product. Have a look for yourself:


Bounce has only recently been launched. Its a fun and easy way to offer feedback on a websites design. It has become an instant hit, within the first 7 days of its launch, 170 countries linked to the tool from 30,000+ websites.


Notable is Bounce’s bigger brother and Zurbs flagship product. The very easy to use Notable is a tool that allows multiple users and teams to collaborate to take notes and offer feedback on a specific area from a web designs screenshot. Compared with Bounce, it has many more powerful features, such as: privacy, capture of code, raw text, seo, and an ability to collaborate with others.
A great example of this app in action is via this Smashing Magazine article: Deconstructing Popular Websites (Click the ‘Full Interactive View’ links to experience Notable).


Verify App
Verify is a usability app that collects and analyzes user feedback to help developers make sure people are using the correct data to make decisions when they are building a web product.
Instead of surveys and focus groups all you have to do is upload a screenshot, and ask users where they would click or what they would choose on your mockup. You can then share the URL of the interactive test you’ve created with others to collect quick data to act on.

ZURB CSS Grid Builder

ZURB CSS Grid Builder
To rapidly prototype and implement sites, ZURB uses a flexible CSS grid framework with flexible variant grids for different widths and gutter sizes. So, they built this app so that everybody could make use of it.

…and not forgetting the ZURB tools

ZURB Sketchsheets →
The ZURB Sketchsheets are set of editable PDFs that you can print out to improve the presentation of rough ideas to clients.

ZURB Grid Paper →
To help with your design sketches, ZURB have created these printable PDF grid sheets to give a little more structure to your concepts and wireframes.

ZURBplayground & The Famous Awesome CSS Buttons

The ZURBplayground is a must bookmark for any developer – it is choc-full of useful techniques and insightful tutorials, that covers everything from ground-breaking CSS3 techniques (the Super Awesome buttons anyone?) to the super-useful Javascript tutorials and plugins.
The humble beginnings of the playground came about because ZURB felt that they should have a page where they could share the last twelve years of interesting moments and slick interactions that they have stumbled on through there products, thus the ZURBplayground was created.

Since publishing this article, ZURB have informed me that they’re opening the playground to guest contributors. So if folks are interested to contribute – give them a shout.

Here are some of those famous techniques that have been developed by ZURB:

The Famous and Super Awesome Button Techniques

Super Awesome Buttons with CSS3 and RGBaRadioactive Buttons with CSS Animations and RGBaRoll Your Own Google Buttons

Groundbreaking & Innovative CSS3 Tutorials

Sliding Vinyl with CSS3Awesome Inline Form LabelsRecreating the OS X Dock with CSSCreating Polaroid Style Images with Just CSSAwesome Overlays with CSS3 Border-Image PropertyDrop-In Modals

Super-Useful Javascript Tutorials & Plugins

ZURB JavaScript Annotation PluginAjax Upload - Image Uploads with 100% Less SuckjQuery Text Change Event PluginHow to Mask Passwords Like the iPhone

What else is ZURB Involved in?

ZURBwired – 24-hour Design Collaboration

ZURBwired - 24-hour Design Collaboration

ZURBwired is just another example of how crazy and wild a company they actually are. Every spring, ZURB, accompanied by a bunch of volunteers and sponsors from around the US, host an annual 24-hour design marathon where they select a non-profit and they work around the clock to complete an entire marketing campaign from concept development to implementation and production all within an exhausting 24 hours. The best way to get the feel for this event is to watch this video:

ZURBsoapbox – Lecture Series for Entrepreneurs, Designers, and Managers

ZURBsoapbox - Lecture Series for Entrepreneurs, Designers, and Managers

The ZURBsoapbox is a lecture series where expert geeks share their lessons learned with like-minded novice geeks. With some impressive previous speakers including the Chief Design Architect at Yahoo, the founder of Technorati, the Principal Designer behind Firefox, and the former Director of UI Engineering at Netflix, you know that this is a serious event you should be keeping tabs on.
A great example of this event is former Director of UI Engineering at Netflix Bill Scott’s ZURBsoapbox talk about how to Design Like Netflix, you can read the article and listen to the podcast here: Podcast of Bill Scott’s Talk: Behind the scenes of Netflix’s UI
ZURB themselves were so inspired by his talk that they decided to use his interesting Moments grid to help design there latest app Bounce.

More from ZURB

Driven by a team of passionate, dedicated (a bunch of work-a-holics), sometimes wild and always positive interaction designers and strategists there really is no end to what they can do and achieve. A truly inspirational company, that all others should aspire to be like.

Just when you thought that they could not possibly be involved in anything else, here are some more resources from ZURB:

YouTube – zurb's Channel →
ZURB on Smashing Magazine →
ZURBinc's Photostream on Flickr →
ZURBlog →

Author: (645 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.