I was approached by an old client to create the A-Klass Connexions branding for his new phone charging and storage business. I created all the artwork, including the logo and branding, all his poster and print files, a snazzy new website and even the designs for the vans and gazebo.
A-Klass Connexion’s branding
One of the main services that A-Klass offers is phone charging facilities at festivals. Due to this we incorporated a phone charging into the logo for the A-Klass Connexions branding. After providing several alternatives for his logo, we settled on a style which was tweaked further to get it just right.
There are two predominant colours used throughout the branding (dark blue and pink). The colours create a strong visual message which is continued throughout all the marketing material. While the type was based on a font chosen for their brand, it was converted to curves and reworked to provide customised typography that perfectly suited the business name. The usb cable which runs through the letter X and the power symbols used in the lettering, also provide additional brand elements. You can see this illustrated specifically on the stationery and poster designs where the usb cable wraps around the content to draw the eye into the key areas of interest.
Once the brand identity was established, I began work on the letterhead and compliment slip designs. As I mentioned earlier, these incorporated the usb cable to frame the page and lead into the content along the bottom of the designs. The stationery was deliberately kept clean and free of too many additional elements.
Price list & poster designs
I designed and illustrated all the elements for the price list and poster designs to use the same minimalist design that was implemented in the logo. These kept the strong colour scheme in use, while adding a bit more depth, with the use of gradients in key areas. As these were to be viewed from a distance, they needed to be clear and easily readable. They were produced in a number of different sizes, so I designed everything as vector files. Vector files ensure that there is no loss of quality when the artwork is enlarged, so allowed these to be produced at any size necessary.
In conjunction with the other artwork, I also designed the van livery and gazebo artwork. A-Klass is a mobile company who travel to festivals across the UK. This means that their van signage and gazebo are key marketing areas for their business. They work as a shop sign would, to attract passing traffic.
The designs for these needed to quickly portray what A-Klass does while being colourful and attractive to catch customers attention. There were some extra elements brought into these designs, but I made sure that everything fitted within the brand identity. Some additional elements had been added by the sign companies, which did not fit the brand identity. It is important to always keep a strong visual flow to all the designs.
During the build and design of this bespoke HTML website, I kept the strong brand identity intact by ensuring the colour scheme, typography and other elements were consistent. While consistency is important in any branding, it’s also important to keep it fresh and inviting. Don’t get bogged down too much by brand guidelines and rules.
Due to the responsive nature of websites, I changed the way the usb cable is laid out on the site. The site needs to be able to resize and reorder it’s elements to be displayed on any screen. This meant that I was restricted with certain elements of the design to ensure compatibility. Luckily web design also opens up a whole new set of possibilities. I was able to add an interactive animation to the key areas which actually show them readjusting to plug-in the usb. The usb animation denotes how easily you can charge your phone anywhere.
Online animation & interactivity
I made the site fun and interactive, through the use of interactive behaviour and animations. There were a few animations I created to engage users on the site. These included the movement on the menu items. When a link is hovered over, it triggers an animation to provide a description. I also incorporated a colour gradient which slowly animates on key areas of the site. This was done to catch a users eye and direct them to key content areas. I kept it subtle and slow, so as not to distract from the content, but to provide some movement.
Masonry grid layout
To fully appreciate the site and it’s animations please take a look at the A-Klass website here.