Funkčná webstránka predstavuje dôležitý nástroj vášho podnikania. Obzvlášť v prípade, ak je váš predmet podnikania e-shop.

Perfektný web v dnešnom svete predstavuje umenie. Je to ako maľba v múzeu, ktorú si denne prezerajú tisícky návštevníkov. V online svete je kritikom každý, nedostatky si ľudia ľahko zapamätajú a k vášmu dielu sa už nemusia vrátiť. Ak po vystavení zistíte, že niečo nie je v poriadku, zásahy si môžu vyžiadať nežiadané stiahnutie.

Vybudovanie samotného webu je samo o sebe veľmi náročné. O stupienok vyššie je samotné dolaďovanie. Ako sa vraví, diabol sa nachádza v detailoch. Preto sme sa rozhodli spísať tento ultimátny checklist, v ktorom nájdete všetko potrebné, čo je treba skontrolovať pred spustením webu.

Checklist pred spustením e-shopu je rozdelený z nasledovných hľadísk:

• programovanie
• funkčnosť webu
• marketing
• UX
• ostatné.

Programovanie

Kvalitný HTML kód

Štruktúrované dáta pre Google – pri výsledkoch vyhľadávania umožňujú „Rich Snippets“ lepší pohľad na web. Hodí sa v prípade, ak váš e-shop obsahuje recenzie alebo udalosti.

Validný HTML – dôležité v prípade potenciálnych chýb v indexoch vyhľadávača. Zlá validácia HTML nepoškoďuje umiestnenie vo vyhľadávači, môže mať však vplyv na štruktúrované dáta.

Správny <title> a <meta description> – ide o prvé informácie o e-shope, ktoré používateľ pri vyhľadávaní vidí. Taktiež ovplyvňuje umiestnenie vo vyhľadávaní.

Správny <meta viewport> – slúži na správne zobrazovanie responzívneho webu v mobilných prehliadačoch.

Správna osnova nadpisov – správne veľkosti a používanie nadpisov uľahčuje Google indexovať stránku a ľahšiu orientáciu používateľom.

Obsah bez gramatických chýb – zlepšuje prehľadnosť webu. Zbytočné chyby odrádzajú používateľov od aktivity.

Platné odkazy z webu – má dopad na pozíciu vo vyhľadávaní. Stačí použiť jednoduchý nástroj W3 Link Checker.

Prístupnosť webstránky 

Hlavný obsah a navigácia sú dostupné bez Javascriptu – dôležité pre indexovanie vo vyhľadávačoch. Vyskúšajte vypnutím Javascriptu v Developer Tools.

Kontrola s Web Accessibility Checker – služba WCAG prejde cez web a upozorní na možné štandardné chyby.

Pridanie oblasti WAI-ARIA  – táto oblasť šetrí zrakovo postihnutým ľuďom množstvo času.

Fungujúce ovládanie tabulátorom – je to ekvivalent prechádzanie stránky bez myši. Ocenia to pokročilí používatelia a zrakovo postihnutí ľudia.

Formuláre majú správne typy inputov  – <input type=“email“> uľahčuje zadávanie obsahu na mobilných zariadeniach.

Vývojárske súbory nie sú na produkcii – hlavné adresáre ako node_modules/, .git/, poprípade celý obsah databázy.

Správne nastavenie hlavičky zo serveru – využite službu Redbot.org, ktorá správne vysvetlí nastavenie vašeho serveru.

Správne nastavenie bezpečnostnej hlavičky – využite službu SecurityHeaders.io, ktorá vykoná základný audit časti serverovej hlavičky, s ktorou uľahčíte rôzne typy útokov.

Kvalitný CSS a Javascript kód    

Kód dodržuje konvenciu – vytvorená dokumentácia uľahčuje predávanie a zdieľanie kódu ďalej, a taktiež jeho komentovanie. Kód sa takto dá v prípade nutnosti ľahšie upraviť a taktiež ho vie používať programátor, ktorý ho nevytvoril.

Kvalita kódu – kód je pred použitým potrebné nechať automaticky skontrolovať kvôli častým chybám alebo problematickým konštrukciám.

Otestovaný kód – CSS a Javascript je dobré pred použitím otestovať.

Optimalizovaný kód – optimalizovaný kód neobsahuje zbytočné dáta navyše a je minimalizovaný.

README.md – tu je popísané vybudovanie, inštalácia a podobne.

Webové prehliadače a ich kompatibilita 

Úplne zobrazenie vo všetkých prehliadačoch a zariadeniach – väčšina prehliadačov sa medzi sebou veľmi neodlišuje, je ich však veľmi veľa. Využite nástroj Browserstack.

Dostupnosť pre staršie prehliadače – netreba podceňovať. V starších prehliadačoch je dôležité, aby bol hlavný obsah čitateľný a mal dostupnú navigáciu.

Tlačená verzia stránky – dôležité je zabezpečiť vypnutie tlače nepotrebných častí.

Funkčnosť webu

Skontrolujte si, či vám správne funguje nasledovné:

• napojený sklad/ERP
• účtovníctvo
• CRM
• zobrazené všetky produkty a ich kategórie
• zobrazené ceny
• zobrazená dostupnosť na sklade
• zobrazený dátum dodania
• zobrazený strom kategórii v menu
• zobrazené atribúty a parametre produktov
• radenie produktov podľa parametrov
• filtrácia produktov podľa parametrov
• stránkovanie produktov
• interné vyhľadávanie
• vloženie produktu do košíku
• priechod košíkom
• zapamätanie košíka pri odchode používateľa
• otestované formuláre v košíku na chyba a útoky
• odoslanie objednávky
• platobné metódy
• metódy prepravy
• odoslaný email s potvrdením objednávky
• objednávka pripísaná do interných systémov
• štítkovanie produktov (zľava, najviac predávaný, posledných 5 kusov atď.)
• nastavenie zliav a stimulov v CMS
• uplatnenie zliav a stimulov v objednávke
• správne zobrazovaný font, riadkovanie a odsadenie
• správna hláška cookie
• aktuálne VOP
• aktuálne kontakty
• správne fungovanie vkladania nových produktov
• ošetrenie vypredaných alebo ukončených produktov
• možnosť editovať obsah na produkte alebo jeho zatriedenie
• fungujúci Heuréka widget (ak ho používate)
• monitorovanie dostupnosti webu 24/7
• neverejne dostupná administrácia
• neindexovaná administrácia
• fungujúce prihlásenie používateľa
• fungujú zákaznícke vstupy ako sú hodnotenia alebo recenzie
• prenesená databáza objednávok
• prenesená databáza zákazníkov
• vyriešená ochrana pred robotmi a spamom.

SEO

Skontrolujte si, z hľadiska SEO máte správne:

