Creative services for the design-challenged developer
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).
Hello, my name is…
Jesse Bennett-Chamberlain, a stay at home designer from Grimsby ON, Canada. To get in touch use the contact form.
Do we really need more design galleries? Maybe. StylesInspiration looks to be a pretty solid site.
Picasa for Mac – Free download from Google
Brandon Kelly just released a very handy extension named Editor that automatically adds edit links to your Expression Engine entries. Works perfectly.
It can be tough to forecast your income & expenses when working as a freelancer… Pocketsmith looks like it might just have the perfect solution. Can’t wait to try it out.
“Get ready for the new year with some Calendar Tape ($10). This handy adhesive lets you create the current month in vertical awesomeness.” [Via]
Help Wanted
Recent openings posted at Authentic Jobs.
Myriad Network Hosting
When your business lives on the Internet, your livelihood is in the hands of your host.
ExpressionEngine
A feature-rich content management system that allows PHP illiterate folks like myself to create dynamic sites.
Basecamp Project Management
Basecamp is the smarter, easier, more elegant way to collaborate on your internal and client projects.
Charles Lacy
September 13, 2007
Link points to the wrong address.
s/b http://mobilewebbook.com/
Otherwise, nice clean design – keep the behind the scenes coming.
Chris
September 13, 2007
Thanks for this great overview of your design process. Very informative.
Jesse Bennett-Chamberlain
September 13, 2007
Thanks Charles! Fixed
ignite
September 13, 2007
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.
Ste
September 13, 2007
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
Scott Boms
September 13, 2007
Awesome work as always Jesse! I’ve yet to actually buy the book, but I will sometime soon.
Sean S
September 13, 2007
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.
Adrian
September 13, 2007
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.
Adrian
September 13, 2007
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…
Cssace
September 13, 2007
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!
Nick Hall
September 13, 2007
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.
Mike Enns
September 14, 2007
Great Job Jesse!
And no, you can never use ‘Gotham’ too much ;)
Adam
September 14, 2007
Another great insight .. and great work – keep them coming, perhaps a little quicker
Martin Berglund
September 14, 2007
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.
Scott
September 15, 2007
Lots of similarities to A List Apart.. beautiful design, and a wonderful insight into the design process.
Ash
September 17, 2007
really enjoy the write ups, nice to see how people work as you can pick up a lot of helpful tips. thanks, Ash
Nor
September 17, 2007
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.
Shane
September 17, 2007
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.
Chris Robinson
September 18, 2007
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 betweeneach and every one is always worth the wait.
Ben Harrison
September 24, 2007
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.
Blair
September 25, 2007
Do you or Cameron believe the design has sold more books? What are the statistics like?
Jesse Bennett-Chamberlain
September 26, 2007
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.
Justin Daniel
October 02, 2007
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.
Tanner Christensen
October 04, 2007
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?
David
October 11, 2007
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!
Tomasz Gorski
October 13, 2007
Thanks Jessie for really great overview of Your design work process. The final version looks very good! Best Regards
Alistair
October 16, 2007
“GOTHAM”
reminds me of my frutiger addiction in 2002.
and the sevenet addiction of 1999.
Mark
October 17, 2007
Really nice overview, well done.
John
October 24, 2007
Just stumbled upon this – great blog article, keep em coming.
hellyeahdude.com
October 25, 2007
I think it came out pretty nice and the book design looks great as well.
Salman
October 27, 2007
Hello Sir
I have seen ur all work it’s excellentSir i have requerst taht can u give ur refrence or Raw files ThankYou
Ban
November 05, 2007
Beautiful Design.. wish i could do some of this work. Thank you for the overview.
David
November 11, 2007
cool design. great work
Pete Marshall
November 19, 2007
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.
Jesse Bennett-Chamberlain
November 19, 2007
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.
Ricardo
November 27, 2007
Inspiring design. I like your step by step design process guides.
These are always welcome.
Dig It, Al
December 06, 2007
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.
Sunny Lee
December 06, 2007
很有幸看到你的BLOG
感觉你做的很好
尽管我不太懂英文