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.

zurb team

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

zurb apps

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?

zurb playground

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?

zurb 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.

110 interactions

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.


1 2 3 4
  1. akile
    Oct 7, 2010 @ 9:33 pm

    I hope you will keep updating your content constantly as you have one dedicated reader here.


  2. business plan examples
    Oct 13, 2010 @ 11:07 pm

    You guys rock… you are all incredible..


  3. Melvins
    Oct 16, 2010 @ 6:14 am

    First of all thanks a lot. You people have done very great job. The tools bounce, notable and verify are very useful in terms of making product more enhanced and creative also I will apply it in nearer future.

    Los Angeles Web Design


  4. Remy Hair
    Oct 19, 2010 @ 6:24 am

    Amazing guys!!


  5. premier pixels
    Nov 24, 2010 @ 3:04 am

    Thanks for sharing.


  6. Steve
    Dec 2, 2010 @ 5:53 am

    zurb is a mill. a revolving door of talent staff because it cheats its employees by overworking them to the tune of 80 hours per week rather than hire adequate number of staff. why? money. so the owner keeps more. like zurb’s work? they accomplish it it by taking advantage of others. really good cheats. not unlikely that customers may get cheated as well. anyone who is ok with that will eventually be found out by others and get what they deserve in the end, just like zurb.


  7. E commerce Design
    Dec 13, 2010 @ 10:00 pm

    Thanks for this site – stunningly useful content.


  8. Henry Peise
    Dec 24, 2010 @ 3:57 am

    Is white iphone 4 available right now? Cuz my friend told me he just got the white iphone 4 panel. But i haven’s seen it sold in my area. What’s wrong?


  9. Juno Mindoes
    Dec 25, 2010 @ 3:14 am

    Today I have done a camera shootout with the white iPhone 4, the iPhone 3Gs and the iPhone 3G.


  10. mikwillson
    Dec 30, 2010 @ 12:25 am

    That is to be expected in a long-term, high-risk project like ours. So, we turned to the blogging community for help – and got it! We have published our problems, and the community responded with results!cheap ugg boots


  11. large format print
    Feb 3, 2011 @ 6:25 am

    Thanks for sharing.


  12. diş beyazlatma kalemi
    Feb 18, 2011 @ 6:55 am

    All whitening formulation is applied by dentists with quality features, powerful, secure, and very reasonable prices, as well as the missing handbag is a unique product design, fashion styling you will not ..


  13. dexx
    Apr 17, 2011 @ 3:08 pm

    Lens, in his statement, in advance by expressing a variety of symptoms anlaşılabildiğini, routine checks should be done in order to prevent fatal heart attack stressed.


  14. shiva
    May 5, 2011 @ 3:45 am

    Good Work , keep going, congrats ….


  15. orhanbt
    Jul 15, 2011 @ 4:28 pm

    This is verry good


  16. complex41
    Aug 23, 2011 @ 12:23 pm

    And then he handed you the thirty-five 45


  17. Ibiza
    Jul 23, 2012 @ 7:17 am

    The tools bounce, notable and verify are very useful in terms of making product more enhanced and creative also I will apply it in nearer future.


  18. Afzal
    May 28, 2013 @ 1:12 pm

    This interview is just awesome :)
    I really like it :)
    Thanks for sharing :)


  19. Dymo Labels
    May 31, 2013 @ 2:55 am

    excellent information i have learned a lots of good things from this post
    thanks for sharing


1 2 3 4

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.