Cocoia Blog » iPhone

Designing Classics

sebastiaan — Thu, 23 Oct 2008 17:07:57 +0000

I didn’t intend to write a single letter on my blog before the impending redesign of all my websites, but here I go anyway; today, Phill Ryu and Andrew Kaz opened the doors of the website of Classics, a great new iPhone application that will be out soon. I was honourably tasked with designing the interface, website, and a book together with the awesome David Lanham. Classics offers a gorgeous, tactile experience for reading some all-time literary classics (hence the name), with a sturdy collection of literature that will be expanded with updates in the future. Read on for some great images of how the interface (and icon) developed as time progressed, and some bonus images of my alternative Flatland cover designs.

It was the 12th of September of this year, when I was sitting at home designing a great user interface concept for a desktop app, and Phill contacted me. He told me all about this new project, and we soon found out we were definitely on the same frequency. It’s interesting to see how such an app starts out; at first, we had this clean slate to work off of, and after a mockup session for the ‘reading view’, the idea started to take wings.

I designed a set of interface mockups for Classics right before I went on my trip to San Francisco. David Lanham took my mockups and created a beautiful, toned down color theme and a set of adjustments that made the interface a gorgeous whole that is very pleasant to read in. Real-life testing was an important part of the application; users could be lying in the park grass reading a book on their iPhone in the bright afternoon sun, and if they are, they should be able to still read pleasantly without having to squint an eye or going indoor and looking at an interface that’s completely black on white. In the end, we got a beautiful interface together that just worked beautifully on the high resolution iPhone screen, and I think I speak for everyone involved when I say that I’m very proud of the way the interface turned out.

…

Then there’s also the part of the app most people contact me for, the icon. I only designed a suggested alternative icon for Classics (the middle icon in the image below), as David was creating a set of concepts. Here’s some of the icons we went through; we eventually settled with the bookshelf David designed (although a more polished version than the one shown here).

I really like the way the icon looks on my home screen, and I must admit that although I liked the simple concept of having just a book as the icon, the shelf works better as the bookshelf is really the ‘face’ of Classics. It’s also a joy to use; scrolling it up and down and rearranging all the books is a lot of fun, and it’s very snappy.

…

I also designed a set of covers for Edwin A. Abbott’s classic braintwister ‘Flatland’, one of my favorite mind-expanding books. Flatland is the life story of a square in a truly twodimensional world. He explains his world, and he eventually finds other worlds like ‘Lineland’, a one-dimensional world, and ‘Spaceland’, a three-dimensional world. It’s very powerful, as it can have you thinking about the possibility of a fourth spatial dimension or the implications of life in a world where there’s only two. Definitely a worthwhile addition to the Classics collection of books.

It was a lot of fun laying out the typography inside the book and designing these accompanying covers; While I got a lot of feedback about these covers, most people really liked the rightmost one, which is the one that made it onto the shelf. You can see it on the website now.

…

As you can see from the end result, Classics boasts an impressively subtle interface, that’s still very attractive, and is perfectly suited to reading text in any situation. The great aspect of reading in Classics is what Phill called the ‘tactile experience’; users can flip the pages with their fingers, making reading a book feel a lot more realistic and natural. It may sound gimmicky at first, but if you actually use the application, you’ll discover how pleasant it really is. I’ve been reading a lot for all of my life, and Classics is really the natural evolution of reading to me. Without having to lug around a bag of my favorite books, Classics offers me a gorgeous shelf of literature that I can read on the go, in line at the grocery store, or in the warmth of my home with the cat curled up on my lap. Even the most avid bookworms will find the iPhone a great platform to read books on now.

Classics will be available soon on the Apple App Store; you can take a look at the website me and David designed here to subscribe to the information newsletter and get notified when Classics is released! Also, don’t forget to digg it!

Lowlands 2008

sebastiaan — Thu, 14 Aug 2008 11:48:13 +0000

Well, it’s that time of the year again, I’ve packed my bags and me and my girlfriend are off to celebrate 3 days of guaranteed fun at Lowlands 2008. Lowlands is a musical festival, with a huge line-up of artists, cultural events, and great food and people. It’s the third year I’m attending.

