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.
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.
Final four shortlisted logos
Final ebridge logo
ebridge logo lockout
Final ebridge touch/favicon
ebridge touch/favicon lockout
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.
Various colour palettes were explored during the development process. After creating a series of comparative mood boards, blue was chosen 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.
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.
Icons were drawn on a 96 x 96 pixel grid with a 2 pixel wide stroke. The icons were designed 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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...
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.
Site map ( supplied )
Wire frames ( supplied )
Sketch mockups
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.
Site build
Site build
Site build
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.
Various screens mobile view
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.
Illustrations from iStock
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 platforms.
