Have you ever ever come throughout a tattoo studio web site designed with the similar stage of consideration and complexity as a design studio, growth company, or different artistic industries? In all probability not, as a result of the tattoo trade not often prioritizes the digital area. Most tattoo-related web sites are typically easy, three-page portfolio websites for particular person artists.
We thought, why not borrow the size, interactivity, and structured storytelling from different industries and apply it to the tattoo world? This led to the creation of the Monolith web site — that brings collectively outstanding tattoo artists, every with their very own portfolio throughout the web site. However the purpose of the web site doesn’t finish there.
Bringing Tattoos into the Digital Period
On the conceptual stage, we knew {that a} 3D interactive expertise could be on the core, greeting the consumer from the very first seconds. The concept was to show that the tattoo trade isn’t lagging behind. Tattoos will be simply as digital as some other trade that has reworked or is within the means of transformation.
However the objectives didn’t cease there. The subsequent problem was discovering a strategy to showcase every artist’s portfolio with out counting on infinite scrolling on their particular person pages. Moreover, we aimed to create one thing akin to a data library, crammed with articles devoted to tattoo tradition and artwork.
Fundamental Visible Idea
Primarily based on the identify, one would possibly suppose that the visible idea got here to us instantly. However that wasn’t fairly the case. Initially, we thought of statues, which felt like an ideal match for the tattoo trade and its aesthetic.
Nonetheless, after a number of discussions with Okan and Oscar, we realized that the perfect and most intriguing visible idea was hidden within the identify itself — Monolith — as ironic as which will appear.
Modeling and Design
3D graphics work completely with black or some other darkish background. Through the use of further shadows, you’ll be able to create depth and provides the impression of the thing being embedded throughout the background of the web page. The other occurs when utilizing a white background mixed with a shadowed object. Conventional lighting setups like soft-boxes (primary lights in 3D packages) or spotlights don’t match this state of affairs.
Essentially the most putting and fascinating method turned out to be utilizing sharp, well-defined shadow strains, which assist obtain a seamless reference to the background. These strains emphasize the thing with out disrupting the general design aesthetic. The location is additional complemented by daring typography, clear strains, and a deal with a structured grid.
3D Scene and the Further World
The 3D scene serves as greater than only a visible component—it creates a complete immersive world. It extends past the floor of the web site, permitting customers to expertise a deeper reference to the content material. This world provides layers of storytelling and complexity, making the web site not only a portfolio however an interactive journey.
The problem was to create a mirrored image on the Monolith that encompassed every little thing surrounding it. We spent over per week perfecting this impact, and we’re completely glad with the outcome. Following that was the rendering stage and adapting the graphics for the net. We would have liked to cut back the variety of frames and file sizes barely.
Digicam Management
We thought of 3 ways to maneuver the digicam. However probably the most satisfying a part of growth for me is testing it with content material, after which rendering the already built-in digicam into the motion itself. We did the identical on the primary web page. All actions have 30FPS, which permits for higher smoothness.
One of the essential elements is having a user-friendly administration system. An artist’s portfolio is actually a set of numerous works in varied codecs — photos, movies, information, and media. Every artist at Monolith Studio has a wealth of labor and expertise that we wished to spotlight, together with their private journey thus far. On this case, having a separate web site for every artist isn’t mandatory, because the studio’s web site covers this facet comprehensively.
The CMS system is designed primarily based on the kind of content material being uploaded. If a video is uploaded, an extra part with a nonetheless body is displayed. If there are information articles or different content material, we showcase additional sections. Some techniques characteristic a nested construction, the place one assortment is embedded inside one other, permitting for dynamic content material administration.
A further level is that the slider on the artist pages and the artist portfolios are barely completely different techniques. The slider on the primary artist web page showcases probably the most important works from varied angles, whereas the portfolio itself reveals the artworks in higher element and on a bigger scale.
Voice Playback of Articles
This characteristic was added out of curiosity. Okan was thinking about simplifying consumer interplay for many who desire to not learn massive quantities of knowledge and would relatively take heed to it within the background.
I used to be not sure if we may combine such performance, as I hadn’t had that have earlier than. Nonetheless, it turned out to be possible. Presently, this characteristic is obtainable solely on the desktop model, however we plan so as to add it to the cellular model by the top of the yr, pending a couple of checks.
Tattoo Requests and Profession
Submitting a tattoo request isn’t a easy job. That is primarily as a result of it requires quite a lot of enter. Purchasers want to decide on an artist, study all the small print, talk their needs, and interact in dialog. It’s additionally essential to notice that many purchasers journey to New York particularly for his or her dream tattoo and plan effectively upfront to e-book with a specific artist. Not like some other service, a tattoo stays with you for all times, so filling out a request kind ought to be taken significantly. Offering complete info from the shopper’s facet is an important step on this course of.
We needed to rigorously confirm all fields, take away pointless ones, and provides the consumer the chance to share every little thing wanted for a profitable session. All the preliminary info was gathered from the studio’s tattoo artists, who know precisely what they should perceive the shopper’s wishes. My position as a designer was to correctly set up and divide this info into entities to make sure clear understanding and clean communication. All varieties are built-in with MailChimp by way of Webhook to section audiences for additional e mail advertising and marketing and notifications.
From the workforce’s perspective, this enables us to filter and course of requests primarily based on the knowledge supplied. We are able to decide the place the request comes from a critical shopper who is targeted on getting a high-quality outcome, and the place the individual is not sure of what they need. This helps in organising calls and shifting on to the session particulars.
The method is sort of related with regards to profession functions. Artists are chosen primarily based on their portfolio and expertise. These with nice ambition could have the chance to turn out to be apprentices on the studio, studying from the perfect masters in New York and the worldwide tattoo trade.
Conclusion
Profitable collaboration solely occurs when everybody concerned is on the identical web page. When every particular person strives for the good thing about the mission, the result’s an unbelievable synergy. I’m deeply grateful to all the workforce for his or her belief and dedication. Collectively, we achieved our objectives. Two weeks after the launch, the web site had already reached round 100,000 guests. The mission additionally earned a number of awards, together with Web site of the Day from Awwwards, FWA, CSS Design Awards, and others.
Our collaboration doesn’t finish right here. We’ve got plan to proceed including new options, pages, and extra tasks throughout the Monolith Studio. The complete design presentation is obtainable on Behance. It’s also possible to discover hyperlinks to the workforce members and extra nominations there.
