Design of this site

Sun 04 October 2009 in design

My design process tends to follow the same pattern and procedure each time, and in designing this site it was the same order of business-

It makes sense to let this article flow in that order, so...

Core Function

Content is king. I like to define and get down on paper the exact purpose of a site before I even think about aesthetics.

Sketching

This is both my favorite and most despised part of the design process. Favorite because I get to let my creativity run loose, hated because I inevtibly go way over the top with my initial ideas and have to start all over again. For instance, getting totally carried away with some whiz-bang and totally unconventional navigation system that is going to change the way we interact with the web forever! Only to take a step back and consider that if I were to use it, I'd also have to write a textbook for anyone to figure it out.

After a mug green tea and listening to whale song I tend to calm down enough to get the design that follows out on paper. It sounds atrocious, but this is a half-hearted affair, following some tried and trusted convention. Header, navigation, content, sidebar and footer. Hey, it's a standard for a reason.

Inspiration

Once I know what a site needs to do and have a rough idea of the layout, I can start bringing some life in to it.

Now I've got that template down, I can start laying out colours, textures, spacing... This is where research (which I'll mention in another post, it's not so relevant here) starts bringing up the unique and creative styling for the site.

In this case, I knew I wanted a clean, minimalist design that echoed my love of simplicity. Does that have to mean lots of white-space, Swiss fonts and not much else? Probably not. But this is my site and I've got the chance to do what I like with it!

Visual prototype

Up until now I've been working in my head and on paper. Now it's time to fire up Photoshop and get geeky.

I get the wireframe up first. Most times I'll work with the 960 grid, and this clean and simple site is certainly no exception.

If I'm going to be using custom fonts for the larger textual elements of a site, this is when I pick one. Get ready for a quite disturbing outpouring.

I love Helvetica. There's nothing extraordinary about that. But with Helvetica Neue, I have a psychological, and most likely criminal, obsession. I've tried cold showers, I've tried shock therapy, I've even tried listening to Ludwig Van whilst typing. I still dream of windswept beaches surrounded by mist, alone with the smooth curves of the letter a.

Helvetica Neue, especially the light variant, just screams gorgeous design. It's (her?) clean, simple, geometric appearance is like the deceptively plain face of a Venus, a gateway to the subtle but pure grace that echoes...

OK, I like this font. It's a font that makes even the most amateur design look pretty sharp. So let's get on to the meat.

Colour scheme and texture gets laid on next. This is a stereotypical minimalist style, so pure white is going to make up the majority of the spectrum. This is actually quite refreshing, and I get to choose a lighter than usual colour for graphics and text knowing the contrast will be fine. This is a site about me, so let's try for the colour of my beautiful baby blue eyes. Yeah, I like that, it's warm but professional and reminds me of design sketches made in biro.

I'm going to leave icons for now, I want to get the functionality sorted beforehand.

Backend development

"Wordpress. This is fundamentally a blog, it needs a content management system, for once in your life take the easy option". Nah, let's make it all from scratch.

Alright, I got geeky with Photoshop, now I'm gonna nerd out with PHP.

One late, late night and uncontrollable caffeine shakes afterwards and I've got a system that lets me post html or rich text in to either a blog or article, a gallery system and a contact form that rings a bell and makes me tea when someones trying to get in touch.

I'll get some PHP tuts up here soon so I can keep this article reasonably short and somewhat sweet.

Initial build

Aah, now we're getting somewhere. I splice up the few graphics I'm going to use, including some neat icons I found, and start to see the beast coming alive.

This is all pretty straightforward, nothing particularly exciting. I'm using my stock css template that includes clearfix and a layout I inspired from OBOX Designs. I love the way the way they work and you could say this is my homage to them. Actually I'm just lazy.

I'll go in to much more detail on html and css in future posts, particularly creating a footer that rests at the foot of a page, working with a simplified, custom grid template and some pedantic css semantics.

Finishing

Ok, so as of posting, this site still isn't finished. I haven't got round to adding comments to articles, the contact page is still a white hole and there's a lack of images across the board. While there's a certain urge to finalise everything and sign it off, I'm actually pretty happy with that. There's no client nagging me and no deadline to meet. It feels more organic this way. It's always great to have a few days to contemplate a design before putting the finishing touches to it. It allows my head to take a step back and see it in context.

You know, now I think about it... Everyone's using Helvetica, maybe I should try comic sans...

| Back to top | Projects |