České dráhy: UI design a responzivní rozhraní
Pro České dráhy jsem pracoval především na technické stránce návrhu rozhraní, responzivitě a UI designu. Řešil jsem uspořádání obsahu, podobu ovládacích prvků a jejich chování napříč velikostmi obrazovek. Důraz jsem kladl na funkčnost a dotažené detaily jednotlivých částí webu.
Funkčnost v každém detailu
Web Českých drah spojuje vyhledávání spojení, práci s cestovními údaji i další kroky spojené s nákupem jízdenky. Při návrhu jsem se soustředil na přehledné rozložení informací a konzistentní ovládání. Technické detaily UI měly podpořit srozumitelnou orientaci v rozhraní.
Responzivita napříč obrazovkami
Rozhraní jsem řešil pro desktop, tablet i mobil. Pracoval jsem s přeskupováním obsahu, velikostí ovládacích prvků a čitelností textů tak, aby se návrh přizpůsobil dostupné ploše a důležité funkce zůstaly dobře přístupné i na menších obrazovkách.
Přehledné výsledky vyhledávání
Výpis spojení obsahuje mnoho údajů, které je potřeba rychle porovnat. V UI jsem řešil jejich hierarchii, zarovnání a vizuální rozlišení. Jednotlivé řádky, doplňující informace a ovládací prvky jsem ladil tak, aby rozhraní zůstalo přehledné i při větším množství obsahu.
Jednotná podoba uživatelských přehledů
Stejnou pozornost jsem věnoval přehledům v uživatelském prostředí. Pracoval jsem s podobou karet, členěním informací a návazností jednotlivých akcí. Responzivní varianty zachovávají společný vizuální styl a přizpůsobují uspořádání obsahu menší ploše.
Technické detaily formulářů a ovládání
Při návrhu jsem řešil také pole, výběry, tlačítka a jejich vzájemné rozložení. Důležitá byla čitelnost popisků, konzistentní velikosti a srozumitelné rozlišení stavů. Tyto drobné prvky dohromady určují, jak snadno se v rozhraní pracuje.
Výběr místa s jasnou orientací
Návrh výběru místa propojuje schéma vozu s informacemi o cestě a dostupných možnostech. V UI jsem pracoval s barevným rozlišením, legendou a hierarchií ovládacích prvků, aby návštěvník rozuměl aktuálnímu výběru a mohl pokračovat v navazujícím kroku.




