Flying Macbook mockup

Ebridge Brand and Website

I’ve been freelancing for the talented and nice people at fiftyfiveandfive.com recently. The project was to create a brand and website for a digital product called ebridge.

Here is a mini-case study of the project showcasing my contribution.

Logo Development

A number of initial explorations were developed with a final four being presented to the client. Minor corrections and kerning adjustments were made and the final logo created.

Ebridge logo lockout

Final four shortlisted logos

Ebridge logo lockout

Final ebridge logo

Ebridge logo lockout

ebridge logo lockout

Ebridge logo lockout

Final ebridge touch/favicon

Ebridge logo lockout

ebridge touch/favicon lockout

Typography

Muli was selected as the product font. Muli is a geometric sans serif font available free from Google fonts. Muli black was used for the logotype. Semi-bold was used for headers and regular weight for body copy.

Muli typeface sample

Colour Palette

Various colour palettes were explored during the development process. After creating a series of comparative moodboards, blue was choosen as the primary brand colour. This choice also allowed us to create an accent colour in yellow which was already part of the parent company's corporate colour palette. The yellow accent colour was slightly modified to create a lighter more contemporary shade. A small supporting palette of shades was also developed. This supporting palette allows for a greater range and flexibility when creating additional assets such as blog illustrations, banners, ebooks, white papers etc.

Icon grid diagram

Icons

An icon set was designed to illustrate the features of the product. The icon visual style is non-representative, instead the icons loosely reference concepts such as connectivity, bi-directional communication and automation. This flexible non-linear approach allowed the icons to be interchanged and re-used as illustrations on different sections of the site.

The icon strokes were animated on the homepage using the Vivus JS library.

Icon design grid

Icons were drawn on a 96 x 96 pixel grid with a 2 pixel wide stroke. The icons were desingned to be re-scaled depending on the context with the stroke width remaining the same. Where icons are used in a more illustrative context a circle element in the brand colour or accent colour is placed behind the icon.

Icon grid diagram

Icon animation

A subtle 'fade up and in' animation style was used to draw the user's attention to the key point of the related section. WP Bakery uses animate CSS as it's JS animation library. For the purposes of this demo I've used the scroll reveal JS animation library.

. Icon grid diagram Icon grid diagram

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...

Process

The Design Stage

Wireframes and a sitemap were used as a starting point to explore various page layouts using Sketch. As brand was developed in tandem with the site, Sketch's ability to update instances and replace colour meant the client could quickly get visibility and sign-off on the general look and feel of the site before the build stage.

Stage 1

Site map ( supplied )

Site map

Stage 2

Wire frames ( supplied )

Icon grid diagram

Stage 3

Sketch mockups

Icon grid diagram

The Build Stage

Once the client was happy with the direction of the look and feel of the site, the build was started using knowledge of standard product marketing site design patterns.

The site was hosted on WP Engine which WP Engine comes with a free WordPress website theme builder framework called Genesis. Genesis was used to build the theme which is based on the Genesis starter theme. Lack of in-house developers and time constraints, it made sense to take this approach rather than creating a custom theme from scratch.

Another aspect of the build was using the WP Bakery WISYWIG page editor to build the page layouts. This plugin was new to me, but allows you to layout pages really easily once you get the hang of how it works.

Custom HTML was created by using a blank HTML doc that linked to the Genesis core stylesheet. These layouts were tested locally before being embedded into the WP Bakery page builder 'Raw HTML' widget.

Stage 4

Site build

Site map

Stage 4

Site build

Icon grid diagram

Stage 4

Site build

Icon grid diagram

Mobile

Most mobile page re-flows are implemented by the Genesis theme or WP Bakery. Where custom HTML and CSS was used to create custom layouts, a media query wrappers using the same breakpoints as the Genesis starter theme were used. Other minor changes were made to the main navigation 'call to action' button to fix small layout issues as well as custom branded social media menu in the footer.

Icon grid diagram
Icon grid diagram
Icon grid diagram
Icon grid diagram

Various screens mobile view

Istock Illustrations

The hand drawn illustrations were sourced from iStock and re-coloured with the brand colours by a colleague. These types of stock illustrations sell for around £5.00 per file and are often used to bring a digital product to life.

Icon grid diagram
Icon grid diagram
Icon grid diagram

Illustrations from iStock

Brand Resources Page

The final stage of the project was creating a simple on-line style guide or brand resources page that allowed stakeholders and third parties quick access to assets such as logos and colour palettes. This helps ensure the brand is applied consistently across plaforms.

iphone mockup showing brand resources webpage
iphone mockup showing brand resources webpage
iphone mockup showing brand resources webpage

Brand resources webpage