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.

79 Comments

Gaurav Kumar
Jul 9, 2010 at 12:51 pm

Very impressive Article.Hats off for ZURB people

Joe Kendall
Jul 9, 2010 at 5:45 pm

My new site (in the pipeline) uses alot of CSS3, without these guys, I would be none the wiser!! Thanks ZURB!

Digital Showcase
Jul 10, 2010 at 3:30 am

Absolutely love the idea behind “Bounce” Its really a cool app.

SEO Divers
Jul 10, 2010 at 4:19 am

Great read, much respect for the ZURB guys and girls

ridwan
Jul 10, 2010 at 6:43 pm

great, and they make a beautifull product

Shikeb Ali
Jul 10, 2010 at 9:22 pm

Wonderful & impressive “Zurb” … good going guys… wish you good luck :)

eka
Jul 10, 2010 at 10:23 pm

great… :p

Bissu
Jul 10, 2010 at 10:37 pm

Very nice. Articles like this show simple tools and experiences that helps people to work better.

san
Jul 10, 2010 at 10:47 pm

nice post….

Cang Ngueyn Duc
Jul 11, 2010 at 6:40 am

thanks for u guys…..i made my site using all css3 stuff from ur tutorials and i look quite great…..hope u will share more more tut ^^!

habieb
Jul 11, 2010 at 2:08 pm

Very impressive, I like the idea behind “Bounce”

papaya
Jul 11, 2010 at 11:55 pm

Thanks for the quick and effective interview… its really inspirational … expecting more such discussions in future… :)

Peter
Jul 12, 2010 at 7:45 am

So much self glorifying super awesomeness just made me throw up in my mouth a little.

mustafa
Jul 12, 2010 at 7:50 am

good going guys…

doris
Jul 13, 2010 at 5:02 am

great, and they make a beautifull product

Sab
Jul 13, 2010 at 8:46 am

Great going guys. Always appreciated your work.

yohan
Jul 13, 2010 at 11:47 am

thank you for sharing :)

fajar
Jul 13, 2010 at 9:39 pm

nice article

yohan
Jul 13, 2010 at 10:05 pm

nice info, thanks for sharing :)

Design
Jul 14, 2010 at 9:34 am

i like the colour combination of the website. Great work done

ndrew
Jul 15, 2010 at 12:50 am

way to go..
bounce is my fav..

Lily
Jul 15, 2010 at 9:16 pm

d( ` . ` )d

Kojeje
Jul 16, 2010 at 12:10 am

Hey, nice video :)
Thanks.

Web Design
Jul 16, 2010 at 4:37 am

Awesome guys, awesome interview and last, but not least, great web applications by these chaps.

csshook
Jul 16, 2010 at 8:44 am

very nice.

Top 125 most popular Social Bookmarking Sites
Here is a big list of Social bookmarking websites which can help you to bookmark all your favourite websites. Social bookmarks are websites that let you save your favorite links and display them to the public.
There is always a chance that you will forget the website you visited a hour

visit: popular-websites.com

eka
Jul 16, 2010 at 1:25 pm

nice post. thanks you so much for sharing

eJobsViet
Jul 16, 2010 at 2:49 pm

Love your site

Thanks a lot

ranggaw0636
Jul 16, 2010 at 11:36 pm

wow, this person really know how to use their skill

Sebastian Bratu
Jul 18, 2010 at 11:12 pm

Wow, now that’s a really cool company. I would love to work with them. Being able to create new apps is great, especially when you’re known as
“Britney Spear’s website builders” :)

wij
Jul 19, 2010 at 12:49 am

that looks so amazing..
thanks for info…

code pixelz media
Jul 19, 2010 at 4:53 am

wonderful article very helpful indeed.

CodeMyConcept
Jul 19, 2010 at 11:23 am

This interview was awesome!
They definitely remind me of us in terms on ho they project themselves to their audience.
Go Zurb!

kai
Jul 19, 2010 at 8:04 pm

i like this site… thanks for this information…

anand
Jul 20, 2010 at 2:06 am

is very useful tool for studying css3 language

