Building a Brand from Scratch

Constructing a Design System from the Ground Up

Overview

The journey from project ideation to completion is a long, windy path. It takes developers on many twists and turns, and the project that is awaiting developers at the end looks very different than it used to. This visual evolution, from a fleeting thought to a full-fledged brand, is a crucial stage for a project to go through on its development journey. The design system is an invaluable tool that helps solidify branding while also serving as a reference for future developments to adhere to as a project grows.

My project is called No Dice. Before No Dice was an app on your phone, it was an idea in my head. In early development, I was mostly concerned with getting my ideas out of my head and onto the screen, but after creating several different documents, prototypes, and graphics, I felt the project was in desperate need of cohesion.

The Problem

As the sole member of the No Dice development team, I had no one else to sound off of when making design decisions. This ultimately led to a brand consisting of wildly differing typography, color palettes, and voices that only loosely connected with one another. The challenge was going go be to adapt the design elements and build off of what we had to create a brand. And once this brand was created, it needed to be harnessed and documents, in the form of a living design system.

The Solution

The first order of business was to create a logo that was befitting of a board game app. I thought of using a simple board game piece, but each piece I tested ended up reminded me of a specific game, like a knight from chess, a pawn from Sorry, or even a meeple, which is a popular piece across many games.

It seemed that using singular piece would end up being too recognizable, until I realized that there was a piece that was almost ubiquitous across all board games, the standard six-sided die. This revelation ultimately inspired the project’s name, and with a little extra flare, the logo was born.

As for typography, I wanted to keep it simple. Since this project was going to be a mobile app, I knew legibility would be key for users to have an easy time reading across different devices. This led me to selecting the san serif font Montserrat, and I felt that this typeface work nicely with the simplicity of the logo.

The final creative component of this style guide was the color palette. This part of development also stumped me, because I wanted the app to have a minimalist aesthetic while still have recognizable branding through colors. Since the logo already featured flames, I first experimented with warm colors like reds, oranges, and yellows.

While this iteration of the logo looked good, I felt it was a bit too on-the-nose and did not really reflect the personality of the brand I had envisioned in my mind. After trying a bunch of different options, I ultimately landed on the purple and green color seen in the final logo. These colors not only looked good, but I feel they also capture the magical, high fantasy themes that many board games are based around.

With the visual elements of the style guide complete, all that was left was creating a brand voice. Given the typography and minimalist look of the app, I knew this brand voice would not be anything outlandish, but rather a friendly, casual tone, like a friend explaining a game to you. The voice aims to be helpful without taking users too seriously.

Conclusion

The No Dice project has only been in development for a few months now, but there is already such a huge visual evolution from its early iterations to now. The brand style guide and design system were instrumental in creating the cohesive brand you see before you, and keeping the product and users at the center of the design choices was key to make sure that the brand was moving in the right direction, visually.

The design system also serves as standard for future developments. Although this is an individual project at the moment, any new developers that I might bring on in the future will be able to access this document and implement No Dice’s branding into their designs.