Pixelwave Website Design Weblog
Latest News from Pixelwave

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.

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.

Work is now underway on Pixelwave Web Design’s latest project for a holiday accommodation provider here in Borth and Ynyslas.

Aberleri Seaside Cottages are a group of luxury cottages situated on an old farm just moments away from the lovely golden sands of Borth. The owners live in Borth and take great pride in the cottages. Their proximity to Pixelwave Web Design also means that I have been able to meet with them several times already and seem to have become their ‘computer guru’ even before their website goes live.

They have even had an enquiry for accommodation already thanks to the fact that I mentioned I was about to start work on their website design project in a previous news article here.

Their website will be an attractive brochure style website designed to integrate well with their printed promotional material. As well as working directly with the cottage owners, Pixelwave Web Design are in close contact with their copy-writer to ensure that the website and printed material compliment each other perfectly.

Web 2.0 isn’t really a phrase I like. it means so many different things to so many different people that it really doesn’t mean anything specific. However, it is a buzzword and it seems inescapable, it is becoming widely adopted so it is time I embraced it.

To the lay person Web 2.0 seems to be synonymous with a particular design style. This Web 2.0 design style is characterised by fresh, clean looking websites with large, easy to read typefaces, lots of whitespace and usually some subtle gradient backgrounds and/or reflected graphics. I really like this design approach and it can be used on any website to give it that Web 2.0 feeling, even if the content and functionality of the site doesn’t really make it a Web 2.0 site.

Pixelwave Web Design now has a growing number of Web 2.0 style design templates on offer through its Website Template shop. These templates can be used to give your new website that Web 2.0 feeling, or would be ideal to revamp an existing jaded website. A couple of examples are shown below.

Of course Web 2.0 isn’t just about the look and feel of the site. A true Web 2.0 website is standards compliant, conforms to accessibility guidelines, is a pleasure to use. They also offer certain levels of functionality not found in earlier websites. Often Web 2.0 websites are driven by user generated content, often they allow the end user to customise the content to their own particular preferences and often they include applications that allow sharing of information rather than simply presenting information to the user.

However, even if your website isn’t a true Web 2.0 site, the clean fresh, easy to use design style is valid in its own right and often such a design style will aid readability and usability of your website as well as giving it that modern Web 2.0 look.

It is all good news here at Pixelwave Web Design at the moment. I’m busier than ever and enjoying the work. I do still of course have capacity for new projects so if you need a new website or need website maintenance or re-design work carried out I could be your man!… Feel free to contact me, I’ll be happy to help.

Work on one of my bigger recent projects, OGI-TM (Oil and Gas Industry Terrorism Monitor), has now slowed down as the service went live on July 1st and seems to be going well. I’m sure there will be some maintenance and update work to carry out in the future, but the main development phase is complete and the website is live.

I’ve also recently completed some updates to the Beacons Active website that I built last year. The site has so far been a success and is going from strength to strength. This success meant that the site owners had a budget to make some improvements to the site and I have just completed these. They now have some featured listings, more images for each listing and a few other tweaks to certain functional elements of the site.

I’ve also this week started work on a new project for a holiday accommodation provider here in Borth and Ynyslas. As always it is good to work on websites for local businesses as it gives me the opportunity to meet face to face with the client. The site is a relatively simple brochure style website to promote their holiday cottages and should go live later this summer.

Other projects are ongoing and I’m even thinking about re-building the whole of the Pixelwave Web Design site as it is beginning to look a little dated, but clients’ sites come first so that may have to take a back seat for a while.

Pixelwave Web Design has recently started work on a new project for Intemerate Ltd., a property development and refurbishment company based in Shropshire.

Following a meeting last week where we discussed the aims and objectives of the proposed website and then talked about and devised an outline of the information architecture for the site, I have now started work on the overall design and layout. Over the next month or so Intemerate Ltd. will work on the copy-writing and acquisition of photos for the site. Pixelwave Web Design will then (we necessary) enhance the copy for use on the web taking into account various aspects of Search Engine Optimsation and build the finished website for Intemerate Ltd.

The website is expected to go live later this year.

Intemerate Ltd. is an expanding company keen to develop an online presence. As the business grows, they will be adding to the services they offer and therefore expect the website to grow with them. During our initial consultation this projected expansion was discussed and the website will be structured in such a way that new sections can be added easily. We can’t predict the future but we can plan for it and hopefully Intemerate Ltd’s website will go from strength to strength along with the company. Pixelwave Design will be pleased to be a part of this.

Today is an exciting day for Kumar Saraff, a fine artist living and working in Mid-Wales.

His website designed and built by Pixelwave Web Design has just gone live and is available for all to see.

Kumar’s work

“explores the application and effects of paint on surface, bringing light and life to painting with modern materials and techniques”

His new website provides details about his background and inspiration, lists galleries and exhibitions that his work can be seen in and contains a gallery of his recent work. The gallery section of the site is based around a content management system that allows Kumar to add new albums and images as and when he requires.

The website was designed to be as simple and clean as possible so as to provide minimal distractions from Kumar’s art.

Pixelwave Web Design is pleased to have secured the contract for the design and construction of a website for Ffos-y-Ffiin

Ffos-y-Ffin is a company based in the Brecon beacons offering Corporate development events. Their courses include

• Operation Teamleader - A leadership event
• Cambrian Quest - Adventure Weekends
• Inspiral - Leadership Education
• Mountain Sport - Sporting weekends.

Their website will consist of several brochure style pages detailing the course and facilities they offer along with an easy to use Content Management System that will allow them to update certain sections of the website themselves so that they can add photos and reports from the various events they host.

I’m always reading books about Website Design and Website development. As well as manuals and reference books on various coding languages I also enjoy those books about the general principles surrounding aspects such as accessibility, usability, standards compliance and anything else related to peoples use of websites.

I often buy my books through Amazon and have had a web design book-store set up for several years using the Amazon database for its contents. This website was only ever really thrown together for my own use and to allow me to become familiar with a script for generating such online shops. It had served its purpose and I had all but forgotten about it, but I was reminded of it today, took a look and decided to re-design and rebuild it from scratch.

Amazon now have a nice easy to use aStore system that allows such sites to be built in next to no time, so rather than working with a complex script I just used their system this time (I have set several sites up using the system for clients already). It isn’t as configurable as a more bespoke script, but its ease of use more than makes up for that. You also have little control over the look and layout of the content fed by Amazon, but Amazon know what they are doing so using their layout is probably a good thing.

Anyway, now that it is up and running I guess I should buy some more books!

I have of course been working on clients projects today with a few updates to Fairiesworld, some general maintenance issues for Erozone and some updates to the Get Active Beacons website.

I’ve recently started work here at Pixelwave Web Design on a new project for a local graphic designer.

The designs this new company create are specifically for sports and active wear and will be sold on various items of clothing including top quality ‘T-shirts, hoodies and a wide range if other items under the brand name of Slick Activewear.

Pixelwave Web Design are currently in the process of building a fully featured online eCommerce system allowing Slick Activewear to showcase and sell their products online. The system will have all of the usual shopping cart features and will allow Slick Activewear to easily update the products and categories themselves as well as track orders, stock levels and much much more from within an easy to use Administration panel.

Pixelwave Design has been working in close collaboration with Slick Activewear on the design and layout of the website, which will feature some of their own artwork. So far their catalogue includes designs within the following categories:

• Biking
• Climbing
• Diving
• Equestrian
• Open Air
• Snow Sports
• Wave Sports
• White Water
• Slickwear

Watch this space for more news on this exciting new website.