Nick Dew - UI designer & front end developer
Tea Enriched Alcohol website
I was asked to build a responsive website and e-commerce store for an independent distillery in Cambridge.
The website was built to adapt according to the browser and/or device being used to view it. This basically means all the content is accessible and readable whether you're viewing the website on a desktop, laptop, tablet or mobile.
To help visitors to the website understand what T.E.A stood for, my client wanted to animate the logo between using the full brand name "Tea Enriched Alcohol" and the abbreviated version "T.E.A".
To achieve the parallax effect multiple layers were used, which when combined with different background images, text and scroll speeds, helped create the illusion of depth. As you scroll down the homepage, each slide reveals a different part of the vodka bottle, showing off the detail and quality of the finished product.Above is an animated gif showing the parallax effect in action.
My client wanted to include an image and details on how to make the various cocktails mentioned on the website. So I used a lightbox (popup gallery), to make it easy for someone to follow the step-by-step instructions without any distractions.Cocktails page The lightbox effect showing an image and step-by-step instructions for one of the cocktails.
The website was built using Wordpress CMS, to make it easy for my client to update content. This meant I could add an e-commerce plugin and then customise it to my clients requirements.
Adult Verification System (Age Gate)
My client wanted to stop people who were under the legal drinking age from browsing and buying from the website. Although not full proof I added a customised Age Gate plugin to Wordpress which meant customers had to enter their D.O.B. before being allowed access to the website. Anyone under the age of 18 would not be allowed to view any of the website content or buy from the shop.Age Gate landing page