All entries from September 2007

If you’re reading this, you likely arrived via a link posted somewhere out there in this great big internet. This article is no longer available because it needs some revision. You could say it expired. Adobe has changed the behavior of Photoshop a bit since Adobe CS1 and some of the issues that inspired this piece in the first place are no longer applicable.

Moving a website from one web hosting provider to another can be frustrating. Domains take a long time to propagate. How do you keep email from getting lost? How do you properly test a site before moving? A dummy domain can help.

Let’s say you have a new client. They have an existing website that your firm is going to redesign. Not only will you be redesigning the site, but you’ll be starting over with a new CMS and fancy front-end framework. Chances are that the client is currently hosting their site with some lame provider (i.e. out of date software, no Subversion support, no server-side spam software, etc.). You need to move the site to a provider you trust, and come launch time, the transition needs to be as smooth as possible.

After a bit of trial and error, we’ve come up with a system of using dummy domains to test projects in development, and ease the transition during domain name propagation.

The basics, step by step

1. Go buy a dummy domain. We use a variety of dummy domains — athletics-transfer.com is a good example. You’ll notice that this was the dummy domain we used for the recently launched Dangerbird Records website. In a few weeks we’ll disable this and use it for some other project.
2. Set up the new hosting environment. There are many great hosting providers out there. We like Empowering Media, but you can use whoever you like.
3. Point your dummy domain to the new host. Set the dummy domain’s nameservers to point to your new hosting provider.
4. Develop and test the new site. Develop and test the entire project on the new server using the dummy domain. To keep folks from peeping the unreleased site, we always lock things down behind a password, which we provide to the client.
5. Set up email addresses. The client is already using a number of email addresses. You’ll need to set up these addresses on the new server. It doesn’t matter that the addresses are behind the dummy domain. So, for address@clients-domain.com, you’ll create address@dummy-domain.com.

Launch time

Once the site has been fully developed, tested, and the client is ready to go live, there are few steps to ensure a smooth transition.

1. Add a domain alias. In the new hosting environment, add the client’s live domain as an alias of the dummy domain — meaning, visiting either domain in your web browser should resolve to the same site.
   (Of course, nothing will happen until you point the live domain’s DNS to the new hosting provider, but we still have a few things to do before we get to that…)
2. Wait two hours. Give the hosting provider a bit of time to add the client’s live domain to their internal nameservers.
3. Forward all email. On the client’s old server (that you’re about to abandon), set up forwards on each email account forwarding all email to the corresponding address at the dummy domain. So, example@clients-domain.com should forward all email to example@dummy-domain.com.
4. Test email forwards. Send a few tests to make sure that email is being forwarded correctly.
5. Change DNS. Now you can finally change the client’s domain’s nameservers to point to the new hosting provider. A domain’s nameserver information gets cached and stored all over the internet — thousands of servers cache this information to keep the internet moving fast. It can take up to 72 hours for all of these servers to switch over and begin using the new nameservers.

So what just happened?

By forwarding email on the old server to corresponding addresses at the dummy domain, we made sure that email didn’t get lost during the domain name propagation period (again, this can last up to 72 hours). Any email that made its way to the old server was forwarded along to the new one.

Post-launch

Once the client’s domain has had time to propagate (7 days is pretty safe), you can remove the dummy domain.

Was all the fuss about email?

Pretty much. For most of our clients, losing email is a deal breaker. However, with an $8 dummy domain and a bit of jiggery-pokery, we can ensure that nothing gets lost.

Also, we like the professional touch. To clients, dummy domains feel more real than something like http://dev.athleticsnyc.com/client-name/. We explain to the client that the dummy domain is running directly on their new server. The client gets a sense of comfort knowing the dummy domain is their website, just behind a different name.

Why don’t you just set up an MX record to send email somewhere else?

True, that’s another solution. We love that Google Apps now offers the ability to pipe your domain’s email over to Google’s servers and use Gmail to manage your email at @your-domain.com instead of @gmail.com. It’s easy to set up, and free.

