Common Standard 2: web, který se chová jako aplikace

Uniformita webu

World-wide-web začínal čistě document-based, avšak pokroky v technologiích, jako CSS a Javascript dodal vývojářům možnost propustit uzdu fantasii. Proto je také Web 2.0 známý svou rozmanitostí. S rozmachem internetu se poté však design ustálil..

Udělejte si pokus. Otevřete vedle sebe weby pěti softwarových firem, zakryjte loga a zkuste hádat, který je čí. Nahoře lišta s navigací, vlevo logo, vpravo tlačítko „Začít zdarma“. Pod ní titulek přes půl obrazovky (označujeme jako "hero"), pod titulkem mřížka úhledných dlaždic (aka "bento" - koncept proslavila společnost Apple) a někde dole tři cenové plány, z nichž ten prostřední je zvýrazněný.

Jedná se o konvenci, každá společnost to tak dělá a není to náhoda. V UX se mu říká Jakobův zákon: lidé tráví většinu času na cizích webech, a tak od toho vašeho čekají, že bude fungovat stejně. Jenže z rozumné zásady se za posledních pár let stala uniforma. Tmavé pozadí, jemný gradient, bento mřížka. Estetika, kterou proslavily produkty jako Linear, se rozšířila tak důkladně, že přestala cokoli sdělovat. Po příchodu LLMkových agentů zaměřených na design, např. Claude Design, je tato estetika až zneužívaná.

První návrh CS1, znatelně poznat "standardní SaaS look"

I v MAEUM jsme na tuto past narazili. První verze Common Standardu byla vytvořena na základech "standardního SaaS looku": mega menu, hero, sekce za sekcí. Byla čistá, funkční a profesionální. A kdykoli jsme se na ni podívali, měli jsme stejný pocit. Tohle není MAEUM.

MAEUM se vždy snažilo odlišit, předat nejen funkční aplikaci, ale taky pocit... pocit, že to, co používáte, je něco magického a speciálního. Představovat se statickým letákem nám přišlo skoro nepoctivé.

Designová revoluce

Samozřejmě, že tento skoro až "nudný plochý look" nemohl kralovat designu navždy. Apple loni představil Liquid Glass, materiál, který se chová jako sklo: láme světlo, reaguje na to, co leží pod ním, a ovládací prvky nechává plout nad obsahem. Google přišel ve stejném roce s Material 3 Expressive, tedy s odvážnějšími tvary, pružnými animacemi a barvou, která se nebojí být vidět. Po deseti letech plochého minimalismu se do rozhraní vrátil výraz.

Web tenhle posun zachytil jen zčásti. Vrátily se textury a zrno, pohyb se stal součástí značky a scrollování nástrojem vyprávění. Struktura ale zůstala stejná: lišta nahoře, obsah pod ní.

Nás zajímala právě ta struktura. Co kdyby se web přestal tvářit jako dokument a začal se chovat jako to, co prodává: aplikace?

Představujeme Common Standard 2

Common Standard 2 je web, který se chová jako aplikace.

Nemá horní lištu. Navigace žije v úzkém railu po straně, obsah plyne pod ním a pozadí se mění podle toho, co právě čtete. Když přejdete na jinou stránku, nic neblikne: rail zůstává, logo se pohne a nový obsah se nadechne na své místo. Je to nejodvážnější designový krok, jaký jsme v MAEUM udělali. CS2 je navržený, implementovaný a připravený nést všechno, co o sobě MAEUM říká navenek.

První návrhy CS2

Dvě věci na úvod, ať je jasné, kam patří. CS2 je podmnožina Narae, našeho designového jazyka a knihovny komponent, na které stojí všechny produkty MAEUM. Bere z Narae to, co potřebují marketingové weby a jednoduché nástroje, a dotahuje to do jednoho uceleného výrazu. A stavíme ho na Whiplashi, našem vlastním blokovém enginu pro weby. K obojímu se ještě vrátíme, protože obojí je důležitější, než na první pohled vypadá.

