For those of you who been reading my blog should be familiar with ZURB. They are the guys who created those fantastic web apps — Bounce, Notable, and Verify. If you read online tutorials a lot, you may have probably stumbled upon their Playground before where they post various CSS and Javascript tutorials. Today, I’m happy to have ZURB here at Web Designer Wall to talk about their team and work.

What does ZURB do?

When my 82 year old grandmother asks me what we do I say: We help companies create better websites. You know Britney Spears? We re-did her website. That line always connects with her. :)

But how we really think of ourselves is first as interaction designers–we focus on creating interfaces for businesses that connect with people–and second as bottom-up strategists–we help people come up with great products and services by rolling up our sleeves to help them actually build them.

We consult, so we do this again and again and again in very different markets and environments from Facebook to eBay’s auction marketplace, from NYSE to Playlist’s music player–we love facing new challenges with every project.

We also develop our own web apps (such as our recent release of Bounce) to help our clients create great stuff. Beyond that we publish techniques and tutorials on ZURBplayground for all the geeks around the world to improve their websites. We also organize the ZURBsoapbox lecture series where expert geeks share their lessons learned with likeminded novice geeks.

You mentioned that you develop your own web apps to help clients create great stuff. Can you elaborate?

Sure. We give folks tools which help them make their own web products better. Here are a few examples:

• We just recently released Bounce – a free web app without logins, which allows you to capture a screenshot of a website, add your notes on it, and share an annotated screenshot with others. The tool makes it insanely easy to share ideas about websites. In the first week after the launch Bounce was linked to by over 100 countries across 30,000+ websites.
• Notable (Bounce’s big brother) is our flagship product. The tool is similar to Bounce but has many more features and options such as: privacy, capture of code, raw text, seo, and an ability to collaborate with others.
• Verify is our latest app which makes sure people are using data to make decisions when they are building a web product. Instead of surveys and focus groups we have you 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.

What is ZURBplayground and why did you create it?

We’ve accumulated a lot of tips and tricks over twelve years and we wanted to record that history for ourselves. We also wanted to connect with other people like us to help each other hone our craft. So why not show folks how to create Super Awesome Buttons with CSS3? Why not have a page where share all the interesting moments and slick interactions we stumbled on threw our products? So the ZURBplayground was born.

You can expect a LOT more hotness from the playground. As you’ve seen we’ve widened the scope of techniques from CSS3 to JQuery which has been tremendously popular. We have recently opened up the ZURBplayground to guest contributors and will have our first two guests contribute mobile development techniques next month.

You have a lot of CSS3 techniques on the playground. What CSS3 properties do you absolutely love? Why?

There are tons of properties which make our life easier. One of the most exciting properties are transitions and transforms. Transitions create a great opportunity to add in subtle effects that draw attention, guide the user and simply create a great polish. Border radious has saved us tons of time. Buttons, modal dialogs, tabbed navigation – we use rounded corners in a lot of our visual designs to create a more approachable, consumer style and border-radius lets us very quickly implement those.

Could you share one secret behind how you designed Bounce?

Our newest app Bounce gives people a fun and easy way to share their ideas about websites without logins or having to pay anything. One of the main functionalities of the tool is the annotation feature which allows users to put a note on the website screenshot. After creating an annotation there are a number of interactions required to facilitate adding text and editing its position and size. We need to communicate both the available functionality and provide a means to use it.

We used the Interesting Moments grid to focus in on all the interactions and fine tune the moments where the overall behavior falls apart. This method involved taking the actors and the events, and then defining what happens at all the intersections of the two sets.

After the mapping was done we got a total of 110 possible Interesting Moments of which only 29 were truly interesting quality moments we were looking for. We mapped them all out in this grid below.

Keep in mind that these are just the interactions for an existing annotation. There are many other interactions in the app which we had to analyze.

The grid may look a little sparse in some areas but that’s OK. The goal is not to try and fill in every box but to provide a methodical way of thinking through all the potential interactions. Read related article.

Tell us something crazy and wild that you do at ZURB.

There is a lot of that going on here at ZURB. ZURBwired is a great example of just how crazy we truly are. It’s an annual 24-hour design marathon where ZURB selects a non-profit and works around the clock to complete an entire marketing campaign from concept development to implementation and production all in 24 hours.

We partner with sponsors and recruit local designers and engineers to volunteer their efforts in order to meet the challenge. Everyone participates by contributing their specialty, allowing knowledge and skills to be exchanged freely. Together with the volunteers, the entire ZURB team sprints to complete a finished product under demanding time constraints. Best way to get the feel for the event is to watch the videos documenting the event.