Date: 4 September 2014View the Style Guide
When I was hired, eLocal had no brand guidelines to speak of. So I made it my mission to translate five years’ backlog of inconsistent and incoherent design into a simple, flexible set of visual elements outlined in a living style guide. As a part of the process, I also gave their logo a much-needed refresh to match the clean new look and feel.
I kicked off the project with a logo exploration. eLocal’s owners liked their old logo, but the level of detail made it looked dated, and the odd shape was difficult to use in many applications. I thought through a lot of concepts centering on the "local" concept, but in the end, the simplest version was chosen.
The style guide defined the rules of front-end code as well as the visual design; annotations within each section referenced corresponding stylesheets with a hierarchy of representational class names.
I designed this map illustration to be a vertical tile, so it could be used as a seamless background for any length of page.
I created a set of custom icons to blend seamlessly with and use alongside Font Awesome icons.
Small details like the custom chunky, bright blue checkmarks on eLocal's forms elevated the look of the website, and also improved readability.
The style guide and new logo in use on a proposed homepage refresh:
See the entire style guide here.