The Royal Mint held a competition to replace the design of the British coins in circulation since the 1970s. The final designs are simply, beautiful. They are based upon the shield of the Royal Arms, as if each coin was a vignette onto a part of the shield, with the one pound pice having the entire Shield on it’s side. Hoefler and Frere-Jones have a nice comparison between this new coinage and the Department of the Treasury’s new Five dollar bill, complete with a purple “5” in Helvetica.

Maybe the US Federal Government should hold a design competition. (via Ministry of Type)

Way overdue, but I finally have posted my SXSW photos to flickr.

Amy and I gave our panel on the first day of SXSW interactive and it was a blast. It was nice to have it out of the way so we could chill and enjoy the rest of the week. Despite a one day sickness that I warded off (and developed into South By Scurvy upon my return to DC) I was out and about at the conference center and Sixth Street Environs.

Here’s the breakdown of Photos:

SXSW Interactive

SXSW Music

Hotel Café Tour @ Parish

Sara Bareilles @ Parish

Honor by August (my band) at the 7th & Trinity Guitar Hero Stage (photos by our manager Trish on my camera)

and finally, but not least of all, Paramore at La Zona Rosa

The talk that Amy Hoy and I gave at SXSW this year is now online at behyphenated.com. Check it out!

Our talk pitch: Zen masters taught it. Isaac Newton knew it. Scott Adams writes about it. Now you can know it, too. We’re talking, of course, about the manifold benefits of being a n00b (at something). And, of course, about all the good stuff that happens post-n00bishness: the excellent side effects of being good at multiple things, even if they’re not related – heck, especially if they’re not related. So many of humanity’s important discoveries, innovations and beautiful leaps of logic have been made by people whose brains were leveled up by the cross-fertilization of multiple interests and disciplines. Nano-thin specialization is out, a broad understanding of life, the universe, and everything is in. It’s time to synergize, baby. So, reach outside your comfort zone, be a beginner again, and you’ll be smarter, sexier, better at your job… even more valuable. With the wisdom of the ages (and a little bit from modern pundits), we’ll talk about how, why, when, and where you can go about it. You won’t regret it.

Just in time for the holidays, Lowwatt Recording releases the new Lowwatt Glow compilation. Twenty tracks from different artists that have worked at the studio with Ted Comerford (also my producer). I did the design work for it. You should love it. Try to grab one from one of the bands or from the studio or various shops around Raleigh, NC.

I recently completed two sleeves for some far flung clients (and friends). The first is for Spectre’s new release:

Ryan Hudson, the band’s singer, sent me a variety of lightwire creation photos he made. Mixing it together with the band’s wings logo and adding that to some distressed type worked out well. They just had their CD release party at the Key Club in Hollywood. Not only do they have great originals, but they completely rock a cover of Sade’s “No Ordinary Love”.

The second disc is for my friend Daniel from Texas. He performs under the name of Johnny Citizen and his new record:

I met Daniel years ago at the Dr. Dremo’s open mic and we kept in touch through a few long years on both accounts. He had these great drawings from a friend of his and we put them together into a digipak sleeve.

Anyway, you can get these records from various locations. They’re both great and you should check them out!

Amy and I have been accepted to a new thing at SXSWi coming up in March in Austin, TX. It’s called a “Core Conversation” and we’ll be holding one on our concept deemed “Career Rev 342: Dabble Dabble, Toil and Kick Ass”. The basic premise revolves around a lot of what Amy and I have been through: broad, multi-faceted learning, generally out of the classroom, and lots of nose to the grindstone. It’s also a discussion about how mutliple facets improve team interactions (as opposed to specialists who don’t understand each other’s specialties).

We don’t have any details yet, but we’ll update you as we move towards March.

My business partner Amy just put up a new article at Vitamin that discusses product pages and how to make them not suck so much. It’s a great and quite in-depth read along with some nifty flow charts and screen capture skadoodle action. It’s a great overview on why user experience can make or break a web site and specifically a product page.

“Wait,” you say, “there’s only one?” Well, no, but there is the one that irks me the most at this moment

I just watched Leisa Reichelt’s presentation on Ambient Intimacy at FoWA London and it started churning my gears about the things that drive me nuts in social networking apps. We’ll call this the Problem of Interconnectivity (or the lack thereof). I’ll snarkily refer to it as “One App To Rule Them All”.

