Designing Interactive Products

Designing for the iPhone (part 1)

I had such a good time designing the Blog It for iPhone web app that I've decided to optimize my blog for the iPhone as well and document it here.

First step: create an iPhone favicon.

The way to add an iPhone favicon for your site is to create a 57px by 57px image called apple-touch-icon.png and upload it to the top level of your site. Don't give the image rounded corners or a gradient because the iPhone adds those things automatically. That part's easy enough, but the real challenge is creating an image that looks good when given the iPhone icon treatment. As you can see I went through several iterations before deciding on the final version.

The first one seemed to lose all the details and just looked kind of dull. The second was better, but the points of the logo get lost in the rounded corners and gradient. With the third one I moved the logo too far to the bottom-right. It looked like it was trying to hide. The fourth one was almost right, but I had to adjust it down a bit to make it look evenly spaced.

Fireworks vs. Photoshop

Digital Web recently hosted an interesting discussion about which application makes the most sense for web designers. I've been a Fireworks fan for years -- I think I may have even used version 1.0 -- and I still think it's a lot easier to use than Photoshop. I find PS to be unintuitive and overly complicated while Fireworks just seems to conform to my mental model of how graphics software should work.

If you're new to web design, Fireworks will almost certainly be easier to learn but I agree with Anton Peck when he says:

If someone is getting into web design specifically, I'd point them toward Fireworks and say "skip Photoshop". But--and this is a crucial point--if they're considering a choice that could involve graphics from many facets of technology, from many sources, I'd definitely tell them to go with Photoshop, as it's an established standard that will provide a stronger cross-industry experience in their career.

I think that sums it up perfectly.

Take the survey!

I highly recommend that anyone who's involved in making websites head on over to A List Apart and take the 2008 survey. It only takes about 5 minutes.

One year ago...

I was looking for movies to rent on Netflix tonight and I noticed something I'd never seen before. At the bottom of the new releases page there's a section for "Most Popular DVDs from One Year Ago." I think that's a really interesting choice. It's a great way to discover a movie that you might have wanted to see but had forgotten about. Similarly, one of my new favorite blogs Unclutterer does one post per week that collects their posts from one year before.

Even though both of those examples use one year as a timeframe, I think site owners should should choose an interval that makes the most sense for their content. For example, a political site might review stories from four years previous. But whatever the timeframe, it's a great way to help users discover content they might have missed the first time.

That's not Cuil

There's been lots of buzz about Cuil, which is a new search engine that's looking to cut into Google's pie. Unfortunately, my first interaction with the site was not a positive one. When I searched for my name (I assume it's too early to use "cuil" as a verb) the top result was my website, but the photo associated with it was of someone, a real estate agent from the look of the photo, other than me. The worst part of it though is the fact that the photo links to my website.

Blog It for iPhone

In addition to releasing a TypePad iPhone app, we at Six Apart also released a web app for the iPhone called Blog It.

Blog It was originally a Facebook app, but we knew it would be great to use it to update your blogs and/or your status on Facebook or Twitter from your iPhone. I contributed some visual and interaction design work and I'm really happy with the way it turned out.

Point your Mobile Safari browser to http://blogit.typepad.com and use it to update all your blogs at once.