The Design and Usuability Revamp Part II

As promised, and without any further delay, here is the analysis of the Digital Farm re-design (Part 1 can be viewed here).

Let’s start with a bit of a background. The Digital Farm started in about October last year. The reason for it:

• Firstly, to have a bit of fun and try this thing called blogging.
• Secondly, as a bit of a learning experience into this area of the internet and the design it entails.
• Thirdly, to see if I could drive a bit of traffic to our company website.
• And fourthly, to showcase my portfolio and hopefully sell my skills better.

The original design of Digital Farm was basically the default wordpress template file with a customized top banner, not much of a platform to showcase my work! In fact, probably the most average blog design you will see on the internet today. But as I learned more and more about this content management system and the wonderful way it works, the style of the site became more and more me, and less and less wordpress.

Right now we are ready for the re-design analysis.

Colour palettes

“The ‘technical’ method of colour-selection involves choosing one or two dominant colours from the colour wheel, to be used with a small set of complimentary colours” (Source: Mezzoblue).

I wanted the Digital Farm to look fresh, fresh as fresh cut grass, so I used a colour combination that I thought encompassed that. The palette consists of blues and greens, then I used complimentary tones of those two colours. Voila.

If you are looking at a revamp of your site, take colour combinations seriously. Often people just throw together some colours that they think work well together, but when seen by somebody else they might think it looks horrible.

Use the tools available to you on the net, like colorblender (http://www.colorblender.com/ ), that has hundreds of beautiful, eye-catching (in the right kind of way) colour palettes to choose from.

Good designers use typefaces, great designers use typography

A quote from the “Good design vs. Great design” slideshow presented by three of the top web designers in the world at the @Media conference in London last month, reads “great typography is not choosing a ‘cool’ font, great typography is invisible”. When choosing fonts for the re-design I chose fonts that are modern classic, and of course web 2.0 compliant.

I picked the Lucida Sans font family, the font that Europeans love, a opposed to the Serif font family that Americans love. (Also sourced from the Good design vs. Great design presentation)

A useful tip from the latest issue of .net magazine:

Verdana, Georgia and Tahoma fonts are all very in at the moment, whilst arial is most certainly out!

A little play on the letter spacing can make quite a nice change to the usual font display.

Screen Resolution

My last wordpress template design was based on 800 X 600 screen resolution.

After studying the great stats I get from Google Anayltics I could see that only a small percentage of my readers use a screen resolution of 800 X 600 pixels. If only a small percentage were using this screen resolution I was wasting a lot of usuable space! Therefore the new site design was based on 1024 X 768 screen resolution.

If you can get hold of an invitation to Google Analytics I strongly advise you jump on it. The invites are few and far between, purely because this is a service that you should be paying for, but is avaliable completely free!

The layout out reservoir

Once I decided on a 1024 x 768 site layout I had to decide how I was going to use the additional space to its full potential.

A key to great design is the use of good, clear grids. Every designer will tell you that, especially web gurus like Andy Clarke, Cameron Moll, Veerle Pieters and Jon Hicks.

The navigation on my site changed completely. I went from having a “two column + top box” site design, with all my links on the right and my content on the left, to a “three column + top box” site design. As you can see all the main navigation links are now on the left. I’ve tried to keep all the links in one area, as to not confuse the users. The site content is displayed down the center of the page, with the subscribe links, and pay-per-click ads on the right.

I divided the design into different container div areas, which basically govern where my links, posts, and other text must all reside. As the diagram shows my design consists of quite a few.

Web Standards and Cascading Stylesheets

This was one of the biggest areas of learning for me. In the past I’ve always designed using table structures with a bit of reference to Cascading stylesheets (CSS). With this re-design I thought it might be time to test out the full capabilities of web standards and CSS.

I’m not going to bore you with the differences between css design and table design (if you are interested read this very informative article ), I will say that although designing using web standards and CSS takes quite a bit longer, requires a lot of testing in numerous web browsers, and really rattles the brain at times, it’s far more flexible, far neater, and can be controlled by one file.

So there you have it, you’ve just spent a day in the life of Mark, it’s not all pretty pictures in Photoshop, there’s a small amount of the left side of the brain I try to use, only because I have to.

Jason Walsh, a freelance journalist specialising in art and design, puts it slightly differently, “Beyond art, there are other methods of distinction that a designer must use.”

I hope this article has been informative, I’d love to hear what you think, please leave a comment.