I am not talking about just one social network app that everyone uses and refusing to publish to the rest of the world. Leisa said “People use different types of applications to facilitate different forms of communication…” and I believe that to be true. But there’s a lot of overlap between different applications, and I want a touch point by which I can manage those various applications with ease.

The Problem

I spend a lot of time contributing to various parts of the social graph: LastFM, Facebook, Twitter, Pownce, Upcoming, Flickr, Dopplr, TripIt etc. etc. Each site has its own login and password. Each site has it’s ups and downs. Some are great and some aren’t so great. But I use them all, and many of them have overlapping datasets. For example, Myspace, Pownce, Facebook, LastFM and Upcoming all have event objects. Dopplr and TripIt contain ancillary information about those events. Flickr later will have photos associated with those events.

This means that I end up with redundant and split-up data. Not just in the publishing of data from me to the sphere, but also via the manner in which that information is commented upon and how feedback returns to me. I don’t mind that it comes back to me in various ways, but it’s difficult to find that comment that was not in the normal pipeline six months after the fact.

The problem, at the core, is one of time—a lack of time. It takes an excessive amount of time to update all of these sites on a regular basis. And it requires that I visit each and every site in turn in order to enter the aforementioned data. That takes about five to ten minutes per site. Adding one event can take 30 minutes or more. Even if I’m bulk loading, I can easily drop a few hours doing data entry.

There has to be a better way.

The Pieces That Exist

There are a variety of technologies that could facilitate these things to come together.

1. OpenID | A distributed identity system that lets you use one login across many applications.
2. APIs (or Application Programming Interfaces) | These are tools created by the developer of the application that allow for other developers to create interactions with that application. The API is a concept and a series of things that can be done. What one does with them is entirely different.
3. DHTML | Dynamic HTML is basically made up of the DOM (Document Object Model), XHTML, CSS, and JavaScript. This is the base of the building blocks for interacting in new ways with the browser.
4. XMLHttpRequest | Also known as XHR, this is the core of AJAX, this allows for things to happen in the background while one continues to interact with the application.
5. AIR (Adobe Integrated Runtime) | A new technology from Adobe, this allows for people to build either AJAX, Flash, or Flex applications and deploy them across multiple platforms utilizing the AIR framework.
6. Ruby | The Ruby Language is a very easy to use and very powerful programming language. With ERB and some light Apache hacking, you can use this without having to install a full stack framework (such as Rails)

There are a variety of other protocols and technologies that could also be employed (such as Jabber) but due to my lack of experience with them, I’ll provide them only a cursory mention.

A Potential Solution

It’s easy to consume these streams after the data is input via RSS). A great example of merging multiple streams into one is Jeremy Keith’s creation of a collected stream on his site. So we’ve got the ability to pull multiple RSS feeds into one location and display them in a new manner. I’ll write a post in the future about doing this with some lightweight ERB.

But sending to each of the sites becomes a much larger endeavor. The API is a series of potential calls, not a plug-and-play piece of code. So even with some heavy lifting, you still have to manually identify the data fields in the models you wish to update on the remote server and make the proper calls. This is great and horrible in the same breath. The power of the API means that you can, in fact, push the data into the system (in most cases). It’s just a lot of work for little, if any, reward for the developer of said system.

The most obvious example of something that i have difficulty with in this arena is events. I play a lot of shows in my band. I also do a lot with various travel for work. So, I’d want to add a show and have it add a show at MySpace, an event at Facebook, an event at Upcoming.org, an event on Pownce, and update my Dopplr account that I’m going to be in that location.

Or how about a blast status update to Twitter, Myspace, AIM, Pownce, and Facebook? Information is only as relevant as the last post. And if it’s easy to distribute, a more complete view of communication exhibits itself.

I’m sure there are even more potential uses that I can’t envision myself and that is the beauty of the web in that people will use systems in new and unexpected ways.

Potential Pitfalls

Let’s call it out right now. Public enemy number one in this space? Spam.