A major benefit of using an MX record to bounce all email along to a hosted service is that you don’t have to worry about losing email when switching web hosts. You’re cool as long as both the old and new hosting providers’ DNS include an MX record routing all email to the third party email service.

There are a number of professional solutions for managing email in this way. Just google “hosted email” and you’ll find a bunch of them. However, I find most of these services to be geared for the corporate crowd. Further, a third-party pro email service just isn’t necessary for most of our clients. Running email and web services on the same server works fine for most.

Worth the $8

I try to enjoy peace of mind whenever possible. The dummy-domain-email-bouncery trick helps with that.

---

Questions? Comments? Contact James via email - .

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

Subversion, the open-source version control software, has changed our web development process.

At one point in time, I thought version control software was the stuff of super-nerds. I had imagined complex software running on complex servers doing something fancy to manage programming projects. I didn’t recognize it as something that applied to me. So, for the most part, I ignored it.

Then, as version control started to creep into the web development community, I began to take notice. I would see mention of it in blogs, in books, etc. The more I learned, the more I realized it was a cool idea with a lot of benefits.

The big idea:

• Store (and safe-keep) your project in a repository on a remote server. Never worry about making local backups. Each time you commit changes to the repository, you are making a remote backup.
• Allow multiple users to collaborate on the same code base at the same time. Collaboration from any number of users, from any machine, at any time.
• Keep track of all changes made to a project over time. Subversion allows you to jump back in time and access any and all previous versions of a project. No more duplicating files as backups just in case you break something.
  
  (Sidenote: This aspect of version control seems very similar to Leopard’s time machine feature. I’m not sure how Apple implemented this, but perhaps it’s similar to how Subversion works.)

Eventually, I ended up working on a project with a colleague, and he already had the project in Subversion. He suggested that I get up to speed with Subversion so that we would remain in sync with one another. I gave it a shot, and by the end of the project, I had the hang of it. More importantly, I realized version control should be an integral part of the web development process. (thanks Tim!)

The basics of Subversion

Subversion stores your project in a repository. The repository usually lives on a remote server. As you make changes to your project, the repository remembers everything you do.

Once you have your repository in place, you check out a copy of the project to your local machine. As you make changes to your local working copy, you commit your changes to the repository. Also, you can update your local copy to pull down the latest changes made by other users. That’s all there is to it.

Where it gets interesting…

The lone web developer may ask, “Why should I bother? I’m a one-man team, a lone wolf. I can manage my own backups. I don’t collaborate with anyone so I don’t need this stuff.”

To me, one of the most important benefits of using Subversion for web development projects is that Subversion eliminates one of the classic web development tasks: using an FTP client to push files to your production server. With Subversion, your production server can run a working copy of your repository just like your local machine does. So, like your local machine, to update the copy of the project on the live server, you run an update, pulling down the latest changes from your Subversion repository.

Let’s say you’re working on a project and you need to push a large number of changes live to a busy website. Perhaps 30+ files have changed — lots of new code, you’ve added some new images, maybe some videos, fixed a few bugs, etc. — and you want to push these live.

If you’re relying on an FTP client:

• You have to be very careful to make sure you upload all the latest files.
• You have to wait for them to upload.
• It can be very tricky to make all the changes happen at once.
• If something goes wrong, it can be difficult to revert back to a previous version.

If you’re using Subversion:

• You run one command, svn update, that pulls down all of the latest changes at once. Subversion knows exactly which files have changed, which files are new, which files need to be deleted, etc. If your repository is hosted on the same server, the update runs in a second or two. If you’re connecting to a repository on an external server, the transfer rate should still be very fast with most updates taking place in a matter of seconds.
• If something goes wrong, you can have Subversion revert back the previous state where everything worked.

Still not sold? Consider this…

I do most of my work at the Athletics office, but there are times when I need to take projects home, on the road, or send projects to other developers. It was always a pain trying to sync my desktop and laptop — I’d use little jump drives, post zip archives to our ftp, or remember to bring my laptop to the office. With Subversion I don’t bother with any of that. To sync any computer, I just run an update and I’m done. To provide another developer with access, I just have them check out a working copy from the repository.

