Gaudí Development
Brand identity, UX/UI, Web design, Web development
Kompletní redesign webu i vizuální identity pro Gaudí Development. Od re‑brandu a logomanuálu až po modulární webovou platformu s administrací, která umožňuje rychle spouštět nové projekty a přehledně prodávat bytové jednotky.
Gaudí s.r.o. je etablovaný developer, který má na kontě významné realizace, včetně svého času nejvyšší rezidenční budovy v ČR Rezidence Eliška. Vizuální komunikace a web společnosti však vycházela z roku 1997 a neodrážela aktuální postavení firmy na trhu.
Cíl
Společnost stála před spuštěním prodeje nových projektů a potřebovala se v záplavě konkurence jasně odlišit. Cíl byl jasný: vytvořit nový vizuální styl, který působí svěže, moderně, ale zároveň stabilně, a následně navrhnout webové řešení pro podporu prodeje nových bytových jednotek.
Brand identity
Research, skicování a hledání tvaru nového loga
Klientovi jsme po fázích rešerše nové formy loga, skicování a také průzkumu konkurence předložili tři vizuální směry. Jeden opatrný, spíše evoluční a dva odvážné. V Gaudí se rozhodli pro radikální řez. Chtěli se posunout. Po desítkách skic a hledání ideální formy jsme dospěli k vizualizovanému písmenu „G" zasazenému do čtvercového gridu. Výsledek? Logo působí stabilně jako dobrá stavba, ale díky střídání tenkých a silných linií neztrácí dynamiku. Inspiraci jsme volně čerpali i z tvorby architekta Antoniho Gaudího, ne v doslovných organických tvarech, ale v lehkosti a eleganci.
Barvy
Od začátku jsme chtěli zachovat odstíny fialové, protože byly s firmou historicky spjaté. Zároveň jsme je potřebovali navrhnout tak, aby fungovaly v dnešních médiích. Nakonec jsme do hlavního loga zvolili jemný přechod z tmavě fialové, který pod úhlem 45° přechází do světlejších tónů. Zároveň jsme připravili i bezpečné jednobarevné varianty pro tisk a doplňkovou paletu s kontrastním, ale velmi desaturovaným světle růžovým gradientem tak, aby celek zůstal harmonický.
#3F1235
#8B0950
#D9C6D0
#F5E9F3
#FFFFFF
#660746
Typografie
Celý vizuální směr podtrhuje rodina čistých bezpatkových fontů Sweet Sans Pro, kterou jsme následně nasadili i na web. Tento font je doplněn ještě o Adage Script JF, který se používá pro krátké claimy, které se mohou objevit v digitální i tištěné komunikaci.
Logomanuál
Součástí byl i základní logomanuál, kde jsou definované varianty loga, barevnost, typografie a také jasná pravidla, jak s logem zacházet v praxi, aby značka zůstala konzistentní napříč webem, tiskovinami i reklamními formáty.
UX/UI
Mapa webu a user journeys
Zaměřili jsme se na dvě hlavní situace: snadno najít nový developerský projekt a v něm bytové jednotky, a zároveň umožnit uživatelům najít volnou jednotku napříč projekty nebo samostatnou jednotku k prodeji. V obou případech jsme postavili základní filtrování parametrů nemovitostí. V detailu projektu jsme pak vytvořili vlastní filtrační systém, kdy uživatel na základě půdorysu projektu vždy vidí, kde se daný byt v rámci projektu nachází.
Wireframe a struktura
Na základě wireframů jsme navrhli hlavní kostru webu: homepage, stránku s projekty, detail projektu, výpis nemovitostí, detail nemovitosti, o Gaudí a kontakt. Další podstránky jsme tvořili díky nastavenému design systému a definovaným komponentám.
UI principy
Cílem byla snadná a přehledná navigace na webu s následným výběrem nemovitosti dle vyfiltrovaných parametrů. Podstatná byla také možnost si pro každý větší projekt vytvořit samostatnou stránku, kde jsou již definované re‑usable komponenty, pomocí kterých si klient dokáže tuto stránku stavět po základním zaškolení sám, tak, aby si je v budoucnu mohl přidávat bez externí pomoci. Z pohledu UI využíváme čistý a jemný design s prvky bento gridu, nicméně web tento styl nevyužívá úplně všude, ale pouze tam, kde to je vhodné.
Výzvy
Největší výzva v rámci UX/UI byla správná škálovatelnost na všech zařízeních, protože u jednotlivých jednotek zobrazujeme množství informací, které nechceme na mobilních zařízeních skrývat. To se nám nakonec povedlo a ještě jsme díky tomu zpřehlednili výpis nemovitostí pro desktop zařízení.
Vývoj
Webová strategie
Zásadní změna oproti starému řešení byla v tom, že jsme web postavili jako centrální platformu s robustní administrací. Cílem bylo, aby si v Gaudí dokázali po krátkém školení sami skládat prezentační stránky jednotlivých projektů bez nutnosti pokaždé stavět nový web nebo řešit vývoj na míru. Toto rozhodnutí nebylo automatické. Každé řešení má své pro a proti. V tomto případě ale převážila dlouhodobá úspora nákladů a rychlost nasazení nových projektů, která je v development fázi klíčová.
Funkce a rozsah
V praxi jsme dodali řešení, které pokrývá hlavní potřeby: moderní a přehlednou prezentaci společnosti i projektů, administraci pro projekty, nabídku bytových jednotek včetně filtrace a práce s dostupností, formuláře pro vyjádření zájmu napojené na obchodní tým a generování PDF karet jednotek pro stažení a tisk.
Administrace a konzistence
Administraci jsme navrhli tak, aby klient mohl obsah spravovat sám, ale zároveň nemohl nechtěně rozbít design. Forma je chráněná, obsah je flexibilní.
Termín a paralelní vývoj
Deadline byl jasně daný kvůli spuštění prodeje nových developerských projektů. Abychom je stihli, část práce běžela paralelně: vedle UX/UI návrhu jsme už na základě odsouhlasených wireframů současně stavěli administraci a klíčové funkce, které z nich přímo vycházely. Díky tomu jsme ušetřili týdny a dodali řešení včas.
Analytika a ladění
Před migrací a ostrým spuštěním jsme nasadili analytické nástroje a po spuštění jsme několik měsíců sledovali chování uživatelů a ladili detaily orientace a používání. Výsledkem je řešení, které Gaudí používá dlouhodobě a které firmě dává flexibilitu pro prezentaci nových projektů bez zbytečných nákladů na vývoj.
Použité technologie
Design
- Illustrator
- Photoshop
- Indesign
- Figma
Web
- NextJS
- TailwindCSS
- Sanity CMS
- MailerLite