Website Redesign – Pixelwave 2.0!
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’.
The article is split into two parts the first part sets the scene explaining my motives and inspiration behind the idea. Part 2 runs through the actual re-design process.
Motivation
As with any website re-design, there were various motives behind the redesign of Pixelwave Web Design’s site. Some of these were simple personal aesthetic preferences, others were aimed at making the site better for its visitors.
To start with I simply wasn’t happy with the existing design and wanted something new. Now, this in itself is rarely a good enough reason to redesign a website. As a website owner you probably see your website several times a day, but you have to remember that most visitors to your site won’t see it that often, and many won’t have seen it before. Therefore what looks old and jaded to you can look new and fresh to someone else. Also, most people visiting your site won’t even think twice about the design, all they want is good quality content along with easy access to that content. If they can find what they are looking for the actual design should be immaterial to them. As long as it isn’t plain ugly, the actual design shouldn’t enter their thoughts.
Of course, fashion changes and re-designs simply for aesthetic reasons are often needed, but I think it is important to look at your website from the point of view of the typical user rather than as the website owner.
With Pixelwave Web Design there were also some historical reasons behind my motives for change. Pixelwave 1.0 (a screenshot of which can be seen here) was built in quite a hurry following an unexpected name change from Tsunami-Site-Design after the Asian Tsunami disaster of 2004. I used this name change as a new beginning and to reinforce my commitment to offer first class customer support and to build standards compliant, accessible, user friendly websites. With this new beginning came lots of new content for the site, many new pages and therefore a new information architecture. The website was built from the ground up and in my excitement to add so much new information my priorities were aimed at the content and site structure rather than the look. Content, after all, is King. I was therefore never completely happy with the design so a redesign has always been on the cards.
In addition to these purely aesthetic motives, I also wanted to make the site easier for people to read. People rarely ‘read’ websites, more often than not they just quickly scan them. Making the site more ‘scanable’ was therefore another of my priorities.
Inspiration
Overall, I was happy with the information architecture and general layout of Pixelwave 1.0. I wanted to keep the main horizontal navigation and I was happy with the two column layout. I wanted to keep the main content on the left and have a right hand column containing subsidiary information and links. Inspiration for the general layout therefore came from the existing site.
I also had a nostalgic fondness for the clean, bright, fresh look and feel of my original Tsunami-Site-Design website (click here to see this site). So, the white, light blues and green highlight colour-scheme came from there. Also, as this was to be Pixelwave 2.0 I took some inspiration from the Web 2.0 design style. This style often features large, easy to read text , lots of white-space, subtle gradients, and reflective graphics.
Examples of other site using a Web 2.0 style design (as of July 2007) include: Firefox, 37 signals, Ruby on Rails and Mochikit.
So, the scene was set, the site needed a re-design, my motives and aims were clear and the site was to be a combination of its two predecessors with a twist of Web 2.0.
In part two we’ll examine the actual process of redesigning the site, complete with lots of screenshots on the way.