Getting started with Subversion

If you’re serious about getting started, you should read the Subversion book. It’s extensive and everything you need to know is in there. And it’s free. If you prefer more hand-holding, I recommend the book from the Pragmatic Programmers, Pragmatic Version Control. I enjoyed it.

Downloading the Subversion client

The Subversion website offers packages for just about every system on the downloads page. The OS X package is easy to use.

Setting up a repository

You’ll need to find a hosting provider that supports Subversion. Most of the good ones do. All of our projects run on Empowering Media’s managed VPS’s, but we’ve used Media Temple and Joyent/TextDrive in the past.

To a create repository, you’ll need to SSH into your server (using Terminal on OS X), go to the directory where you would like to store the repository, and run:

svn create REPOSITORY_NAME

This will create an empty repository. You don’t put anything into the repository until you start making commits. Keep reading…

(Read more on svnadmin create, or check out Media Temple’s KB doc on creating repositories.)

Initial checkout

Once you have your repository in place, you’ll want to check out a working copy to your local machine. You will need to have the Subversion client installed on your machine to do so.

Using Terminal, navigate to the folder where you would like to store your working copy. You will use the svn checkout command to check out a working copy to your local machine. The way in which you connect to your repository depends on how your host has Subversion configured. Many hosts require the svn+ssh method. It looks something like this:

svn checkout svn+ssh://user@yourhost.com/path/to/repository_name

Running this command will connect to your repository and “check out” the latest version of the project. Subversion will create all of its behind-the-scenes support files (see the bit about .svn folders below) and essentially “activate” your local working copy.

Working with your local copy

Once you have your local working copy in place, you can begin to add/modify files and folders.

First, you need to keep in mind that Subversion requires that you explicitly add files and folders to the repository — see svn add. Once files/folders have been added, Subversion will keep track of all changes made.

Working with your local copy will require discipline on your part. You will need to inform Subversion of certain changes that you make. For example, if you need to delete a folder from your working copy, you will need run the svn delete command. This will instruct Subversion to delete the directory with the next commit you make. If you forget to do this and just delete the folder yourself, Subversion will get confused. It’s a similar situation for instances where you want to rename, copy or move folders. While this file system hand-holding can seem cumbersome at first, it eventually becomes second nature. In fact, I find that the added effort helps keep me more deliberate when making decisions regarding file/folder structures.

Making Commits

After you have added or modified files in your local copy, you will want to make commits. Running a commit will instruct Subversion to send your changes and new files to the repository. Once the repository receives the commit, a new version of the project is recorded.

Subversion features atomic commits. In addition to sounding cool, atomic commits are quite important. When receiving a commit, your repository will not record the commit as a new version until it receives the entire thing. Thus, if you are making a very large commit, and in the middle of uploading all the files your internet goes down, your repository will disregard the entire commit. This keeps your repository from getting out of sync.

To make a commit, you will run the svn commit command.

Tools

SvnX

While you can get by with the command line (Terminal) alone, it can be helpful to have a GUI around. On OS X, my favorite is SvnX, an open source Subversion client. Here’s a screenshot:

I tend to use a combination of both SvnX and the command line. I like having SvnX available to help add and remove files/directories, and I occasionally use it for commits and updates, but for the most part, I prefer the command line.

And though I’ve never tried it, I understand that Tortoise SVN is an amazing Windows client.

TextMate

TextMate is my editor of choice. Also, it includes some very handy built-in Subversion support. I often run commits, adds, etc. within TextMate. It’s not as robust as SvnX, but it can handle most Subversion tasks. Here’s a shot of TextMate’s Subversion context menu:

SSHKeychain

Another important app on OS X is SSHKeychain.

If you’re SSH-ing into your server often, and especially if you are connecting to your repository over svn+ssh://, you are going to want to establish SSH key pairs instead of typing in your password a million times. SSHKeychain is an open source application that integrates your SSH keys with OS X’s keychain.

