Thrudigital

Sorry I meant 4 months.

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.