Spur

When Bryan, our Chief Instigator, whipped up a blog post on critiquing a web page in 30 seconds or less, we didn't expect the enormous response we got. That little 5-step "how to" proved to us that the pen is indeed mighter than the sword.

We saw that there was a strong desire in the community to learn how to quickly critique a website. We knew that we had to meet that desire head-on, taking the steps Bryan outlined and transforming them into a web app. With Spur, we wanted another addition to our family of apps that made it easier to turn vague feedback into a specific critique in 30 seconds or less.

Have Spur — Will Critique

Do you remember a show called "Have Gun — Will Travel?" Man, that show was pretty boss. If you haven't seen the show, it was about this gunslinger named Paladin, who dressed like Johnny Cash and traveled from podunk to podunk, helping people (for a nominal fee, of course). Occasionally, Paladin would spur a downtrodden man into becoming something greater and better than himself. That's sort of the concept behind Spur, except without the nominal fee — to spur designs and concepts into even better iterations through a quick and dirty critique.

We not only wanted to spur designs, we also wanted to have people make critiques work in their projects.Critiques should help everyone on the team and should't be an excuse for others to hurl insults. When done well, critiques provide the opportunity to regroup, seeing the gaps in a design and figuring out how to fill them. Spur had to take out the "personal" out of critiques and give the entire team a chance to see opportunities they may have missed.

That's why there are seven options that help you see what you might've missed in your designs. Click the thumbnails below to see an example of two of them:

Blur — What does your design look like at a glance, without details? Make sure you have solid hierarchy and weight, and that if someone glances for a few seconds they get something valuable.

Contrast —Every design has intentional areas of focus, but are these areas too overpowering? Bumping up the contrast of a design can help show what areas are really jumping off the page when someone initially views the page.

For A Few Transitions More

When a person clicks through Spur, we wanted each page to slide in with a nifty transition. More than that we wanted to do a bit of upmanship for an animation that we created for one of our previous projects for a game company. In that project, we had drifting clouds and a Zepplin flying through the air. This time we wanted to have the proverbial cowboy riding into the sunset, put with an animated windmill, a slowly setting sun, and a cactus popping up.

It was a spur of the moment design in photoshop, but we were able to accomplish it by using backbone.js. We also used backbone.js to create a smooth transitions throughout the app. To create the swank grid lines, we used the jQuery UI Widget Factory.

But we worked a little CSS3 magic to conjure up the awesome visual layer. All the shadows you see in the app were created using the css property text-shadow. Even though the background pattern is subtle, we finagled it so that newer browsers could include multiple images. Older browser just get the last background listed. Take a look at the shorthand:

body {
  background: url("path/to/image.png") 0 0 repeat,
              url("path/to/image2.png") 0 0 repeat #e8ecea;
}

Wild Wild Icon

Every good cowboy needs a pair of boots. So we thought what better icon for Spur than a boot and enlisted the help of a few fantastic icon companies and freelancers. However, to get a slick boot that would be recognizable as a small image wasn't easy to come by, so we went through a few iterations before we got the stylish icon we have now.

This was our first boot (Click the boot to see a larger image). As you can see in the big image, there's tons of detail on the boot, so much detail that it looks as if you can actually put it on and wear it. But that was more detailed than we wanted because once you shrink it down all that wonderful stitch-work would vanish. So we gave this design the boot! (Oh, puns ... we love 'em.)

This is the second try ... or what if Salvador Dali designed the icon (Click the boot to see a larger image). As you can see, we ditched the boot and replaced it with a pocket watch. Here we're striving for symbolism. The pocket watch represents the 30-second critique and the spur represents the entire concept as a whole. Get it? Yeah, we figured no else would, so we ditched it and went back to the drawing board.

Once again, this is a fantastic design, wonderfully detailed (Click the boot to see a larger image). And that's the problem. Details tend to vanish once you start making an icon smaller. The boot and spur had to be recognizable at any size, like Superman's S-shield or Batman's bat-emblem. The moment you saw it, you had to snap your fingers and go, "oh, that's Spur from ZURB." So it was back to drawing board again.

Ta-da! Here's the finally iteration of the boot and the one that stuck. As you can see, it's got all the elements — a boot and spur. It's recognizable, even better than any superhero chest emblem. More importantly, this final iteration fit perfectly with the look of our other feeder app icons. Inside tip: icons are the secret to world domination, ya gotta have a cool looking symbol.

The Last Roundup, Partner

When we launched Spur, we got some love from bloggers and the press, such as Read Write Web. And we're working to one day take Spur's seven techniques for critiquing and corral them into Notable. But in the meantime ...

Spur it on

Check out our other free apps: Axe, Bounce, Chop, Clue, Reel, and Strike.