Dkton

Dominik Kostolnik is a film sound recordist and sound designer in Upper Austria. He records location sound on set, builds the sound design, and mixes the film, and the site's three services are exactly those three steps, Originalton, Sounddesign and Mischung. The clients are the Austrian national tourist board, TGW, Bernegger, the state government of Upper Austria, Innotech and KUKA, local companies and institutions, and most of the films come from production companies such as Forafilm, Lux & Zebra and Prime Concept, where he is the one responsible for sound.

A portfolio usually lets the pictures speak. The problem here is that the subject is invisible, since sound has no shape on a web page. The designer Barry Baris Dogan answers by bringing up what sound looks like in a studio, the things people who work with sound stare at all day, level meters, faders, dB readouts, waveforms. So the site starts with a gate, a black curtain holding only the name and a button reading Enter the experience, because a browser will not let a page make sound until the visitor has clicked. After that, sound is on by default. A riser brings in the first screen, the small six-bar meter in the navigation begins to jump, and one of seven ambient loops, with names like Liftoff, Weather, Train and Birds, starts playing in the background.

Below the first screen comes the introduction, eight lines of 64-pixel white italic capitals with four small 153 by 64 pixel clips embedded in the sentence as punctuation, all from films he worked on. Then the three services, each word with a band of colour, purple, red and amber, covering only part of the word, and a dB reading such as +1.9 or +0.3 at the band's right edge, three faders standing on the page. Then the Showreel, a pinned stage 3.4 screens long in which the seven capsules stretch into floor-to-ceiling slits as you scroll and the film shows through them, with sound. The projects come in two layers, three large cases with a video card and a column of credits each, then ten more in a list whose rows turn amber on hover while a preview clip follows the cursor. Last come four FAQs, a spread of Instagram photos from set, and the name in the footer at 182 pixels with Klicken & spielen underneath, click and play, because every click on it makes a note.

The site is in German and has no second language.

The skill lies in treating studio instruments as layout elements rather than decoration. The seven capsules on the first screen are real level meters. With sound on their heights follow the music, from around 100 pixels to more than 400, and with sound off they settle into identical flat ovals. The three service bands are drawn like the faders of a mixing desk, their length like a fader's travel, and the +0.3 at the right edge is set in 12-pixel monospace, a unit only the sound trade reads. The sound switch at the left of the navigation is itself a small six-bar meter.

Two typefaces split the work cleanly. GT Walsheim Condensed carries all the large type. Its Black Oblique, weight 900, sets the headings from 182 to 230 pixels in capitals with tracking pulled in to -3.84 pixels. The two lines of the first screen, AUS GESCHICHTEN and WERDEN KLANGWELTEN, are 230 pixels, the name on the gate, SHOWREEL and PROJEKTE are 192, and the project list and the introduction are 64. The 700 weight handles 32-pixel credits and 14-pixel navigation. Geist Mono at weight 300 takes everything else, 20-pixel paragraphs, 14-pixel notes, the bracketed section labels such as [ über mich ], the FAQ answers and the footer contacts. The display type shouts and the monospace keeps the record, like a sound report from set.

Colour is black ground, white type and one amber, rgb(255, 184, 0). The amber goes on section labels, the name on the gate, the current item in the navigation, the KONTAKT button, the titles of the three large cases and the list row under the cursor. Purple rgb(166, 126, 255) and red rgb(255, 67, 55) each appear in one place only, the first and second service bands, with amber on the third.

The layout is a single centred column, each section opened by a bracketed monospace label. The navigation is a black pill in the centre of the screen with the K mark in a square at its left end and four links, and the section you are in fills solid amber with black type. Hovering a link lights a ring around the pill's edge and drops a tooltip such as ZU DEN LEISTUNGEN beneath it. Buttons carry a short bracket at each corner like a viewfinder. The three large case cards are 1,363 pixels wide with a column of 32-pixel credits to their left, Produktion, Regie, Dop, Ton, Kunde, each with a small amber tag, so every case lists the whole crew and then puts his own name on the Ton line.

There is one image register, frames from films he worked on, in full colour with no desaturation or tint. The Instagram section is the exception, eight photographs from set scattered and overlapping, him with a boom pole, the edit suite, crew group shots, the only place on the site where he appears in person.

Take away the meters and faders and what remains is a tidy portfolio of large type on black with video cards. So the site's depth lies in that layer of instruments. It borrows the language of the mixing desk, and on a web page that is still rare.

Scrolling runs on Lenis, so a turn of the wheel eases into place frame by frame.

Entering happens in beats. Within 400ms of the click the riser starts, at 630ms the gate stops taking clicks and the page height opens from one screen to 14,476 pixels, at 1.5 seconds the gate begins to fade, at 1.8 seconds scrolling unlocks, at 2.2 seconds the gate is removed, and an ambient loop begins. A keyboard user's first Tab lands on Enter the experience, and Enter runs the same sequence.

