31Three

Creative services for the design-challenged developer



Kinoma Redesign Process

Kinoma Redesign Process

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.


Fantastic work as usual Jesse.

Really dig the main nav.

Would love to see a Flash version of the camera!

Jesse, each site you do keeps pushing your amazing skills. This is some crazy amazing work. Congrats.

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.

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

Woah… the dates on these comments are off by around 25 hours… I suppose I’ll need to fix that.

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!

Kudos, as usual. :P

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?

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?

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.

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.

I really enjoy looking at your work!

What was used for creating the slide navigation?

Great job as always. I think the decision to change the perspective angle on the content flowing through the phone was very smart.

Dang, Jesse! Amazing work, as usual. This site is a thing o’ beauty.

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

Fabulous. :)

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.

Very inspirational work. Thanks for sharing.

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.

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.

Great work!! I like the detail level in this site and the contemporary feeling.

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?

Wow. I knew Kinoma website some weeks ago, but I didn’t know this was designed by you Jesse.
Great design as usual.

I love your work

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.

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.

Was the site turned over to the client to make updates? If so, was there a CMS used?

Thanks.

Awsome, as always.

Jesse

I agree with the previous comments. We all really appreciate the time you took in reveal your design process. It is very impressive.

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!

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.

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!

@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.

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

@Gabriel. Neither actually :) The text below the tabs change. You can check it out here for youself

Interesting to see how this site works on mobile phone…

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

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

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.

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.

@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!

Jesse, one question… How much time do you spend for designing these designs? Just out of curiousity…

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

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.

love seeing this stuff. thanks for sharing!

Commenting is not available in this weblog entry.

me Hello, my name is…
Jesse Bennett-Chamberlain, a stay at home designer from Grimsby ON, Canada. To get in touch use the contact form.

XHTML 2 is dead. Seems like HTML 5 is the clear direction to go.

Xero is hiring interaction designers to join their team in New Zealand. Xero is an online accounting platform that recently won 2 Webby Awards, including People’s Voice.

New Yorker Cover Art Is Painted With an iPhone – NYTimes.com

Left Right Left Right Left – Free Coldplay album

The World Bank is looking for a Web Producer.

View Archives →

Authentic Jobs

authentic jobs signHelp Wanted
Recent openings posted at Authentic Jobs.

Post your own job opening.


Myriad Network FusedNetwork Hosting
When your business lives on the Internet, your livelihood is in the hands of your host.

ref_ee ExpressionEngine
A feature-rich content management system that allows PHP illiterate folks like myself to create dynamic sites.

ref_basecamp Basecamp Project Management
Basecamp is the smarter, easier, more elegant way to collaborate on your internal and client projects.