Všechny projekty
Mapa pro Živý Josefov
Odvětví:
UI/UX design
Kultura
Nástroje:
Figma
Klient
Creative Dreamers Production s.r.o.
Rok
2025
Shrnutí
Cílem projektu bylo navrhnout kompletní UI/UX řešení interaktivní mapy pro webové stránky projektu Živý Josefov. Mapa slouží jako přehledný nástroj pro objevování historické části Josefova a orientaci v jednotlivých bodech zájmu.
Součástí projektu byl návrh ovládacích prvků mapy, postranního panelu, responzivních variant a vytvoření interaktivního prototypu pro prezentaci klientovi. Pro usnadnění implementace byl zároveň vytvořen UI kit, který sloužil jako základ pro vývoj samotné mapy.
O projektu Živý Josefov
Živý Josefov je projekt zaměřený na obnovu pevnostního města Josefov.
Vizuální styl projektu byl vytvořen studiem Creative Dreamers a vychází z charakteristické barevnosti města – zejména kombinace cihlově červené a bílé barvy. Základ mapy tvoří ilustrace historické části Josefova, kterou rovněž připravil tým Creative Dreamers.
Cílem bylo vytvořit moderní a intuitivní digitální rozhraní, které tento ilustrativní vizuální styl přirozeně doplní a umožní návštěvníkům mapu snadno procházet.
Hlavní problém
Hlavní výzvou projektu bylo navrhnout uživatelské rozhraní, které bude:
intuitivní pro procházení většího množství bodů zájmu
vizuálně sladěné s ilustrativním stylem projektu
plně responzivní a přizpůsobitelné, protože řešení bylo navrženo jako embedovatelný prvek pro webové stránky
Řešení
Pro samotnou mapu byly navrženy ovládací prvky umožňující navigaci, přibližování a práci s jednotlivými body zájmu. Klíčovým prvkem rozhraní je postranní panel, který slouží k procházení jednotlivých míst na mapě.
Body zájmu jsou v panelu rozděleny do kategorií a je možné v nich také vyhledávat. Uživatel tak může rychle najít konkrétní místo nebo si procházet jednotlivé lokality podle typu.
Po kliknutí na konkrétní bod zájmu se zobrazí detail objektu, který obsahuje například:
otevírací dobu
telefonní číslo
adresu
možnost otevřít navigaci v mapové aplikaci
fotografie
popis objektu
relevantní odkazy
Rozhraní bylo navrženo jako plně responzivní, aby dobře fungovalo jak na desktopu, tak na mobilních zařízeních. Zároveň bylo optimalizováno tak, aby se dalo snadno embedovat do různých částí webu.
Součástí projektu bylo také vytvoření interaktivního prototypu, který sloužil k prezentaci řešení klientovi a k ověření uživatelské flow ještě před samotnou implementací.
Pro potřeby vývoje byl zároveň vytvořen UI kit, který obsahuje jednotlivé komponenty mapy, typografii, barvy a další prvky potřebné pro konzistentní implementaci rozhraní.
Výsledek
Výsledkem projektu je:
kompletní UI/UX návrh interaktivní mapy
responzivní rozhraní optimalizované pro desktop i mobilní zařízení
přehledný systém pro procházení a vyhledávání bodů zájmu
interaktivní prototyp pro prezentaci klientovi
UI kit pro usnadnění implementace a dalšího rozvoje projektu
Výzvy a zkušenosti
Projekt přinesl zajímavou výzvu v podobě návrhu uživatelského rozhraní, které musí kombinovat vizuálně výraznou ilustraci mapy s moderním a funkčním UI.
Důležité bylo také navrhnout systém, který umožní uživatelům rychle pracovat s větším množstvím informací a zároveň zachovat přehlednost celého rozhraní.