GETSTEP — vlastní web

Kontext

Předchozí web — mockupy na šedé, portrét, čtyři oblasti, claim „Tvořím brand, který funguje i bez vysvětlování". Fungoval. Jenže ukazoval jen výsledky: klient viděl hezké obrázky a nevěděl, co je za nimi.

A to je přesně to, co se prodává hůř než obrázek — systém. Není vidět na fotce. Musí se ukázat.

Koncept a struktura Texty Design systém HTML / CSS / JS Interakce studií Produkce obrázků

Před / po

Stejná doména, jiná otázka — starý web odpovídal na „co umí". Nový odpovídá na „jak přemýšlí". Přetáhněte.

Nový web: filmový pás fotek z projektů, pod ním věta Za dobrým dojmem bývá systém a první studie

Koncept

Studie místo galerie — každý projekt má kontext, koncept a detail. A jednu interakci, která ukáže princip značky místo popisu: kruh Galerie pohybu se kreslí při scrollu, tečka z loga Trueapps putuje na web, Lunchdrive přepíná starý a nový svět.

Jedna scrollová scéna na studii, ne víc. Vše, co nese obsah, má ruční ovládání. Bez pohybu web stojí a všechno je vidět.

Předchozí studie Galerie pohybu: titulek, tři řádky metadat a řada mockupů pod sebou

2025 — projekt jako řada mockupů

Nová studie Trueapps: titulek Nejmenší prvek loga dělá na webu největší práci, kapitoly Kontext a Znak

2026 — projekt jako příběh s kapitolami

Struktura

Pás, věta, mřížka — první, co návštěvník vidí, je práce v pohybu: filmový pás z osmi projektů. Pak jedna věta. Pak mřížka: široký a úzký poutač se střídají po řadách, jeden projekt na celou šířku. Sekce Služby přeruší mřížku uprostřed, ať se nečte jako katalog.

Nový web je dvakrát delší než starý, a přitom má méně slov. Rozdíl dělají obrázky v reálné velikosti.

Celá homepage předchozího webu ve zmenšení

2025 — celá homepage

Celá homepage nového webu ve zmenšení, stejné měřítko

2026 — celá homepage, stejné měřítko

Systém

Bílá, černá, kobalt — plocha pod prací je neutrální, aby nesoupeřila s barvami klientů. Kobalt je jediný akcent: odkaz, hover, šipka. A žlutá, která se rozlije tam, kde práce není.

Plocha#FFFFFF

Text#161616

Kobalt#1E4FB8

Žlutá#F6CE5B

Písmo Onest, variabilní řez, self-hosted. Barvy jsou tokeny v CSS — studie si přebarví jen to, co je jejich.

Plocha

Žlutá se vybírala ze dvanácti schémat: tmavá modrá, ledová, papír a kobalt, papír a švestka. Všechna měla jednu chybu — pod barevnými fotkami projektů soupeřila o pozornost.

Řešení nebylo v odstínu, ale v místě. Barva patří tam, kde práce není: sekci Studio a patičce. Tam smí být hlasitá.

Kobalt zůstal jako akcent — v žádné klientské práci se nevyskytuje, může tedy patřit studiu.

Čísla

Bez frameworku, bez build kroku — celý web je HTML, CSS a pár set řádků JavaScriptu. Otevře se z disku, nasadí se kopírováním. Za pět let půjde opravit v poznámkovém bloku.

108 kBweb bez obrázků — styl, skript, dvě písma

12 → 1barevných schémat vyzkoušeno, jedno zůstalo

3 534textových prvků prošlo kontrastním auditem

1scrollová scéna na studii, ne víc

Detail

Pás se zastaví, když se na něj díváte — filmový pás jede pomalu, na hover stojí. Kdo má vypnutý pohyb, dostane pás stojící a posouvatelný rukou. Stejný obsah, jiná cesta k němu.

Popisky u poutačů říkají jen to, co vzniklo — Logo / Web, Výroční zprávy, Interní magazín. Ne obor, ne město. Dvě slova stačí, zbytek řekne studie.

Galerie ukazuje, co vzniklo. Studie ukazuje, proč.