A total web solution

Divya
Jul 20, 2010 at 2:23 am

Greate Site…!!!!Thank you very much for this article!
Need a websolution!!

Vandana
Jul 20, 2010 at 2:37 am

Awesome!!!!!!! No other words to describe and guys do check the below link

Wonderfull Website

tedted
Jul 20, 2010 at 3:39 am

nice info

filesforflash
Jul 20, 2010 at 1:22 pm

amazing works

John
Jul 20, 2010 at 5:03 pm

Look, I did not know. (I don’t read the article, but… What I can say)

Roy
Jul 21, 2010 at 5:46 am

thanks.. for the information

girish
Jul 21, 2010 at 10:46 am

GIVIN

host
Jul 21, 2010 at 1:51 pm

Nice! I loved the dog in the video :) thanks for the article!

popular-websites
Jul 22, 2010 at 5:39 am

great information..

i love this site and stuff…

popular-websites.com

where you can find popular list..

Peter29
Jul 24, 2010 at 12:36 pm

Nice post.Good work.

somsakbbk
Jul 24, 2010 at 7:27 pm

Greate Site…!!!!Thank you too

Adam Cooper
Jul 24, 2010 at 11:00 pm

Great site. Thanks for the share.

Singh
Jul 25, 2010 at 11:04 am

Good work.good information.

rsp2538
Jul 25, 2010 at 10:25 pm

nice work!

Brian
Jul 28, 2010 at 8:34 am

Great Article!

Box Model Junkie
Jul 29, 2010 at 11:04 am

These seem like some nice guys, I will have to check out their apps in more detail.

logo design
Aug 10, 2010 at 7:56 am

Great Site…!!!!Thank you too

Hubcio
Aug 17, 2010 at 3:48 am

Super

cheap balmain jacket
Sep 4, 2010 at 2:45 am

不错的博文

Loans Halifax
Sep 16, 2010 at 5:47 am

great people… keep it up!!!

bankruptcy attorney in los angeles
Sep 17, 2010 at 12:19 am

I love them. they are very very cool, ive seen them once in LA,

ospop
Sep 19, 2010 at 10:16 am

Great info. The provided demo is very useful.

ospop shoes shop
Sep 24, 2010 at 1:43 am

wonderful article very helpful indeed.

Aashin U S
Sep 25, 2010 at 2:48 am

http://www.fireandsafetyforum.com site of 2011 ….. follow me…

Aashin U S
Sep 25, 2010 at 3:21 am

http://www.fireandsafetyforum.com live demo

alliance leicester bank
Oct 6, 2010 at 1:47 pm

Great guys

akile
Oct 7, 2010 at 9:33 pm

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

business plan examples
Oct 13, 2010 at 11:07 pm

You guys rock… you are all incredible..

Melvins
Oct 16, 2010 at 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

Remy Hair
Oct 19, 2010 at 6:24 am

Amazing guys!!

premier pixels
Nov 24, 2010 at 3:04 am

Nice…….
Thanks for sharing.

Steve
Dec 2, 2010 at 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.

E commerce Design
Dec 13, 2010 at 10:00 pm

Thanks for this site – stunningly useful content.

Henry Peise
Dec 24, 2010 at 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?

Juno Mindoes
Dec 25, 2010 at 3:14 am

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

mikwillson
Dec 30, 2010 at 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

large format print
Feb 3, 2011 at 6:25 am

Nice…….
Thanks for sharing.

diş beyazlatma kalemi
Feb 18, 2011 at 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 ..

dexx
Apr 17, 2011 at 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.

shiva
May 5, 2011 at 3:45 am

Good Work , keep going, congrats ….

orhanbt
Jul 15, 2011 at 4:28 pm

This is verry good

complex41
Aug 23, 2011 at 12:23 pm

And then he handed you the thirty-five 45

Ibiza
Jul 23, 2012 at 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.

Afzal
May 28, 2013 at 1:12 pm

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

Dymo Labels
May 31, 2013 at 2:55 am

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

Post Comment or Questions

Your email address will not be published. Required fields are marked *

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