CASE STUDY · 02 / 20

Structura

Identyfikacja i strona internetowa pracowni architektonicznej. Brutalistyczna estetyka, dark mode, miedziany akcent.

Klient
Structura, pracownia architektoniczna
Rok
2024
Kategoria
Identyfikacja wizualna · Web design · Design system
Zakres
Logo, identyfikacja, strona responsywna, UI kit, akcydensy, moodboard, design system
01 · REALIZACJA

10 punktów styku

01 / 10
Strona główna Structura wyświetlona na monitorze: brutalistyczny budynek z napisem STRUCTURA, ciemne tło, kondygnacja CONTACT

Strona główna, pierwszy ekran. Architektura budynku jako tło dla nazwy. Nawigacja minimalna, wszystko schodzi na typografię i obraz.

02 / 10
Responsive showcase: laptop, tablet i iPhone z tą samą stroną Structura w trybie ciemnym, hasło BOLD DESIGN, CONCRETE REALITY

Responsive showcase. Ta sama strona na trzech urządzeniach. Hierarchia treści dostosowana do nośnika, ale każdy ekran ten sam język.

03 / 10
UI kit i design system Structury: skala typograficzna, formularze, ikony, karty komponentów, miedziany akcent na ciemnym tle

Design system. Skala H1 do Body S, stany formularzy, karty produktowe, biblioteka ikon, paleta. Wszystko spięte w jednym ekranie do przekazania deweloperom.

04 / 10
Moodboard projektu Structura: fotografia brutalistyczna, typografia Montserrat i Mono Space, paleta kolorów, miedziane tekstury

Moodboard z research'u. Fotografia brutalistyczna, typografia, paleta, tekstury miedzi i betonu. Punkt odniesienia do każdej kolejnej decyzji projektowej.

05 / 10
Industrialne studio architektoniczne: betonowy stół, laptop z brutalistyczną stroną, surowe wnętrze loft z dużymi oknami

Środowisko pracy klienta. Identyfikacja zaprojektowana tak, żeby grała z miejscem, w którym powstaje. Beton, metal, naturalne światło. Strona dopasowana do tej samej estetyki.

06 / 10
Podstrona projektu Concrete Pavilion na monitorze iMac: brutalistyczny budynek, metadane projektu, ciemny interfejs z miedzianymi akcentami

Podstrona projektu. Karta pojedynczej realizacji. Duża fotografia, klarowne metadane (lokalizacja, rok, powierzchnia, status), opis. Nic więcej.

07 / 10
Mobilna wersja strony Structura w iPhone'ie trzymanym w dłoni: hasło DEFINING SPACE, betonowy budynek, miedziane akcenty nawigacji

Mobile, widok hero. Hasło i obraz dominują, nawigacja schowana w menu. Ten sam ton co desktop, ale skalibrowany pod kciuk.

08 / 10
Logotyp Structura w miedzianym kolorze, wytłoczony na betonowej ścianie, dramatyczne boczne światło

Logotyp w przestrzeni. Miedziane litery na betonowej ścianie, boczne światło. Sygnacja przy wejściu do pracowni i element identyfikacji we wszystkich realizacjach.

09 / 10
Akcydensy Structura: papeteria z białym logotypem, wizytówki z miedzianym tłoczeniem, koperta z miedzianym akcentem, próbka betonu

Akcydensy. Papeteria, wizytówki z miedzianym tłoczeniem, koperty, druki ofertowe. Materiał do pierwszego kontaktu z klientem, fizyczne rozszerzenie tego, co dzieje się online.

10 / 10
Cztery podstrony Structury w widoku zestawienia: strona główna, projekty, studio, kontakt, wszystkie z ciemnym tłem i miedzianym akcentem

Cztery główne podstrony obok siebie. Strona główna, projekty, studio, kontakt. Spójny rytm, ta sama typografia, ten sam akcent w tych samych punktach. System gotowy do skalowania na kolejne realizacje.

02 · PALETA

Cztery kolory, dark mode

Matte Black
#121212
Deep Charcoal
#2A2A2A
Warm Grey
#555555
Copper Accent
#B57F50
03 · TYPOGRAFIA

Dwa kroje, podział ról

Typografia główna
STRUCTURA
Montserrat Bold / Semibold
Nagłówki · Wordmark · Hero
Typografia techniczna
PROJECTS / 2024 / 12
metadane, dane techniczne
JetBrains Mono Regular
Metadane · UI · Technical
04 · WARTOŚĆ DLA MARKI

Co marka dostała na koniec

01
Pozycjonowanie premium

Structura wyszła z worka „pracownia architektoniczna z portfolio na WordPressie". Dark mode, brutalistyczna typografia i miedziany akcent stawiają markę bliżej studiów premium niż lokalnych biur projektowych. Estetyka mówi to samo co realizacje.

02
Design system gotowy do skalowania

Komplet komponentów, paleta, skala typograficzna, biblioteka ikon. Nowa kategoria projektu, nowa podstrona, nowy event. Wszystko buduje się z istniejących klocków, bez angażowania grafika do pojedynczej rzeczy.

03
Spójność online i offline

Strona, akcydensy, sygnacja na ścianie pracowni. Wszystko mówi tym samym językiem materiałów: beton, miedź, czerń. Klient, który wchodzi na stronę i klient, który przychodzi do biura, widzi tę samą markę.

05 · BRIEF

Punkt wyjścia

06 · PODEJŚCIE

Architektura mówi za markę

07 · KONCEPCJA

Wszystko mówi językiem materiału

Logotyp to czysty Montserrat Bold, wersaliki, lekko rozspacjowany. Bez ozdobników, bez monogramu, bez piktogramu. Pracownia, która projektuje brutalistyczne budynki, dostaje wordmark, który wygląda jak wycięty z betonu. Jeden znak, jedno źródło, zero kompromisów.

Cała reszta systemu zbudowana na czterech kolorach (czerń, dwa szare, miedź) i dwóch krojach (Montserrat dla treści, JetBrains Mono dla metadanych technicznych). Strona w trybie ciemnym to nie zabieg stylistyczny, tylko logiczna konsekwencja, że architektura prezentuje się najlepiej na fotografii o niskim kluczu. Białe tło spłaszczyłoby każdą realizację.

Miedziany akcent (#B57F50) używany oszczędnie: linia pod tytułem, podkreślenie linku, ikona w przycisku CTA. Nigdy jako wypełnienie, nigdy jako tło. Tak jak miedziane elementy w prawdziwych budynkach: niewielka powierzchnia, duży efekt. System opracowany tak, żeby pracownia mogła sama dodawać kolejne realizacje, podstrony, eventy bez utraty spójności.

Identity Web Design Design System Dark Mode Architecture Brutalist Premium