In this post we will present step by step of the EXTREME MAKEOVER for the website www.mainmastinternational.com
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:
- Keep the logo and the brand name as they were.
- Maintain the same color scheme (blue tones).
- Add a page called Promotion page, and a Promotion section on the Home page.
- Provide better graphics that speak about the company's products - cosmetic ingredients.
- 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.) According to Whois Record, the site's current score is 99%! http://whois.domaintools.com/mainmastinternational.com
And the EXTREME MAKEOVER is completed!
