Grafický návrh webu ON-X: autorský dizajn v Adobe XD

Autorský webdizajn ON-X od Blackboat vznikol v Adobe XD. Výrazná typografia, farebné plochy a technické ilustrácie dávajú výťahovej značke vlastný vizuálny hlas.

Ako vizuálne predstaviť výťahové technológie, aby stránka zaujala aj mimo technickej dokumentácie? Náš webdizajnér navrhol pre ON-X kompozíciu, ktorá spája presnosť technického produktu s veľkorysým priestorom, fotografiou a výraznými grafickými motívmi. Výsledok ukazuje, ako môže grafický dizajn webu pracovať aj s odborne náročnou témou.

Prvý dojem tvorí fotografia a typografia

Úvod stojí na veľkej fotografii človeka pri výťahu a dominantnom nadpise „Turn on the ride.“. Namiesto množstva rovnako výrazných prvkov má kompozícia jasné ťažisko. Fotografia približuje každodenný kontakt s produktom, zatiaľ čo veľké písmo dodáva značke sebavedomý prejav.

Typografiu sme postavili na rodine DM Sans. Rozdiel medzi veľkými nadpismi, drobnými označeniami sekcií a pokojnejším sprievodným textom pomáha odlíšiť hlavné posolstvo od detailov. Voľný priestor okolo jednotlivých blokov necháva vyniknúť obsah aj fotografie.

Úvodný webdizajn ON-X s fotografiou výťahu a veľkým nadpisom Turn on the ride.

Úvodná kompozícia na realizovanom webe podľa grafického návrhu v Adobe XD.

Farebnosť, ktorá rozlišuje produktové rady

Základ svetlej verzie tvorí tmavomodré písmo, biela a jemná modrá. Produktová sekcia tento pokojný základ oživuje: BELT používa žltú, CORE oranžovú a COMPACT zelenú. Jednotlivé rady tak dostávajú vlastný farebný akcent, pričom zostávajú súčasťou jedného vizuálneho systému.

Výrazné diagonálne plochy pripomínajú smer a pohyb. V kompozícii sa stretávajú s vertikálnou fotografiou kabíny a krátkym textom. Práve vzťah fotografie, geometrie a typografie dáva technickému produktu výraznejšiu prezentáciu než samotný zoznam parametrov.

Technické schémy aj ilustrácie majú svoje miesto

Dizajn strieda fotografie, schémy, ikony a farebné bloky podľa charakteru informácie. Pri riadení výťahu dostáva priestor technická ilustrácia; pri materiáloch samotná textúra povrchu. Sekcia ON-X Assist používa ilustráciu telefónu a ikony s modrými akcentmi. Odľahčuje dlhšiu stránku a vizuálne odlišuje servisnú podporu od fyzických produktov.

Sekcia ON-X Assist s ilustráciou telefónu a ikonami s modrými akcentmi

Ukážka práce s ilustráciou a rozložením obsahu na realizovanom webe ON-X.

Adobe XD ako podklad pre realizáciu

Grafický návrh vznikol v Adobe XD. Zdrojový dokument zachytáva rozloženie stránky, textové štýly, farebné plochy aj obrazové podklady. Pri realizácii sme na tento autorský návrh nadviazali a preniesli jeho vizuálny charakter do webu.

Na vizuálny návrh nadviazala tvorba webu ON-X s produktovým prehľadom a dopytovým formulárom. Výsledný dizajn si môžete prezrieť aj priamo na webe ON-X.

Hľadáte originálny grafický návrh webu?

Ak chcete, aby vaša značka mala na webe vlastný vizuálny charakter, oslovte Blackboat s návrhom alebo redizajnom webu. Povedzte nám, čo ponúkate a koho potrebujete zaujať. Navrhneme spôsob, ako vašu ponuku predstaviť pomocou kompozície, typografie a obrazového obsahu.