Project Description

Mechanics’ Rebranding

The rebrand of Braeside Motors in Brighton.

Launch the website
Braeside Motors brand design mockup
Client:

Braeside Motors

Skills:

Brand Identity + Website Design

Carl from Braeside Motors approached me to help him move away from an existing company, who he felt were not running his website and marketing very well. I was happy to help reinvigorate his online presence and ensure that it all had an up to date and consistent feel throughout all his marketing and online presences.

After assessing his existing marketing channels, I suggested that it was all updated so that I could create some consistency through the rebranding his business. There were different logos and styles used on his website, social media and other marketing, so they all needed to be unified.

As I’d worked with Carl before, he pretty much gave me free rein to do what I thought was best. It was an absolute pleasure to work this way. Have the creative freedom with the rebrand designs, meant I could get stuck in and immersed in the process. :)

Eyetooth-Art are in my opinion the market leaders in graphic and web design. Steve built my website from scratch and reworked my Facebook page and all my online presence. Excellent value and faultless work.

Carl Roper – Braeside Motors

Braeside Motors Logo Designs

The logo design

Since there seemed to be multiple logos and a distinct lack of branding used in Braeside Motor’s marketing, I suggested that we redo everything from the ground up. So the first stage was redesigning the logo. This served two purposes; uniting the brand under one distinct logo and also modernising the identity with a new lick of paint. As I was given relatively free rein with the designs, I worked out a few different concepts and settled on a final design that I felt worked well for all the different purposes. Luckily it was approved so I could get started with the other design work immediately. While working on the logo, I also tried out several colour schemes for the different elements. It is always a good idea to find a small range of colours that can work for different brand elements. When choosing colour schemes, it’s important to bear in mind that the logo is likely to be used on different colour backgrounds, so both light and dark versions will be needed.

The brand redesign

Careful consideration was put into the different elements for the Braeside Motors brand redesign.

Everything from colour schemes, fonts/typefaces, design elements and what sort of imagery, needed to be planned.

Rebrand Typography

While I wanted the logo to have a distinct wordmark style, so that it could stand out from the rest of the text, it also needed to complement the typography used for the general copy and other text. I chose to use the font ‘Exo’ for the brand redesign as it has some interesting variations in thickness, with added character/style while still being easily legible. For the main headings, I went for a large chunky variation, to grab people’s attention, while each subheading got marginally smaller and thinner.

Rebrand imagery

I decided to use imagery that would portray the different aspects of the company, while still being creative and engaging. To accomplish this I sourced stunning photography that showed closeups and interesting viewpoints that related to the topic or service being referenced in the accompanying copy.

Rebrand design elements

The rebrand design elements were chosen to reinforce the logo. I felt that using strong colours, combined with arrows to lead the eye into the content areas, therefore providing a strong basis for the designs to follow.

The website redesign

As this was the main thing Carl wanted to be updated and modernised, it was the next part of the rebranding process. During the logo redesign process, I had already created some elements to compliment the logo. This allowed me to utilise these elements to create a mockup of how I felt the site should look. It also solidified the basis of the visual brand elements and colours scheme.

Once I had developed the mockup in Illustrator and formulated how I’d like the site to function, I could then get stuck into the coding and interactivity of the site. A lot of the brand elements were intended to be interactive or animated on the website, so it’s always a pleasure to see the static mockup come to life.

Luckily, even though the existing site was not looking great, it had a bunch of copy that I could use to create the new site. I sourced all-new imagery and filled out the pages with the old site content in the new style I had formulated. I edited all the text to make it easier to read and to allow clear navigation of the site in conjunction with visuals that reinforced the copy.

By incorporating interactivity and subtle animations into the site design, I was able to grab customers attention and entice them to interact with the page. Whether this is to get them to click a link or simply keep reading, it will keep potential customers engaged and hopefully lead to sales.

Responsive design

I paid special attention to the responsive aspects of the design so that the site would work well on all devices. I optimised the web pages to be viewed on a large screen first as that was the easiest way to get things approved and to allow us to tweak the elements and layout.

Once the general site styling and design was approved, I then got stuck in with customising the site for use on mobile devices, such as tablets and phones. To ensure that the site looked great on smaller devices, I created bespoke sections that would only be displayed on smaller screen sizes, while certain styling and sections created for larger screens are automatically hidden, depending on the device the site is loaded on.

Another clever feature I implemented was to reduce the font sizes to ensure that they would display correctly on any screen size. In addition to this, the arrow brand elements were also rotated and repositioned on smaller screens so that the images associated with the text even though the page element order changed.

Website platform

We decided to use the WordPress platform to build the site, for its capacity to add functionality and SEO features easily. Another advantage of this was that Carl would be able to make small updates to the content of his site easily, while I handled the more important design aspects of the updates.

You can watch a quick video on how the site functions below, or better yet, actually visit the website here.

Braeside Motors website rebrand design
Rebrand design of Facebook page

Facebook design

The existing Facebook page for Braeside Motors was using a different logo and imagery to the newly created brand identity.

I wanted to create a visual identity for the rebrand that worked seamlessly across everything, so got stuck into incorporating the redesigned brand elements and logo into their social network imagery.

To do this I created a new profile and cover imagery as part of the social media designs. You must plan for the images to be cropped and resized when viewed on mobile devices so that all the important content remains visible at all times and that the designs work well on all screen sizes.

I decided to use the slide show feature for the Facebook cover area, as this allowed me to highlight some key services in the header section of the Braeside Motors Facebook page.

When creating an emblem or logo to use as the profile picture, you need to consider the fact that it will be converted into a circular space and reduced in size when showing on new posts and other areas of the page. Placing a logo that gets cropped so it’s not visible or legible would be counterproductive.

In addition to the standard changes, I also created imagery for the about us section and made general improvements to the content and functionality of the page. By listing the services offered, with images that tie into their relevant sections on the website, I was also able to market the business using an additional platform.

Want a strong Brand Identity?

Give me a shout