First, you’ll need to set up SSH key pairs. Check out this article from the TextMate site that goes through the process.

Important Notes

What’s with the .svn directories?

From the Subversion book:

Every directory in a working copy contains an administrative area, a subdirectory named .svn. Usually, directory listing commands won’t show this subdirectory, but it is nevertheless an important directory. Whatever you do, don’t delete or change anything in the administrative area! Subversion depends on it to manage your working copy.

You won’t find these .svn directories in OS X’s Finder, but they are there behind the scenes keeping track of your working copy. While they are out of sight, you should keep them in mind…

Let’s say you have two different projects going on, both in Subversion, in two separate local copies. Imagine that you want to copy a directory from project A into project B. If you duplicate a directory in project A and place it in project B, the hidden .svn directories will cause you problems. Subversion will see these .svn directories from project A and get confused.

The solution is to remove the .svn directories (often referred to as “taking the files/folders out of version control”) before you copy to project B, then run svn add to instruct Subversion to add the new directory.

As you may imagine, there are many instances where you need to take files out of version control. In these instances, you need a way to get rid of these .svn directories. Here’s two solutions:

• Run an export. Subversion’s export command is designed specifically to export files from either a working copy or a repository. The exported files will not be under version control (they won’t have the .svn directories).
• Use a script to remove all .svn directories. It’s not as elegant, but this command can be super handy if you know what you’re doing. To strip the .svn directories from anything, open up a Terminal window, navigate to the folder in question, and run:
  
  find . -type d -name .svn -print0 | xargs -0 -t rm -Rf
  
  (Friends, keep in mind that any recursive rm command should be used with caution)

Finally, if you’re just copying files within the same working copy, you don’t need to take the files out of version control. Just use the svn copy command. By using this command, instead of copying a folder in Finder, Subversion will intelligently copy the folder and manage the .svn support files appropriately.

Securing your server’s public-facing working directory

If your production server (live web server) is going to be using a working copy of a Subversion repository as the public-facing site (document root), you need to make sure that visitors can’t browse the hidden .svn directories that Subversion creates to keep track of your working copy. These files contain some sensitive information that you don’t want to share with the world.

For Apache, the easiest way to disallow access to this information is to include the following directive in your httpd.conf file:

<directorymatch "^/.*/.svn/">
   Order deny,allow 
   Deny from all 
</directorymatch>

If you don’t have access to your host’s httpd.conf file, you can use an Apache mod_rewrite directive. The following code should be placed in an .htaccess file in your document root.

<IfModule mod_rewrite.c>
   RewriteEngine On
   # Prevent .svn directory browsing.
   RewriteRule ^(.*)(.svn)(.*)$ http://www.yourdomain.com/error.html [L]
</IfModule>

For more on URL re-writing using Apache’s mod_rewrite, check out this article on Sitepoint.

Subversion Hosting

Lately I’ve noticed a bunch of new Subversion hosting providers. I haven’t tried any of them, but I’m fond of hosted/managed services, and I’ve been considering giving one of them a try. Most providers offer built-in integration with Trac, a web-based bug/issue tracking system. We’ve never worked with Trac, but we do use Basecamp on a daily basis, and I’d like to see more Subversion hosting services offer Basecamp integration. (Springloops is the only service I’ve found with Basecamp support.)

• DevGuard
• SVNRepository
• wush.net
• CVSDude
• Springloops
  Springloops is particularly interesting as they offer Basecamp integration and their service is specifically geared for web development teams, whereas most of the other Subversion hosting services are designed for programming teams.
• Google Code
  * Christian Wolf emailed to remind me that Google offers free open source project hosting using Subversion.

Since I like conclusions…

Subversion is now an integral part of our web development process. We enjoy the peace of mind knowing that we have a comprehensive repository (dare I say, time machine!) of each project sitting on heavy-duty remote web servers. We enjoy the ability to seamlessly work with developers all over the country. We enjoy pushing changes to sites with just one command.

