Website Redesign – Part Two
This article explores some of the decisions behind the recent redesign of this website. It examines the motivation, inspiration and aims behind the design choices and some of the compromises made along the way. Don’t worry, it won’t be technical, we are looking at ‘why’ rather than ‘how’.
This is Part 2 of the article which runs through the actual re-design process. Part 1 can be read here, it sets the scene explaining my motives and inspiration behind the idea.
The Redesign.
Step 1:
The first thing I did was simply change the colour scheme to one with a white background and black text rather than the overbearing dark blue of Pixelwave 1.0. (See screen shot 1) Obviously this didn’t look too pretty, but it gave me the beginnings of a blank canvas to work from.
Step 2:
I wanted to keep the main structure the same so there was no need to remove styling that controlled the layout. However, Pixelwave 1.0 was a fluid design where the right hand column expanded to fill the browser window. Whilst this was good at utilising screen space, it did look a little unbalanced on larger monitors, so to regain control I plumped for a fixed width design which did mean a few adjustments to the overall layout. Next, the whole thing was centred to fit in with the new fixed width layout, the old title images had to go along with a few other images, and some simple styling was applied to the text to make it larger and easier to read.
Step 3:
Things were beginning to take shape, already the site looked brighter and easier to read. But it was lacking in ‘punch’ and looked a little bland. A few more tweaks to the styling and soon the main body of text and the right hand column were looking more interesting. I was tempted to stop here, many of my motives had been achieved. The site was easier to read, felt more modern and I preferred it. However, I hadn’t really addressed the most important issues of readability and scanning.
Step 4:
Until now none of the content had been touched. One of my favourite web usability books is ‘Don’t make me Think’ by Steve Krug. In this book his third law of usability is ‘Get rid of half the words on each page, and then get rid of half of what’s left’. Unfortunately, I like content and lots of it, so although I probably should, I wasn’t about to rewrite the site. Instead, I wanted to create a large, prominent summary of each page so that visitors could quickly scan the page and find out what it was about. If they were interested they could then delve deeper into the actual content.
As I had yet to replace the title images removed in Step 2, I decided to create a large title area above the main content which was to contain the pages title and a brief summary of the page.
I then added some styling and this area also provided space for a graphic to bring the page alive. Each page now had a purpose and it was immediately obvious what it was about.
Final Tweaks:
I was now pretty happy with the site, but felt that the main navigational elements across the top may not be prominent enough. To address this I restyled these links so that the current page was more clearly highlighted. I also changed the branding and identity around a little, although I’m still unsure about this and may revert to the older version.
The Result
In case you are reading this elsewhere, the final result can be seen at http://www.pixelwave.co.uk. Overall I’m pleased with the design. A few compromises were made along the way, but that is almost always the case. I’m still not entirely happy with the main navigation, but that may have changed by the time you are reading this. I hope you like the new look, find the information you are looking for and look forward to hearing from you should you be able to use the services offered by Pixelwave Web Design.
