A New Look for a New year

I’m very excited to launch the redesigned Oak Innovations Blog.  I see this as a holistic redesign that’s not limited to the cosmetic, rather, it’s a change of focus and a shift in priorities.  This post summarises the reason for the redesign, my process and my inspirations.

Identifying the Need

As you may or may not be aware, in my day-to-day job I act as a System Analyst.  One of my primary functions in that role is understanding user’s needs and converting those needs into a system that fulfils their requirements.  Sometimes this is easy, sometimes it’s difficult.  It’s always interesting.

With this in mind, I’ve found myself avoiding this blog, choosing other mediums, such as Twitter, instead.  This has clearly been a problem.  To remedy this I took the same approach as I would with a client. I attempted to isolate the problems and implement corrective measures.

So what were the problems?

I quickly realised that I had some cosmetic issues with the old design. It looked dated and unprofessional.  However, I could live with the design as it stood from a cosmetic point of view, but there was something else holding me back.  That something was flexibility, or more specifically, a lack of flexibility.

This blog has been running for a number of years and my goals, interests and circumstances have changed during this period.  The topics that I want to write about now (usability, requirements management, customer relationships, information architecture etc.) require a certain craft, a certain air of professionalism.  I don’t believe the previous design allowed for this, and certainly didn’t appear professional.

The Aim

Once I had established the need for change, I needed to drive the direction in which to head.  I used a fairly standard technique of brainstorming terms that I thought were important.  I could return to this list throughout the process if I ever needed to refocus.  This ability to re-focus yourself can be very important and allows you to answer the question:

How is this helping me achieve my goal?

For every task you undertake.  If you’re doing something that isn’t helping you achieve one of your stated goals, then it’s a distraction and can be stopped.  This is beneficial because it helps you prevent wasting time as well as allowing you to remain focused on what’s important.

When documenting these important words, I chose a very informal style.  You can see a sample of these words below, I called it an “Inspiration Cloud”.

My Inspiration Cloud for the redesign

You’ll notice that there’s a mixture of cosmetic, ideological and theoretical terms in my Inspiration Cloud.  You’ll also notice that the two main recurring themes were simplicity and flexibility.

Inspiration

Little Snapper is a handy OSX application that allows you to easily capture images, especially we pages and tag them for easy retrieval at a later time. You can also annotate and make other changes to the images.

The Inspiration Cloud above provides a high level feel for what I wanted to achieve.  The themes within it were informed by the sorts of sites I’ve been enjoying recently.  I used the application Little Snapper to capture, store and organise web sites and other graphical elements that I found interesting or inspirational.

These ranged from layouts to colour schemes to typography.  I think these sources of inspiration deserve a post of their own, which will follow shortly.

Design

Visually, the watch words for the redesign were light & tangible. I wanted a design that allowed the content to stand on its own and become the focal point of the design.  Content is King.

Using the BluePrint CSS framework as a starting point, I enlarged the text for readability and hung it in the centre of the page.  There’s been a general move in the direction of larger text on the web and I’m completely sold on the idea.  The comfort factor means readers are far more likely to actually read your content.  To compliment this, the text on the site is set in the wonderful Helvetica font.

With an eye on readability, it was a simple choice to set a dark grey text on a light background.  If you look carefully, you’ll note that the background of the main content area has a subtle paper texture to it, and many aspects of the site appear to be ever so slightly set into the page.  This was my attempt at trying to give the site a solid, tangible feel whilst still remaining light and easy to read.

Flexibility and Sidebars

One of the aims of this redesign was to give me the flexibility I required.  Whilst considering quite what this meant to me I played around with a number of common blog layouts.  One of the outcomes of this experimentation was the realisation that the blog sidebar was a major point of restriction.  It really was holding me back, binding content to within a very limited space.  My initial thought was to find a way to work around this limitation, but after a bit of investigation, I decided the sidebar could go.  The fact that pushed me over the edge on this (and to be clear, I gave it a fair bit of thought) was that hardly any readers actually used the sidebar links.  That’s right, hardly any at all.  People were finding other ways to navigate the site, mostly through in-content links.

By removing the sidebar I presented myself with a large (~950 pixels as per the Blueprint Grid) area to fill with content.  Standard readability principals state that extremely wide content is difficult to read, so I decided to keep it fairly restrained and punctuate it with images and other feature areas.  This ability to easily throw in elements to break up the flow was precisely the visual key I was seeking.

Content

As I mentioned briefly in the beginning of this post, I want to holistically revamp this blog.  So along with the change in aesthetics I also wanted to shift the subject matter slightly.  Part of this is down to a change in my personal interests whilst part is down to the fact that I’ve launched separate sites to cover certain niches (Simon T Photos, for example, which covers photography content).

The result is that you can expect more content, in a longer form on more interesting subjects.  I hope you’re as excited as I am!

The important thing about software development is to be flexible. You never know what the client is going to ask of you, and he may even contradict himself at some point down the line. That actually happens quite often, in fact. I had the good fortune of learning most of these lessons not only first hand, but while working for a company. Working at services from Tech Fabric I was able to see how these kind of exchanges developed, and without knowing it at the time, it helped me prepare for the future.