CoffeePowered

Redesigning Coffeepowered

Regular readers may have noticed that things look a little different around here! I achieved one of my pet project goals for 2010 by redesigning coffeepowered from the ground up. I thought I’d write a little about the design process I went through and how the design evolved from the wildly different vision I had in mind when I started.

Why redesign?

I first registered the coffeepowered.co.uk domain in 2007 and over time my use of the site has changed. In 2007 it served as a freelance identity with a basic online portfolio, then in 2008/2009 I scaled back the freelance angle of the site and used it as a landing page which linked off to my various and disparate identies around the web. While I still like that approach I felt that I needed to build the site back up to be my main online identity and as well as injecting some life into my previously feeble attempts at blogging. I will also be working on a new portfolio in the near future to highlight some of the projects I’ve been involved with recently (which can be currently seen on my CV).

Sketching concepts

Before any photoshop layers were created or lines of code were written I sharpened my pencil and went to work in my Stuff and Nonsense Moleskine, I started with some basic wireframe sketches which roughly blocked out areas of content for the homepage and a couple of inside pages.

I had a clear idea in my mind at this stage which involved using the same leather texture I had previously in the header of the site as I loved the embossed text and stitching, as you can probably tell at this point the design ended up taking a vastly different direction during my design process so I’ll probably keep the leather and stitching for another design in the future.

After the wireframes I started sketching some individual elements which I wanted to implement, one of those which persisted throughout the design was the ‘Macbook Mission’ thermometer graph. As I’m saving for a new Macbook I wanted to have a bit of fun with the situation and have an old-school fundraising thermometer like we used to always have on T.V. when I was a kid. Immediately the idea of working in the Apple logo into the thermometer came to me and a couple of pencil strokes later, I knew that I had to use it!

Designing in the browser

While I do the majority of my design these days in the browser, I did fire up Photoshop at this stage to throw together some visuals for the main page frame and to draw the Macbook Mission thermometer to see how it looked.

After coming to a layout which I was generally happy with, I moved into the browser as quickly as possible and started building the design concepts as a custom WordPress theme, styling and laying out the main blog elements according to the baseline and vertical grid that I’d worked out in Photoshop.

I wanted to experiment with font embedding on this project and during my daily browsing I’d spotted the wonderful Tandelle font which I wanted to implement. As this font was available on Typekit I was able to quickly and easily bring it into the design, initially within the blog comments section and loved the aesthetic immediately however Tandealle really didn’t work with the leather/elegant look I had previously been working with. I did initially play with Typekit to include this font but during the build I opted to take the opportunity to play with ‘proper’ @font-face embedding seeing as the font family was only $13.95 from myfonts.com

“the font reminded me of the numbers painted on the side of racing cars — to which I pay a minor homage in my blog comments bubble”

I sat for quite a while staring at Tandelle and having my mind swim with vintage race car imagery, the font reminded me of the numbers painted on the side of racing cars — which I pay a minor homage in my blog comments bubble — and this was the major turning point in the design. After spending a while flicking through vintage racing car photography I took away a couple of simple visual cues which I wanted to focus on.

• use of uppercase, large fonts
• faded, predominantely one-colour-on-white colour pallette
• horizontal striping

I kept the layout I’d wireframed initially and started to tweak the look and feel based around the new direction, redesigning the header section based on the typography and style I’d been researching and ended up very happy with the result, I brought in a paper texture to give the background some depth and to extend the muted colour theme around the site itself and set about re-theming some of the other elements.

I’d never been happy with the original ‘ribbon’ type navigation but in keeping with the very vague ‘vintage race car’ aesthetic I worked in a flag type motif which seemed to work quite well. I tried to keep the elments of my inspiration quite abstract even though in my own mind I had quite a strong source of inspiration, I didn’t want to over-do the theme.

Overall I felt that by doing the vast majority of my design work on paper and in the browser — avoiding Photoshop where possible — enabled me to very quickly change design direction and experiment with a completely different design aesthetic quickly and easily. I’ll definately be relying on my sketchbook more as a major tool when designing new sites as it seemed to bring back a skill I’d forgotten I have. During my academic life I had an interest in automotive engineering and was involved in building an electric racing car and petrol powered go-kart from scratch. This involved a significant amount of technical drawing which I quite enjoyed and I felt come back naturally as I worked with my mechanical pencil, pigment liners and french curves. I might have to try and find my old technical drawing portfolio to use it in a future design, I wonder if exploded diagrams of axles and gear assemblies might be good inspiration.

“Overall, I felt that by doing the vast majority of my design work on paper and in the browser — avoiding Photoshop where possible — enabled me to change design direction very fast and experiment with a completely different design aesthetic quickly and easily.”

Degrading gracefully

One of the issues with using the Tandelle font arose in situations where the browser didn’t support @font-face. I’m using Tandelle for headings and navigation items and based on my 18px typographic baseline, the elements using Tandelle are set to 4em. For browsers not supporting @font-face the font stack falls back to Helvetica Neue and eventually Arial. This is fine for the x-height of all the fonts but far to large for the character width as Tandelle is a far narrower font than either Helvetica or Arial.

I used the modernizr script to allow me to test if the browser was capable of supporting @font-face, if so then the headings were set to 4em, if not then they were set to a more sensible 2em. There were also other minor positioning rules which differed for each situation so modernizr allowed me to test the capabilities of the browser and deliver a slightly tweaked design to suit.

What’s next?

There’s still lots to do on the site such as the portfolio and contact section, and I’ve had a couple of ideas on how to develop the footer a bit further, all in all I’m extremely happy with it and I hope I’ll be sticking with this design for a while. What do you think? Hit up the comment box below! If you’d like to see more of the sketches that I did during this design you can take a look at the set on Flickr and if you take pity on me, you could dontate to my Macbook Mission! (details at the top of this page)