Cart 0

Swiss Gothic

Visual Language + Design System

DivineEye_DesignSystem_Hero_02.jpg

Swiss Gothic is a visual language and design system I created for the Genesis Eye. The Genesis Eye is a project to accelerate and build the Lootverse. In order to do so, it was imperative that all points of contact were both visually compelling and consistent for maximum credibility and impact.

 

The following case study shows the step-by-step development of a concept-based theme meant to establish a lockstep pipeline for all visual design within the Divine ecosystem.

 
 
 

MY ROLES

Project Leadership
Visual Development
UI Design


 Character & Tone

 

Swiss Gothic

Swiss Gothic combines pointed archways, criss cross patterns and vertical shapes with stark surfaces, high detail embellishments, and generous white space. Visually stimulating with lore symbolism embedded within the architecture.

 
 

 Basic Geometry

 
 
 
 

 Geometric Combinations

 
 
 
 

Typography

 
 
 
 
 
 
 

The overlaid white shapes on the text here are actual shapes pulled directly from the geometric combinations above. The forms in Roslindale matched almost 1:1 with these forms making it a great fit for the overall vibe.

 

UI Shape Language

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Backgrounds

 
 
 
 
 
 
 
 
 
 

Dividers & Accents

 
 
 
 

Project Kickoff

 

The Project Foundation

At the beginning of the project we did a kickoff workshop to determine the overall vibe. After stakeholder post-it sessions determining the target audience, KPIs, and why the project should happen, we explored moodboards and opposing pairs of attributes that could inform the visual language. After this workshop we now had the What, Why, and Aesthetic verbally defined.

What is the goal of this project?
A library hub for decentralized media.

Why are we doing this?
To help jumpstart the Lootverse and create avenues for original IP development.

What should the aesthetic be?
A vibrant, geometric yet organic, minimal yet intricate, artistic, light yet dark, sci-fi yet fantasy, masculine yet feminine, realistic and serious look and feel. Obviously the aesthetic had a lot of work to do before it became actionable.

 
 

Finding the Right Aesthetic

 

Stream-of-Consciousness Form Sketches

To get my mind around the aesthetic problem, I did a series of stream-of-consciousness concept sketches (the remainder of these are located in the Divine City section. This helped to establsh visual patterns that informed the overall look and feel.

 
 
 
 

I then arranged the various motifs into 3 defined concept categories:

1) Swiss Futurist
2) Intricate Gothic
3) Clean Roman

Each concept category had a basic geometry that defined the overall feel of the UI fonts, shapes, and patterns. I tried to manifest these shapes and patterns within a sample UI shape language that could be applied everywhere from web and social to game and HUD UI.

 

Initial Presentation

 

Concept Categories

The form sketches directly informed the three UI shape language concepts. Fonts, elements, and object groupings were taken right from the sketches and interpreted into mock UI.

 
 
 
 

At this point, the team was torn. They enjoyed parts of each concept category and couldn’t decide where they wanted to go. Another round of synthesis was needed to make rubber meet the road. I brought the most interesting elements together and refined them to create the new and final category called Swiss Gothic, shown at the top of this page.