From our client brief on our live project we were asked to develop a brand and website for contemporary jeweller/craftsman Garvan Traynor! Before we were briefed, to be perfectly honest I didn’t know who he was or any of his work, but after the brief I had a good understanding on what he was about. I could tell even by the way that he dressed that his style was fairly minimalistic, this was also reflected during the brief telling us that his work had a modern and minimalistic style, he loved the work of the legend that is Dieter Rams, didn’t like garish colours and that his favourite band was kraftwerk. This was immediately generating ideas for both branding and the website, with a simple 3 colour palette also springing to mind.
As we had a fairly short time before presenting our initial ideas to Nick and Chris, as soon as I arrived home I got straight to work, well I made burgers first, 2 in fact, with chips and they were delicious (below).
So anyway, I got straight to work on a plan of attack for the whole project, I decided that I would spend Friday & Saturday creating the logo, Sunday & part of Monday designing the site and the rest of Monday until 5pm Wednesday building the site. I then began to do some brainstorming and sketching in my moleskin to try and get some of the ideas into my head onto paper (below), of which there were quite a few!
From the sketches and from general ideas that I had, I thought it would be quite cool to do something based around a piece of his work, I also thought about keeping it simple by just using typography and one of my other favoured ideas was incorporating a ring, but in an abstract way. With all these ideas noted, I took myself into illustrator to bring some of the ideas to life.
As you can see from the illustrations, I tried a bit of everything in order to see how it looked and piece different bits together, with a minimalist approach present throughout. Although a modernist approach is associated with sans-serif typefaces I tried serif also, this is because Garvan said he uses traditional skills and combines them with contemporary tools and design. I also tried a few variations on a Kraftwerk style, digital approach, using straight lines and knocking out parts of letters.
The two things that I particularly liked were the idea of using circles to symbolise one of Garvan’s crafts, making rings, and also using a well structured piece of typography. I then began to experiment with using Gill Sans, a sans-serif with some traditional, humanistic elements, and positioning it in a variety of ways, in order to recreate a grid of sorts, something which is present in Garvan’s work. Once I had found the ideal position for lining the type, I set about trying to illustrate rings in a number of different ways, without going down the cheesy and predictable route of using the “O” in his name as the ring. Instead I wanted to find a way to contain the type within a circle and for it to be viewed as a ring. After experimenting in a number of ways with this idea, I had the lightbulb moment, the idea was to have the circle around the outside of the type and have its weighting uneven, as if it were the inside and outside of the ring when viewed at an angle from above.
I achieved this by placing two circles overlapping around the type and using the pathfinder tool to only keep the overlapping parts of the circle. In my opinion, simple and effective!
And there it was, a proud moment, but I couldn’t bask in the glory for long, there was still more work to do, a website to be precise!
As with the logo, I wanted my website design to be slightly different from everyone else’s, and I was pretty sure that a lot of people would go for shades of grey, minimal use of photographs and not use any colours. Instead of following this trend I wanted to; use a 3 colour palate including white and an off black, make use of some of the best photos provided and use a one page layout. One page layout is something which I have been wanting to do with my own portfolio site and I thought Garvan’s site would be perfect for it, due primarily to it being a portfolio site with little body copy. So with this all said, I set about my work of designing the site. (I left the image below out of fancybox because you wouldnt be able to view it otherwise!)
On the design of the site, I decided that the user would be greeted with a large image sideshow background at the top of the page, with the navigation at the very top. For each section, I decided to style them differently as this would break the page up a bit more and prevent a boring layout, this would all be based on the 960 grid system. For the colour scheme I experimented with a few colours, one being a Kraftwerk style red, however I decided on a shade of orange, I think it works well with subtle use and adds a bit more personality to the site as a whole. Section headings are given prominence through the use of the colour, as well as large text size, with sub-headings making use of slightly smaller text and no colour emphasis. Images in the site are contained in a jquery slider, with the user able to go through the images as they wish. As I was happy with the design, I began building the site in order to make Wednesdays deadline.
On the day of the beta crit, my website managed to dodge the grips of the randomizer, so I decided to speak to the guys on Friday about it to hear their thoughts. I managed to get to speak to Nicklas in the labs, and although the site wasn’t complete, he seemed to like what I had done, offering me some advice on the use of some of the jQuery elements, in order to make transitions smooth and cut down loading time. With his advice I went home and over the next few weeks finished the build of the site.
Along the way, the build wasn’t exactly plain sailing unfortunately, my biggest problem came with the jQuery background image slider, which seemed to enjoy having some of the body copy underneath it, however after a number of hours staring at the code asking it why it wouldn’t work I solved the issue. The problem was being caused due to the positioning of some of the elements, previously the slider was being absolutely positioned, however this was causing the problem with the text below, so I instead made the nav and speech bubble absolutely positioned and hey presto!
The next problem was that, in chrome, and only in chrome, the text was still being placed underneath the slider, at this point I wondered why I actually bothered, but persisted and eventually fixed it. This time the problem actually lay in the jQuery, I changed part of the original code: $(document).ready(function() to $(window).load(function(), this basically told the browser to load the slider before the rest of the content.
So with everything ironed out, that is pretty much it, I will be going over everything over the next few days before the hand in but that should be it for Garvan’s site. I built the site so that it plays nice with mobile devices too, I will be implementing this fully over the next few days before the hand in. Feel free to check the website out now, you won’t regret it.