blog.critical

Designing blog.critical V3

For my first part of my reboot write up I thought I would show some of the designs that didn’t see the light of day, and the route I took to get from the original idea to the final design which you see here now. Unfortunately this only really applies for the home page, a lot of the design work was done “on the flyâ€? using CSS. Most of the designs you see here where made by taking a print screen of the working site and then working straight on top of this using photoshop.

The first draft of the site has been posted on my flickr for a while now; some of you may well have seen it. I stuck with the same colour scheme I have had for as long as I can remember, grey (#E8E8E8) and “critical blue� I tweaked that slightly and ended up with a nice #336. As you can see from the screenshot, it was very grey, and frankly pretty dull. One of the things that stuck was the rounded corners on the bottom right of certain elements.

There has been a lot of talk about grids on the web, suffice to say I have never done any graphic design training, and really have no clue about the theories behind laying out a page (something I really should learn). I attempted to design around a grid, but I don’t know if it made any difference to my design.

The next iteration added a huge footer, which thankfully stuck around, and a dash of red which thankfully didn’t. The red was an attempt to brighten up the blue/grey monochrome that I had ended up with. Another thing that reared its head was the huge blocked out headers, they actually stayed in the design, up until the last minute when they where cast out for something more subtle.

At this point, the big footer was in, as was the smaller sub footer. The old “paint splat� header was still knocking about, but had been sized down a touch to make way for the footer. The design was still lacking something though.

The next big step was replacing the dull header with one I felt was much stronger in terms of style. I used bold typography which contrasts with the rest of the site, chucked in some trendy circled crosses, glowing white orbs and a nice turquoise and blue glow and the header was complete.

Last but by no means least, I created a PSD named “prettiness� and fiddled about with my little stylish elements which (in my opinion) really enhance the site design, giving it that little extra “pop�. The elements where created using Jason Gaylor’s simply amazing brushes. I also re-worked the main site header and the post headers.

As you can see, these screenshots are a bit sketchy, but hopefully it’s a little insight into the various things I tried before I ended up with the final design which is currently on display.

---