Dangerbird Records Launches

Thursday September 27, 2007 - 35 months ago

Posted by James Ellis / Filed under Code, Design, Web

Yesterday we launched the wholly redesigned and developed website for Dangerbird Records, an independent record label located in Hollywood, CA and home to artists Silversun Pickups, Dappled Cities, La Rocca, among others.

One of the more info-heavy sites we’ve done, the Dangerbird site is packed with content and loaded with features. The site balances out all sorts of content — artists, releases, news, tours, downloads, store, videos, etc. Considering that each of these include various levels of sub-content, the overall scale of the site made for an IA challenge.

Information Architecture

As we’re respectable web/info designers, we went through a full IA process. We tend to do this for any large-scale site, especially the info-heavy ones (jumping straight into Photoshop would just be asking for a world of pain.).

We’re quite fond of the Flash-based prototyping tool we’ve developed specifically for the purpose of wireframing representative site states, and stitching the wireframes together in a click-able environment. For those of you familiar with making wireframes in Illustrator and packaging them up in PDFs, you’re sure to be sweating our little app.

In the past, we’ve worked on some globo-chem level corporate projects that required extensive wireframing. Trying to manage these projects with Illustrator & PDFs is too much. We’ve looked into pro software products like Axure’s RP Pro, but this sort of thing is just too far down the corporate-web-ditch-digging rabbit hole. And after taking a closer look at these prototyping tools, we realized that we could just lift a few of the basic concepts/features and roll our own app in Flash.

Basics of site prototyping

  • Wireframe each representative site state, focusing on organization of content, visual hierarchy, etc.
  • Link the states together in a straight-forward way, allowing the client to click from state-to-state and really get a sense of how the different pages work together.
  • Upon completion of the prototyping phase of the project, the visual designer should have a clear vision of the site’s structure, content and functionality, all before cracking Photoshop.

What does our prototyping app do?

By using Flash, we are able to design each wireframe in an environment similar to Illustrator. However, unlike Illustrator, we’re able to create reusable objects (Movieclips) for all sorts of repeated elements (site header, footer, sidebars, etc.). And the real trick is that we can use Actionscript to stitch the wireframes together in an intelligent way, allowing the user to click through to the wireframes.

With the Dangerbird site, it was important to prototype the Artists, Artist Detail, Releases and Release Detail states. By having the prototype link these states together, the user gets a feel for how the different states relate to one another. It’s just not the same if you’re stepping through a PDF.

Demo

Want to see what it looks like? Check out one of the later prototypes for the Dangerbird site. Various details were tweaked along the way, but you’ll find that the prototype seriously informed the final product.

In the end all relavent parties (client, designer, developer) have a clear picture of what’s going to be built, how it will work, how it will feel, etc.

Framework & Content Management

The real nerd-thunder of the Dangerbird site is the underlying web framework. Like other Athletics web projects (DKNY Jeans, Oak, and the Athletics site itself), the Dangerbird site is powered by the Studio IV Adminkit CMS and front-end framework.

The Adminkit CMS software manages all aspects of site content (artists, releases, news, tours, downloads, store, videos, jukebox — everything). Adminkit is something we’ve been actively developing for more than three years now.

The front-end framework doesn’t have a catchy name, but perhaps it should. Very much informed by things like Ruby on Rails, CakePHP and CodeIgniter, our framework follows the MVC design pattern and defines common conventions for integrating HTML templates into a system powered by the Adminkit CMS. The framework is mostly geared towards increasing developer efficiency and creating reusable chunks of code. Also, the framework provides some nice features, including human-readable URLs and output/page caching.

Human-readable URLs

Human-readable URLs are important to us. Rather than crazy looking query-string style URLs with a bunch of random looking garbage thown in, we like simple URLs that plainly describe the content they represent. For example:

Query-string style URL:
http://www.example-domain.com/news_article.php?cat=235&article_id=235266

Human-readable URL:
http://www.example-domain.com/news/title-of-article

Considering how extremely possible human-readable URLs are, we see no excuse for the former.

Output/page caching

Caching is important if you intend to power a popular database-driven website. In the era of the Digg/Slashdot effect, your website needs to be prepared to deliver content to a lot of visitors in an extremely efficient manner.

Without having the page-caching system built into the framework, a sudden surge in site visits would overload the server’s database with requests for content. Fortunately, a good page caching system can eliminate this database bottleneck. The page caching system stores static copies of pages generated from database content, and upon future requests for the same content, the system delivers the static version instead of making the full roundtrip to the database. Clever indeed. Inspired by WP-Cache and the CodeIgniter implementation.

Web toys

The Dangerbird site was an opportunity to throw all sorts of different gadgets into the mix.

  • Jukebox. Over the years, we’ve done a ton of players, most of them being minor updates to code dating back to 2002 (that’s a lot of mileage out of the now-extinct RemyZero site). The Dangerbird player is a bit different. First, it’s powered by Adminkit, so Dangerbird can upload MP3s and compile playlists whenever they like. Second, we built two different embed-able options for the player — regular and the mini. Hopefully the MySpace/Facebook crowd will embed them like mad.
  • Home Promo Slideshow. These things are pretty common at this point, but I think it’s important to point out the home page’s promo slideshow. In the Adminkit CMS, Dangerbird can upload and assign any number of JPG or SWF files as slides within slideshows. They can toggle various slideshows, re-order slides, etc. It’s a pretty cool way for Dangerbird to immediately inform visitors of whatever the new-big-thing is. I’ve always liked the way Macromedia did slideshows on their site, and now Adobe continues the practice.
  • Search. This is cool… results are segmented by section, so you can get a sampling of results from every section (artists, releases, news, videos, etc.). Here’s an example if you searched for “silversun”.
  • Mailing List. The Dangerbird mailing list is managed by Campaign Monitor, our favorite email newsletter software. Campaign Monitor offers an API for integrating CM’s services directly within your site — rad.
  • Buzznet Integration. We’ve become familiar with Buzznet recently — we did a bit of profile integration on the Cartel site. With Dangerbird, we did something similar, but instead of using one of the packaged Flash/Javascript widgets provided by Buzznet, we rolled our own. Two problems with Buzznet’s packaged widgets: 1) they are generic looking, and 2) they are often slow. To get around this we parsed Dangerbird’s photo RSS feed and rendered the content to work within the overall site design direction.

    One thing: the Buzznet site is slow. Anytime the server tries to fetch the RSS feed, it takes forever. Rather than make every Dangerbird visitor suffer, we maintain our own server-side cache of the RSS feed and serve that up instead. Once every three hours someone has to wait for the Buzznet feed to be re-cached. You can check out the Buzznet call-out in the sidebar on the site home. (Thanks to the Zend Framework for the feed parsing and caching.)
  • Videos. The player is a modified version of the player used here on the Athletics site, but the embed player is new. An example:

Parting thoughts…

We like the folks over at Dangerbird and have really enjoyed working with them over the past few months. It’s been a pleasure to work with a client that is already informed about the web — they were right there with us on RSS feeds, embed-able players, blogs, and other web two-point-new terms.

And on a personal note: given the Pumpkins’ inability to comeback, Silversun’s gonna have to really step it up and carry the torch.

Comments? Contact James via email - .