But one thing remains… version control is still the stuff of nerds. By its very nature, Subversion creates another layer of complexity between you and your code. It took a little time for me to get comfortable with Subversion, but at this point, I can’t imagine working on a web project without it. If you’re a web nerd, I promise: Subversion is for you.

---

Comments? Contact James via email - .

Mark Owens presents “New Brutalists/New Romantics”
Monday. September 24th, 2007. F200. 7pm/CalArts

The lecture traces the connections between graphic design, brutalist architecture of the ’50s and ’60s, and early ’80s synthpop. The lecture will cut across the domains of art, music, cinema, fashion, and graphic design and feature a substantial audio component as well as plenty of images and archival material.

Athletics member David Ahuja has updated his site with some amazing new work.
http://www.amoebalabs.com

Included is a new showreel for fall 2007, a montage from “NY77: The Coolest Year in Hell”, the newest video for Cartel and more.

If you haven’t seen this yet, you absolutely must. The breathtakingly gorgeous documentary film about Sigor Ros’ tour of their homeland by my friend Dean DeBlois.

Sigur Ros – Heima

sigur rós break their two-year silence to release their first-ever film and a companion album later this autumn. filmed over two weeks last summer when the band undertook a free tour of iceland, ‘heima’ stands as a colossal labour of love – not to say grand folly – typical of this most exacting of bands.

while most people set up a few cameras at, say, a festival, and call it a dvd, sigur rós decided they would push the boat (bus and plane) out for their debut venture into live film, hauling 40-plus people round 15 locations to the furthest flung corners of their homeland to create something, well, inspirational.

Inspirational indeed.

Just in time for Halloween, these two suites of vector illustrations feature a Horror theme and Day of The Dead theme respectively. If you are in need of some scary graphics for your next Halloween party these are the illustrations for you!

Each suite is $19.99 and available only through You Work For Them

Horror Suite – Purchase

Day of the Dead Suite – Purchase

I just got back from speaking at the QBN Sessions in Los Angeles and wanted to give you my blow by blow…

I have to hand it to Jason Kristofer, Founder and Director of QBN, for setting up an amazing event. In the same vein as Semi-Permanent, OFFF and IdN conferences, QBN Sessions featured a great lineup of design-related speakers. The Getty Center is an amazing venue and I would recommend you check it out if you are in LA. The view was killer.

We got there a day early and did a technical test for our presentation. Everyone at the Getty and QBN waited on us hand and foot and were really on top of things. That evening we went to the Media Temple sponsored speakers’ dinner at the Angelino hotel and met up with Joshua Davis and the Phunk Studio guys. While Joshua pounded red bulls and recounted his early 90’s experiences as a club kid in NYC, the Phunk Studio guys were fighting off some mad jet lag, having flown in from Singapore. Everyone was super stoked to be there and the food was excellent. We met Patrick Riley, the CEO & President of QBN who put together the event with Jason. We learned that Patrick had been the guitarist in the band the Ataris for a few years.

The next morning we got to the Getty bright and early. As we walked up we saw J Ellis of Athletics munching on a rice crispy block and sipping a coffee. We also ran into Bob Borden and Duane King of BBDK who were in from Santa Fe. Mark and I ran through our presentation one more time and took our seats up front to check out the speakers.

One item that was interesting was that Jason and Patrick chose not to MC the event themselves and got an aspiring actress to do introductions. While cheerful and pleasant, you could tell she was not entirely aware of who she was actually introducing.

Phunk Studio

I have met Melvin, Jackson, William and Alvin a few times and they are always easy going. At the speakers’ dinner we chatted a bit about design collectives and why we think they are a good idea. Because the Phunk guys are all friends and have been working together for over 10 years, you get a sense that they have let their individual egos take a back seat to the bigger idea of the studio. Their speech re-capped their entire body of work and it was great to see some of the older pieces in contrast to current work.

Jackson talked about being inspired by Emigre and Raygun back in the day and how they have spent many years reinterpreting their own design practice by looking at western graphic design as well as anime, manga and other eastern influences. It is this fusion of western influence and eastern perspective that makes Phunk really unique. You can see a level of ease and care-free nature in the work—you know that the Phunk guys, while extremely talented, do not take themselves too seriously.

