Cosimo Ventures
Context
Website with a perfect balance between information and user experience
COSIMO is a pioneer of blockchain finance. Soon After launching COSIMO X, the world's first tokenized evergreen venture fund they expanded with offering subsequent services spanning advisory, custody, broker-dealer services, blockchain and Web3 development. To showcase this plethora of content — including product descriptions, infrastructure information, a news hub, blogs, and podcasts — we were asked to craft a perfect balance between information density and user experience.
In technological innovation a few moments are as pivotal as the emergence of blockchain. With a rich history of over 8 years, COSIMO Digital was ready to evolve into a multi-faceted digital asset management firm on and off the blockchain and with a precisely crafted online home showcasing COSIMO’s future-proof ethos, it's now ready to make a noticeable impact too.
client:
location:
sector:
year:
timing:
Cosimo
Boston, USA
Finance
2024
2 months
CREATION PROCESS
CREATIVE CONCEPT
In the Renaissance, art was a visual language that spoke to the soul. Similarly, our creative concept for COSIMO digital offers a striking visual narrative, combining 3D elements with glitch effects to present the fusion of traditional banking with contemporary technologies. This approach serves as a parallel between the Renaissance's artistic innovations and the potential of blockchain and Web3.
A New Era of Finance
Just as Cosimo de' Medici, the visionary patriarch of the Medici family, sparked a banking revolution that transformed the financial landscape, COSIMO digital is poised to disrupt the status quo with its innovative approach to blockchain technologies.
By bridging the past with the present, we've created a digital experience that reflects COSIMO digital's pioneering spirit and also inspires a new era of banking revolution.
Amplifying Clarity with clean wireframes
Wireframes are more than just a common practice of web development. By visualizing each page structure, our client gained a clear framework for organizing content topics. This foundational approach guarantees a stronger final website, where form and function delight both our client and their audience.
cosimo
cosimo
cosimo
3D Sculpture Renaissance Era Would be Proud of
Our homepage sets a new standard, driven by a strong vision from the creative concept. A show-stopping, 3D rendition of Michelangelo's iconic David sculpture dominates the layout, seamlessly integrating from top to bottom.
The sculpture piece is Carefully animated accompanying the audience as they scroll through the page to its end. A 3D model is fused in with custom-made textures and ambient light, making it a true dominant of the Cosimo’s site.
Tailored design process
We managed to navigate the fine line between creative freedom and strategic direction by adapting to the specific needs of Cosimo’s project. Limited text and visual assets needed a high level of flexibility. Our revised design process helped the client and led to seamless approvals. As a standard, the entire design is also optimized for mobile.
Renaissance
Fusion
Behind the Scenes
Perfectly Optimized 3D assets
There are two 3D objects in total on the final site. One is located as a main element stemming from the creative vision. The other can be found on the sub-page of about section, the history of the company.
Both assets are precisely made from the technical standpoint. All 3D elements are high-performing thanks to the cautious implementation process.
How we did it? We simplified the Blender model to reduce the triangle count, and compressed the textures without compromising quality, Draco compression was applied to further optimize the model, all to improve load speed. The entire bundle — model and textures — is under 2 MB.
Regarding the lighting a basic screen setup with four lights was a starting point, which the designer later fine-tuned to ensure the final scene looked as polished as possible. The texture itself is carefully hand-painted and shaded to maximize realism and depth.
We also used a roughness map to determine the matte or glossy finish of different areas of the texture, based on light and dark values. This approach allowed us to apply the effect selectively, enhancing specific parts of the model.
To animate the 3D The key frames were first created in Blender, while on the front-end motion was executed using GSAP following the guidelines of blender prep animation. Result is precise timing, easing, and coordination with specific page locations.
Performant tech stack
The entire site is statically generated using Astro. The backbone in Astro is enhanced with pieces of react code that allow more complex functionality which couldn’t be possible without it, Website’s CMS is Directus, thanks to its user-friendly interface and ability to fully customize the structure of the CMS data the final product keeps in mind both, the audience with one-of-kind front-end experience, and the client’s content creators on the other.
Custom Icons with clever animations
A design finesse are the custom made icons which are also animated in rive. These small elements come to life when the visitor hovers over a card. an unexpected interactivity and a small detail that makes difference in the user’s experience.
