Over the last few months I’ve been rethinking the design of the site. I quite often find myself in the unfortunate position where I start a project and peter out oafter a certain amount of time, leaving the project unfinished (prime example: click the “portfolio” link. Go on, I dare you). That’s why, when I sat down to work on a refresh of this layout, I swore to myself that I would finish it. I would!

Unfortunately that’s not the case entirely, but it’s getting somewhere. Today I sat down with it again and redid a few bits and pieces and I think I’m getting somewhere with it. If you follow me on Dribbble, then you may have seen some of my progress shots already, but I’d like to go through a few key points that I’ve encountered so far. I’m going to try and keep the blog updated as I finish up the layout, which I am keen to do over the coming weeks – I even have ideas for how my portfolio will finally look …

Anyway, on with the show!

An initial redesign

For the most part I chose to keep things the same – or at least similar – to the current iteration. The body remained set in Chaparral Pro (the same typeface as the site logo), the brown blocky header remained, the content was split from the background … I think the most major change was that I moved the navigation so it was above the content (more accessible, plus it looked much nicer than those silly ribbons), and I chose a different typeface for the headers (Bebas Neue).

For some reason I had it in my head that gradients, text-shadows, box-shadows and so on were the way to go. Coupled with things like rounded borders and soft textures I’m sure that would have looked wonderful, but even then I was leaning towards the new “clean” style of doing things. Gradients are so last year, man. The new up-and-coming thing is clean edges, no gradients except the super-subtle ones. It’s all about keeping edges straight and, well, edgy.

So yes: this was a step in the right direction, and with it came responsive design.

If you click on the image, it’ll take you to the Dribbble shot where there’s a link to the full-sized version.

And that was about where the layout stayed for the next few months … well, kind of. There have been a few small changes here and there – both to this sandbox version and to the site you’re on at the moment. Small things that are designed to make my life easier but are probably not noticeable to any of you.

A second refresh

This morning while at work I was struck with a sudden desire to do some more work to the layout. For the first time I actually applied a grid to it, using a tool called Responsify.it. It took a matter of moments to download the grid and I’ve spent the morning applying it to the layout and playing with the layout a little. This afternoon, while still not finished with the layout, I dribbbled this shot:

Hopefully it’s easy to see what’s changed!

I’m much more pleased with this version. I’ve switched Bebas Neue out for Adelle again, solidified the background and changedt he colour of the navigation bar so that it looks a little less stark. I’m not sure about the background colour – it might need changing a little since it’s so light with such dark shades of brown and green on it, but I’m much happier with this. It’s lighter, airier … it’s fresher, and I think that’s what I need for the summer!

I’m still working on it and things are likely to change, but I’m much happier with this layout. Touch wood I’ll have it up in the next couple of weeks, if all goes according to the non-existant plan I have.

In the meantime, any and all feedback is appreciated. this is all you’re getting for now, but there will be further shots in the future, I’m sure! So keep an eye on my Dribbble account to see what’s going on.