Making-of · case study

Jak powstała strona,
która nic nie sprzedaje

Yerba Mate Showcase to eksperyment Broker Business: zamiast opowiadać klientom, co potrafimy, zbudowaliśmy stronę, której się doświadcza. Poniżej: decyzje, które ją ukształtowały.

01Koncepcja: demonstracja, nie deklaracja

Każda agencja mówi, że robi „nowoczesne strony". My chcieliśmy, żeby klient jedną z nich przeżył i sam zadał pytanie: „kto to zrobił?". Temat celowo niekomercyjny: yerba mate ma kulturę, geografię, rytuał i naukę, więc daje pretekst do każdej techniki opowiadania.

Zasada projektowa: edukacja przez zabawę. Nie czytasz, jak parzyć mate. Parzysz je. Nie czytasz o kofeinie. Porównujesz krzywe. Każda sekcja ma moment, którym chce się podzielić.

02Decyzje projektowe

Pięć aktów, jedna oś

Struktura filmowa zamiast sekcji landing page'a: liść → podróż → rytuał → nauka → kultura. Scroll jest taśmą filmową, nie paskiem przewijania.

Stare / nowe

Ilustracje w duchu botanicznych rycin XIX w. (linia, szrafunek) zderzone z wielką współczesną typografią serif. Napięcie epok jako motyw przewodni.

Fizyka zamiast wideo

Symulator parzenia to prawdziwa symulacja cząsteczek na canvasie: sypanie, przechył, temperatura z konsekwencjami. Porażka (spalone mate) uczy lepiej niż akapit tekstu.

Uczciwe dane

Wszystkie liczby oznaczone jako przybliżenia tam, gdzie są przybliżeniami. Zero zmyślonych badań. Wiarygodność to warunek cytowalności przez AI.

03Warstwa techniczna

StackHTML + CSS + vanilla JS, zero frameworków po stronie klienta. Animacje scroll-driven, symulator na canvas 2D.
WydajnośćGrafika wektorowa (SVG) zamiast zdjęć, fizyka z limitem 300 cząstek, lazy-init sekcji przez IntersectionObserver.
Dostępnośćprefers-reduced-motion zamienia animacje na statyczne kadry, aria-labels na elementach interaktywnych, kontrasty min. 4.5:1.
AEO / GEOEncyklopedia z schema FAQPage, nagłówki jako pełne pytania, pierwsza fraza = bezpośrednia odpowiedź. Strona pisana tak, żeby AI mogły ją cytować.
TypografiaInstrument Serif (display) + Archivo (tekst), subset latin-ext, polskie znaki bez kompromisów.

04Czego to dowodzi

Że stronę można traktować jak produkt, a nie wizytówkę. Że interakcja uczy szybciej niż tekst. I że da się jednocześnie zrobić coś pięknego, szybkiego i czytelnego dla wyszukiwarek nowej generacji. Jeśli twoja marka potrzebuje takiego dowodu, porozmawiajmy.

Chcesz taką stronę dla swojej marki?

Broker Business projektuje strony-doświadczenia, optymalizuje pod AEO/GEO i buduje aplikacje AI. Bez szablonów z ThemeForest.

Napisz do nas → Wróć do doświadczenia