SuperCity

Hlavnou farbou pozadia je čierna, zjemnená jemným gradientom, aby bola príjemnejšia na oči. Dopĺňa ju fialová ako primárny akcent, zatiaľ čo biela a odtiene šedej pomáhajú budovať vizuálnu hierarchiu a pridávajú hĺbku. Gradienty v rozhraní zároveň jemne oddeľujú obsahové moduly a rozširujú paletu bez pridávania ďalších farieb. Farebná schéma zrkadlí tú z aplikácie SuperCity, aby boli všetky touchpointy konzistentné.

Súčasťou projektu bolo zadefinovanie novej sitemapy webu SuperCity a celkovej architektúry stránky: počtu podstránok, ich hierarchie a štruktúry webových komponentov, navigácie, kľúčových prvkov, logiky prelinkovania a CTA – optimalizovaných pre zariadenia, na ktorých sa web zobrazuje, aj pre publikum jednotlivých landing pages. Logicky sme ju poskladali tak, aby každého návštevníka v ktorejkoľvek fáze marketingového funnelu viedla k správnemu obsahu. Navigáciu sme držali jednoduchú, účelnú a stavanú na konverzie.

Pri content dizajne sme podľa princípu obrátenej pyramídy navrhli funkčné wireframy s cieľom komunikovať benefity platformy SuperCity čo najskôr – s dôrazom na to, aby hlavné value propositions zazneli čo najefektívnejšie a čo najskôr.

Po finalizácii a schválení wireframov prišla dizajnová fáza – návrh webových komponentov a modulov, z ktorých sa web skladá. Práve tu dostáva podobu dizajn brandovej komunikácie.

Vizuálny jazyk webu je typický pre SaaS firmu: čisté layouty, sústredený messaging a jasný zámer. Cieľom bolo, aby návštevník okamžite pochopil, na aký produkt a odvetvie sa pozerá, pričom tón ostáva priateľský a relevantný pre samosprávy aj obyvateľov.

Namiesto štandardných UI mockupov v zariadeniach web pracuje s vizuálmi, ktoré kombinujú skutočné obrazovky produktu s jemnými gradientmi, priehľadnosťou a noise efektmi. Je to príťažlivejší spôsob, ako ukázať schopnosti SuperCity, pričom skutočný produkt ostáva v centre. Percy, maskot značky, sa používa striedmo na dodanie priateľského tónu vo vybraných momentoch – napríklad na 404 stránke alebo v pop-up banneroch.

Fotografia hrá dôležitú úlohu v tom, aby web pôsobil teplo a ľudsky. Zábery ukazujú rôznorodých obyvateľov v každodenných mestských situáciách: na podujatiach, pri dochádzaní, parkovaní či užívaní si verejných priestorov. Všetky fotografie zdieľajú konzistentný vizuálny štýl: kvalitné, jasné a energické, s mierne zvýšenou saturáciou a tónmi, ktoré dopĺňajú základnú farebnú paletu.

Keďže pôvodný web SuperCity bežal na Squarespace, na začiatku sme pracovali s dvoma možnosťami: 1/ presunúť web do iného, ľahšie prispôsobiteľného prostredia, napríklad WordPressu, 2/ ponechať Squarespace ako CMS aj s obmedzeniami, ktoré to pri dizajne a kódovaní prináša. Tím SuperCity sa prikláňal k ponechaniu Squarespace, pripravili sme sa teda na túto možnosť.

Hoci má Squarespace svoje špecifiká a šablónové obmedzenia, rozšírili sme jeho funkčnosť pokročilou customizáciou a zabezpečili jednoduché budúce úpravy. Po zladení dizajnových a kódových rozhodnutí sme dodali responzívny, technicky kvalitný web, ktorý je 1:1 s webdizajnom.

Hlavnými nástrojmi sú kvalitná Squarespace šablóna s Fluid Engine pre detailnú kontrolu nad layoutom a vstavaný editor štýlov pre základné dizajnové prvky (farby, písma, odsadenia). Custom CSS injekcie a Code bloky/externý kód sme použili na obídenie šablónových obmedzení a doladenie správania, ktoré vstavaný editor neponúka. Web bolo potrebné prepojiť aj s ďalšími nástrojmi, ako je poskytovateľ právnych dokumentov či LinkedIn widget plugin.