So the new site looks different, new, fresh! And, as the designer and developer of the site, I would like to write a few words on what we did.

Conceptualisation

The outline plan, vision and timeline for the new site was delivered to the team back in early August this year. It was to tie in with the rebranding of thruSITES, into something that better reflected what we do (and have been doing for quite some time). The new site and brand identity would have to be full-reaching and a considerable improvement on last time.

Wireframing process

As usual we started with wireframing. We brainstormed on many occasions as a team and put together a basic layout for the site with respect to the proposed content. My role was to put it on the screen in some form. I took one of my old friend’s 960 grid system and started position boxes in Photoshop. Later I replaced the boxes with some dummy copy so we could better focus on the layout with all its apsects. There were some parts which we managed to nail straight away and there were some others which took us a couple of (weeks!) iterations to get to the point where we were happy.

Setting up the visuals

Once we had all the content elements in the right place we gave more attention to the look and feel of the site and the brand identity. Charles came up with the idea of having typeface which looks like hand writing. After couple of tries and fails, and much persuasion, we had our header ready in place. We set the colour scheme quite neutral so the portfolio images could stand out the most.

We constructed a colour palette around what we had all agreed upon already, and on this basis finalised the background, text, links and accent colours. We had already tried a number of logo versions but none of them worked very well with the current style. We went back to the drawing board with the logo and after much experimentation and discussion around different shapes and typefaces I went with Helvetica Neue which is my favourite typeface anyway. The rough ages and drop-shadow fit nicely with the theme and set the design direction for the rest of the site. Drop-downs for the main navigation followed this pattern.

We also wanted to keep the hand-drawn atmosphere throughout so we used it for all page dividers, the footer, header, sidebar, comments headers and so on.

Development

Although slightly reluctantly, we have a lot of experience working with Wordpress, so we decided to go with this for the back-end (despite the many limitations, it’s nice and quick to build on, and easy for any team member or author to update regularly). Furthermore Wordpress, with all its plugin/widget possibilites, allows us to do almost everything that we had in mind functionally.

In terms of front end I went for one generic stylesheet and separate stylesheets for blog section and portfolio together with standard reset style sheet and IE specific styles (because as usual IE can be a pain in the arse). Javascript – in our case good old (not so old) jQuery – is used extensively across the site. Except for the standard validation, hide and show cases, I built automatic height adjustments for form text areas and ajax for sending the form data. We always care about accessibility (and inparticular mobile) so I built the layers (html, css, js) so that they fall back nicely if needed. The site can be used with javascript or css turned off without any problems.

I came to accept this fact a long time ago and have since got used to the idea that as soon as I return home for a weekend I won’t be allowed to leave (or in some cases even eat or sleep) until I’ve fixed all the problems with every technological entity within the building that I call home. On my last visit I discovered that they had purchased a brand new DVD/Hard Drive video recorder for the lounge. I should mention that this is the third video recorder that they have purchased in as many years and, just like the other two, it’s truly awful.

When my Mother is trying to set the new video recorder for Coronation Street in the ad breaks before X-Factor (whilst also attempting to dish up dinner and stop my younger brother from killing my sister), she doesn’t want to be trying to work out which of the 58 buttons on the remote she needs to press to change the recording quality – or why her last three recordings have all ended up with subtitles. Instead, she wants easy to use controls that allow her to set up the recordings, without being bamboozled by acronyms, jargon and irritatingly abstract trademarks.

Of course my parents, like most of the population, have become accustomed to the idea that video recorders are complicated and confusing beings that cannot be tamed, and that they will always be this way. This has led to complacency on the part of the manufacturers, who are perfectly happy introducing even more of the aforementioned acronyms to describe new features that aren’t really needed, but never stopping to realise that the products they’re making are a complete pain in the arse to use. It amazes me that no-one in the companies producing these devices that grace our living rooms has realised that it might perhaps be a good idea to produce something with an intuitive and pleasing interface, as few buttons as possible and a clock that can be set without a PhD in electrical engineering; to strip it back to the basics and keep it there until the basics work perfectly.

We use this very approach here at thrudigital – keep the idea as simple as possible to start with – refining until it’s as reliable, friendly and well designed as well feel possible – before adding any extra layers of complication.

Writing about Apple’s success with the iPhone, John Gruber posted a reference to ‘Gall’s Law’, which states:

“A complex system that works is invariably found to have evolved from a simple system that worked. The inverse proposition also appears to be true: A complex system designed from scratch never works and cannot be made to work. You have to start over, beginning with a working simple system.”
JOHN GALL

One thing that I think Apple were wise to do when launching their phone was to resist adding everything at once. They were slated on launch for their lack of MMS, Copy & Paste and native third party apps – but what was there had clearly been refined and simplified until it was a joy to use. I’m not saying it was perfect, but in choosing to focus on the basics they allowed themselves the time and the simplicity to get the fundamentals right and defy the critics.

So, whether developing website, video recorder or phone, keep things simple and allow yourself the time to focus on the details. It’ll pay off. And please, somebody, somewhere, get working on that video recorder.