Studio portfolio case-study layout, desktop and mobile

Studio portfolio case-study layout, desktop and mobile, swiss, minimal, light

Preview image. Unlock full-res

A Swiss-style project case-study template for a design studio, shown across light and dark tablet mockups plus mobile, with a giant Tytul projektu headline and labeled metadata columns.

Summary

A design-studio portfolio case-study template presented across device mockups: a light tablet, a dark tablet, a phone, and a full-length desktop page. The defining move is an oversized Tytul projektu headline sitting above a clean row of labeled metadata fields.

Visual description

Three rounded-corner device mockups float on a flat grey background. Each project page opens with a small mark top-left, a horizontal nav (Archiwum, Sklep, Studio, Aktualnosci, Kontakt) top-right, then a very large serif-tinged sans headline. Below it a thin rule separates a row of small all-caps labels (Autor, Kategoria, Data) each with a value underneath, and a justified paragraph of body copy to the right. The same template is shown light and dark to demonstrate both modes. The long desktop scroll adds a credits row (Uzyte programy, Uzyte fonty: PP Neue Montreal), a strip of color swatches ending in a red accent, a numbered Zobacz tez project table, and a footer with a huge kontakt@zarach.pl address, phone number, and social link pills. Polish-language interface throughout.

Key takeaway

The labeled-metadata row under a big project title: small all-caps field labels (author / category / date / tools / fonts) sitting over their values, which turns dry project facts into a tidy typographic strip. Also the practice of presenting the same case-study template in both light and dark to prove the system holds.

Reuse notes

A strong reference for a design or branding studio's project detail page and for portfolio case-study layouts generally. The metadata-row pattern pairs well with a large hero image or embedded color swatches. Works in either theme; the lorem body copy here is placeholder, so it needs real case content to carry the lower half.

More like this