Creative services for the design-challenged developer
A few months ago I had the pleasure to work with the folks at Kinoma on a redesign of their website. The images below are a behind the scenes look at how the design progressed through a few iterations.
I first tried to capture the idea of showing different forms of content “flowing” through the phone’s screen…
I felt the design needed a bit more contrast, so I added the blue band, and white content area.
Although I liked the concept of the content flowing through the phone, it was looking a little flat to me. On this one I started to go down a slightly different path to see what else I could come up with.
Kinoma really liked the first direction, and suggested I explore it a bit further. This led to the idea of taking the first image and adding an extra element of dimension to it.
Kinoma really liked this idea, and the rest of the iterations were just fleshing out the content, and tweaking the background colours.
Overall I’m very pleased with how the design on this one turned out. I’m also pretty happy that I was able to sneak in a photo of my daughter Sadie into the last frame of photos.
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.
Wayde Christie
October 01, 2008
Fantastic work as usual Jesse.
Really dig the main nav.
Would love to see a Flash version of the camera!
Harold
October 01, 2008
Jesse, each site you do keeps pushing your amazing skills. This is some crazy amazing work. Congrats.
Emilio Magdaleno
October 01, 2008
Hi, I’am from Mexico, so please, excuse my bad english.
A few weeks ago I discover this blog, and I love all your work. But this post is the most interesting to me, the way you show us how your design ideas flow from one to another is a great contribution.
When I see the first image, I like it so much… but reading your comments, I can understand why you made the changes.
So, I just want to say that I hope you post more like this one. And Thank you for share it.
Jesse Bennett-Chamberlain
October 01, 2008
Good idea Wayde! I think the guys at Kinoma were hoping on doing up something like that as well.
I should have another one coming in about a month or so Emilio, just need to wait for the project to launch first
Jesse Bennett-Chamberlain
October 01, 2008
Woah… the dates on these comments are off by around 25 hours… I suppose I’ll need to fix that.
Chris Merritt
October 01, 2008
Fantastic work as always, Jesse.
I always love seeing how other designers push themselves through iteration and end up with the final product. Many times the final draft isn’t the best, but in some cases (like this one) they are.
Looking forward to seeing more stuff you’ve been working on!
Cal Goodman
October 01, 2008
Kudos, as usual. :P
Aaron
October 02, 2008
Great work as always Jesse and great to read through the process.
One question though how long does it take you to create an initial design?
R.Bhavesh
October 02, 2008
Wow jesse. You did it again. This is the kind of posts that i crave for. Infact, each and every work of yours is different and unique.
Love the way you have used different fonts for this one. May I expect more such posts from you very soon?
Jason Duerr
October 02, 2008
It’s interesting that your iterations on this project naturally follow a similar evolution as a process I use to get through a block. Essentially, working out weight and layout in grey or a very limited color palette.
Absolutely top notch work, as usual. Keep up the great work, Jesse.
Jesse Bennett-Chamberlain
October 02, 2008
Hey Aaron, including all the iterations (some not shown here) and back and forth with Kinoma, I think this took about 3 weeks to get to the final concept.
R.Bhavesh, I think my next process post will be coming in around a month or so. But it should be a good one. The work has been completed, but the site just has to launch.
Jason for whatever reason I decided not to go with a wireframe stage on this project. I think I had it in my head from the start that this one was going to be really graphically rich, and sometimes doing up wireframes can squelch that vision for me.
Scott Robertson
October 02, 2008
I really enjoy looking at your work!
What was used for creating the slide navigation?
Jesse Bennett-Chamberlain
October 02, 2008
http://www.ndoherty.com/demos/coda-slider/1.1.1/
Phil
October 03, 2008
Great job as always. I think the decision to change the perspective angle on the content flowing through the phone was very smart.
Levi
October 03, 2008
Dang, Jesse! Amazing work, as usual. This site is a thing o’ beauty.
Mike Precious
October 03, 2008
Hey Jesse, love the new design.
You’re truly the master of maximizing design quality while imposing the absolute least amount of fabrication and detail possible. I guess you could call it the “less is more” saying.
Many designers need to add layers upon layers of shadows, gradients, and little fiddly PS effects. You get it done with less.
Mike
Mark Priestap
October 03, 2008
Fabulous. :)
Ryan
October 04, 2008
I’m just echoing everyone else’s sentiments by saying what a great design this is! I agree that changing the perspective on the content flow through the phone was exactly the right touch to get the message across.
Ruben Araiza
October 05, 2008
Very inspirational work. Thanks for sharing.
Jason Campbell
October 05, 2008
Jesse,
Great work on the design. I’m curious did they provide the device photography? When you mention moving to something more dynamic with the phone and the images it made me curious if you had these options in your original assets or if you were working with the company or if you were generating these images yourself etc.
Thanks,
J.
Jesse Bennett-Chamberlain
October 05, 2008
Hey Jason,
Kinoma has relationships with different phone manufacturers, and has access to their image libraries…. so it was just a matetr of finding another angle.
Jair Garcia
October 05, 2008
Great work!! I like the detail level in this site and the contemporary feeling.
Sagnik
October 06, 2008
Hey Jesse..needless to say ..Fabulous Work!!! Just a little query on your schedule of work. How many websites do you turn up every month and how do you fix the budget?
Ricardo
October 06, 2008
Wow. I knew Kinoma website some weeks ago, but I didn’t know this was designed by you Jesse.
Great design as usual.
Diego Robles
October 06, 2008
I love your work
Drew
October 08, 2008
Very elegant work. Thanks for sharing the design iterations!
I’m curious, did you present multiple approaches in the first round of review, or did you start with one concept and refine?
Also curious as to the background change from black to white—was that late in the game? I ask because I sometimes feel locked in by decisions I make early on, when a change like that can really make the design shine.
Jesse Bennett-Chamberlain
October 09, 2008
Hey Drew… I usually start with one concept and refine from there. I’m not a big fan of showing 2 or 3 concepts, as what usually happens is that the client will want to pick and choose elements of each.
The background change was from dark to light was a request of the client… and happened fairly late in the game. I know what you mean about feeling locked in though. What I usually do is make the changes that the client requests, and also show an alternate version to give them another perspective.
JT
October 13, 2008
Was the site turned over to the client to make updates? If so, was there a CMS used?
Thanks.
Wishmylove
October 15, 2008
Awsome, as always.
Cary C
October 15, 2008
Jesse
I agree with the previous comments. We all really appreciate the time you took in reveal your design process. It is very impressive.
Fred K
October 17, 2008
http://www.ndoherty.com/demos/coda-slider/1.1.1/
Jesse, can you extrapolate on the timing for the slider (if you want to share such detail of course… ;)) please? Sugar on top?
Ive been trying to trick my slider (same script) into doing something like the snappy effect you’re getting it to do, but naturally I havent succeeded yet.
Lovely design as usual, and following the process is always inspiring. Thanks!
RonnieSan
October 28, 2008
I love reading your posts that detail your creative process. I’m the only designer at my firm (which is a decent size) and it’s tough being creative when you don’t have other designers around to bounce ideas around with. Reading your blogs really inspire me and help get my creative juices flowing so I can push the limits with my designs. Great work as always.
Stu Collett
October 30, 2008
Jesse,
I absolutely love this new design. It’s also amazing that you share your process with us, which most designers don’t generally like to do.
Congratulations, fine sir. Yet again another amazingly inspirational piece of work.
1000 thank yous.
Stu.
ps. What format do you normally present your work to clients, .jpg, pdf, or inside a browser window? It would be great to know from the master!
Jesse Bennett-Chamberlain
November 12, 2008
@Fred K – I’m not really sure if I follow. I thought the snappy effect was built into the script. I don’t remember doing anything different anyway.
@ Stu – Thanks for the kind words! Regarding how I present the work… it really depends on the client. If the page is small enough I’ll do a screenshot (png) because it’s faster than Adobe’s blasted save for web function. Sometimes I’ll present that in a browser window, and other times I’ll use one of basecamp, skitch, ichat, or email to send it over.
Gabriel Friedman
November 14, 2008
Jesse –
Nice work. You really came a long way from the initial design, all to the good.
One question; does the main image change in response to the nav choices below it, or just the text to the right of the main image? If so, what’s the visual change – fade in, or..?
Thanks for sharing. Keep ‘em coming!
best,
Gabe Friedman
Jesse Bennett-Chamberlain
November 14, 2008
@Gabriel. Neither actually :) The text below the tabs change. You can check it out here for youself
Codemotif
November 27, 2008
Interesting to see how this site works on mobile phone…
Henriko
November 30, 2008
Great work, Jesse!
So cool of you to share the process with us. It’s always inspiring to look behind the scenes :-)
Keep it up!
/H
Brad
November 30, 2008
Hi Jesse,
I continue to follow you closely and remain a huge fan of your work. With practice I’m hoping to come close some day.
I often day dream that you’d run a competition where the winner could have a design critiqued by someone like yourself.
Meanwhile I’ll keep awaiting your latest release for inspiration and insight.
Thanks again. – Brad
Jesse Bennett-Chamberlain
December 02, 2008
Hey Brad… feel free to get in touch with me through my contact form, and let me know what you want me to have a look at.
Flüge
December 03, 2008
Hmm…Does we realy need this stuff i ask myself!? And the answer is :No.
I need a handy to call someone, ore send a message…But this skills are exaggeratedly skills.
But this is only my two penny worth.
Brad
December 03, 2008
@Fluge: I think perhaps you have some other questions you need to ask yourself…
“Do I have a clue what I’m talking about?” for instance.
@WishMyLove – That’s a sweet design, and a sweet new laptop too!
Codemotif
December 06, 2008
Jesse, one question… How much time do you spend for designing these designs? Just out of curiousity…
David Smith
December 08, 2008
Hi Jesse,
Big fan of your work. Please keep posting things like this. Perhaps you could add more comments on your design decisions and some tips and tricks?
How about a post on your common tricks that you use when designing? Perhaps you always give text enough room to breath, add subtle 1px lines or use drop shadows?
Many thanks
David
Shane
December 08, 2008
Another GREAT job!
Although I REALLY like the simplicity of the first one, I also think you ended with some stunningly GREAT work!
It was great that you shared the entire process and progression of ideas and concepts.
Also I’d love for you to take a look at some of my work and give me your thoughts/critique on them.
Dave Craige
December 17, 2008
love seeing this stuff. thanks for sharing!