Brand Book

Website design, Frontend Implementation (SLIM), Responsive Design (MATERIALIZECSS), Design Systems, GIT

Small Brand Book (Design System) to maintain consistency of brand accross different media and platforms.

IDEA AND DISCOVERY.

This Brand Book was originally created for Software Criollo. The software consultancy grew to be more than 20 people working full time remotely.

As the design lead of the team it became a challenge to maintain consistency accross all platforms, media and team members. At the same time it was the latest release of the Materialize CSS Framework. A CSS Framework that based all its design aspects on the latest Google Material Design.

I really wanted to practice my CSS skills with the framework and we also needed an online piece I could share with all team members. I decided to create the Brand Book as a personal project.

USER INTERFACE DESIGN.

I wanted to break the website in the different sections I considered were most important to maintain the brand's voice and tone (also the ones we were having the most challenge). These sections were: Color, Logo, Fonts, Actionable, Files, Advertising, Background and Values.

I based all design aspects on the Materialize CSS framework components. I created some iconography for the menu items. Used all colors from the Software Criollo brand. I used Roboto as the main font as it is the main font for Material design. I thought it worked perfectly as it is modern, elegrant has different weights and super easy to read.

IMPLEMENTATION.

This project was implemented in a Sinatra app using SLIM and CSS. MaterializeCSS was the CSS framework.

The Brand Book was a success for the team and the brand. I was able to guarantee consistency in all media moving forward and was no longer responsible for sending the same files to all team members and resending them everytime something was updated.

The Brand Book served as an inspiration to other Design Systems we created for clients later on.