Any system that lowers the barriers for the mass push of information very quickly enables the spam attack that everyone dreads. Spam, however, is subjective. I think 99% of us would agree that penis enlargement and “Get your free viagra now!!!” are a complete waste of time, effort, and electrons. But where is the deciding line? If I post a show to my network is that spam? If I post about a web conference is that somehow different? If I’m speaking is it more spam-related than if I’m just attending?

Another potential pitfall is asyncrhonicity. This could be planned for using something like Adobe’s AIR system and intentionally alowing the user to input massive amounts of data into a submission queue. When the user connects to a network, the application begins to sync up with various APIs in succession. So that could be a benefit over a pitfall, but covering user expectations would be very important. Does it sync automatically? Does I have to hit a button? Does it save previous syncs? What happens if there’s an error in the sync? What if I was really looking for a kitchen sink?

Truly. A potentially insurmountable obstacle. Especially the garbage disposal.

So what next?

Well, after writing this I happened to be reading MetaFilter and saw a post to NoseRub, which claims to be a decentralized social network protocol that lets you sync data between places. It appears to be more of an aggregator as opposed to a publisher as far as can see by reading their about section.

I’m going to chew on this and come up with some visual ideas of how this might work. How would you like to see this kind of application work? Is it even possible?

Sometimes things just happen in a way that is exactly what you asked for, with just really odd timing. You might get a white Christmas on Dec 26th (happened two years ago). You might ask yourself “where is my beautiful house?” You might get… uh… Well, you know what I mean.

So things just started kicking like Bruce Lee. Honor by August’s schedule is taking off, we’re going to be playing the Viper Room in LA in September, and we’re on the road pretty heavy this fall. We’re also doing some showcases for various labels. And I can’t be on the road as much as I am and really run a creative department at a physical location.

So I’m going to be going back to the world of working for the self. I’ve teamed up with Amy Hoy to rock the world of UI and User Experience. And we’re doing it in snarky style as Hyphenated People. You could say we’re dabblers, or ADD or just confused, but really, we just love learning.

Amy rocked out a sexy site complete with Easter Egg heaven:

Oh yeah!

So, we’re doing some really cool stuff for a guy that was just on Conan O’Brien amongst other people. Lots of exciting cool projects and I get to sink my teeth back into Ruby while working from the van and rocking out.

So, last year on my birthday, I joined a band. This year I quit my job and got a food processor. It’s a quarter-life crisis people. Watch out!

The incomparable Amy Hoy and I are pitching a panel for SXSW this year about being a dabbler. We’re both pretty much ADD dabblers, but this is actually a prepared presentation, not a five person Q&A session gone wrong.

We’ll be chatting about things like

• constant learning,
• why it’s good to have a guitar next to your desk,
• pushing your team members into renaissance-man land,
• and some good “Now Everyone Hug” motivation.

Amy will be recording and I will then spend four weeks “EQing and Mastering” it in ProTools, by which time she will have just put it out anyway, forcing me to resort to releasing the Criterion Collection edition. Of course, no one will notice any significant difference. :D

So, yeah, vote early. Vote Often.

Our client, Gary Vaynerchuk is going to be on Late Night with Conan O’Brien tonight. For those of you who haven’t seen Gary’s Wine Library TV webcast, you are missing out. We’ll be launching a new project with him soon and then moving on to more world domination with the man.

For those of you who missed it, Gary was also recently profiled in TIME magazine by Joel Stein.

UPDATE Here’s the full video from Conan (the NBC site cuts the beginning and end) and Gary was recently featured in Slate as well!

(This article is part two in a multi-part series on design process, which started with my article on Why?!)

For those of you who have seen Chasing Amy you’re aware of the famous line delivered by Jason Lee: “Tracer? Your Mother’s a tracer!!!” This follows taunting by a comic book fan that he’s not really doing anything creative.

The taunter was totally wrong.

Towards A New Paradigm

I went to Architecture school. Not information architecture, but the “we make buildings and stuff” variety. One of the big tenets of the program I attended was that one should not be using a computer unless they already knew how to do the traditional technique. The computer is simply a digital version of the drawing tool or a different tool that needs to be integrated into a set of traditional tools. How can you draw in a computer if you don’t know how to draw in the first place?