• vygenerované všetky stránky
• texty kategórii produktov
• dobre parametrické kombinácie kategórii
• texty produktov
• vygenerovaný ALT na všetkých obrázkoch
• skryté stránky sa nezobrazujú v navigácii
• žiadne duplicitné stránky
• radenie v kategóriách je ošetrené voči duplicitám
• skontrolovaný tag meta robots
• web prejdený crawlerom
• poznačené všetky zmeny URL
• párový zoznam všetkých meniacich sa URL zo starých na nové redirecty
• prehľadanie všetkého HTML na „nofollow“, „noindex“
• skontrolovanie všetkých presmerovaní
• minimálne jedna hlavná sitemapa v robots.txt
• sitemapa pre obrázky
• sitemapa pre videá
• korektne nasadené všetky mikrodata
• zmysluplné názvy médií ako sú obrázky, PDF, zvuk alebo videá
• neindexované stránky nie sú v sitemape
• vygenerované automatické interné odkazy
• prenesené ručne riadenie interné odkazy spolu s ich zoznamom
• existujúci zoznam všetkých aktuálnych URL adries v starom webe
• záloha pred štartovnej verzii HTACCESS
• minimálne 1 mesiac chovanie robotov v logu
• sledovanie indexizácie pre vyrovnanie po spustení
• sledovanie viditeľnosti na otázky pre zrovnanie pred spustením
• pripravený súbor alebo značku pre reautorizáciu GSC
• vyriešená predštartovná a poštartovná záloha.

Marketing 

Webová analytika

Skontrolujte si, či vám správne funguje nasledovné:

• nasadené meracie kódy pre traffic,
• nasadené meranie objednávok,
• nasadené remarketingové kódy a pixely,
• nasadené konverzné kódy pre PPC,
• vylúčený vlastnú IP,
• nasadené upozornenia pre zásadné poklesy v kanáloch (traffic, revenue),
• sledujete korektný priechod košíkom,
• meriate interné vyhľadávanie
• pridanie a konfigurácia Google Analytics
• registrácia v search console.

PPC 

Skontrolujte si, či vám správne funguje nasledovné:

• vygenerovaný Google PLA feed
• pripravené skripty na landing na 404 z inzercie
• sledovanie skóra kvality pre porovnanie po spustení
• pre prípad zmeny URL pripravené zmenené inzeráty a sitelinky
• v prípade zmeny logiky webu pripravené nové definície publik
• vyriešené nové zostavy pre nové stránky
• vygenerovaný heuréka feed (dobrovoľné).

Sociálne média

Skontrolujte si, či vám správne funguje nasledovné:

• vytvorený a vyplnený Facebook profil
• umiestnenie a fungovanie widgetu pre Facebook a ďalšie sociálne média na webe
• nastavený Facebook Open Graph, poprípade Twitter Cards.

UX

Celkové UX 

Zobrazené výhody alebo slogan – odlíšte sa od ostatných. Ukážte ľuďom kto ste, čo robíte a hlavne prečo to robíte.

Košík, cena a počet položiek – urobte tieto tlačidlá výrazné, veľké a kontrastné.

Vyhľadávanie – nastavte našeptávač, rátajte s preklepmi a ponúkajte kategórie a hľadanie v konkrétnych umiestneniach a výsledkoch.

Navigácia – vytvorte navigáciu, ktorú pochopí aj malé dieťa.

Jazyk a mena – v prípade ak predávate aj do zahraničia, umožnite nastaviť oboje prostredníctvom geo-ip umiestnenia alebo nastavenia operačného systému.

Prihlásenie a registrácia – zapamätané prihlásenie pri každej návšteve webu zákazníka.

Bonusy zdarma – pokiaľ ponúkate napr. poštovné, vložte ho tak, aby to bolo vidieť. Zvyšujete tak šancu predaja.

Kontakt – umožnite ľuďom zavolať vám. Zaobstarajte si online chat. Ak máte predajňu, vložte svoje otváracie hodiny a umiestnite na web Google mapu.

Pätička webu – na každej stránke zobrazte v pätičke webu dopravu, platbu, reklamáciu, súkromie, obchodné podmienky a taktiež odkaz na desktop/mobilnú verziu.

Dôveryhodnosť  – vložte na web referencie zákazníkov, logá partnerov, platobné karty, certifikáciu, ocenenia od heuréky, spôsob dopravy atď.

Newsletter – pokiaľ máte pravidelný newsletter, ponúknite zákazníkom za poskytnutie emailu zľavu alebo inú akciu.

Domovská stránka

Šírka sortimentu – zobrazte hlavné kategórie, obľúbené produkty, logá značiek alebo návštevnosť produktov. Príliš veľmi to však nepreháňajte.

Prototypovosť – ľudia sú už zvyknutí na určitý štandard eshopov, tak im ponúknite to, čo očakávajú.

Vizuálna hierarchia – musí byť jednoduchá, prehľadná a graficky čistá.

Kategórie 

Zobrazenie produktov – zobrazte produkty v tabuľke alebo riadkovom zobrazení.

Náhľad – zobrazte veľký náhľad s cenou, hodnotením, dostupnosťou, poprípade možnosťou kúpiť.

Radenie – uveďte minimálne 4 možnosti: cena, predajnosť, relevancia, hodnotenie používateľov.

Filtrácia – filtrujte výsledky podľa podkategórii alebo vlastnosti produktov. Zobrazte koľko produktov ostáva pri použití filtrov a zobrazte ich nad nápisom produktov.

Pomocník s výberom – dajte ľuďom možnosť si vybrať aj inak, než prostredníctvom filtrácie.

Najpredávanejšie – zobrazte najpredávanejšie produkty a dajte tipy na top produkty v podkategóriach.

Stránkovanie – zvyčajne sa používa tlačidlo nahrať ďalších X kusov, nefunguje to však na mobilných zariadeniach.

Produkt 

Názov – jasný, zrozumiteľný s použitím kľúčových slov.

Fotky – veľké fotky zo všetkých uhlov s možnosťou priblíženia.

Video – v prípade dostupnosti určite zobraziť.

Hodnotenie – za počtom hviezdičiek umiestnite počet hodnotení.

Dostupnosť – koľko kusov je na sklade a za ako rýchlo sa dostane domov (aj v prípade ak nie je na sklade).

Varianty – farebnosť, veľkosť a podobne.

Množstvo – zobrazte obmedzené množstvo kusov na sklade, vedie to k impulzívnejšiemu nákupu.

Popis produktu – dajte si záležať, aby výhody daného produktu ako je predĺžená garancia alebo odolnosť bolo poriadne vidieť. Ďalej uveďte krátky popis.

Recenzie – zobrazte recenzia ostatných používateľov a ich spokojnosť s produktom.

Wishlist + strážny pes – umožnite zákazníkom ponechať si kúpu na neskôr alebo strážiť určitý parameter ako je zníženie ceny, dostupnosť alebo variantu produktu.

Upsell a cross-sell – umožnite zákazníkom vybrať si lepšie verzie, odporúčané produkty a ich príslušenstvo.

Zdieľanie – maximálne 2 sociálne siete. Pokiaľ produkt nikto nezdieľal, nezobrazujte nulu.

Košík 

Registrácia – nenúťte používateľov registrovať sa pred nákupom, zbytočne ich zdržujete a nemusia tak dokončiť svoju objednávku.

Konečná cena – zobrazte cenu produktu spolu s cenou poštovným. Neistá cena vedie k odchodu.

Náhľad produktov – zobrazte fotky, počet kusov, jednotkové ceny, DPH, poštovné a možnosť odobrať z košíka.

Doručenie – zobrazte presný dátum doručenia spolu s cenou dopravy.

Upsell (iba na mobile) – zobrazte doporučené produkty v mobile. Tu to ľuďom nevadí.

Tlačidlá – jasne zobrazte ľuďom kam majú smerovať.

Uložiť na neskôr – dajte možnosť dokončiť nákup inokedy. Nezabudnite upozorniť e-mailom.