This year’ll be quite different than the last, as I’ll be taking my iPhone 3G, and I’ve also taken some time apart to make a beautiful and well-optimized web application for all attendees with iPhones and iPod Touches; LL4iPhone. With permission of the festival organisers, I could use some of their decals and branding in the app to give it a consistent feel. It was quite an interesting personal assignment to flex my poorly trained Javascript and PHP muscles, but it worked out quite nicely in the end. You can check it out at LL08.com (you’ll be automatically taken to the web app if you’re on an iPhone); it’s entirely free to use.

I will also try to update with pictures and text from twitter and perhaps even this blog post by using iPhone applications, if my battery levels allow it. If you’re at Lowlands, give me a call or email so we can meet up!

Webclipping it the right way.

sebastiaan — Tue, 22 Jul 2008 15:31:13 +0000

Priidu Zilmer, of zilmer.com famehas a nice post and Photoshop sample file available for those of you that want to make crisp Webclip icons for your website. Webclip icons are the images iPhones and iPod touches use when adding a website to the home screen. Since I can’t use a web application for iPhone when the icon sucks, I urge those to whom it may concern to check it out.

Incidentally, this is my first blogpost made with the iPhone native application ‘Wordpress’. I like it so far!

Cream of the App Store crop.

sebastiaan — Thu, 10 Jul 2008 13:14:31 +0000

Just under 20 hours before the official release of the new iPhone 3G, Apple’s opened the doors to the App Store. A lot of great apps are already available, and I wanted to share my selection of fantastically designed and useful apps that you can grab when you update your current iPhone (or even better, get a new 3G iPhone).

All of these applications are linked to the iTunes Store, so click the link to proceed to their iTunes page with screenshots and other information.

Twitterrific. - Iconfactory (free or € 7,99)

The Iconfactory’s Twitterrific is already reknowned as the premier client for the microblogging service Twitter on the Mac, and they’ve expanded to the wonderful iPhone and iPod Touch platform. Looking at the screenshots, it boasts a unique and beautiful UI, with familiar characteristics from the desktop application like replies to your tweets that are highlighted in orange. As with the desktop version, the ad-supported version is free, and a ‘Premier’ version is available for €7,99 (I believe this is about $9,99 in the USA).

Tuner. - Nullriver (€ 10,49)

Although pricy, Nullriver (known from their efforts on ‘jailbreak apps’, i.e. applications developed before the official SDK was released) has also come forward with an internet radio tuner with a fresh interface. I know first-hand that Nullriver has made some excellent iPhone products prior to Tuner, and the application looks very attractive for on-the-go music. Certainly an app I would purchase.

Tipulator. - Tap Tap Tap (€ 0.79)

WhereTo. - Tap Tap Tap (€ 2.39)

WhereTo and Tipulator could be considered the absolute cream of the crop in the App Store when it comes to UI. With a few exceptions, no application in the store comes close to the level of polish and detail that can be seen in these applications by the new Tap Tap Tap team. The developers and designer in the team are quite well known; Sophia Teutschler (perhaps you know CoverSutra?), John Cassanta (MacHeist et al) and the very skilled designer Wolfgang Bartelme have produced some excellent applications under this label. I’d recommend checking these apps out first when you get around to browsing the App Store on your portable.

Remote.. - Apple Inc. (free)

Interestingly, Apple themselves released a freeware application on the app store that lets you control iTunes. It’s a very straightforward and iPhone-native application that blends in with the other pre-supplied iPhone apps in an elegant way. No more getting off your couch to skip that album or to switch the speakers you’re sending audio to; Remote lets you do this all from your iPod Touch or iPhone. A very welcome addition to the iTunes featureset.

Trism. - Demiforce (€ 3,99)

I have been playing Trism since the trial version became available on the jailbroken iPhone installer. It’s a very easy to learn and fun game that works with the accelerometers in the iPhone to add an extra dimension to an otherwise unremarkable puzzle game. Cleverly thought up, Trism is one of the more fun games in the App Store, but its graphics aren’t really up to par when compared to the heavy-hitters like Super Monkey Ball.

Moto Racer. - Freeverse (€ 7,99)

Freeverse is also releasing a very impressive 3D racing game called Moto Racer. This speedy game allows you, just like Pangea’s Cro-Mag Rally, to race through detailed 3D environments by using your iPhone as a steering wheel of sorts. Since words don’t really do its gameplay justice, I recommend you just grab it and play it!

Sketches. - Late Night Soft (€ 5,99)

