iPhoneized Showcase: Deviant Art

This is the first post in a series entitled “Showcase”, in which we highlight iPhone optimized websites that go beyond the generic framework and serve as inspiration for designers.

The first site we will spotlight is DeviantArt.com. Deviant Art had the the challenge of compacting a lot of elements into the 320×480 screen size of the iPhone browser. Lets examine two pages from the site: the home page and the details page of an artists work.

The DeviantArt homepage has a lot of elements that need to be addressed

The homepage had several elements that needed to be addressed. This includes the artwork, search form, multi-level navigation, chronological view change, top navigation, logo and of course banner ads. They also have a call to action, asking people to register for free.


The iPhoneized version of Deviant Arts home page

We can see they’ve made the default view contain only a small set of artwork images (it’s 2×2 for vertical view, 1×3 for horizontal). Clicking on the next or previous buttons at the footer invokes a nice javascript slide effect to bring in the next set of images.

The search form, multi-level navigation and top navigation are found in the menu, which has a nice javascript drop down effect and uses a black, semi-transparent background. One thing I did notice about the menu is that when you are in horizontal view, it drops down behind the banner ad. This renders ‘Art Categories’ unreadable and unclickable. A minor issue but still noticeable.

To save space the designers have opted to remove “8 Hours” and “Way Back” from the chronological view change menu. Since the ‘Way Back’ option is only available to members who are logged in on the regular site, I did so thinking it would appear but it didn’t. Also, when I clicked on the ‘All Time’ option, the browser just hung, leaving me watching loading spinner for several minutes. My advice: Don’t click on ‘All Time’.

The logo has been centered at the top. It’s not the actual logo, rather a variation using some nice typography. I was surprised to find that it wasn’t click-able, as I did so to jump to the home page out of habit. I’m not sure if this is something we’ll see in a lot of sites, but it seems so intuitive they should really add that functionality.

The banner ad at the top was provided by AdMob. They have a remarkable collection of interactive ads designed specifically for the iphone, which utilize the device’s built in features. If you get the chance you should definitely check them out.

Upon clicking on a work of art you will navigate to the details page.

The designers decided to eliminate the breadcrumbs. The forward/back are now located at the footer instead of over the the image, and the description, details and comments are now tabbed.

Overall this site is a great example of how to stand out from the herd. They’ve done away with the generic iPhone css and really polished the look of their iPhonized website. Besides the logo not being clickable and the banner over the menu issue, there are a couple other things that I noticed were missing, obviously by design. First, there’s no call to action for people to register. I don’t know why, but it would make sense to have this since the log in feature is there. Also, there’s no ecommerce on the iPhoneized site at all. They’ve done away with the Store link, and the “Buy Print” buttons that usually appear in the art details page are not there. Perhaps they plan to add this in the future.

Overall this is one of the nicest iPhoneized sites I’ve come across, and I believe it should serve as design inspiration for anyone building an iPhoneized site.

credit: Official “Fella” artwork by $fella