Zľavové kódy – toto príliš nezvýrazňujte, inak ľudia začnú googliť zľavové kódy.

Možnosť platenia – dovoľte zákazníkom zaplatiť podľa ich uváženia.

Objednávkový proces 

Zbavte sa nadbytočného – žiadna navigácia, žiadna pätička. Jediná možnosť tlačidlo k nasledujúcemu kroku. Bez možnosti kliknúť naspäť alebo na logo.

Objednávka bez registrácia – ako bolo spomenuté, nezdržujte ľudí zbytočnou registráciou.

Poradie krokov – najčastejšie používaný formát je Košík > Doprava a adresa > Platba > Súhrn > Poďakovanie. Keep it simple. Umožnite ľuďom vrátiť sa a nechať údaje zapamätané.

Pokrok – ukážte používateľovi koľko krokov mu ostáva v objednávke. Pri zložitejších zobrazujte, koľko času ostáva pre dokončenie alebo zobrazte percentá.

Online podpora – môže aj nemusí byť

Viditeľný obsah košíku –  zobrazte obsah košíku viditeľne v každom kroku

Formuláre – pýtajte sa iba to, čo skutočne musíte. Veľkosť poľa odpovedá vyplneným údajom. Meňte font v závislosti od typu obsahu.

Ďakovná stránka – poďakujte a informujte, čo bude nasledovať. Poskytnite možnosť založiť si účet, zdieľania na sociálnych sieťach alebo prihlásenia k newsletteru.

Ostatné

Grafika podporuje Retina disple – obyčajná grafika nebude na Retina displejoch vyzerať rovnako dobre.

Šablóny pre chybové stránky 404 a 50x – preddefinované verzie sú nedostačujúce.

Rýchlosť načítania – optimalizujte rýchlosť načítania pomocou Pagespeed Insight Tester a WebpageTest.org.

Vyriešený SSL certifikát – SSL certifikát je v dnešnej dobe nutnosť. Pokiaľ ste neprešli na https, Google vás môže vo vyhľadávaní umiestniť nižšie.

Záver

Skontrolovať checklist pred spustením e-shopu, či všetko správne funguje tak ako má, môže byť rovnako frustrujúce, ako samostatná tvorba. Je to však posledný krok, ktorý je nutné dokončiť ešte predtým, než svoj web dostanete von medzi ľudí. Lepšie natrafiť na chybu ešte predtým, kým nie je neskoro.

Zdroje:

http://www.ilincev.com/ux-checklist-eshop

http://www.lukaspitra.cz/checklist-kontroly-pred-spustenim-webu/

http://www.vzhurudolu.cz/prirucka/checklist

Kľúčom k úspešnému marketingu je dobre zrealizovaný plán. Príprava je však rovnako dôležitá, avšak často podceňovaná. Jednou z týchto podceňovaných častí býva práve informačná architektúra.

Informačná architektúra môže byť odstrašujúca pre dizajnérov, ktorí ju nikdy predtým nerobili. Na vytvorenie úspešnej vizualizácie webstránky sú potrebné zručnosti a prax spolu s plánovaním. Každý sa však dokáže naučiť vytvárať informačnú architektúru, ktorá je efektívna a zachytiť údaje tak, aby ich pochopil každý.

Čo je to informačná architektúra

Informačná architektúra predstavuje vytvorenie štruktúry pre webstránku, aplikáciu alebo iný projekt, ktorá nám umožňuje pochopiť ako sa používatelia dostávajú k informáciam na webstránke. Vo výsledku ide o site mapu, hierarchiu, kategorizáciu, navigáciu alebo meta údaje.

Keď svoj obsah začnete separovať do jednotlivých kategórii, vytvárate informačnú architektúru. Keď dizajnér vytvorí skicu navigačného menu, taktiež vytvára informačnú architektúru.

Ako vytvoriť informačnú architektúru webstránky

Bez ohľadu na to, aká úloha sa vykonáva, existuje zopár základných otázok, ktoré sa musíme sami seba spýtať pri vytváraní informačnej architektúry. Nimi sú:

1. ako sa používatelia pohybujú (preklikávajú) na webstránke?
2. ako aplikácia pomáha používateľovi katalogizovať informácie?
3. ako sa informácie prezentujú naspäť používateľovi?
4. ako informácie pomáhajú zákazníkom a povzbudia ho k činnosti?

Pre správnu odpoveď je potrebné sa sústrediť na niekoľko vecí:

• cieľovú skupinu,
• funkcie, ktoré sa využívajú na webstránke,
• údaje prezentované na webstránke.

Ďalej je potrebné zvoliť si vhodný program. Môžete využiť klasický Word, Balsamiq alebo Lucidchart, ktorý je uvedený na tomto obrázku.

zdroj fotografie: distilled.net

Je veľmi dôležité vizualizovať rozdiely medzi vnútornými odkazmi, ktoré smerujú hore a dolu po hierarchii, takže je najlepšie používať zreteľné farby. V diagrame nižšie bola použitá modrá farba pre odkazy smerujúce dolu a červené pre odkazy smerujúce hore. Taktiež sa odporúča použiť farba pre odkazy smerujúce naprieč celou hierarchiou. Pokiaľ plánujete zdieľať túto mapu s inými ľuďmi, je dobré pre nich zahrnúť legendu.

zdroj fotografie: distilled.net

Vaša mapa informačnej architektúry by mala zahrnúť nasledujúce:

1. hierarchickú štruktúru,
2. vnútorné odkazy (vertikálne a horizontálne),
3. URL príklady.

zdroj fotografie: distilled.net

Ako používať vašu mapu informačnej architektúry

Existujú 4 spôsoby, ako sa dá mapa využiť rozdielne:

1. Sledovanie korelácie medzi informačnou architektúrou a meranými údajmi,
2. Identifikovanie typov stránky,
3. Identifikovanie technických problémov,
4. Analýza konkurencie.

sledovanie korelácie medzi informačnou architektúrou a meranými údajmi 

Často sa môže stať, že vytvoríte podstránku zameranú na určité kľúčové slovo, avšak iná vaša podstránka sa vo výsledkoch na kľúčové slovo zobrazuje lepšie. Hoci dôvodom môže byť viacero faktorov, informačná architektúra poskytuje lepší náhľad do tohto problému.

Používať tento formát taktiež pomáha ľahšie porovnávať kontrast dvoch interných podstránok. Je zároveň ľahšie opýtať sa otázky ako:

• je podstránka odkazovaná z podstránky, ktorá je v informačnej architektúre vyššie?
• je podstránka odkazovaná z podstránok s vyššou PA (page authority)?
• je podstránka odkazovaná z viacerých interných podstránok?

identifikovanie typov stránky 

Vytvorením mapy informačnej štruktúry veľmi ľahko môžete rozoznať rôzne typy podstránok, ktoré sú umiestnené na webstránke. V konečnom výsledku pri technickom SEO ľahšie zistíte, či je problém iba s konkrétnou podstránkou alebo sa týka všetkých podobných kategórii.

Znalosť tejto informácie je veľmi dôležitá pri komunikovaní s vývojárom pretože rozhoduje o tom, ako budete problém riešiť a ukáže ako dobre poznáte svoju stránku a viete adresovať problém.

Lepšie pochopenie rôznych typov podstránok hrá taktiež veľkú rolu v budúcnosti. Namiesto toho, aby ste identifikovali stratégie, ktoré sa týkajú konkrétnych podstránok, je ľahšie vizualizovať väčšie stratégie, pretože máte lepšie pochopenie toho, koľko rôznych typov podstránok existuje na vašej webstránke a ako sú navzájom prepojené.

