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.