Post-Thumbnail

Inspecs is a world leading eyewear design and manufacturing company based in the UK, with over 20 years of experiencing in creating iconic and sort after eyewear and all distributing in over 60 countries.” Established in 1988, Inspecs’ mission is to produce desirable eyewear at excellent value for money. We seek to improve the lives of those we touch, both directly and indirectly, through our products and business philosophy. Soon after conception, Inspecs developed into the ground breaking; “merchants of vision”. For a long time at Inspecs we have made do with a basic, pulled together site, that didn’t really match our cutting edge, modern company. That was why we were given a design brief to redefine Inspecs online.

The Brief & Planning

The Brief was simple and concise; “To create a website that effectively conveys our company to our business and consumer clients, whilst also staying “in tune” with the companies brand image. We were to also re-brand the logo, for use online.


“For a long time we have made do with a basic, pulled together site”

So we sat down and set to work, brainstorming ideas. We decided to start with the logo and come up with a look, to then build the website around. We started sketching out logo and icon ideas. We looked at organic forms and eye anatomy to try and draw inspiration from “vision” and “eyewear”.

Once we had come together and selected our favorite sketches, one of our designers scanned the drawings and then turned them into digital mockups in illustrator.

Then out of the digital mockups we selected our favorite. Our favorite was a very simple design; an eye silhouette from the side, subtly portraying our company slogan effectively; “New perspective”.

We then set to work coming up with a logo style; that we would then base the website’s style off. We exported our Illustrator logo into Photoshop and started messing around with different layer styles; adding gradient overlays, inner shadows and the like.

After several different attempts, we then had our final styled web logo. We could then use this to build our website around.

Wireframing

To make sure that our website was user friendly and easy to navigate, we produced wireframes to map out how the site would be viewed and used. We wire-framed every page of the site in Illustrator and then printed them out. We then check the printed versions to make sure that the site was easy to understand and navigate.


Any problems we found we went back to the wireframes and made the necessary changes, until we had our final collection of wireframes.

Mockups

Our web designer Alex Totterman then took the wireframes and started to create the Photoshop mockups.

Once Alex had finished the basic layout and style of the site, we then added all of the graphical elements to the photoshop file, which showed us what the site would eventually end up looking like.

Development

Alex then used the final Photoshop mockup to slice the web images and graphical elements; this gave us a folder of sliced images that would then be used to code the website.

Once we had the finished folder of sliced images, Alex set to work in coding the basic html of the home page, using the html editor and FTP Coda.

Once we had the html, Alex started coding the CSS to style the website. The CSS is what was going to style the html to our desire look, to mimic the Photoshop mockup, that we had made earlier.

A few days later and after many hours of testing and coding, we had finished our html and css; giving us our static website. But we still had much to do, as we wanted to use WordPress as a CMS for our website. We then took the finished html and CSS and started to integrate WordPress into it, building our Inspecs Website Theme. We used a basic WordPress file arrangement; with a header, sidebar, footer and main body.

After another few days Alex finished the WordPress integration and created the custom sidebar widgets to accommodate for our recent tweets and other content. We then applied the final finishing touches and polishes to our admin panel and the site. This process included creating a custom wordpress login panel, adding final css effects, uploading all the brand images and updating our catalogues gallery.

We then started to add all of our content to the new website, including the contact, about, brands and press pages. Which were all controlled through custom theme templates.

Eventually we finished all of the pages and had a fully working website all powered by WordPress.

Final Product

After 3 weeks of hard work we finally had our new dream website that effectively conveyed our message and was in sync with our companies brand image. We launched the website on Bank Holiday Monday and are looking forward to fully using our blog and spreading the word!

View Inspecs Online

Buffer
About the Author:
These articles are formulated deep within the Creativeoverflow compound. Picked by hand and posted by the team over at HQ. They usually comprise of new releases, news, opinions, questions, giveaways, freebies and more.

One Lonely Comment

  1. sawebdesigns says:

    cool ive learned some goods stuff reading this article

Have your Say