pwshub.com

Case Study: Monolith Studio

Monolith Studio website. Case Study article.

Have you ever come across a tattoo studio website designed with the same level of attention and complexity as a design studio, development agency, or other creative industries? Probably not, because the tattoo industry rarely prioritizes the digital space. Most tattoo-related websites tend to be simple, three-page portfolio sites for individual artists.

We thought, why not borrow the scale, interactivity, and structured storytelling from other industries and apply it to the tattoo world? This led to the creation of the Monolith website — that brings together prominent tattoo artists, each with their own portfolio within the site. But the goal of the website doesn’t end there.

Monolith Studio (Website Overview)

Bringing Tattoos into the Digital Era

At the conceptual stage, we knew that a 3D interactive experience would be at the core, greeting the user from the very first seconds. The idea was to demonstrate that the tattoo industry is not lagging behind. Tattoos can be just as digital as any other industry that has transformed or is in the process of transformation.

But the goals didn’t stop there. The next challenge was finding a way to showcase each artist’s portfolio without relying on endless scrolling on their individual pages. Additionally, we aimed to create something akin to a knowledge library, filled with articles dedicated to tattoo culture and art.

Artists

Main Visual Concept

Based on the name, one might think that the visual concept came to us immediately. But that wasn’t quite the case. Initially, we considered statues, which felt like a perfect fit for the tattoo industry and its aesthetic.

However, after several discussions with Okan and Oscar, we realized that the best and most intriguing visual concept was hidden in the name itself — Monolith — as ironic as that may seem.

Monolith Studio (Studio’s Main Visual)

Modeling and Design

3D graphics work perfectly with black or any other dark background. By using additional shadows, you can create depth and give the impression of the object being embedded within the background of the page. The opposite happens when using a white background combined with a shadowed object. Traditional lighting setups like soft-boxes (basic lights in 3D programs) or spotlights don’t fit this scenario.

The most striking and captivating approach turned out to be using sharp, well-defined shadow lines, which help achieve a seamless connection with the background. These lines emphasize the object without disrupting the overall design aesthetic. The site is further complemented by bold typography, clean lines, and a focus on a structured grid.

Home

3D Scene and the Additional World

The 3D scene serves as more than just a visual element—it creates an entire immersive world. It extends beyond the surface of the website, allowing users to experience a deeper connection with the content. This world adds layers of storytelling and complexity, making the website not just a portfolio but an interactive journey.

Studio

The challenge was to create a reflection on the Monolith that encompassed everything surrounding it. We spent over a week perfecting this effect, and we are absolutely satisfied with the result. Following that was the rendering stage and adapting the graphics for the web. We needed to reduce the number of frames and file sizes slightly.

Camera Control

We considered three ways to move the camera. But the most enjoyable part of development for me is testing it with content, and then rendering the already built-in camera into the movement itself. We did the same on the main page. All movements have 30FPS, which allows for greater smoothness.

Artist Pages

One of the most important aspects is having a user-friendly management system. An artist’s portfolio is essentially a collection of diverse works in various formats — images, videos, news, and media. Each artist at Monolith Studio has a wealth of work and experience that we wanted to highlight, along with their personal journey to this point. In this case, having a separate website for each artist isn’t necessary, as the studio’s site covers this aspect comprehensively.

The CMS system is designed based on the type of content being uploaded. If a video is uploaded, an additional section with a still frame is displayed. If there are news articles or other content, we showcase extra sections. Some systems feature a nested structure, where one collection is embedded within another, allowing for dynamic content management.

Tattoo Artist (Portfolio)

An additional point is that the slider on the artist pages and the artist portfolios are slightly different systems. The slider on the main artist page showcases the most essential works from various angles, while the portfolio itself reveals the artworks in greater detail and on a larger scale.

Voice Playback of Articles

This feature was added out of curiosity. Okan was interested in simplifying user interaction for those who prefer not to read large amounts of information and would rather listen to it in the background.

