01 / Divorcio — vizualizace živé aplikace
Práce / Divorcio / případová studie
Složitost podaná lidsky.
Legaltech / Produkt / Front-end architektura
Aplikace k rozvodu, která řekne, co bude dál.
01 / VýzvaKomunikace / zážitek / srozumitelnost
Zadání / Směr / Účel
Spousta papírování,
krok po kroku.
K rozvodu patří spousta formulářů, a to v nejhorší možnou dobu. Aplikace se ptá na jednu věc po druhé, obyčejnými slovy, a vždycky ukáže, co přijde dál. Front-end jsem postavil sám, od prvního commitu po ostrý provoz.
02 / ZážitekSdělení / uživatel / systém
Co aplikace musí zvládnout.
Ptát se jen na nutné.
Obyčejná slova a další otázka až po zodpovězení té předchozí.
Ukázat další krok.
Aktuální krok a cesty dál jsou vidět na každé obrazovce.
Bez nervů.
Žádný tlak, nic dvojznačného, žádná animace, která tahá oko.
Žádná odpověď se neztratí.
Ukládání během psaní, chybové hlášky, které řeknou, jak to opravit, a každý prvek ovladatelný z klávesnice.
03 / ZblízkaStudiové vizualizace / živý web
Tentýž web, osm pohledů.
01 / Na telefonuZaložení účtu 
02 / DetailKalendář péče, zblízka 
03 / Napříč velikostmiRegistrace 
04 / ZepředuVšechna čtyři zařízení 
05 / MonitorFormuláře o péči 
06 / Notebook a telefonZaložení účtu 
07 / TabletRegistrace 
08 / Celý stůlZleva shora
04 / Produktové myšleníStruktura / klid / kontrola
Jeden engine pro všechny formuláře.
Všechny formuláře v aplikaci běží na jednom enginu: deset typů polí, vnoření až do čtyř úrovní, ukládání během psaní a kontrola průběžně. Partner může každou odpověď schválit nebo ji probrat ve vlákně.
Pod ním je vlastní knihovna komponent, postavená pro produkty Divorcia: zhruba čtyřicet komponent v Reactu nad Headless UI, barvy jako tokeny v OKLCH, ze kterých vzniká světlý i tmavý motiv, a kontrast, který se počítá, ne odhaduje. Knihovna proto, aby každý formulář, dialog i krok vypadal a choval se stejně a aby se oprava přístupnosti dostala do celé aplikace najednou. Poslední verze přesně to udělala: přepínač zobrazení hesla jde ovládat klávesnicí a každý dialog má jméno pro čtečku obrazovky. Každá verze před vydáním projde kontrolou typů, lintem, testy a kontrolou tokenů.
Studiová vizualizace / Živá aplikace
Zpět na všechny projekty
05 / Přístupné už návrhemProduktové UX / obsah / vývoj
Každý krok / má cestu zpět.
Klid je hlavně
práce vývojáře.
Jasný popisek, odezva ve chvíli, kdy ji čekáte, a možnost chybu opravit. V takové aplikaci je tohle většina toho, co znamená být k lidem ohleduplný.
01 / Jazyk
Obyčejná slova.
Nejdřív vysvětlí, pak se ptá.
02 / Zpětná vazba
Jasný stav.
Každý krok řekne, kde jste a co zbývá.
03 / Přístup
Klávesnice především.
Celá aplikace z klávesnice, dotykové cíle 44 px a kontrast 7:1 v tmavém režimu.
04 / Návaznost
Vždy jde opravit.
Špatnou nebo nedopsanou odpověď jde opravit později.
06 / ZměřenoŽivá aplikace / PageSpeed Insights
Živá aplikace, změřeno.
Mobil
- Výkon
- 98
- Přístupnost
- 96
- Osvědčené postupy
- 100
- SEO
- 100
- Vykreslení největšího obsahu
- 1,2 s
- Celková doba blokování
- 150 ms
- Kumulativní posun rozvržení
- 0,00
Počítač
- Výkon
- 100
- Přístupnost
- 96
- Osvědčené postupy
- 100
- SEO
- 100
- Vykreslení největšího obsahu
- 300 ms
- Celková doba blokování
- 60 ms
- Kumulativní posun rozvržení
- 0,00
PageSpeed Insights (Lighthouse 13.6.0) · změřeno 13. listopadu 2026
Celá zpráva
| Mobil | Počítač | |
|---|---|---|
| Výkon | 98 | 100 |
| Přístupnost | 96 | 96 |
| Osvědčené postupy | 100 | 100 |
| SEO | 100 | 100 |
| Vykreslení největšího obsahu | 1,2 s | 300 ms |
| První vykreslení obsahu | 1,2 s | 300 ms |
| Celková doba blokování | 150 ms | 60 ms |
| Kumulativní posun rozvržení | 0,00 | 0,00 |
| Index rychlosti | 1,9 s | 900 ms |
Laboratorní data: Lighthouse v simulovaných podmínkách mobilu a počítače. U skutečných návštěvníků se čísla mohou lišit.
Změřte si to sami v PageSpeed Insights (otevře se v nové kartě)01 / Další projektyDalší na řadě
Další projekty.
Nezávislé z principu / postaveno, aby vyniklo
Jasně místo složitě.
Stavíte něco, co lidé používají ve zlé dny? Napište mi.
Začít projekt