Lee Whitelock

Kyan.com design process

It’s great when you get a project you can really sink your teeth into. We pride ourselves on the effort we put into all our projects, of course, but when it’s for your own agency you can really ‘go to town’ and try new things. Our current website was out of date and needed to better reflect the business rather than just brochureware. We wanted it to focus more on solutions and our applications work. It’s great that applications are a big proportion of our work, so we needed something new and fresh… something that showcased our web talents (HTML5, JQuery, Ruby on Rails).

Strategy

So, we determined our goal, we needed to set out a strategy. We started out by giving ourselves a clear, concise brief which included content, message, tone of voice and structure. We knew we would have to work in chunks of time between paid work, so our schedule was relatively flexible until most of the ground work was done. We also had a strong message we wanted to convey; Handbuilt (Bespoke design and development) for web and mobile applications and that it is a fun and creative process, not just for us but also our clients.

Art direction was the fun part. We all had ideas, these included: Heath Robinson, Terry Gilliam, Jan Tschichold, papier découpé, popup books, dioramas, British heritage, modern, clean and big. Other ideas were thrown into the melting pot such as blueprints, engineering, retro and Paddington bear. With this in mind we put together a mood board, fine tuned our direction and set about laying down some rough layouts.

Design

We were very attached to our previous site design in terms of colour, illustration style and use of Avenir®, so we wanted to reflect elements of this somehow. We kept Avenir® and introduced Sabon® (later we settled with Sabon Next® as we felt this viewed better on screen), they complemented each other really well and fortunately for us these classic fonts were available from our web font supplier Fonts.com by Monotype. Lastly we needed something to show off our office statistics at the foot of the page. The stats come in useful to illustrate to our clients how we feed sources of information onto a page—we wanted something chunky and condensed so we settled on League Gothic® as our signature data style.

Our primary colour palette consisted of the Kyan blue and a deep brown (an almost charcoal colour) combined with neutral shades to add depth. We wanted to introduce another colour, so we tried gold. It worked really well! It added that extra touch of class, so we stuck with it quite early on in the design process.

We went through a several iterations using our previous site copy and placeholder imagery, before settling on a final look and feel. This was then applied to some of our key pages. We wanted the content to breathe and pace itself well and once the content came flowing in it started to evolve. Our layout decisions were fine tuned until we had something that was clean and kept your interest. Adjustments were constantly made, right to the end in fact, but what it really required was a way to illustrate the content and bring it to life even more.

Illustration

We already had an illustration style from our previous site; clean, simple and fun. We felt we needed to develop this somehow to convey our messages. We drew a pop up book style using illustrated cardboard cut outs of the elements and then settled on a more arranged diorama that we could animate. We tried various animations in Flash as this was a quick way to demonstrate it to the development team and we could easily make changes. Once we decided on how it should work we were able to implement it using CSS3. The illustrations have a great presence and brightened up the pages considerably. Big Rainbow head (Kyan’s mascot) appears every now and again to add a bit of character.

As I mentioned, the previous site already had some eye catching imagery so it was a nice gesture to gently nod to this, so we included the clouds, paper plane and worm somewhere in the site. It also adds a bit of familiarity to those who remember our old site.

The final result

We didn’t want to make the site responsive. It didn’t need to be. We felt it would jeopardise the typographical layout so Instead we settled on clear hierarchy, a good grid and stacked the information down the page to encourage users to scroll down. We applied a style sheet for mobile and we are all happy with the result.

You can check out some of the design process in illustrative form here: http://www.flickr.com/photos/kyanmedia/sets/72157628008649733/

Tags: design, kyan, process

See more posts

Comments: 13

Peter Illes
commented on

Congrats! Impressed :-)

Bran
commented on

Absolutely great.

Christopher Burd
commented on

A lovely site showing a fine sensitivity to typography and layout. A small criticism: why the trademark symbol after typeface names? It's ugly, and, really, they won't come after you if you leave it out. And who is Jan Tschibold?

Nigel Dakin
commented on

Cool!

Chary
commented on

The design and concept is great!
Presentation part is very nice and the look and feel of the website is clean and elegant.
nice effort and thanks for explaining the design and conceptualization.

Amazing
commented on

Great! Wondered why site wasn't responsive but you have it explained and I agree it's in the right direction.

Thanks for the Kyan.com design process, definitely something I wanted to know.

Darren
commented on

I absolutely love the new site design! I'm in the process of updating our look and I'm going to try hard not to steal too much from you guys! Ha ha. Great job!

angeloff
commented on

Great work!

Joel
commented on

Awesome site, Team Kyan! Are you able to range how many resource hours were put into each phase of the effort?

Ricardo
commented on

Great work. One of very few sites that I have actually browsed from front to back. Easy on the eye coupled with a clearly visible emphasis on user interaction. High praise.

Bill Addison
commented on

Your team has managed to capture a super light-weight, non-threatening feel which looks easy and fresh but in reality is actually very difficult to pull off. The typography is perfect, the illustrations provide just the right amount of 'pop', the colour palette is modern and fresh and the copywriting is easy to understand, no-bull and extremely well written. Thanks for the awesome work, I'm inspired.

Timothy
commented on

Hmm. Not responsive and works no better than a stock standard grid on a mobile device, with text being difficult to read. Very disappointing from a standards perspective.

Antonio
commented on

This site is not resposive...

Add a comment

Note: comments are moderated before publication.

Most Popular

Easy image rollovers

Robin Whittleton

Recently themeforest.net ran a quick tutorial on how to achieve an image slide effect similar to our homepage. I thought I’d go into some more detail about the design decisions we made.

Garmin Edge 705 Data Recovery with DD & XML

Joel Richards

After recently taking part in a race across Scotland, using a Garmin GPS device (Edge 705) I had around 12 hours of GPS data which unfortunately seemed to get corrupted during the ride. The device was properly displaying the data on the unit, but Windows, OSX and Linux were all …

Writing is hard, so do it

Neil Middleton

Over the last few months I’ve been working on something that I wouldn’t have seen myself doing at any point in my life, and that’s the task of writing a book. I’m not talking about a ‘Janet & John’ novel, or some sort of ‘Fifty Shade…

Is imitation really the sincerest form of flattery?

Piers Palmer

A new site has appeared on the wonderful inter-tubes, brought to us by a web design firm in Minnesota – Rocket 55 – that looks remarkably similar to ours. As designers we all stand on the shoulders of giants, borrowing ideas and concepts, using the same typefaces, co…

Google+