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.
Draft 1
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.
Draft 2
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.
Draft 3
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.
Final
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).
Comments
Thanks for this great overview of your design process. Very informative.
Thanks Charles! Fixed
Nice work as usual Jesse. I love it when you let us peek into your process. It’s fascinating and inspiring to me to view the steps you took to arrive at the end product.
Nice write-up Jesse, and a great end result.
One thing that I’m curious about is the software you use for wireframing and why. I thought I read somewhere that you used Illustrator for this, but you mention using InDesign above, then also Photoshop.
Is InDesign now your wireframing software of choice? I’ve never even considered this for anything other than DTP before. How come you use this over Illustrator?
Thanks,
Ste
Awesome work as always Jesse! I’ve yet to actually buy the book, but I will sometime soon.
Usually a design is easily identified as being from a particular designer, but this one fooled me — and I would imagine others as well. Take that as a compliment, because it speaks to your range of design style.
Great job, Jesse! The site/page is amazing.
Awesome, I love hearing and comparing the processes of other designers. Good timing too with Cameron’s recent post explaining the book making too. The site design came out fantastic, great work! As with Sean, it took me a minute to see the footer link and realize you built this instead of Cameron. That is certainly a compliment to how well you nailed the client’s particular need and style.
By the way, I love the way you have Authentic Jobs feeds setup on the sidebar. It might be worth creating an easy-to-use script or “widget” that people could add to their own site. I know I would add it to my blog and I’m sure many others would too. Just a thought…
Ah, a long awaited blog post. You post very rare but whenever you do, it’s BANG! :)
Cool design and balanced content. Everytime you post a work, it gives more and more inspiration.
Thanks!
I have personally written to you before about how much I enjoy your writing but I wanted to state it again. I just love these articles that you do. They are so inspiring, my favorite thing to see in my feed reader.
Great Job Jesse!
And no, you can never use ‘Gotham’ too much ;)
Another great insight .. and great work – keep them coming, perhaps a little quicker
Nice work on the design, Jesse. I do think it is possible to use a font too much within a site, but making use of a beautiful font like Gotham in the right spots of a site is absolutely right. I guess you can say your use of Gotham is like a trademark for your work, and thats not bad at all.
The site looks very well balanced with the rest of the typography, colors and layout.
I don’t know if it is possible, but getting the picture of the cell phone to load faster, together with the rest of the content, would make the experience even better.
Lots of similarities to A List Apart.. beautiful design, and a wonderful insight into the design process.
really enjoy the write ups, nice to see how people work as you can pick up a lot of helpful tips. thanks, Ash
I really enjoyed your commentary about the process. Both of you(you and Cameron) make a great team. Keep them coming. I will purchase the book this week.
NICE job!
The first time I saw the site I felt it was very unique and memorable. You did a great job, and Cameron seems like a nice Art Director to work with.
I love reading behind the scene posts on design and colaboration work.
Great work as always, as I’ve said in the past your work is always inspiring. I find myself frequently checking your site for updates, although they are sometimes few and far between—each and every one is always worth the wait.
I love your site. It’s inspiring, and I’ve learned a lot just by looking at your designs. Thanks for the behind-the-scenes posts.
Do you or Cameron believe the design has sold more books? What are the statistics like?
It’s definitely sold more books than not having a website :)
I know what you’re saying though, and to be honest, I’m not sure if the question can be answered without comparing it to other websites with the same subject matter…. which as far as I’m aware, there isn’t any.
Nice work, it is a truly impressive design.
I too would also like to thank you for outlining your design process- given that you are one of my favourite web designers, it has been a great help to have a glimpse of what goes on behind the scenes.
As always, very inspirational stuff Jesse. I’m glad you decided to go a bit into the process for this site, it looks great and goes well with all of Cameron’s network.
Just a random question: is the phone slightly tilted to the right, or is it just me?
Not bad, a little out of theme regarding mobile phones (aka too much grunge at top header, colour choice) Overall its a very balanced site and that is something you dont see to often. Good job though!
Thanks Jessie for really great overview of Your design work process. The final version looks very good! Best Regards
“GOTHAM”
reminds me of my frutiger addiction in 2002.
and the sevenet addiction of 1999.
Really nice overview, well done.
Just stumbled upon this – great blog article, keep em coming.
I think it came out pretty nice and the book design looks great as well.
Hello Sir
I have seen ur all work it’s excellent
Sir i have requerst taht can u give ur refrence or Raw files
Beautiful Design.. wish i could do some of this work. Thank you for the overview.
cool design. great work
Just out of interest, which came first the book cover or the grey header on the site? I notice they are incredibly similar and was wondering if one was a result of the other.
Hey Pete, I believe they were both designed in parallel, and somewhat influenced each other. I took the original grunge theme from Cameron’s announcement site, and then Cameron used the grunge (or something similar) from the website and used it on the book.
Inspiring design. I like your step by step design process guides.
These are always welcome.
The phone is straight, Tanner, the impression of rightward tilt is due to the lighting in the photo. There’s a highlight on the right top that unbalances it slightly and gives the illusion of the lean you mention.
Help Wanted
Link points to the wrong address.
s/b http://mobilewebbook.com/
Otherwise, nice clean design – keep the behind the scenes coming.
Charles Lacy - September 13, 2007