The rationale behind this is easy. Computers are finite, sketching is representational. When in CAD, it’s a very precise line length, angle, color, etc. Paper can be as simple as a parti diagram (just showing the basic line strokes of a design) or can be super shaded and detailed. But regardless, at the end of the day, it is not finite. It is a representation of an idea.

Take this story from my college interning days. I was working for a small design/build shop in Newport News and I had the opportunity to design sketch a small addition. I came up with two different ideas and the owner asked me to present them to the client. So I drove over and sat down at the table with them in their house and showed them what we had come up with. They weren’t sold on either completely and did a typical client move: “We like this from A and that from B.” Okay. I whipped out a role of trace and drew that with them right there and asked “something like this?” They were ecstatic and joined into the creative process and I left the house with a finalized design.

This works very well for web work, whether it is within a team or with a client, this rapid sketch process gets everyone to a shared understanding (and buy-in) very quickly.

Sketching for Web

Currently, when one starts designing a product (web app) or web site, most will start with either a database model in Visio or OmniGraffle (if they are a programmer) or a look/feel comp in Photoshop, Fireworks, or Illustrator (if they tend to the design mentality). These are far too detailed approaches when you know not what you are trying to accomplish. So let’s go with that age old addage of everything you need to know you learned in Kindergarten.

This is what is so great about this approach. EVERYONE on the team: Designer, programmer, client, business owner, investor, heck, even your accountant, can all be part of this process. It can happen on a white board, post-it notes, an easel, printer paper, a sketchbook, and even pen tablet systems (but again, computer wants things precise).

This isn’t a new idea. Jakob Neilsen sang the praises of paper prototyping in 2003:

With a paper prototype, you can user test early design ideas at an extremely low cost. Doing so lets you fix usability problems before you waste money implementing something that doesn’t work.

Ryan Singer, of 37Signals, also uses an extremely high-level paper prototyping system (which he discusses in Getting Real). They even scribble the text and then jump straight into HTML, using a graphics program only to create needed graphics. This obviously doesn’t work for everyone, but the core concept is simple: get the idea of the interaction that occurs designed very simply. Then start plugging and chugging it into your framework.

So, we have a theoretical system, paper prototyping, that allows us to get ideas developed quickly. But why should you use trace paper?

Why Trace?

When an architect is designing a building, trace comes in handy. First off, revisions. Floor plans change. Secondly, repetition. There are core elements that stay the same, such as the exterior walls and stairwells, but individual floors have different elements. Trace facilitates rapid copying of elements from other already completed layouts.

Now let’s apply that to a website.

The global elements, such as a header, a footer, navigation, and the basic framework (e.g. two vs three column) typically stay the same. The body content changes.

In real world practice, we used the trace process on two sites recently: CityCliq’s redesign and the initial design for Gourmet Library. In both cases, a large amount of high level design was accomplished very quickly by using trace paper. Once we kicked into a flow, a new page could be completed in 15 to 30 minutes. With CityCliq, we were doing product design/redesign and finished 24 wireframes in two relatively relaxed days at their offices in Jacksonville, FL.

Scan and upload to our Basecamp account? Bam.

“But I Can Do That in [Visio|OmniGraffle|Illustrator|Indesign] Faster!”

Well, in a production sense of making edits, etc. sure you could. But it’s the wrong tool. You’re trying to imply pixel perfection to an idea. You are spending time on the wrong thing (how things exactly line up) versus the important idea of what that page or that piece of interaction is. You get the important user experience information on paper and discuss how things flow. Then you can start dialing down into other tools. I personally go from paper to Photoshop. Ryan Singer at 37Signals goes from paper to HTML (or so he did when I attended the Getting Real workshop in Chicago in 2005).

So break out an index card, a post-it note, a roll of trace, a sketchbook, or a sketch-a-doodle even. As Michael Buffington twittered as I finished this article: paper prototyping turns out to be a lot like Kindergarten.

Let’s break out the finger paints.

Further Reading

Jakob Nielsen’s Alertbox on Paper Prototyping
Paper Prototyping (The website to accompany the book)

Supplies

12" x 150ft. Creme Trace paper
Staedtler Lumocolor Pens (I prefer the 318-9 Black Fine point)

I missed RailsConf this year, but made it in spirit in my quasi-appearance in Amy Hoy’s talk. Her presentation PDF got me thinking about how we do things at Meticulous. Between her pdf and talking to a new client today about teaching them our process, I figured I’d start writing it down.

