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.

Tea Enriched Alcohol website
  • UX
  • Responsive
  • HTML5
  • CSS3
  • JS
  • Wordpress
  • E-commerce

Responsive Approach

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.

Desktop tea-home-section-tablet Tablet tea-home-section-mob Mobile

Animated Logo

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".

I used CSS3 animation to achieve the above effect, rather than a animated gif, due to lack of alpha transparency support.

Parallax Effect

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.

Animated gif showing parallax effect on TEA website homepage Above is an animated gif showing the parallax effect in action.

Lightbox Effect

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.

TEA website cocktails page Cocktails page TEA website cocktails page showing lightbox effect The lightbox effect showing an image and step-by-step instructions for one of the cocktails.

E-commerce Shop

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.

Shop page tea-shop-tablet Tablet optimised shop page tea-shop-mobile Mobile optimised shop page

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 Age Gate landing page

Visit the website