Anatomie: rail, karta a pozadí, které poslouchá

Když říkáme „jako aplikace“, nemyslíme tím efekty. Myslíme navigaci, která je pořád po ruce, a stránku, která drží kontext. Interaktivita je až druhá v pořadí. Celé CS2 stojí na čtyřech stavebních kamenech.

Rail. Samotný pojem jsme si půjčili z Material Designu, kde navigation rail slouží jako boční navigace pro širší displeje. V CS2 je to jediný stálý prvek stránky: logo, tlačítko menu a stav přihlášení. Ukazuje jen ikony a popisky se objeví, až když k němu najedete myší. Menu se vysouvá zleva a tlačítko cestuje s ním. Obsah mezitím dostává celou šířku okna a plyne i pod rail, který podle podkladu přepíná mezi světlou a tmavou podobou.

Karta a popover. Druhá premisa zní: informace až ve chvíli, kdy ji potřebujete. Rychlý detail se neotvírá na nové stránce, ale v bílé kartě, která se položí přes fialový rám a zabere skoro celý viewport. Drobná vysvětlení, třeba co vlastně znamená slovo MAEUM, řeší malý popover. Vpravo pak sedí nenápadná pilulka ikon, která ukazuje, z čeho se stránka skládá. Je to stará dobrá zásada postupného odhalování, jen dotažená do důsledku.

Živé pozadí. Tady se CS2 liší od běžného webu nejvíc. Pozadí není tapeta, ale vrstva, která poslouchá obsah. Barvy, bloby, kruhy a zrno se skládají do pojmenovaných scén a stránka mezi nimi při scrollování plynule přechází. Některé bloky mají vlastní plné pozadí, a když je odscrollujete, pohyb pod nimi se znovu odkryje. Stránka díky tomu nepůsobí plochě. Má hloubku.

První návrh menu s rozvinutým railem

Barva. Ppora, naše fialová, dostala celou škálu. Dovolili jsme si to jméno rozšířit i na další barvy, nejvýrazněji na Ppora Vibrant. A MAEUM sand, se kterým jsme se dlouho pokoušeli pracovat jako s povrchem, jsme přesunuli tam, kde konečně funguje: do role akcentu.

Pod kapotou: Whiplash, Vue a GSAP

Pod CS2 běží Whiplash, blokový engine, který v MAEUM vyvíjíme jako společný základ pro weby napříč produkty. Stránka v něm není HTML šablona, ale strom bloků zapsaný v JSON formátu, kterému říkáme WML: stránka, sekce, kontejner, blok. Renderer napsaný ve Vue 3 z toho stromu skládá hotovou stránku. CS2 je jedna ze šablon Whiplashe, tedy balík bloků, komponent a pravidel, jak se k sobě mají chovat.

Právě tahle architektura umožnila živé pozadí. Každý blok má tři spouštěče: první pro chvíli, kdy se blíží do zorného pole, druhý pro okamžik, kdy stránce dominuje, a třetí pro odchod. Na každém z nich pošle pozadí jméno scény, kterou chce vidět. Pozadí tak neřídí pozice scrollu v pixelech, ale obsah sám. Kdo skládá stránku, skládá bloky. O choreografii se starat nemusí.

O pohyb se stará GSAP. Knihovna, na které stojí velká část animovaného webu, je od loňska díky Webflow zdarma včetně všech pluginů, i pro komerční použití. V CS2 řídí přechody mezi scénami pozadí i mezi stránkami. Přechod na jinou stránku má dokonce vlastní stav načítání: podél railu se jemně plní rozostřená výplň a celé to působí, jako by stránka dýchala.

Aby se v tom všem dalo vyznat, má CS2 pevnou škálu vrstev. Úplně dole, na úrovni 1, leží dynamické pozadí. Obsah je na úrovni 100, obsahové karty na 400, menu a overlaye na 600, logo a rail na 800 a nejvýš, na úrovni 1000, modaly, které mají přednost před vším. Zní to jako detail. Ve chvíli, kdy se na stránce zároveň hýbe pozadí, vysouvá menu a otevírá karta, je to rozdíl mezi systémem a chaosem.

