Client Project: VBS Heating

Contributions:
Select a design from the UI templates and create mock ups accordingly. I since there were more than 2 brand colours i created a few colour options for VBS to select from depending on their prominent colour. 

Scope:
To create a new webstore for VBS Heating. Create mock up designs and include the VBS brand colours as used in the logo. VBS is a company specialising in heating and other equipment.

Design Rationale:
I chose the balance template as it has a prominent logo in the header and nav is split across 2 sides to allow for more or less categories. The layout is a new look and entices users to use the site. I also sourced the home page images from their previous site and also found related imagery from their location to add to the look and feel of the site. VBS loved the imagery so much that they decided to keep it which can be viewed on their live site here.

The footer design is also detailed to match with the header and allow for extra links and pages to be added. With a text overlay on the background, it makes the footer appear more interesting and splits up the content between extra links and the address/social icon section.

 

Here are the Desktop UI designs for the VBS webstore:

Desktop Home Page

Desktop Category Page

The category page is a detailed layout with filters on the side and a banner on the top to add more imagery to the page. The products are set up using a grid format to showcase the product images really well.

Desktop Login Page

Desktop Registration Page

Desktop Product Page

The product page design is a different layout to standard page. The product image and description section has been given more space to allow for more details. The product tabs are more seamless with the design and are available for more content to be added if needed.