As the Phunk guys are now in their 30’s, I am curious to see how their work changes/matures in the coming years. A recurring theme throughout their presentation was how they initially saw themselves more like a band, and less like a studio. Getting girls and going to parties was the justification for doing “cool” work. As far as I know the Phunk guys have been to plenty of cool parties and it looks like their best years are still ahead of them.

Michael Muller

Michael Muller is a 37-year-old photographer that has a wife, three girls and has lived in Los Angeles for many years. Before his photo career, Michael was a tri-athlete during his teens and early 20’s, but gave it up to be a photographer. Overall, it was apparent that he has been able to translate his competitive spirit to the camera, and has taken some of the jockishness along with it.

Some of Michael’s more notable work includes the promo images for X Men – The Last Stand and Spider Man 3. Michael has also done a lot of band photography (Red Hot Chili Peppers in particular, and more recently, a shoot for the Shins and Modest Mouse) and a ton of under-water photo work for the likes of Speedo as well as personal projects. His shot of a Batman look-alike doing crack in an alley was pretty amazing.

Michael had a great blend of personal and professional work and was not afraid to show work where he piggybacked a personal project on a client shoot. He came off as having a bit of an ego and it was obvious that doing work for celebs in Hollywood was a large part of his agenda. Nonetheless, Michael showed his true skill behind the lens and was not afraid to tell you that a bit of hustle, hard work and some of luck can take you a long way.

Michael C. Place

Mr. Place is a design legend in my book, having done some of the best work the Designers Republic ever put out into the world. He is also a very quiet, mellow guy that just plain loves design. His studio, Build, consists of himself, his wife and their hairless cats. There is an iterative nature to Michael’s work where you can see that he just keeps going and going. My favorite piece that Michael showed was his work on the D&AD Global Awards. It was amazing how many things he was able to interpret out of the hexagon mark. For those that are really into typography, I think Michael really showed how much gesture and fun can be had with type.

For me, Michael’s quintessentially English perspective on design was a breath of fresh air. My only regret is that we did not get to have a pint together.

Matt and Mark Owens

Hey that’s me. Mark and I made a considered effort to break up our talk and show a lot of different things. The fact that Mark does design, teaching, curating and critical writing on design revealed that design practice can involve a lot more than just the work. What I enjoyed most is Mark had the chance to show some of the work he has done for Commonwealth Stacks and Generic Costume. I have found that sometimes folks do not get due credit for the work they do for clients, so it was cool to show people what he designed for them.

I also thought showing the work of Athletics as a collective studio was good for everyone to see. Most large-scale projects involve several people, and the collaborative effort really shapes the end product.

If we had more time, I would have liked to talk about the “business” of design. Very seldom do people talk about how they actually work and bill jobs.

Lastly, I enjoyed showing The Free Library and the True Believers shows back to back. Mark really “designed” the Free Library show, with the look of the spaces being integral to the show’s concept. The True Believers show was less of a designed space and more of a meeting of designers from varied backgrounds.

I was the only speaker to give away free stuff. Folks seemed to be into it because all of the stickers and booklets were snatched up. Feel free to email me and let me know what you thought of my part of the lecture.

Shepard Fairey

Backstage I had the opportunity to chat a bit with Shepard Fairey and his wife Amanda. Amanda and I chatted about the challenges of running a gallery, studio and doing personal work. I am in the same boat but definitely not on their level. Amanda seems to have the business side locked down. They are in the process of buying a building in Echo Park where all facets of the business will be under one roof. They are also expecting their second child. Congrats!

Shepard is a nice guy and you get a real sense that he has not planned where he is today. The Obey phenomenon is definitely a result of his hard work over the years and a commitment to street art. Of all the speakers, Shepard was the star. A lot of folks were stoked to hear him speak.