zdroj fotografie: distilled.net

identifikovanie technických problémov 

Pomocou informačnej architektúry taktiež zistíte obsah a štruktúru URL. Vo výsledku sa vám ľahšie budú dať vyriešiť technické problémy a identifikovanie dôvodov, prečo vznikli. Je to perfektný doplnok pre akýkoľvek vykonaný technický audit.

analýza konkurencie 

Okrem vytvorenia vlastnej informačnej architektúry môžete vytvoriť aj mapu vlastnej konkurencie alebo konkurencie klienta. Toto je užitočné pre identifikovaní rôznych typov podstránok u konkurencie, ktorá cieli na špecifické kľúčové slová a zistenie, prečo sa im darí lepšie v internom odkazovaní.

Zdroje pre inšpiráciu o informačných architektúrach

Informačná architektúra dokáže byť veľmi komplexná, takže sa netreba čudovať, že sa tejto téme venuje niekoľko webstránok. Uvedené stránky nižšie pochádzajú od individuálnych informačných architekov, ktorý zdieľajú svoje zdroje s kolegami, po profesionálne organizácie, ktoré sa týmto živia.

Info Design Patterns 

Info Design Patterns sa zaoberá novinkami a poskytuje databázu o informačnej architektúre. Databáza je obzvlášť vhodná pre ľudí, ktorí sa rozhodujú o tom, ako chcú zobraziť dáta svojim používateľom alebo čitateľom.

zdroj fotografie: noupe.com

InfoDesign

InfoDesign je skvelý zdroj pre každého, kto sa zaujíma o informačnú architektúru. Táto stránka má stovky článkov, ktoré sú rozdelené do kategórii ako je prístupnosť, content stratégia, interakčný dizajn, protypy a podobne.

zdroj fotografie: noupe.com

Information Design Watch

Information Design Watch ponúka newsletter a klasické články s informáciami o dizajne po celom svete. Zahŕňa množstvo skvelých, svetových zdrojov infografiky a dizajnov informačnej štruktúry a sú skvelým zdrojom pre ľudí hľadajúcimi inšpirácie.

zdroj fotografie: noupe.com

Design Crux – Information Design

Information Design od Design Crux má články o informačnej architektúre a dizajne. Oba sú skvelým zdrojom uvádzajúcim inšpiratívne príklady.

zdroj fotografie: noupe.com

Cool Infographics

Cool Infographics je blog, ktorý zbiera zaujímavé infografiky z celého webu. Je to prvotriedny zdroj pre hľadanie inšpirácie a príkladov skvelej infografiky a informačnej architektúry.

zdroj fotografie: noupe.com

JJG.net

JJG.net ponúka zdroje pre experience dizajn a informačnú architektúru. Toto zahŕňa PDF-ká články alebo rozhovory.

zdroj fotografie: noupe.com

Information Architecture od A List Apart

A List Apart má excelentnú kategóriu o informačnej architektúre s viac ako 20 článkami.

zdroj fotografie: noupe.com

Boxes and Arrows

Boxes and Arrows je excelentný blog o tom, ako dizajn funguje a ako vytvárať lepší dizajn na základe údajov o UX.

zdroj fotografie: noupe.com

Information Design from AIGA

AIGA má sekciu, kde píše články o informačnom dizajne. Hoci ich nie je príliš veľa, každý článok je vo vysokej kvalite.

zdroj fotografie: noupe.com

Good Magazine

Good Magazine je skvelá kolekcia infografiky zaoberajúca sa širokým množstvom tém. Ide o excelentný zdroj pre inšpiráciu.

zdroj fotografie: noupe.com

Flowing Data

Flowing Data sa zaoberá infografikami o množstve tém. Blog zbiera infografiky z celého webu a vysvetľuje, ktoré aspekty fungujú.

zdroj fotografie: noupe.com

Organic Information Design

Organic Information Design je PDF súbor, ktorý vysvetľuje nový typ interaktívneho dizajnu používajúci množstvo údajov od dynamických zdrojov.

zdroj fotografie: noupe.com

The Information Design approach to Web development

Tento článok od magazínu Digital Web ponúka nový prístup k vývoju webu s použitím informácii o dizajnových technikách. Je to skvelý zdroj informácii pre informačných architektov a vývojárov.

zdroj fotografie: noupe.com

InfoGraphic Designs: Prehľad, príklady a najlepšie praktiky

Tento článok od instantShift je jeden z najobsiahlejších začiatočníckych návodov o informačnej architektúre. Zahŕňa rady o tom ako vytvárať dizajn a ponúka niekoľko skvelých príkladov úspešného informačného dizajnu.

zdroj fotografie: noupe.com

Návod pre informačnú architektúru

Toto je kompletný návod od Webmonky ako vytvoriť úspešnú informačnú grafiku. Skladá sa z 5 častí, pričom každá je zameraná na rôzny aspekt informačnej architektúry.

zdroj fotografie: noupe.com

Zhrnutie

Informačná architektúra je skvelá pomôcka, ktorá vám zlepší prehľad o vašej webstránke. Čím je váš web komplexnejší, tým viac vám informačná architektúra dokáže pomôcť. V prípade, ak máte záujem o vytvorenie vlastnej informačnej architektúry alebo celej webovej stránky, môžete využiť naše služby tvorba webových stránok.

zdroj fotografie: unsplash.com, zdroj titulnej fotografie: unsplash.com

zdroje:

https://www.noupe.com/design/fantastic-information-architecture-resources.html

https://www.distilled.net/blog/seo/why-you-should-map-out-your-sites-information-architecture/

http://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/

Jedným z hlavných prínosov vášho produktu alebo služby by malo byť uľahčenie života vašich zákazníkov. Docieliť to môžete mnohými spôsobmi – jedným z nich je aj prediktívne grafické rozhranie. To sa spája najmä s vývojom novodobého softvéru, no aplikovať sa dá pohodlne aj na váš web alebo online systém.

Používa ho aj Google

Pod pojmom prediktívne grafické rozhranie môžeme rozumieť dizajn a rozloženie ovládacích prvkov softvéru alebo webstránky, ktoré inteligentne „hádajú“, aký bude ďalší krok používateľa a pomôžu mu s jeho jednoduchším splnením. Výborným príkladom predikcie je napríklad vyhľadávanie v službe Google. Vyhľadávaný výraz vám systém nielen dopĺňa o ďalšie slová, ale opraví aj vaše gramatické chyby, aby bolo vyhľadávanie relevantné. Prediktívnym dizajnovým prvkom potom môžeme nazvať tlačidlo Skúsim šťastie, ktoré automaticky otvorí prvý vyhľadaný výraz.

Google používa prediktívne grafické rozhranie aj vo svojom mobilnom operačnom systéme Android. Vyskúšať si ho môžete napríklad pri zdieľaní nejakej položky v jednej z natívnych Google aplikácií. Aplikácia vám sama odporučí aplikácie, cez ktoré najčastejšie zdieľate informácie priateľom a vo formulári na zdieľanie vám ukáže napríklad aj posledný kontakt, s ktorým ste komunikovali (pr. Poslať cez Messenger používateľovi Vibration.sk).

