Chaos Reloaded Labs

BRANDING & UI DESIGN

THE CHALLENGE

I collaborated with Chaos Reloaded Labs to help them define a visual style. We created a brand system that captured Chaos Reloaded Labs' core essence: to create organization in chaos. The mission of Chaos Reloaded Labs is to reduce complexity and to provide a delightful and meaningful experience without compromising on functionality. The implicit motion of the mark hints at forward movement, while its minimalism signifies organization. The resulting experience indicates simplicity, professionalism and trustworthiness.

The new brand system leverages a bright and bold color palette as well as a strong mark. The emphasis on creativity, simplicity and functionality is apparent in the pattern, colors and logotype.

chaos demo
"Invention, it must be humbly admitted, does not consist in creating out of void but out of chaos." - Mary Shelley

Early sketches of the Chaos Reloaded Labs logo explored different ways to showcase the core principles of lightness, professionalism, organization, and minimalism.

Chaos Sketches

THE MARK

The idea of the mark originated from an oragami shape, since it can be folded, organized and stacked. The early ideas for the logo depicted the concept of creating organization in chaos. Concepts of stacking, sorting, cleaning, organization, aligning, combining, and shaping are explored in these initial concepts.

The mark uses a repeating theme and a combination of sharp edges and a rounded body. The result is an elegant mark that works well at different sizes.

I started with sketching ideas related to the themes of organization, stacking and sorting and then narrowed down the options to three key ideas that had the strongest representation. I then mock up about 15 of the ideas in grayscale, since by this point I haven't determined the color palette and don't want to get caught up in assigning colors to the mark.

Chaos Chaos logo ideas

I review the three marks and consider if they are aligned to the core themes. Sometimes I view the mark using a squint test to see if the shapes are clear.

  1. Strength
  2. Mobility
  3. Organization
Choas ideas

Modifications to the stems of the letters on the “h”, “l”, “d” and “b” to show more contrast. Decreasing the space between the letters makes the logo more dense and sturdy.

logo
logo

A. This version alternates the bold lettering for a softer look and for less contrast between words.

B. This lockup uses a stronger initial approach with the first word “Chaos” to add contrast and balance to the logotype.

C. In this version, the weight balance is maintained throughout the lockup for an even weight and strength.

D. The weight in the front draws the eye and is then softened by the lighter words at the end of the logotype.

Logo final

COLOR THEORY

The color palette is bold, energetic and contrasting and can be used across print, web and mobile. The secondary palette can be used for added contrast, illustrations or product offerings. The full lockup is set in their main azure blue plus a strong and legible type. The color palette uses a triadic color scheme, meaning that the colors are distributed evenly around the color wheel. When colors occupy opposite ends of the color spectrum, it causes the eye to consider a design visually appealing by establishing a happy medium. Rather than straining to accommodate for a particular area of the color spectrum, the eye is provided a balance.

The main colors are a triadic palette with supplementary colors for contrast, alerts and interactions.

color final color palette color secondary color emotion color map

TYPOGRAPHY

The use of type can be used to convey hierarchy, legibility and an emotional connection to the content. The upright stress, open forms and neutral, yet friendly appearance give this typeface a human and approachable feel. Open Sans is an ideal typeface because it works across different device sizes and is legible for print, web and mobile. It is neutral, adaptable and friendly. Open Sans is a neutral and approachable typeface. It is ideal for Choas Reloaded Labs, since it is optimized for print, web and mobile interfaces and has excellent legibility characteristics in its letterforms.

typography

THE PROTOTYPE

We took inspiration from various sources within a similar space. Patterns of light and bright photographs, bold headers, larger glass buttons, long scrolling home pages, product imagery and sticky headers are common throughout these websites. While we used various resources for inspiration and wanted to follow a similar look and feel, we have expanded on these elements and added a unifying theme of vibrancy and pattern to set Chaos Labs apart.

Chaos Reloaded Labs create software that helps people streamline their development process. It is functional, easy to use and delightful for its customers. The brand identity reflects its commitment to providing an enjoyable and top-notch product.

chaos mocks chaos full chaos illustrations