You can see three alternative design options I have created here for a Northwich based company specialising in online sales of lecterns and podiums across the UK and Ireland.
About the Company
With more than 26 years of experience in the design and production of their products and with the help of their new online shop, Lecterns Ltd hope to spread the word about what they do far and wide. From their workshop in Northwich, Cheshire they produce high quality products using a variety of materials. Based in in North West England they are ideally situated to distribute across the United Kingdom and further afield into Europe and beyond.
The word lectern comes from the latin word “lectus” which means “to read”. Although probably not a word in everyone’s vocabulary some of us will have used one and most of us will have seen one. Typically they are made using melamine faced MDF in various finishes. Other materials used include acrylics where transparency is required and perspex for shelves and top panels. Lecterns are most often used in churches, conference halls and educational facilities.
Website Requirements
The finished site will be a fully functional eCommerce solution powered by OpenCart. Overall the layout needed to be clean and intuitive. Visitors should be in no doubt what the site is all about when they land on the home page for the first time. Initially there will be around a dozen products on display which may gradually increase over time. The flexibility of OpenCart is ideal for this where restrictions found on many other eCommerce solutions can be a hindrance.
Approach to the Design
My contact for this project is Jonathan Guy of Aqueous who has taken charge of the online marketing and promotion of this website for the Northwich based business. We met up a week ago to discuss the design and development needs for the site. He explained a little bit of background about the company and the products they sell. We agreed on a plan to present three alternative design options featuring different logo styles and colour schemes. Colour combinations including black, red and white were requested not to be used.
Overall I opted for a crisp, clean and minimalistic approach to the layouts. Limiting the use of graphics for visual effect and using CSS instead would make the site more lightweight and perform better in both search and usability. The product images should stand off the page where possible and to this end I used lighter shades of neutral greys for most backgrounds. I used various shades of grey and textured pattern repeats for the common elements with one or two brighter accent colours for highlighting. Sans serif fonts worked best for the bulk of the text with a few cursive font options for the logotypes etc.
The Overall Designs Explained
Starting in the header at the top we have all the usual cart options, account links etc that you will find in most eCommerce sites. Each of the logotype designs need no explanation, you should be able to see the silhouetted shape of a lectern in various styles to the left of the lettering on each. The main menu features a button link for the main products area and other most important pages including the About Us, Testimonials, Contact Us and Home button.
Below the navigation at the top of the content area will be a sliding home page saviour or “bull image” to display important messages and promotions. Beneath this will be three balanced panels. The centre panel will display a welcome message, brief site introduction and a link through to the About Us page. The outside panels can be used to display anything, I’ve used a couple of products here for demonstration purposes. Next up is the Featured products panel which can be controlled in the admin area of the site.
Finally the home page is finished off with the footer area which will feature secondary information, links to info pages and contact details etc.
The Individual Designs Explained
- I settled with a flat #EDEDED light grey for the overall body background on this visual layout. The main colour for the lettering, menu buttons and panel title is a very dark, almost black, navy blue, the hexadecimal code for this is #2F303B. The accent colour is a nice warm yellow, hex #FBC500, which would be used for :hover’s, :active’s and generally drawing attention to anything from a box flash to an “Add to Cart” button. The font used is PT Sans regular and italic.
- For the second possible option I’ve created a little more contrast with the colours using a coquelicot orange #FA5426 for the second accent colour. I’ve used a very dark grey/blue again for some of the text and navigation highlights and a bright crayola blue for the main accent colour, hex for this is #039CDC. Body text here will be set in #444 grey and fonts used are various weights of the Ubuntu family. Bree Serif font works well here in the logotype.
- For the final design I’ve taken a softer angle with the colours, especially with the greys. I’ve also applied a subtle 3px rounded corner to all of the block elements including the buttons. A limerick green #7FB91E and mikado yellow #FFCF2E for the accent colours combine well. Fonts used here are Qwigley in the logotype and Raleway, a versatile and great “all-rounder”, one of my favorites at the moment.
Well that’s it, I hope you like the designs above and my explanation for each. Please leave a comment at the bottom of this page if you have any feedback you would like to share with us. You will be able to see the finished website here in all its glory once completed!