Práve mobilné zariadenia sú nástroje, v ktorých je priam nutné používať prediktívne grafické rozhranie. Presvedčí vás o tom napríklad aj tento blog, ktorý hovorí o tom, ako na zdieľanie jedného článku musel autor urobiť až 20 krokov, pričom s prediktívnym grafickým rozhraním by toto zdieľanie vykonali iba 2 či 3 kroky.

„Prvou výhodou prediktívneho grafického rozhrania je zvýšenie jednoduchosti používania.“

Prediktívne grafické rozhranie si zaslúži pozornosť najmä pri tvorbe e-shopov. Vtedy totižto použitím správnych dizajnových prvkov a presnou predikciou dokážete zvýšiť vaše tržby aj o niekoľko desiatok percent. Príkladom môže byť pokojne aj česko-slovenská Alza, ktorá vám už pri kúpe notebooku ponúka príslušenstvo presne pre daný model.

Relevantný obsah

Ďalšie vylepšenie, ktoré pre vašu webstránku môže priniesť prediktívne grafické rozhranie, je relevantnejší obsah. Ten dokáže napríklad po dočítaní článku vášmu zákazníkovi ukázať ďalšie články rozoberajúce rovnakú problematiku. Inteligentný systém však dokáže rozoznať napríklad aj celý proces používateľovej myšlienky. Následne mu môže ponúknuť aj odkazy na iné, relevantné články, ktoré nemusia na prvý pohľad súvisieť s prečítaným textom, no zaujmú ho.

Ideálnym prípadom je, keď prediktívne grafické rozhranie spolupracuje s cookies a pamätá si, čo váš používateľ čítal na webe. Pri jeho ďalšej návšteve mu tak môže ponúknuť napríklad pokračovanie príbehu, ktorý ho zaujal, prípadne zobrazenie článkov z rovnakej kategórie. Ak sa tak daná osoba zaujíma napríklad len o technologické články, nebudete mu v hornej časti stránky vnucovať články o športe či zvieratách.

Výborným príkladom je v tomto prípade aj Facebook. Ten totižto na vašej nástenke zobrazuje v hornej časti najmä príspevky, ktoré sú pre vás naozaj relevantné a mali by vás zaujať. Správnym použitím prediktívnych prvkov rozhrania tak doručíte svojim klientom presne ten obsah, ktorý ich zaujíma a oni na vašom webe strávia viac času a radi sa naň budú vracať.

Ako zaručiť presnosť predikcie?

To, čo znamená prediktívne grafické rozhranie, už viete. Teraz si však poďme vysvetliť, ako dosiahnuť to, aby na vašom webe alebo vo vašej službe či produkte fungovalo správne. Základom je rozhodne detailná analýza dát. Tá môže vychádzať z už spomínaných cookies, alebo aj z prípadových štúdií založených na iných dátach, ktoré na svojom webe či v produkte zbierate. Môžu to byť heatmapy, ale aj rôzne druhy persón, ktoré viete priradiť ku istým skupinám používateľov, ktorí sa vyznačujú istým spoločným aspektom.

„Celkovo si možno prediktívne grafické rozhranie predstaviť ako ponuku počítačového systému na nejasné príkazy zákazníka s cieľom jeho uspokojenia.“

Samotné predikčné techniky však môžu fungovať aj na základe pomerne presných tipov. Príkladom môže byť Netflix. Ak niekto, kto má medzi obľúbenými filmami Inception má v rebríčku obľúbených aj film Twelve Monkeys, tak Netflix môže človeku, ktorý dá vysoké hodnotenie filmu Twelve Monkeys, odporučiť film Inception. V princípe sa však webstránky a služby snažia držať jednoduchého pravidla – to, čo robil zákazník naposledy, bude chcieť robiť aj teraz.

Prediktívne grafické rozhranie a jeho pozadie by mali byť súčasťou vášho webu a mali by ste naň myslieť aj v prípade redizajnu. Ak chcete, aby vám s tvorbou prediktívneho grafického rozhrania pomohli odborníci, kontakujte nás.

Zdroj: Futurice

Dizajn webstránky je ako obal knihy. Niekedy nemusíte vedieť, čo nájdete vo vnútri, no aj napriek tomu vás webstránka (kniha) osloví a otvoríte si ju. Aj preto je vzhľad vášho webu zo strany UI/UX dizajnu veľmi dôležitým. Rozhodli sme sa preto, že pre vás spíšeme webdizajnové trendy pre rok 2018, aby ste boli vždy IN a o krok pred vašou konkurenciou.

3D prvky dizajnu a 360° multimédiá

Byť 2D je v roku 2018 nuda. Váš web môže obsahovať 3D prvky – písmená, logo, nejakú štruktúru alebo iný objekt, ktorý zaujme pohľad vašich čitateľov. Čoraz viac webov ponúka aj 360° fotografie a videá, ktoré sa dajú prehliadať vo virtuálnej realite.

Zdroj: The Artery

Výrazné farby a gradient

Ak ste ešte nezačali využívať gradient a výrazné farby reprezentujúce vašu online identitu, mali by ste s tým ihneď začať.

Zdroj: Ludmila Schevenko

Umelecké fotografie 

Veľké značky udávajú trend v prezentácii svojich produktov. Príkladom môže byť aj Nike a ich umelecké fotografie nových kolekcií športovej obuvi.

Zdroj: Behance

Responzívne logo

Veľký LED panel, desktop, tablet, smartfón, ale aj inteligentné hodinky. Vaša značka musí vyzerať všade dizajnovo príťažlivo, no musí sa prispôsobiť formátu. Aj preto budú trendom tohto roka responzívne logá.

Zdroj: responsivelogos.co.uk

Interaktívne prvky webu

Zmena farby tlačidla po prejdení myšou je dnes už samozrejmosťou. Čo ale hovoríte na interaktívne prvky webu, ktoré reagujú na pohyb kurzora?

Zdroj: Ben Mingo

Kreatívne načítavanie webu

Načítavanie je nuda. Nie však s kreatívnym načítavaním vašej webstránky, ktoré môže obsahovať zaujímavú grafiku a efekty.

Zdroj: Awwwards Conference

Dynamické pozadie webu a animácie

Klasické statické pozadia webstránok nahradí video alebo animované objekty, ktoré „oživia“ klasické webstránky.

Zdroj: Heco

Asymetria

Byť iný je dnes moderné. Aj preto sa čoraz viac spoločností nebojí netradičného dizajnu webstránok, ktoré sú vytvorené v asymetrii.

Zdroj: Dusko.shop

Maximalizmus vs minimalizmus

Hoci je trendom posledných rokov všetko minifikovať a využívať minimalistický dizajn, v roku 2018 budeme vidieť čoraz viac webov s maximalistickým dizajnom.

Zdroj: H.Lorenzo

Bold nadpisy a názvy

aj samotná typografia prejde zmenou – modernými sú hrubé nadpisy a texty, ktoré čitateľ jednoducho nemôže prehliadnuť.

Zdroj: Erik van Blokland/Typekit Blog

A čo váš web?

Pociťujete aj vy, že dizajn vášho webu je zastaralý alebo potrebuje refresh? Napíšte nám a my pre vás navrhneme web spĺňajúci všetky moderné dizajnové štandardy. Pre viac zaujímavých blogov nezabudnite sledovať Vibration.sk na Facebooku.

Zdroje: Behance, WebFlow, 99designs

