Loading

6 Website Redesigns : Zero to Hero




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.

  1. Fink
  2. Before

    fink

    After

    fink

    • 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.

  3. Moraware
  4. Before

    Moraware

    After

    moraware

    • 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.

  5. Active Allowance
  6. Before

    active allowance

    After

    Active Allowance

    • 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.

  7. Web Talent
  8. Before

    webtalent

    After

    web talent

    • 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.

  9. IP Newsflash
  10. Before

    ipnewsflash

    After

    ipnewsflash

    • 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.

  11. Sunhome
  12. Before

    sunhome

    After

    sunhome

    • 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


      Pin It



2 thoughts on “6 Website Redesigns : Zero to Hero

  1. I’d say that all of the new designs are way better than the old one. The new designs are interesting, lively, with non-conforming lines (read: boring boxes), designs, and colors.

    but I had to disagree that white on light green is readable. to me, it causes spots on my vision, especially in Active Allowance.

    But overall, It’s a good way to learn from examples, don’t you think?

  2. you’re right… the white on light green in Active Allowance has lower readability. dude, you have sharp eyes.

    Yeah, learning from examples sure is a good way. =)

Leave a Reply

Your email address will not be published. Required fields are marked *


2 − two =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>