So Where Do I Begin?

So you want a poster? Why? A website? Why? Ohhhhh you want Flash? DEAR GOD WHY?

Because.

Why Because?

Because. THIS IS SPARTAAAA!!!!

Seriously now…

The first part of process is educating the client that you are not a monkey. You are not a beautiful flower either, so don’t get your hopes up. You are a design professional. You provide design or communication solutions to a problem. Your solution can only be as good as your problem definition.

For you programmers in the audience, this is a no brainer. You have no requirements document? Oh this is going to be fun! But in design circles, all too often there are no requirements to be seen. Just “make me a website”.

Houston, You Have a Problem

What happens more often than not is that the client comes to you with a solution. They have a 32 page RFP that does not define anything except that there are way too many cooks in the kitchen and half of their jobs are riding on the success of the delivery of this RFP’s solution. What they don’t realize is that this is a project set to fail.

You are the solution provider. However, you’ve just been told what solution to provide. But alas, you’ve got rent to pay, food to put on the table, and OOO LOOK SOMETHING SHINY! Pretty quickly, you end up in presentations with 10 people and no agenda (and we all know those kind of meetings are teh suck) and you have to say “I’ll look into that” because telling one of the various “shareholders” in the room “no” means you’re an asshole and your boss will get a call later complaining that you insulted a program head of some irrelevant department who wanted their name on a tab even though they belong in a completely different part of the navigation and really it didn’t matter but they were upset and needed to lash out. —GASP—

True story.

Shareholders

Just using the word “shareholders” is wrong. It’s as if the project is some risky stock in which an individual will invest and later sell before it tanks and leave some poor sap holding the loss.

I’m not going to attempt to change the lexicon of the entirety of the tech industry, but let’s think about these “shareholders” differently for a moment. They’re people who know pieces of the problem. They believe they know the solution, but what they know is the problem.

“We need to communicate with our end users better.”

Now that is a problem. But what you’ll get is

“Let’s make a web 2.0 community site with minty fresh gradients and diagonal backgrounds for our users!”

Destined. To. Fail.

So I Gots a Problem

So your job is to stop the potential client dead in his or her tracks and say “Wait. Why? What problem are you trying to solve?” And usually, they will tell you something very ambiguous and seemingly unrelated to the solution they’ve requested. And through a few hours of discussion, you can generally help the client realize their true problem and place them on the path to a better life. Just don’t break out an Austrian accent and say “now tell me about your mother.”

Now, not all clients are this way. Many times you’ll have something where a client says “I need to redesign the skin of my website for x, y and z reasons.” And generally, they’ll be close. Because they know why they’re asking for the solution.

Onward, Brave Designer!

Now that you’ve got a problem, you can set about defining a solution for your client. Sometimes the solution is no solution. More often than not, you actually do have a project and you and the client run off into blissful wonderland. Well, at least until your first design critique. And then? Oh it’s on, bitch.

More coming

Next time, we’ll look at paper and how it can be your best friend ever. Yup. Better than your BFF. It’s your new BFF. And it’s name? Bum Wad. (UPDATE 12 Jul 07 the bum wad article is now online )

Photo by Brooke from Flickr photo page and licensed under Creative Commons

So some of you may have seen Amy’s quasi-announcement about our new SupaSecretProject™ on which we have been working a little bit lately. In building the logo, I realized that some of the simple things in Photoshop are not so easy to find for people who haven’t been using it as a tool of mass procrastination since 1996. So I figured it was time for a step-by-step tutorial on how I built the Pimp My Rails logo.

We’re going to create something like this:

Fonts

First thing anyone needs is some good fonts. Since “Pimp My Rails” is an obvious play on MTV’s Pimp My Ride television program, some mild semblance in a visual sense was desired. Xzibit was unavailable as a spokesperson, so the graphic elements were going to have to do.

I had a few fonts I had purchased for various projects, one of which was Letterhead Fonts Ballpark Script which has some awesome swashes too. We had purchased it for use at OnTap a few years back. This would be perfect for the “Rails” word. Then something fun but not too cartoony was needed for the “Pimp My”, as I didn’t want so much scripty that it just didn’t work well. So bring in House Industries Holiday Sans. We’re ready to rock.

