Northprim 2.0
Our project of the year - Square43 goes 3D
What we've done
Mission
Rebrand, redevelop, reimagine. Northprim is our trusted partner whose business shifted towards AI-centered services and was hence in need of a complete makeover. This rebranding mission was particularly challenging due to a very specific request: the home page of the website needed to include elaborate 3D elements – though we’ve been following all related trends, creating a 3D-heavy website from scratch was a proper challenge, but a welcome one.
Solution
A new company image altogether. Northprim is now adorned with a new, abstract theme and colors that perfectly reflect the limitless possibilities of their new set of services. Their new website is the ultimate informative hub that is both useful for their future clients and a promotional asset in itself!
Brand Identity
The key ingredient in this branding rebuild was Artificial Intelligence and its role in complete optimization of business processes. In our search for the story behind the brand, we delved deeper into the evolution of the human effort towards advancement. That is how we reached the ultimate common denominator of all phases of evolution: Change.
Depicting Change as a concept was not an easy task, so several brainstorming sessions ensued. We decided to focus on the phases of significant changes technology has undergone.
Deep Violet
#27006D
Lavender Indigo
#8846FD
Medium Slate Blue
#7A7AFE
UFO Green
#1DD57D
Begonia
#FF6E7C
Lavender Rose
#FFA3E4
Mauve
#E09FFF
Minion Yellow
#F2D94C
3D Elements
This aspect of Northprim's transformation entailed more than entertaining 3D elements - our Studio developed a brand new concept of rooms in 3D space that users could scroll through and truly immerse themselves in the vision and understand the story behind the brand.
No element is random, nor a coincidence. Each represents a piece of the story, fragmented throughout the rooms and left for the user to decypher.
At the very beginning of this creative process, before moving to 3D modeling, we set off on a quest for inspiration. The essence of the brand lies in the words change and evolution, so the 3D narrative needed to follow suit. Each 3D room was to represent a different stage in the evolution of both human existence and discovery: from the Big Bang and the industrial revolution, to the concept of Artificial Intelligence and its abstract, limitless possibilities. Eventually, an entire story board was developed and we embarked on a journey of actual production.
Even the choice of materials was planned carefully, dominated by glassy, crystalline and transparent textures that added to the abstract, futuristic atmosphere of the website.
Web Design
New color palette, new logo, totally new look and feel.
In terms of typography, we opted for a more futuristic look, with sharp edges and elegant feel.
The color palette became very light, predominantly pastel, all of which contributed significantly to a very spacious and light feel of the website. Additionally, we included various 3D elements with dozens of microinteractions that truly transport the user into a 0 gravity look and feel.
Web Development
This was our Studio's very first encounter with building a 3D section on a website from scratch.
To create the custom 3D elements for the website, our team utilized industry-leading 3D modeling software - Blender. This powerful tool allowed us to craft intricate models, apply realistic textures, and configure complex animations. Each 3D asset was meticulously designed to ensure that it not only looked stunning but also performed well on the web, without overwhelming the loading time and overall performance.
The real magic happened when we integrated these 3D elements into the website using Three.js. Three.js is a cross-browser JavaScript library and API used to create and display animated 3D computer graphics in a web browser. It simplifies the process of incorporating 3D models, making it accessible even for projects that require high levels of interactivity and realism.
Next project
Glasstic
Transparency itself: a promise of safety and practicality voiced by design