The meters work like this. All sound passes through Howler, an AnalyserNode hangs on the master output with an fftSize of 2,048 and smoothing of 0.8, the spectrum is read every frame, and the readings are handed out by band to the meters around the page. When a reading crosses a threshold a note character floats up from the top of the meter, at most seven a second. With sound off the meters go idle and the capsules settle to one height.

The 3,213 pixels of the Showreel are a sticky stage. The film fills the stage and is cut by an SVG clipPath into the shape of the seven capsules. Scroll progress, smoothed with a smoothstep, drives the capsules' height from the flat ovals of the first screen to slits that run the full height, and the film shows through them with sound throughout. When the cursor enters the stage an amber SHOWREEL ANSEHEN label follows it, and a click opens a Vimeo lightbox in a shell of the site's own, a draggable progress bar and a close button, with Escape closing it too.

Hovering a row in the project list does three things at once. The row turns amber, the title goes from grey to black, and a 360-pixel preview clip appears beside the cursor and moves with it, with a PROJEKT ANSEHEN label pinned to its corner.

The instrument in the footer is a Web Audio synthesiser. The whole footer is its stage and horizontal position sets the pitch. The base frequency is 110 Hz and the scale is A minor pentatonic, so eight clicks from left to right give 220, 262, 330, 392, 440, 523, 659 and 784 Hz, two octaves from A to G. Each note is a triangle oscillator that slides from slightly above the target pitch down onto it, with a gain envelope that rises and then decays, plus a short burst of band-pass filtered noise for the strike. Holding and dragging plays a glissando, the cursor's path is drawn on a 1,905 by 851 pixel 2D canvas with a ring of light around the cursor, and the line stays on the canvas and slowly fades.

The small sounds are part of the design too. Hovers and clicks each have a short sound at a volume of 0.42 to 0.5, 14 files in all. Turning sound off first plays a sting named TON-AUS, and only then goes quiet.

Webflow is the base, with GSAP 3.15 plus ScrollTrigger, SplitText and CustomEase on top, Lenis 1.3.26 for scrolling, Howler 2.2.3 for sound and the Vimeo player SDK for the lightbox. The custom code is injected through Slater, thirty-odd small files totalling around 200 KB.

Before the gate opens only 699 KB is downloaded, of which fonts are 277 KB in six woff2 files, scripts 213 KB and the riser 28 KB. Pressing Enter pulls 5.5 MB of the seven ambient loops and the 1.3 MB video of the first case in one go, and a full scroll comes to 23 to 30 MB, 18 MB of video in fourteen 3 Mbit preview clips of 1.2 to 2.4 MB each, 7.9 MB of sound and 3 to 4 MB of Instagram photos. There are 21 sound files, seven ambient loops at 0.6 to 0.8 MB, three loops for the services at 2.4 MB, and fourteen interface sounds at 20 to 30 KB each.

The first byte arrives in 227 to 303ms, first contentful paint at 1.1 to 1.4 seconds, and largest contentful paint at 2.4 seconds on the 192-pixel name on the gate. Layout shift is 0.047 to 0.060, from the two large lines of the first screen moving once at 1.07 seconds when the font arrived. Continuous scrolling averages 57 to 58 frames per second, with the two slowest stretches at 50, one at the first-screen meters and one at the project list where the preview clips swap under the cursor.

Accessibility goes down to the detail. The page declares German, has nav, main and footer landmarks and a skip link, all 74 controls are named, and every image has alt text. The gate button can be entered from the keyboard. Every list row carries a Video ansehen button for keyboard users, the sound switch has aria-pressed with a label that flips between Sound einschalten and Sound ausschalten, and the off state is kept in localStorage. The focus ring is a 2-pixel solid white. The reduced-motion setting covers the meters, the cursor ring, the button sweep and the scrolling navigation text, and with it on the meters are pinned to their lowest height. After entering, the three large case videos autoplay with sound, and the sound switch silences everything at once.

The FWA awards one number, and 82 sits in the 81 to 84 range where winners usually land. The team's description on the award page is one sentence. Dominik Kostolnik is an Austrian sound recordist who records on set, builds the sound design and mixes it, one voice on the sound of a film from first take to delivery. That sentence matches the structure of the site, the three service bands and the Ton line in every case's credits say the same thing. The site was also nominated on Awwwards the same day, and the jury vote is still open.

Barry Baris Dogan made the whole site alone, brand, interface, motion and code. His FWA profile says he works in the gap between brand, interface and code, the part most people hand off, which he keeps. Architecture school taught him structure, and the web taught him what to do with it once it is standing. This is his first FWA. On Awwwards he has one Site of the Day, Scarletred, and two Honorable Mentions, and his profile says he is looking for freelance or full-time work at an agency.