Orange Sound Studio - UI

A full multi-page website built for Orange Sound Studio, a professional audio production studio offering podcast recording, music production, mix & mastering, voiceover direction, and sound design — engineered with Next.js 16 and React 19, and fully trilingual in Turkish, English, and Russian.

Services

• Next.js Development
• Trilingual (TR/EN/RU)
• Podcast & Audio Industry
• Performance

Concept work.

Overview

A seven-page website for Orange Sound Studio, built on top of its brand identity and published in Turkish, English and Russian. It brings everything from podcast recording to mix & mastering into an interface that explains sound before you ever press play.

The Challenge

What a sound studio sells can be heard, but not seen. Most visitors land on the site from a phone, without headphones, for a minute or two — and the decision they need to make is how their recording, mix or podcast episode will sound in this studio. Instead of trying to prove audio quality with photos, the site had to show the process, the scope of each service and the files you actually walk away with.

The second challenge was breadth. Podcast production, music recording, mix & mastering, voiceover, sound design, audiobooks and ad jingles speak to very different people: a team publishing a weekly podcast doesn't ask the same questions as an independent musician recording an EP. Squeezing all of that into one long page would make it harder for everyone to find what they came for.

And the site had to work in three languages. For the Russian and English versions not to read like an afterthought, language support had to be built into the structure of every page from day one.

Our Approach

We started by separating the structure. Home, services, projects, references, about, blog and contact became seven distinct pages, so every need has its own address. On the first screen of the homepage, visitors can tick the services they're interested in — podcasts, music recording, voiceover, mix & mastering, audiobooks, ad jingles, sound design — and go straight to “Hizmet Al” (get a quote). The services page works as a numbered accordion: open a heading and you get a short description, tags for each sub-service and a link to the details.

To make sound visible, we told the process. The “end-to-end audio production” section lines up recording, mix, mastering, sound design, voiceover and distribution in a single flow, next to a playable recording card. Another section stages a download card listing the separate stems delivered after a session, in 24-bit/96 kHz WAV and AIFF. “Studio quality” stops being an abstract claim and turns into a concrete deliverable.

The visual language comes straight from the brand identity. Dark, photographic hero areas alternate with light content sections; orange is reserved for actions and highlights, while the pinwheel mark sits in the background as an oversized watermark. Headings carry the identity's rounded display typeface. The portfolio can be filtered by type (podcast, music, voiceover, sound design) and the blog by category, with a date and reading time on every post.

Under the hood, the site is built with Next.js 16, React 19 and Tailwind CSS. Turkish, English and Russian copy is managed from a single translation layer, and the language switcher sits in the top navigation of every page.

Results

• A seven-page website published in Turkish, English and Russian.
• A service picker and a “Hizmet Al” call to action on the homepage, letting visitors mark what they need from the first screen.
• An accordion-based service catalogue that breaks each service down into its sub-services.
• A process section, a playable recording card and a stems download card that turn the studio's workflow into something you can see.
• A portfolio filterable by type and a categorized blog, carrying the identity's color, mark and typography into interface components.

• 3 Languages
• 7 Dedicated Pages
• 6+ Services Covered

Visit the live site