Mobile Web Book Design

When Cameron first asked me to do the design for his upcoming book Mobile Web Design, I’ll admit that I was a tad intimidated. Even though we’ve worked together in the past, this was the first project where he would be the end client. And I tell ya, there’s something about designing for another designer that adds a layer of pressure to the mix. Especially when that designer is as capable as Cameron. Mixed in with the intimidation and pressure though, was a feeling of honour. I knew how much time and energy he had put into this book, and was humbled that he would ask me to be a part of it.

The project started by Cameron posting an outline of what he wanted for the site on his basecamp account.

Purpose: Produce a one-page design for mobilewebbook.com to be used when the book is published. Site will promote the book and facilitate purchase through Paypal.

Deliverable: One layered image comp. Coding to be handled by someone else.

Page Content:

• Photo of the cover, maybe a couple pages behind the cover fanned out (I probably won’t have cover art available in time for this project, so for now just use a placeholder cover)
• Big buy button
• Button to download sample pages
• Short testimonial from some big name person
• 2-3 sentences or bullets about who the book is for
• 2-3 sentences about why you should buy this book
• Sample screen of a website on a mobile device (Nokia 6680?) with text beneath, (More than 40 screens from mobile devices)
• Use lorem ipsum for now, will provide real content later
• Small photo of iPhone for giveaway.

Design Ideas:

Ignore the current design. You can use elements if needed, but don’t use that as a guide. Admittedly, I don’t know precisely what I’m looking for, but if I had to pin it down to just two things it would be to produce a page that’s compelling w/ proper hierarchy and something unique. By compelling/hierarchy I mean a page that is convincing and the gist can be digested in a matter of seconds based on the size and position of items. By unique I mean something that will be memorable, something people will be enticed to link to if merely because of the uniqueness alone, the more links from galleries and blogs, the more exposure and ultimately more purchases.

It’d be nice if the design fit within the same family as cameronmoll.com, cameronmoll.com/portfolio, and authenticjobs.com, but ultimately I’d prefer uniqueness over brand consistency.

With the objectives of the site in mind, I fired up InDesign and starting working on a wireframe for the site. I ended up going a little overboard with the wireframe, and ended up with a rough mockup right off the bat.

Cameron was pleased with the layout and hierarchy of the content, but felt that the colours were a little too “iPhone-ish” and would probably work better if it were tied into the “Authentic” brand a bit more. I agreed, and quickly put together another mockup (this time in Photoshop) that had more of a Cameron flavour to it. I almost felt like I was cheating, as I basically grabbed the colours directly from Authentic Jobs.

Cameron’s only concerns with this revision was that the buy button should stand more than the download link, and that the DIN typeface wasn’t quite working for him.

The button was a fairly easy fix but in trying to find a suitable replacement for DIN, I think I tried a bit too hard and went a little overboard. Cameron’s exact words were, “I like the worn title text, but it might be a little too much almost worn for the sake of worn rather than communicating something about the product/service.” He also suggested trying a different colour for the header so that the site would have it’s own identity, yet still look like it’s a part of the Authentic family.

I switched the headline font back to Gotham (Is it possible to use a font too much?) and tweaked the colours as per Cameron’s suggestion. We were both pretty happy with the look of this final revision, and it ended up being the one we went with (except for the book cover).