Don’t you love these highly technical terms? “Cartoony” and “Scripty” and what not? Yeah. Precision in visual communication, that’s right! Enough babling. Let’s start Photochoping!

Photoshop Magic

So we start with a nice simple screen, in this case, 500×375 pixels. You don’t need a screen grab of a blank Photoshop screen. You can imagine that one. So let’s start with the Ballpark Script and write “Rails”.

Okay, we’re on our way. Let’s get a sexy swash going underneath it. I used the “i” character for this particular swash.

And we say in Kool-Aid Man style: “OH YEAH!” But we have miles to go before we sleep young padawan. The Logo is missing half the words. So we’ll add them and give them a little curvature with the arc text tool. +22% vertical should do it. And let’s drop it in House Holiday Sans.

Sexy. So now we need to make this “pop,” as the obnoxious client would say. In order to do that we’re going to start playing with layer effects. Let’s get a colored background so we can see what we’re doing. You can achieve this by creating a new solid color layer or using the paint bucket on the background. I prefer the former method because it’s easier to change later on in the process.

Excellent. Now let’s give this a mega stroke. Since we have three text layers, let’s simplify things. Group them together, duplicate the folder, and flatten the two layers that make up “Rails” into one layer. We will now apply styles to “Pimp My” and “Rails” with a swoosh independently. Put a stroke on each layer and size to taste:

Now let’s add a gradient overlay as well. On this I had the “Pimp My” overlay stay close to the main red that is the darkest part of the “Rails” gradient.

Hmm. Still looks kind of flat. Let’s fake some depth with a bevel.

gives us…

We could call it a day here. But this needs some more excitement doesn’t it? So what can we do? Starbursts! Everyone loves starbursts! Now these aren’t too difficult to make in Photoshop. Create a new image, let’s say roughly 1000px x 375px. Make a vertical 20px black stripe on one edge of it. Duplicate it and set it next to the other one and then invert it to white. You should have something like this:

Now with snap involved, we can use the drag and copy (Apple – Option – Click) to rapidly fill up the whole thing. Make sure you end on the opposite of what you started with. Crop to taste.

Now it has come the time that we make this a rockin radial explosion of pixel sexiness. Filter -> Distort -> Polar Coordinates is going to be the tool that accomplishes this.

So hit “Rectangular to Polar” and watch it go! You can try this with regular pictures, but you typically end up in a somewhat Alice in Wonderland kind of world. And that’s not always good.

Now you can adjust your settings to get various feelings of compression on certain axes, etc. That’s your call. But we’re going to take this back to the main file and paste it in there.

That’s a little stark. We also know that we want to create some illusion of depth, so let’s make a radial gradient to help with that.

Okay, so here’s the trickery. Select the layer of the starburst and apply a layer mask. Paste the radial gradient into the layer mask (you might need to invert it for the proper effect). Finally, set the layer transfer mode to “Overlay” and the opacity down to about 10%. Make sure it’s behind the text, but over the red background.

Lookin good. On the original screen capture on Amy’s site, I had used a photoshop brush and basically dirtied it up a lot to make it look a little vintage. This version removes that.

Let’s reinforce the depth aspect and add a drop shadow to the text. Duplicate the text group and rasterize the whole group to one layer. Apply a drop shadow.

Add cheesy tag line to taste:

There you go. Your Rails, Pimped.

Here’s a bunch of links that came through from the guys at EightShapes in regards to some of the Ajaxification we’re about to being on our storefront at Wirefly / InPhonic.

Yahoo Graded Browser Support | This is Yahoo’s assessment of which browsers are capable of more advanced features. A good way to plan what you are going to support.

AJAX SEO and Accessibility Considerations | If you’re like me, the idealist in you thinks everything should be usable and accessible. Here’s some notes on issues with advanced web applications.

AJAX and SEO | What to do about SEO on your AJAX site?

Adobe Flash Player Version Penetration | Eh, numbers from the horses mouth, but pretty interesting never the less.

Unobtrusive Javascript | Write better code, now!

Progressive Enhancement | What it is and Steve Champeon and Nick Finck’s SXSW03 Presenation