Website’s extreme makeover – Step by step.

In this post we will present step by step of the EXTREME MAKEOVER for the website

Here is the OLD look of the site:

And the NEW look:

It started from an afternoon when Simon, the owner of MainMast International Ltd. asked for My Graphic Friend‘s opinions about his company’s website. We discussed the goods and the bads. Sometimes when you look at something, you know it’s not good, but you can’t tell where the flaws are exactly. So My Graphic Friend pointed these flaws out to Simon, and recommended a face-lift to give the site a new professional appearance. And that’s what we did.

The requests from Simon were:

  1. Keep the logo and the brand name as they were.
  2. Maintain the same color scheme (blue tones).
  3. Add a page called Promotion page, and a Promotion section on the Home page.
  4. Provide better graphics that speak about the company’s products – cosmetic ingredients.
  5. Above all, a professsional look!

So we divided the layout into 4 parts to work on: (1) the banner, (2) the navigation bar, (3) the content area, (4) the footer. Like in the sketch below:

First, the logo. It had the shape of a mast (Main Mast), so it would be nice to be put on an ocean blue background:

The old logo…

and the new one.

The second step is to clean up the navigation bar.

The old “messy” nav-bar…

and the new nav-bar.

The third step is to get rid of the sad blue-grey background:

Get rid of the sad backrgound…

to give it a cleaner look.

A theme image of cosmetic ingredients were created to be put on the Home page:
(Also a product image for the Products page, and a map for the Contact page.)

The new theme image added at the top of the content area.

And finally, the fourth step is to add a darker-blue footer at the bottom to make the page more solid, and a deep-blue background surrounding it:

Added the darker-blue footer…

and the deep-blue surrounding background.

A CSS file was created to set colors, fonts, styles for each element of the page. Elements are group together, like “navigation buttons”, “links”, “headers”, “paragraphs”, “emphasized text”… etc, to make sure that these graphic elements are kept coherent throughout the site. The fonts used are: Verdana, 12px (for paragraphs), and Trebuchet MS, 16px (for navigation bar.) We made sure that the color scheme is maintained as requested — only shades of blue and magenta were used.

The CSS and HTML files were hand-coded so that they are as clean as possible, for the goal of getting the site a high SEO score (Search Engine Optimization score.) Accordi
ng to Whois Record, the site’s current score is 99%!

And the EXTREME MAKEOVER is completed!



  1. Posted February 1, 2008 at 1:32 pm | Permalink

    I think you did a great job.

    What would you say about

    I know it needs a makeover, including an easier way of making purchases for the consumer/net user.

    Thanks-Keep up the good (actually awesome) work.

  2. Posted February 4, 2008 at 4:21 pm | Permalink

    Thanks for the comment, LD!

    I’ll take a look at the site, and will write to you.

    If you are looking to sell online, it’s very important to make the purchasing process easy, fast and convenient. I’ve recently introduced a new payment method to my customers: they can now pay me directly with a credit card, by clicking on the Pay Now button in the invoice email that I’ve sent to them. It’s very easy!

    In order to have this function, I have to pay a pretty high fee though. But I think it’s worth the price for the convenience for my customers, and for the prospect that my business is going towards being E-commerce and global.

    Write to you later.


%d bloggers like this: