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/
Tweet