the brief

Our brief was to put JJ's Cider online. Phil still felt very new to the web and asked for a simple, static website to show information on his ciders with a view to possible upgrading to a CMS in future.

What we did:

  • adapt existing logo
  • created feature illustrations featuring the West Country landscape
  • website design & production

the design process

One of our core objectives was to ensure a clear and easy presentation of the product. With a loyal client base, the site needed to allow easy checking of familiar ciders while introducing them to new cider lovers.

concept

As this was the first website for the business, we had a blank canvas – a wonderful opportunity to dream up a fresh design to show the luscious countryside while promoting Phil’s delicious ciders.
To capture the sensation of a walk through the sweeping West Country hills on a sunny summer’s day, we created a wide landscape illustration as the backdrop for the site.
jjs-landscape

The colour scheme for the website thus evolved from the illustration with its rich green and light sky blue, in addition to browns in the logo and fences in the landscape. The nine selected colours centre on three core tones in varying shades. The desired outcome was a fresh and friendly play of colour.

jjs-colours-textures

To add an additional element of play to the design, we created a striped border of different widths and densities. The borders frame the page as well as most of images on the website.

logo

jjs-badge220
For the main logo, we used a circular shape to mirror the familiar circles of Phil’s cider labels. This allowed us to feature the landscape illustration with the typographical logo set into the blue sky on top of the sun.
The logo badge also uses the double colour-striped border, thus forming a harmonious unity between brand and site design.

We then used the logo badge as the central focus of the site’s header and its circular shape as a guide for presentation of feature photos and product shots. Most recently, it was used to brand the new ‘bag in a box’ container available since summer 2013.

the final result

The design adapts to different screen sizes, filling the window with background sky and landscape. The layout then reflows for better legibility as the window size narrows.

The design includes a soft gradient background of varying spread and atmosphere as well as a gradual animation of the sun behind the header. This uses fairly new techniques which are mostly supported by more modern browsers. For older browsers, a static setup is in place.

jjs-homep

on a personal note

This project was a sheer delight. Phil was a wonderfully enthusiastic client who was prompt and sincere in his feedback. Our collaboration was remote, using emails and our online client area only, and worked seamlessly. Phil was always ready to reply, answer questions and provide content – a pleasure to work with.

It was a joy to have the freedom of starting something fresh – getting JJ’s Cider’s first website online and knowing that everyone is happy with the final site. Wishing you all the best, Phil :)