I was unsure if we could integrate such functionality, as I hadn’t had that experience before. However, it turned out to be feasible. Currently, this feature is available only on the desktop version, but we plan to add it to the mobile version by the end of the year, pending a few tests.

Article
Blog

Tattoo Requests and Career

Submitting a tattoo request is not a simple task. This is mainly because it requires a great deal of input. Clients need to choose an artist, learn all the details, communicate their wishes, and engage in conversation. It’s also important to note that many clients travel to New York specifically for their dream tattoo and plan well in advance to book with a particular artist. Unlike any other service, a tattoo stays with you for life, so filling out a request form should be taken seriously. Providing comprehensive information from the client’s side is a crucial step in this process.

Book Experience

We had to carefully verify all fields, remove unnecessary ones, and give the user the opportunity to share everything needed for a successful session. All of the initial information was gathered from the studio’s tattoo artists, who know exactly what they need to understand the client’s desires. My role as a designer was to properly organize and divide this information into entities to ensure clear understanding and smooth communication. All forms are integrated with MailChimp via Webhook to segment audiences for further email marketing and notifications.

From the team’s perspective, this allows us to filter and process requests based on the information provided. We can determine where the request comes from a serious client who is focused on getting a high-quality result, and where the person is unsure of what they want. This helps in setting up calls and moving on to the session details.

The process is quite similar when it comes to career applications. Artists are selected based on their portfolio and experience. Those with great ambition may have the opportunity to become apprentices at the studio, learning from the best masters in New York and the global tattoo industry.

Conclusion

Successful collaboration only happens when everyone involved is on the same page. When each individual strives for the benefit of the project, the result is an incredible synergy. I am deeply grateful to the entire team for their trust and dedication. Together, we achieved our goals. Two weeks after the launch, the website had already reached around 100,000 visitors. The project also earned several awards, including Site of the Day from Awwwards, FWA, CSS Design Awards, and others.

Our collaboration doesn’t end here. We have plan to continue adding new features, pages, and additional projects within the Monolith Studio. The full design presentation is available on Behance. You can also find links to the team members and additional nominations there.

Source: tympanus.net

Related stories
1 month ago - Behind the scenes of one of Artemii Lebedev's projects: Armur, a portfolio website for the film industry, created for Alexandra Murgu.
1 month ago - During Mount Media's rebranding journey, its website became the ultimate stage for showcasing its "we know how to result" vibe. Here is a long story short about teamwork behind it.
2 weeks ago - Learn how Federico Pian built his 2024 portfolio using Nuxt, GSAP, and TresJs, with insights into design inspiration, animation techniques, and seamless page transitions.
1 week ago - Learn about the challenges and creative solutions that shaped Treize Grammes’ bold rebrand and interactive design.
5 days ago - Explore the dynamic collaboration between designer Sébastien Salord and the talented team at Incredibles Development Studio as they join forces to take Duten’s digital presence to the next level.
Other stories
40 minutes ago - From summarizing lengthy articles to providing detailed descriptions of images, AI models are becoming essential tools for developers. One such powerful tool is Claude, a state-of-the-art AI language model developed by Anthropic. Whether...
40 minutes ago - Earlier this year, I became really interested in learning about Astro, so I completely rebuilt my blog using it. The results have been amazing since then: I can easily handle automatic sitemap generation and SEO, and integrating other...
1 hour ago - Customer observation helps you understand their pain points, needs, user patterns, and in general what works for them versus what doesn't. The post What are the keys to customer observation? appeared first on LogRocket Blog.
1 hour ago - After almost 18 months of development, comprising thousands of commits from dozens of contributors, Svelte 5 is finally stable. It’s the most...
2 hours ago - In this article, I’ll walk you through the steps of connecting to your EC2 instance using MobaXterm with a .pem keypair file. Whether you're a beginner dipping your toes into the cloud or an experienced user looking for a quicker method,...