I personally feel that the best way to learn is from mistakes. Today I learned what makes a website look good. The ability to differentiate good and bad can only be gained through experience. Below are 6 websites redesigned by Ben Hunt of Scratchmedia. He did a great job and we shall learn from the experienced. See the contrast through the before and after pictures.

Fink

Before



After



• Simplified logo for a clearer, stronger message. Charles Darwin’s picture gives the site a ‘wise’ feel.
• The website is further simplified by the 2 column layout. Readability is improved with a solid introductory block and a clear heading.
• Secondary features like the language selector is moved to the lower left to keep the content of the main section relevant.

Moraware

Before



After



• Software is branded separately from the company name to give it a distinct identity.
• Important benefits are highlighted in bold.
• A ’software box’ gives the software a sense a professionalism and better presentation.

Active Allowance

Before



After



• A ‘free trial’ text cloud is used to draw attention.
• Navigation is simplified from 8 to 4 tabs.
• Higher quality photographs add a sense of ‘Wow’ and attraction.
• 3 example lists on the right button signifies higher usability and more benefits.
• Keywords are highlighted in bold. The ‘more info’ box keeps the flow of the website.

Web Talent

Before



After



• New logo is easier to read and has a camera to gag a feel of taking pictures.
• The quick search form encourages users to search the database and asses the scope of talents.
• The larger featured member photo allows the image to appear in a more interesting layout.
• Coloured headers are bigger to provide contrast.
• Introduction is kept brief for readability.

IP Newsflash

Before



After



• Less important items like login is toned down to match the background. It will be highlighted when focused.
• The 2 column layout keeps the site simple and flexible.
• Bigger heading enables easier navigation. Clarity is obtained with larger text and background images.
• Featured items and donation buttons are moved into less focused areas like the lower left.

Sunhome

Before



After



• The new logo and background makes us think of clear, sunny days.
• The tabs are bigger and words are clearer. This improves readability.
• Freeform polaroid style photos gives viewers a vacation feel.
• Buttons on the lower right shows other key navigation items.

ScratchMedia
Your personal web experts

Web Design From Scratch
Your complete guide to web design