Tak ako v roku 2020, aj tento sa pozrieme na trendy pre webdizajn, ktoré ovplyvnia webstránky najviac. Niektoré sú tu už niekoľko rokov a niektoré sú úplne nové. Časť z nich tu s nami ostane dlhodobo a na niektoré sa časom zabudne. Tipnete si, ktoré to budú?

1. Retro písmo

Niektoré staré trendy sa pravidelne vracajú do módy a potom sa z nej opäť vytratia. Toto platí aj pre retro fonty, kedy mnoho dizajnov využívajúce vintage typografiu príliš dobre nezostarli.

Avšak tento typ typografie si prešiel menším oživením. Nevidíme však opäť tie isté staré fonty ako niekoľko rokov dozadu. Namiesto toho sú tu štylizácie a trochu umenia, ktoré spolu ukazujú čo retro fonty vedia dokázať.

Takúto kombináciu sa dalo vidieť na evente Spotify Carnival. Namiesto toho, aby fonty vyzerali nevkusné a cliché, s trochou experimentácie vdýchli nový život do tradičných fontov. Toto je dobrý príklad tradičných fontov zmiešaných s modernými prvkami, pričom si zachovajú čitateľnosť.

V angličtine sa na to používa aj výraz retro-futurism, teda retro futuristický. Dobrým príkladom je eventová agentúra Goliath Entertainment. Výrazné písmo pripomína minulosť, no zachováva si pritom moderný dojem.

2. Animácie pre parallax rolovanie

Parallax efekty sú trendom vo webdizajne už niekoľko rokov a v roku 2021 budeme vidieť čo sa s nimi dá dosiahnuť. Treba si pamätať, že príliš veľa parallax efektov môže na niektorých používateľov pôsobiť negatívne, nakoľko ilúzia hĺbky a pohybu môže spôsobiť dezorientáciu a závraty. Tu je niekoľko spôsobov ako tomu predísť:

• nenechajte parallax efekty odvrátiť pozornosť od dôležitých informácií,
• nezťažte používateľom dokončenie dôležitej úlohy ako je vyplnenie formulára alebo hľadania odpovedí vo FAQ,
• udržujte počet parallax efektov na minimum,
• minimalizujte počet parallax animácií v každej časti webstránky,
• obmedzte parallax efekty v určitej malej oblasti na webstránke,
• zahrňte pre používateľov možnosť vypnúť parallax efekty.

Portfólio Alice Lee využíva parallax efekty, ktoré reagujú na pohyb myšou, kedy sa jednotlivé ilustrácie spustia. Množstvo pohybu je však malé a obmedzené na hranice hero sekcie. Toto je dobrý príklad používania parallaxu s obmedzeniami a jasným zámerom.

Nie každá parallax animácia musí robiť veľké gestá cez celú obrazovku. Nájdu sa aj príklady na menšie využitie. Napr. vo webdizajne pre Green Meadow si tento efekt takmer vôbec nemusíte všimnúť. No toto jemné odhalenie textu dostatočné upúta pozornosť na každý blok textu počas toho ako sa zobrazuje.

3. Horizontálne rolovanie

V minulosti označené za nezmysel, horizontálne rolovanie zažíva návrat. Čoraz viac dizajnérov pokračuje v experimentovaní s horizontálnym rolovaním. Nerobia to preto, aby boli odlišní, ale ako praktický spôsob postupného zverejňovania sekundárneho obsahu, napr. ako pri galérii obrázkov.

Dizajnéri využívajúci horizontálne rolovanie by sa mali držať nasledovných tipov:

• nenúťte používateľov navigovať sa cez horizontálny obsah – umožnite používať alternatívne spôsoby navigácie ako sú tlačidlá šípok s jasným označením,
• používajte jasné vizuálne podnety kde obsah používa horizontálne rolovanie,
• uvažujte aký obsah by benefitoval pri zobrazení v horizontálnom rolovaní, ako napr. galéria fotografií, ktorá by používateľom zobrazovala menšiu ukážku a umožnila im vidieť viac pri pohybe na webstránke,
• vyhýbajte sa dodatočnému použitiu efektu pre text, ktorý je potrebné prečítať.

Webflow používa malé množstvo horizontálneho rolovania na priblíženie k veľkému obrázku a zobrazuje relevantné časti obrázku vo väčšej veľkosti, ktorý dopĺňa súvisiaci text.

Homepage štúdia Momento Design zahŕňa jasné označenie, že hlavné tlačidlo funguje aj ako odkaz, ktorý sa pri kliknutí pomaly posúva na prípadové štúdie . Táto animácia má dobré tempo a nie je príliš dlhé čo umožňuje jednotlivým fotografiám vyniknúť.

McBride Design využíva horizontálne rolovanie na zobrazenie veľkých fotiek bez toho, aby zabrali príliš veľa miesta na webstránke. Taktiež zahŕňa jasné označenie na dolnej stránke, ktoré nastavuje očakávanie, že webstránka bude rolovať horizontálne.

4. 3D vizuály všade

S príchodom obrazoviek s vyšším rozlíšením sa 3D dizajny posunuli míľovými krokmi. Na internete môžeme nájsť množstvo vysoko kvalitných 3D vizuálov, ktoré sú hladko zabudované do webdizajnov. Namiesto toho, aby boli krikľavým rozptýlením, zvyšujú celkový dojem na návštevníkov webu.

Kreatívna agentúra Sennep využíva 3D prvky na zlepšenie používateľskej skúsenosti. Medzi všetkými dizajnovými prvkami je cítiť príjemnú harmóniu. Toto je dokonalý príklad toho, ako v minimalistickejších rozloženiach môže 3D pôsobiť ešte väčším dojmom.

Yaya umiestnila 3D prvky popredu na svojej webstránke, kedy využíva svojráznu animáciu.

A nakoniec, webstránka pre Pitch, softvér určený na odprezentovanie, má farebné rozloženie plné trojrozmerných tvarov, tieňov, prechodov a vrstvených prvkov. 3D tu dizajn oživuje.

5. Multimediálne súbory

Keďže väčšina používateľov má dnes už rýchly internet, môžeme sa na webstránkach stretnúť s multimediálnymi súbormi. Tie spájajú vizuálne, textové, video a audio prvky do jedného celku a vytvárajú tak kompletnú používateľskú skúsenosť.

Pre úspešné dizajny s multimediálnymi súbormi využijú nasledovné pravidlá:

• uprednostňujte jednoduchosť, napr. pri kombinácii animácii a zvuku, príliš veľa efektov totiž môže vyrušovať ľudí pri hľadaní informácii na webstránke,
• používajte titulky a prepisy textu pre všetky vopred nahrané multimédia,
• zahrňte prvok alt text pre obrázky a pri komplexných fotografiách využite dlhší popis,
• uistite sa, že celý text je vytvorený s HTML namiesto toho, aby bol vykreslený vo vnútri obrázkov,
• vyhnite sa automatickému prehrávaniu videí alebo animácií, namiesto toho zobrazte jasné tlačidlo na prehrávanie, ktoré umožní používateľom prehrať obsah.

Webstránka Nicolas Errera využíva ovládacie prvky prehrávania krásneho videa na pozadí. Video sa prehráva po kliknutí je možné ho taktiež pozastaviť. Zahŕňa taktiež jemnú animáciu, ktorá naznačuje koľko ešte ostáva z videa do konca.