Sketches is also one of those apps that’s been developed before the official SDK was even around. However, Late Night Soft has expanded significantly on its featureset, adding a very innovative and natural interface for managing multiple sketches. Sketches lets you ‘fingerpaint’ sketches, add graphics to photos and maps and interact with the results easily.

Netter’s Anatomy. - Modality Inc. (€ 31,99)

Also featured in the WWDC 2008 keynote, Netter’s Anatomy by Modality is really a niche product for medicine students or people who are active in the medical sector. It is a comprehensive studying and reference application with information on the entire human body and anatomy. The interface is a true work of art, looking crisp, native, and very intuitive (especially for such a ’sophisticated’ application). If you fit the target audience, I’d certainly bite my lip and pay the (relatively) steep price to purchase Netter’s Anatomy.

Telegram. - Polar Bear Farm Ltd. (€ 7,99)

Telegram is a novel app by Polar Bear Farm that lets users send each other short audio messages, in their words ‘combining the best of three major mobile communication types’ (email, SMS, and calling). The interface is very nicely thought up, although the technical (graphic) implementation of it is a bit shoddy. I think it’s a very cool idea to wrap such a service (a 1-year subscription to their voice messaging ‘backend’) into an iPhone app and make it easy to use with a unique UI. Telegram retails for the going shareware iPhone app price of 9,99 dollar.

Exposure - Connected Flow (free or € 7,99)

From the makers of flickrExport on the Mac, Exposure is an iPhone application following the model of Twitterific; a free version, and a ‘Premium’ edition. Both free apps feature advertisements from the Deck, a non-obtrusive and high quality advertising network. Exposure lets you browse flickr from your iPhone, keep track of your friends’ photos, comment on photos, and, most interestingly, find pictures on flickr that have been taken near your location. This feature sounds absolutely fascinating to me, as it’s very useful to see pictures taken near you (imagine landmarks, or other points of interest and navigation aids).

These are my favorite App Store debut apps; I hope I’ve whetted your appetite for the applications that will come rolling in in due time that also carry some great graphics from my hand. For now, you will have to wait until at least August to see some of those, but trust me: it’s worth the wait!

Digg this!

Let the new era begin.

sebastiaan — Thu, 06 Mar 2008 20:08:47 +0000

Apple has just revealed the new, open Software Development Kit for the iPhone. It’s an exceptional program, which had been pre-seeded to developers. It allows developers to create native applications for the device, which had been highly desired since the start.

I was reasonably tight-lipped about this because I got a stash of email from companies a while before the keynote of today. I’ve been working on iPhone apps with developers for a few weeks now, and as such, I had been expecting a reasonably fully fledged SDK to appear. A device that already astonished people worldwide will now perform almost any desirable function, in a beautiful and revolutionary way. We truly stand at the brink of a user experience and software development revolution.

An online friend, Leonardo Cassarani, said:

Imagine something like Delicious Library’s barcode scanning on iPhones. You could read users’ reviews of the product you’re considering buying. Or auto-update your delicious library via the web. How about keeping a wishlist as you go out for shopping, maybe record the store names and addresses so you can get back to it and buy it or integrate it with something like Amazon’s wishlist?

This is a perfect example of why this is going to change a lot of things in the software industry. Not to mention, the target audience of people owning an iPhone will soon be much larger than the audience of desktop software - especially Mac software.

Although it’s not looking great for application icons, currently (the ones in the presentation were mediocre at best), you can imagine my enthusiasm about creating interfaces for all these great new applications, with a more interactive usage model than ever before. New applications are even promised a way to poll the iPhone for its location, it’s acceleration and tilt - making a game that responds to the way you hold the device an ‘obvious idea’. Where there was a limited model of development first, it seems the only boundary right now is the creativity of the designers and developers working with this.

I would say I expect to see a lot of cool apps coming out in June, but fortunately, I won’t. I know for sure that we’ll see a lot of great apps in June.

Edit: Thomas made this funny point:

Your shopping-oriented examples are really just slightly modified versions of the same hoary old “imagine if you could buy a soda..with your phone” that we’ve been hearing forever… (entire comment)

I think that if you feel this way, you’re failing to see the implications to anything in the web and desktop application spectrum today. Social networking, content exchange, collaboration, and more of such concepts in software are about to be reinvented in ways oriented at the most pleasant interaction model in existence. There’s bound to be some great rethinking of rusty conventions and repairing of broken implementations of good ideas.