Northprim 2.0

Our project of the year - Square43 goes 3D

What we've done

arrow down icon

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!

Decorative background
Decorative backgroundDecorative backgroundDecorative objectDecorative object
Decorative object
Decorative object
Decorative object
Decorative object
Decorative objectDecorative object

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

Decorative objectDecorative object
Northprim MerchNorthprim MerchDecorative objectDecorative object
Decorative background
Decorative object
Decorative object

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.

Decorative object

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.

Decorative background

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 lay 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.

Decorative object
Cone objectIcosphere objectTriangles objectBowl object
Ball object

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.

Decorative object
Decorative object

Web Design

New color palette, new logo, totally new look and feel.

Decorative object
Decorative background

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.

Phone Mockup
Decorative objectDecorative objectDecorative object

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.

Decorative background
Decorative backgroundDecorative background

Result

A 180 rebrand of an IT company, attracting notable attention on the market

Live project
Arrow icon

Next project

Glasstic

Transparency itself: a promise of safety and practicality voiced by design

arrow icon