Multimediálne súbory fungujú aj v iných oblastiach. Napr. Black Yearbook je kniha financovaná z crowdfundingu. Zobrazuje aké to je byť afroameričanským študentom na školách, kde je dominantné množstvo belochov. Možnosti prehrávania sú viditeľné na všetkých videách.

A aby sme to zaklincovali niečim nezvyčajným, uvedieme príklad MSCHF, spoločnosťou, ktorá stojí za mnohými virálnymi kúskami. Dizajn webstránky kombinuje brutalizmus s takmer absurdistickým dizajnom, ktorý spája jemnú typografiu, textové SMS správy a ďalšie elementy.

6. Rozšírená (augmented) realita

Keď už sme pri multimediálnych zážitkoch, netreba zabudnúť na zaujímavú a pohlcujúcu rozšírenú realitu (ďalej AR). Tá znamená v súčasnosti viac než len naháňanie Pokémonov. Nové technológie ako WebXR API a softvér od spoločnosti Wayfair Technologies otvorili možnosti AR takmer pre každého.

Automobilka Jeep využíva AR na svojej webstránke “Build & Price a Jeep” (vytvorte a oceňte svoje vozidlo Jeep). Takto potenciálni zákazníci vedia nasadnúť do auta bez toho, aby museli osobne navštíviť dealerov. Ďalšie segmenty zahŕňajú maloobchody a e-shopy, ktoré môžu využiť AR na podporu predaja produktov a vylepšiť zákaznícku skúsenosť v nákupnom procese.

7. Zrnitosť

Pevné mriežky a flat časti jednej farby môžu skutočne znížiť celkový dojem z webdizajnu. Zrnité textúry im môžu dať prirodzenejší pocit. Tento príklad môžeme vidieť na webstránke Studio Gusto.

Používa dizajnové prvky pre drsnejšie prvky, ktorá pôsobí prirodzenejšie než dokonalé tvary, ktoré sú bežné v mnohých webových dizajnoch.

8. Tlmené farby

Rovnako ako zrnitosť môže dodať dizajnu prirodzenejší dojem, dá sa to dosiahnuť aj cez tlmené farby.

Webstránka Magic Theater Studio využíva jemnú farebnú paletu s tmavými blokmi zelenej, čím vytvára viditeľný kontrast medzi sekciami webdizajnu. Tieto tlmené farby sú perfektným pozadím k ručne nakresleným ilustráciám a textu. V pozadí je mierna zrnitosť, ktorú je takmer nevidieť a jemné skreslenie svetlého a tmavého pozadia, vďaka čomu pôsobí dizajn veľmi živo.

Ďalej, marketingové portfólio Bobby Rowe parádne využíva farby. Zahŕňa informatívny a zábavný copywriting o práci, ktorú vykonáva. Je ťažké vytvoriť webdizajn, ktorý je dobre zaoblený, no tomuto sa to podarilo. Web má peknú variantu tlmených a výraznejších farieb.

9. Dizajn založený na personalizácii

Webdizajn urobil veľké kroky v ponúkaní personalizovaných skúseností. Toto môže byť hocičo od zahrnutia prepnutia medzi tmavým/svetlým režimom a ďalšími spôsobmi zmeniť vzhľad webstránky a navigáciu na ponuku obsahu upraveného na mieru vo vlastných playlistoch na Spotify.

Nové praktiky v dizajne a algoritmy robia z internetu menej pasívnu používateľsku skúsenosť a namiesto toho sa webstránky viac zameriavajú na individuálne potreby používateľa. Budúcnosť prinesie ešte väčšie zameranie na splnenie potrieb a chuti pri navigovaní na webstránkach.

10. Gaussian blur efekt

Gaussian blur funguje dobre v poskytovaní zaostrenia na fotky a prechody. Tento efekt existuje už dlho, no dizajnéri ho používajú vo viac prominentných priestoroch webdizajnov.

Webstránka Moment House na svojej domácej stránke nepoužíva hero obrázok, ale uspokojujúci farebný gaussian blur. To vytvára atmosferický dojem a nadväzuje priamo na fotografiu panorámy mesta Los Angeles, ktorá nasleduje. Perfektne zachytáva ružové okuliare cez ktoré sa väčšina ľudí pozerá na Los Angeles.

Ďalšia webstránka Monograph Communications využíva gaussian blur v pozadí. Tento mix červenej, fialovej a modrej vytvára pekný kontrast medzi priamymi líniami a tučnou typografiou, ktorá ju prekrýva.

UX portfólio I am Tamara využíva rovnaký prístup v primiešaní gaussian blur do pozadia.

Goodbooks integruje akoby bublinu vytvorenú pomocou gaussian blur. Na nižšie uvedenom screenshote ho môžete vidieť, kedy to vytvára dojem, akoby bolo niečo schované za obrazovkou. Objekt vytvorený pomocou gaussian blur sa mení, no nikdy neuvidíme čo to vlastne je. Vďaka tomu ide o zaujímavú vizuálnu kotvu a upozorňuje na výzvu k akcii pod ňou, ktorá obsahuje jej 12 najlepších odporúčaných kníh.

Toto je niekoľko príkladov toho ako sa gaussian blur využíva v nových a zaujímavých spôsoboch.

11. Scrollytelling

Môžeme vidieť narastajúci trend dizajnérov rozprávať príbehy pomocou webstránok. Tu vstupuje scrollytelling – vizuálny storytelling, ktorý zvýrazňuje príbeh a zaujme tak používateľov.

Najlepšie praktiky využitia scrollytellingu zahŕňajú:

• udržujte efekty v malej oblasti,
• umožnite interakcie v ovládaní používateľov: umožnite im prehrávanie, pozastavenie interakcií a efektov,
• uistite sa, že akékoľvek scrollytelling prvky pomáhajú zvýrazniť príbeh a neodvádzajú pozornosť od dôležitého textu.

Dizajn webstránky Web Design Art History využíva malé a nenásilné animácie a nádherné ilustrácie, ktoré podporujú príbeh toho, ako história umenia informuje webdizajnu.

12. Tmavý režim

Tmavý režim sa objavuje na čoraz viac webstránkach. Veľa dizajnérov využíva estetiky tmavého režimu, kedy čierna poskytuje perfektné pozadie na to, aby ďalšie prvky dizajnu zažiarili na obrazovke.

V príklade nižšie agentúra Obys Agency vytvorila nádhernú poctu módnemu dizajnérovi Petrovi Lindberghovi, kedy spojila pozadie s čiernou textúrou a nádherným fontom serif.

13. Kreslené ilustrácie

Nie je to tak dávno, čo webstránky boli iba text a niekoľko obrázkov. Webdizajn sa odvtedy rozvinul, kedy dizajnéri vytvorili prácu, ktorú prepojili s používateľmi na osobnej úrovni. Kreslené ilustrácie vytvorili popularitu transformovania webstránky so zdravou dávkou ľudskosti. Kreslené ilustrácie umožňujú množstvo kreativity a personalizovania značky.

Dobrým príkladom je platforma Blush, ktorá umožňuje vyhľadávanie ilustrácii postavičiek, ako je táto skvelá sada od Vijay Verma.

14. Geometrické mriežky

Mriežky umožňujú množstvo flexibility v tom ako sa integrujú do dizajnu. Geometrické mriežky si získavajú pozornosť v tom akú majú štruktúru rozloženia s čistým a odvážnym vzhľadom.