Kde jsme se zasekli: mobil

Všechno výše funguje na širokém displeji. Na telefonu se rail nemá kam vejít a jeho přirozené místo, levý horní roh, je zároveň místo, kam palec dosáhne nejhůř. Dlouho jsme neměli odpověď na otázku, jak má CS2 v kapse vůbec vypadat.

iPhone Duo a jeho neortodoxní navigační rail, zdroj apple.com

Přineslo ji až září a představení iPhonu Duo. Apple u svého prvního skládacího telefonu přesunul dock k pravému okraji displeje, tedy tam, kde palec přirozeně leží. Nebyl to izolovaný nápad, spíš vyvrcholení směru, kterým se mobilní rozhraní ubírají už nějakou dobu: Liquid Glass i Material 3 Expressive stahují ovládání dolů a nechávají ho plout nad obsahem. Řekli jsme si, že učit se od nejlepších mistrů UX není žádná ostuda.

Na mobilu proto z railu zůstává jen logo v rohu. Menu a účet se stěhují pod pravý palec a jejich podoba vychází právě z jazyka Liquid Glass a Material 3 Expressive.

Co přebíráme a co děláme jinak

CS2 nevznikl ve vzduchoprázdnu a nebudeme se tvářit, že ano. Skoro každý jeho prvek má předobraz v něčem, co dnes hýbe designem. Rozdíl je v tom, jak s ním nakládáme.

Trend	Co si bereme	Co děláme jinak
Navigation rail z Material Designu	Boční navigaci jako stálý prvek	Dáváme ji na marketingový web, kde ji nikdo nečeká
Liquid Glass a Material 3 Expressive	Ovládání pod palcem a plovoucí prvky	Jen na mobilu a jen pro ovládání; zbytek stojí na fialovém rámu a bílé kartě
Zrno a gradienty	Texturu, která dává plochám hmatatelnost	Pozadí není dekorace, řídí ho obsah
Scroll storytelling	Pohyb navázaný na scrollování	Scény hlásí samy bloky, nikdo je ručně nechoreografuje
„Linear look“ a bento mřížky	Čistotu a firemní střízlivost	Žádná mřížka dlaždic; stránka ukazuje jednu věc a zbytek až na vyžádání

Co z toho má člověk, který na web přijde? Především klid. Stránka mu v každou chvíli ukazuje jednu věc a zbytek nabídne, až o něj projeví zájem. Kdo chce vědět, co znamená MAEUM, klikne a dostane krátký popover. Kdo ne, čte dál a nic ho neruší.

Druhý zisk je méně vidět, ale záleží nám na něm stejně. Animace, přechody a detaily nejsou ozdoba. Ukazují, s jakou péčí děláme i samotné produkty. A konečně identita: web MAEUM si už s jiným nespletete. Pro studio, které staví vlastní ekosystém aplikací, je to víc než otázka estetiky.

Co bude dál

CS2 je začátek. Nejdřív na něj přejde celý marketing MAEUM. Web roori.app do něj budeme integrovat postupně, krok za krokem. Pak přijdou na řadu sociální sítě, kde vizuál CS2 převezmou naše profily i příspěvky, a všechny nástroje MAEUM, které dostanou nové barvy.

A nakonec to nejzajímavější: samotné produkty. Jejich design se bude CS2 postupně přibližovat, a tady se kruh uzavírá. CS2 je sice podmnožina Narae, ale je to první místo, kde jsme jazyk Narae dotáhli do konce: s vlastní barvou, vlastním pohybem a vlastním názorem na to, jak má rozhraní vypadat. Odtud se bude vracet zpátky do aplikací. Narae díky tomu může konečně získat to, co dosud chybělo: vlastní, nezaměnitelnou tvář.

Web, který se chová jako aplikace, byl první krok. Další budou aplikace, které vypadají jako MAEUM.