From Misalignment to Readability
The earlier model of the Obys web site was created in 2019. We had plans to replace it earlier, however over time it changed into a quieter, ongoing course of, understanding who we’re at this time, how we see ourselves, and the place we’re going.
Sooner or later, it turned clear that each the visible id and the web site not felt exact. They didn’t mirror the extent we function on, the kind of tasks we tackle, or the shoppers we collaborate with at this time. The work had advanced, however the way in which we offered it had not.
Through the years, we gained expertise, labored with shoppers we as soon as may solely think about, and acquired recognition from the trade. Extra importantly, we developed a a lot clearer understanding of our personal strategy. The earlier model began to really feel barely disconnected from that readability. What we would have liked was not simply an replace, however a extra correct articulation – a visible language that displays what Obys is now.
From Id to Interplay
The brand new Obys is rooted in a extra modernist, clear strategy – one which displays each our background in graphic design and our present understanding of what feels proper. Apparently, we didn’t begin with the web site. We began with the typeface.
We developed our personal customized font, OTF Obys NG – a neo-grotesque designed to perform each as a textual content and show typeface. We see it as a dwelling system, one thing that may evolve over time and outline the rhythm, spacing, and hierarchy throughout all the id.
From there, we refined the emblem, protecting continuity with the unique image whereas growing it additional. This led to a central thought: Obys as a “area” – a construction that accommodates tasks, concepts, and completely different states of the identical system. On the web site, this concept is translated by movement. The brand turns into a relentless aspect that interacts with content material and stays current throughout completely different layouts – vertical, horizontal, and grid. It doesn’t simply symbolize the model; it turns into a part of the interface.
One of many key moments occurs proper at the start. You enter by the outdated brand on a darkish background, which regularly transforms into the brand new one and right into a white setting. This transformation continues throughout all the website. The brand acts as a steady level inside this technique. It stays with you as you progress between layouts, open tasks, or navigate to the About web page. It shifts barely, adapts to context, however stays current, quietly defining the expertise.
The Hardest Half Wasn’t the Design
Apparently, the id itself wasn’t essentially the most iterative a part of the method. Nor was the typeface.
The actual problem, nevertheless, was defining our personal imaginative and prescient. Over a number of years, we stored questioning the identical issues: how daring or restrained the outcome ought to be, how a lot movement is sufficient, what stage of expression really feels proper. It wasn’t a single resolution, however a gradual alignment – a strategy of eradicating uncertainty relatively than including concepts. Most of the constraints on this challenge have been self-defined. We seemed carefully at who we wished to work with, what sort of shoppers we wished to draw, and what sort of tasks we wished to concentrate on. These choices naturally formed the boundaries of the system.
For the primary time, we developed a self-initiated challenge in collaboration with an exterior developer. It was a special course of, and a beneficial one. The outcome displays that. More often than not went into refining particulars throughout growth, particularly movement and micro-interactions. Reaching a sense that seems easy and easy required fixed changes. Small adjustments in timing, spacing, and habits made a major distinction, and people particulars took the longest to resolve.
What We Selected to Pass over
This model of the web site is deliberately a microsite. It really works as a targeted presentation of our work and as a transition between the earlier and the brand new Obys. Due to that, quite a lot of issues have been intentionally omitted – awards, archives, prolonged content material, inner particulars.
We didn’t wish to overload it. All of that belongs to a bigger model of the web site we’re planning for the long run. The construction is stored easy. The main focus is on tasks – a curated choice constructed round key visuals. There may be minimal extra details about the studio. All the pieces important is already seen.
Movement as a Method to Perceive
Movement performs a central function. From the very first second, the person encounters a change – from the outdated brand to the brand new one, from darkish to gentle. It units the tone for all the pieces that follows.
From there, movement turns into a part of the system. It connects layouts, guides transitions between pages, and helps interplay with content material.
It’s not ornamental. It helps clarify the thought and retains the expertise constant throughout the positioning.
Constructed as a System
The web site was constructed from scratch utilizing a customized codebase, with out counting on client-side frameworks. It’s powered by Bun.js, used each as an HTTP server and a bundler. React is used purely as a server-side templating layer, protecting the output clear and managed. All interactions – animations, digital scroll, SPA routing, and web page transitions – are dealt with in TypeScript.
Movement is pushed by an in-house animation system primarily based on requestAnimationFrame and the Internet Animations API, permitting exact management over timing and habits. Some visible parts are rendered utilizing native WebGL.
Content material is managed by Strapi, whereas styling is stored minimal and direct with plain CSS.
This model of the web site is just not the ultimate type of Obys.
It’s a second in between – a targeted presentation of the place we at the moment are and the way we see ourselves at this time. A microsite that captures the shift, relatively than making an attempt to elucidate all the pieces without delay.
It allowed us to articulate the up to date id, take a look at concepts, and make the system seen in its most important kind. The remainder will comply with.