Dizajn od Hudson Gavin and Martin používa bloky pre navigačné prvky, ako aj obsah. Tieto veľké štvorce farby sa zábavne navigujú a fungujú dobre na získavanie pozornosti.

Geometrické mriežky však nemusia mať univerzálne rozloženie. Webstránka Flowmingo využíva viac asymetrické geometrické rozloženie no s tým, že štvorce a priamky sú základom rozloženia. Hrubšie priamky zdôrazňujú hranaté tvary.

15. Vlastné kurzory

Kurzory sú pravdepodobne jedny z najviac prehliadaných aspektov webdizajnu, kedy väčšina obsahu využíva klasickú šípku. Keď dizajnér vezme túto nevýznamnú časť webstránky a premení ju na niečo zaujímavé, ide o úspech.

Webstránka HGM Legal má okrem geometrických mriežok taktiež aj vlastný kurzor, kedy využíva veľkú čiernu bodku.

Pen Tool spravil o krok naviac, kedy kurzor, animácie a text spolu vytvárajú takmer psychedelický účinok.

Dobrým príkladom je aj Buro, kde kurzor mení vzhľad podľa toho na ktorý prvok dizajnu prenesiete kurzor.

16. Rolovacie karty

Rolovacie karty sa stávajú integrálnou súčasťou dizajnu. Či už ide o rolovanie horizontálne alebo vertikálne, dodávajú webstránke svižný vzhľad a sú skvelým spôsobom ako prezentovať informácie.

Webstránka Ofcina využíva pútavú škálu farieb pre rolovacie karty.

17. Čiernobiely dizajn

Riedka biela vytvára čistý dizajn a následne akékoľvek farebné prvky získavajú ešte väčšiu pozornosť.

Dizajn pre Latinxs Who Design má množstvo bielej, pričom pri nasmerovaní kurzoru na niektoré časti sa čiernobiele obrázky premenia na farebný dizajn.

Aj niečo ako minimálny jednoduchý dizajn môže byť stále pútavým zážitkom s mikrointerakciami, animáciami a inými dynamickými efektmi.

Webstránka User Experience Database využíva čiernobiely dizajn, ktorý je minimálny a ľahký na prečítanie.

18. Audio

Poskytovanie audio ako integrálnej časti dizajnu odstraňuje bariéry pre používateľov so zrakovým postihnutím a prináša výhody aj tým, ktorí uprednostňujú počúvanie veľkého množstva textu na webových stránkach.

New York Times robí fantastickú prácu vo využívaní audia v niektorých článkoch.

19. Dizajn inšpirovaný tlačou

Hoci digitálne technológie nahrádzajú tradičné média, v niektorých miestach dochádza k znovuzrodeniu starých médii. Popularita vinylových albumov je dôkazom toho, že ľudia chcú niečo, čo nie je len kopa núl a jednotiek.

Rozloženie dizajnu, ktorý sa inšpiruje tlačou, plní túžbu ľudí spojiť sa s niečím v skutočnom svete. Časopisové rozloženia a ďalšie prvky tradičného grafického dizajnu vyvolávajú pocit hmatateľného zážitka z tlače na papier.

Príkladmi môžu byť webstránky Home Run Studio a Foundamour, ktoré našli inšpiráciu v tlači.

20. Nástroje na tvorbu webstránok a sady šablón

V posledných rokoch sa rozvinulo používanie šablónov webových stránok a nástroje na tvorby webstránok. Nástroje ako Elementor alebo WordPress Gutenberg umožňujú aj používateľom, ktorí nie sú programátori vytvárať funkčné webstránky v priebehu niekoľkých hodín. Sú rýchle, flexibilné a ponúkajú profesionálne predlohy a množstvo úprav.

21. Koláže

Koláže sú jedným z trendov, ktoré sa rozšírili v grafickom dizajne, obzvlášť na sociálnych médiach, pričom sa začínajú využívať aj vo svete webdizajnu. Je to miešanie médii ako sú fotografie, ilustrácie, grafika, animácie a text na vytvorenie pôsobivých estetík.

V digitálnom svete sa vyvinuli na zmiešané média ako sú animované koláže, veľké dekoratívne fonty, artistické textúry, ako aj animovaný skreslený text, ktorý vytvára zaujímavé výsledky. Ide o trend, ktorý je dobrý v kombinácii s minimálnym UX dizajnom.

22. Antidizajn

Ak nás rok 2020 niečo naučil, ide o zbavenie sa všetkých pravidiel. Antidizajn je trend, ktorý sa vyvinul z brutalizmu v roku 2019. Ide o kontroverzný štýl, ktorý sa objavil na sociálnych médiach a pop kultúre, pričom si razí svoju cestu aj na webstránkach a grafických dizajnoch.

Popísaný ako “surový”, “neospravedlňujúci sa” alebo aj “škaredý”, tento dizajn je o využívaní chaosu a nerovnomernosti ako opak štandardných prvkov dizajnu. Zahŕňa experimentálne a asymetrické rozloženia, preháňanie, skreslenie, vrstvenie a tradičné “škaredé” prvky, kvôli čomu nie je pre každého.

23. Minimalizmus

Trend, ktorý odmieta skončiť, minimalizmus bol pre mnohých dizajnérov gro práce počas poslednej dekády. O čo však presne ide? Menej ako vizuálny štýl a viac ako princípy dizajnu, minimalistický dizajn je založený na prvkoch ako sú základné tvary, čistý text, obmedzený počet farieb a prázdny priestor. Vo výsledku dostanete webdizajn, ktorý je jednoduchý, funkčný a zapamätateľný.

24. Organický dizajn

Jeden z najväčších dizajnových trendov 2020, organický dizajn je o využití prírody a sveta okolo nás ako inšpiráciu. Často používaný v produktovom dizajne, interiérovom dizajne a grafickom dizajne, tento trend získava momentum aj vo svete webdizajnu.

Organický dizajn je ovplyvnený zvýšenou pozornosťou na udržateľnosť a environmentalizmus, kedy zahŕňa teplé, prírodné farby, prirodzené tvary a surové organické textúry.

25. Funkcionalita, inkluzivita a dostupnosť

Funkcionalita webstránky bola vždy kľúčovým aspektom webdizajnu. Spolu s požiadavkami na rýchle načítanie webstránky, rýchlosť webstránky a responzívny dizajn sa taktiež zvýšili požiadavky na inkluzívnosť a dostupnosť a zahrnútie ľudí s postihnutím. Z tohto dôvodu sú potrebné webstránky, ktoré sú dostupné a funkčné pre všetkých.

Optimalizovať webstránku, aby bola funkčná, dostupná a inkluzívna nie je dobré len pre zákaznícky servis. Taktiež zvyšuje konverziu, zlepšuje SEO a rozširuje dosah na publikum.

Toto zahŕňa:

• vytvorenie silného farebného kontrastu medzi textom a pozadím,
• zahrnutie indikátorov zaostrenia, napríklad obdĺžnikový obrys, ktorý sa zobrazuje okolo odkazov pri použití navigácie pomocou klávesnice,
• používanie funkčných alt tagov pre obrázky,
• zahrnutie textu, ktorý je ľahký na pochopenie, priamočiary a bez žargónu.

Ak plánujete redizajn vášho webu, eshopu alebo aplikácie, tak sa vo vibration na to radi pozrieme. Stačí nás kontaktovať.

The post 25 trendov pre webdizajn na rok 2021 appeared first on vibration.sk.