Building the Design System
Scribing the laws of brand consistency
Would anyone in the community, including ourselves, be able to recognize our products without the logo on it? After the stage of exploring the brand, not a chance.
MLH continued to produce more sub brands, first party events, and printed products for advertisement. With this growth, it was time to build consistency. The goal was to reduce the mix of content creation, maintain my sanity, and cease the process of reinventing the wheel all the time. Being the only designer at MLH, I had to train my team to be designers and let the system work for me.
Clarifying the Identity
To build name recognition and identity, it was now time to scribe the almighty style guide. MLH needed to play around with its colors and display font. I went back to analyze and unpack its color attributes, size restrictions for print and digital products, use of typography, etc.
Once these were set, I had to make sure our physical presence was just as punctual. We fully embraced the characteristics of being simple, approachable, and quirky.
Working with Sponsors
Having a system ensures that our sponsors respect our branding. If you don’t have rules set they will bully you in how they want to be advertised. Making it clear that we were partnering with our sponsors rather than working for them is very important to MLH. This is one of the key factors of staying genuine amongst the hacker community.
The product team raised a good question, “If a user visited the different portals, would he or she know they came from the same brand?” Prior to the system, absolutely not. We transferred all the colors and typography rules to be SASS variables in our boilerplate templates. I had to make sure our audience and my team recognize the frequently used visual cues in button colors and typography. Building it with Gulp and Jekyll was ideal compared to other builders and templates. The learning curve is very low in which some of our team members can easily collaborate and edit the portals whenever they need to.
Sponsors had logo size restrictions. Their logos needed to be placed on certain background colors. Sponsor logos were also integrated in display logo designs so aspect ratios for them had to be much larger and precise. Imaginary shapes surrounding display logos were squares and rectangular not circular.
Due to print cost for apparel, decals could only be one color. With that I keep in mind the details that are required to make the design recognizable on a shirt.
Turn around time for design projects is a big one. They were always quick at MLH. Not enough time for details. Even though deadlines deadlines were now adhered to, prepared templates reduced creativity.
The room for creativity diminished little by little especially now at this stage my creative palette was in template form.