Meridian Colour UK

Web design and development for a manufacturer and supplier of industrial paints and pigments

Requirements

Meridian Colour UK manufacture and supply high quality liquid and paste dispersions, they have been in business since 1999 and until now have never had a website. I was asked to design and build their first ever website and create the company logo and identity. I started with the logo design and identity before moving on to the web design and finally the website build.

 
Meridian Colour web design and development image
 

Logo Design and Identity

The first thing I did was to come up with several logo designs, the design chosen by the client would form the basis of the company identity. Once the logo design was chosen, I then designed the letterhead, delivery note and invoice, before moving on to design the business cards.

 
Meridian Colour documents and business cards
 

Website Design

The first stage of the website design was to create hand drawn sketches. I then created wireframes from the sketches, to show the position of key elements for the home page and other pages. The home page has a slightly different layout to the other pages.

 
Meridian Colour - Desktop wire frame
Meridian Colour - Desktop wire frame
 

Website Visuals

The next stage was to create the visual mockups. I created various versions of the visuals using different background images in the header, each version consisting of two visual mockups, one for the home page and one for the other pages. After presenting the visuals to Meridian Colour, the visuals below were chosen for the website design.

 
Meridian Colour homepage visuals
Meridian Colour what we do page visuals
 

Final Result

The final stage was the website build. I used the Zurb Foundation 6 responsive framework to provide responsive functionality with some CSS and Javascript customisations for the image breakpoints and menu interactions, PHP to handle the get in touch form submission and JQuery to provide micro interactions on the get in touch form.

 
Meridian Colour - Homepage image
Meridian Colour - About us page image
Meridian Colour - Homepage mobile version image
 

View the finished website: http://www.meridian-colour.co.uk

View the finished website: http://www.meridian-colour.co.uk