Shepard showed some of the pages from his book and gave us a brief re-cap of how Obey came to be. The second half of his presentation was more of a Q&A situation, with the MC joining him on stage, asking him questions. I found it interesting that he chose to have the aspiring-actress-MC-lady ask him questions as opposed to questions from the audience. I did get the sense that there may be a good deal of criticism/backlash that he may be trying to avoid.

Shepard is very talented and he has been able to take his inspirations from Barbara Krueger, Russian Constructivists and Communist Chinese propaganda and really make it his own. I think the street art aspect of his work does rub a little bit counter to the huge licensing deal he has made with the Obey brand, and the fact that Obey shirts are everywhere. But on the flip side, if any of us worked hard and developed a cultural sensation like Obey, we would be fools not to capitalize on it and open the doors to other pursuits (art, gallery, magazine, etc.).

I actually liked the artwork he did in Hawaii the best—really beautiful and understated.

The Mill

Alistair Thompson and Pat Joseph spent a good bit of time talking about the difference between English and American advertising. The Honda ‘Impossible Dream’ commercial they showed was my favorite. And the Skittles ‘Touch’ commercial was amazing.

With a post house like The Mill, it is hard to know where to know where their work begins and ends. On all the pieces they showed, it’s most likely that an ad agency creative came up with the idea. That said, The Mill have a great skill at bringing an idea to life through technology. Alistair and Pat spent a good amount of time walking through the intense 3D they did for the Johnnie Walker ‘Android’ ad.

Overall, the Mill are super-tech and if I had 500K to do some insane CG I would certainly send them the brief.

Joshua Davis

I met JD almost 10 years ago when he was living 3 blocks away from me in Williamsburg, Brooklyn. One lovely wife, one lovely child and international design stardom later, Joshua is a well-oiled conference-speaking machine. Joshua focused on his program development, and the iterative, comprehensive process required to generate highly complex abstract imagery.

I was hoping that Joshua would go “under the hood” and show some of the code. Athletics’ J Ellis was particularly bummed to see this aspect of Joshua’s work omitted. I was also curious how he is able to do a postscript rip from Flash to Illustrator. Give up the goods Joshua! (Update: go here for instructions). Joshua did not show any client work and I am curious how his experimental work translates into the commercial realm.

Overall, Joshua is a big personality and he has his personal vision pretty well locked down. For this I admire him. With regard to his work, I would love to see Joshua extend his method of art making and try new things—perhaps using bitmap/raster graphics rather than the vector style he’s known for, or programmatic motion pieces.

The After-party

After the conference was over we went to the after party in the Getty courtyard. Rather than a party exclusive to the conference, we joined a larger party—“Friday on the 405” is a regular summertime event at the Getty. Unfortunately, the result was a diluted conference population and long lines for drinks. I would have preferred something a bit more intimate.

Overall, I like the one-day super event as opposed to a 2 or 3 day thing. Also, some folks balked at the price. $250 is steep, but as a design professional, it’s a good tax deduction. And if you’re running a company, it’s worth it to expose your designers to good work. Again, I was stoked to be a part of the first QBN Sessions and I look forward to many more.

—Matt

Our buddies Mike Evans and Jennifer Galatioto just released The Unhappy Animals, a line of depressed toonery that you can wear about on your person.

Given Mike’s ridiculous attention to detail, it’s no surprise that, day one, the site and line both arrive with graphic-designerly precision.

I like the turtle.

Matt and Mark spoke at the The Getty Center in Los Angeles yesterday for QBN Sessions, a one-day multidisciplinary creative lecture.

The event was great: good speakers, amazing space, packed house.

I was particularly impressed with the Getty Center. It’s a massive museum/castle complex on top of a mountain overlooking LA. Totally blockbuster. And very clean—I didn’t see any dirt whatsoever. The conference space was top notch—pro projector, squishy seats, etc.

To actually get to the museum, you have to ride up the mountain in a funny tram:

Once at the top, you have some great views of LA:

We met some nice folks, hung out with old pals, and saw a lot of great work. The entire day was a lot of fun, and a great excuse to get out of NYC. Thanks to everyone from QBN for putting this together.

Also, we put a few photos on Flickr.