Tvorba webstránok, e-shopov a blogov vo WordPresse
Tvorba webstránok, e-shopov a blogov vo WordPresse
Tvorba webstránok, e-shopov a blogov vo WordPresse

Ak v tomto roku vytvárate webstránku, určite chcete aby pôsobila moderne tento rok, aj pár ďalších. Poďme sa pozrieť na zopár nových trendov, aj osvedčených metód, vďaka ktorým môžete mať ohurujúco modernú, alebo nadčasovú stránku s využitím technológií „z tohto storočia“.

Pre moderný web sú kreatívny dizajn a úžasné používateľské skúsenosti nielen príjemnými doplnkami, ale sú nevyhnutné pre úspech webu. Tu je pár nápadov, čo vyzerá dobre, robí dobrý dojem na zákazníkov(UX) a čo je základom pre očakávané výsledky návštevnosti.

Kúúl farby

V posledných rokoch sme tu už mali čierne webstránky, biele webstránky, pastelové farby, kontrastné farby. Takže čo ešte vymyslíme?

Príjemné farby!

Ľudia dnes trávia veľmi veľa času pred obrazovkou. Každý asi pozná pocit unavených očí. Webdizajnéri to zohľadňujú pri farebných schémach ktoré čo najmenej namáhajú oči.

Využívajú sa tlmené zelené, pastelovo modré, teplé hnedé alebo svetloružové odtiene. Webstránky vďaka nim pôsobia menej dramaticky a prirodzene navodzujú pokoj a relaxáciu.

Čierne/biele

V roku 2020 tu boli čierne stránky. Menej unavujú oči, no sú aj výrazné vďaka kombinácii s bielym textom a sýtymi farbami. Osvedčili sa a budú tu aj naďalej. Tentokrát však prichádza vylepšenie v podobe „Night shift“, teda prepínača medzi svetlou a tmavou verziou stránky v závislosti od osvetlenia a pohodlnosti prezerania.

3D farby

Pamätáte, ako boli v poslednej dobe zatracované tiene za obrázkami? Tak už nie sú! Rozmazané farby, tieň za obrázkom, tieňovanie v obrázku, za textom, v ikonke, za ikonkou, hocikde kde môže vytvoriť 3D ilúziu. Využívajú sa nedokonalé rozmazané prechody, kontrastné farby, jemné tieňovanie, gradienty, čokoľvek čo vyzerá realisticky.

Sýte farby

Nie vždy chcete aby Vaša stránka pôsobila upokojujúco a relaxačne. Niekedy je žiadúce zanechať silný dojem, vyvolať akciu, pôsobiť odvážne, mlado…vtedy použite sýte farby. Odporúča sa v kombinácii s minimalizmom

Animácie

Udržať pozornosť používateľov na jednoduchej statickej vstupnej stránke je ťažké, takže pridanie responzívnych prvkov webového dizajnu, ako sú animácie a interaktívne prvky, môže používateľov na stránke dlhšie zaujať. Používajú sa najmä na vstupnej stránke, hneď od začiatku.

Parallax

animovanie, alebo posúvanie obsahu spolu s pohybom myši nemusí byť len vertikálne. Toto je nástroj, s ktorým sa dajú robiť krásne veci. Veľmi populárne je posúvanie v horizontálnom smere, dokonca diagonálne posúvanie, ktoré má z používateľského hľadiska výrazný vplyv. Jednoduchou kombináciou posunu s animovanými textami a geometrickými tvarmi, alebo abstraktnými obrázkami vieme vtiahnuť užívateľa do deja.

Jeden pekný príklad nájdete tu: https://bjoernwieland.com/

príklad použitia parallax efektu - stránka čokolády

Tu je ďalší, ešte viac prepracovaný – roztrhnite obal čokolády:

https://simplychocolate.dk/product/fresh-freddie/

 

Mikro-animácie

Mikroanimácie sú malé animácie, ktoré zlepšujú zážitok na stránke. Čoraz častejšie sa stretávame na webstránkach s tým, že mraky na oblohe v obrázku sa hýbu, malinká postava sa pohybuje akoby v priestore obrázka. Spolu s rozvojom a čoraz väčšou sofistikovanosťou a dostupnosťou programov, ktoré umožňujú takéto animovanie obrázkov, sa budú takéto efekty objavovať častejšie.

https://dribbble.com/shots/11070385-Filter-UX

Mikro-interakcie

Mikrointerakcie sú malé animácie, ktoré používateľom poskytujú jemnú spätnú väzbu. Napríklad, keď prejdete myškou nad tlačítko, zmení sa farba písma, odtień, alebo veľkosť tlačítka. Takéto prvky sa budú používať čoraz viac a dokonalejšie. Napríklad prejdete myškou nad nejaký text a ten sa Vám zmení na obrázok, alebo sa zmení tvar kurzoru, prípadne ikonka sa pohne.

https://dribbble.com/shots/13029490-Digital-Wallet-

Prvky rozloženia

Prázdne miesta a/alebo výrazné písmo

V dnešnej uponáhľanej spoločnosti majú používatelia stále menej času na čítanie webových stránok. Ľudia už nečítajú dlhé texty, len to, čo ich na prvý pohľad zaujme. Dizajn sa tomu prispôsobuje a často sa využívajú veľké, tučné názvy a k nim skrátené texty, aby návštevníkov rýchlo zaujali a znížil sa čas potrebný na konverziu.

Využitie bieleho priestoru je o tom, že dáte obsahu priestor. Zážitok je pre návštevníkov vašich webových stránok príjemnejší, obsah lepšie vynikne a zlepší sa čitateľnosť.

Vizualizácia dát

Vizualizácia dát vytvára z vašich údajov obrázky, ktoré zaujmú čitateľa a vďaka tomu chcú získať viac informácií o vašej značke. Využite tabuľky, grafy, mapy

Päta stránky

Úplnou novinkou v modernom webdizajne je využitie päty pre zakomponovanie aj iných prvkov, ako len kontaktných informácií a copyright informácie alebo ikoniek sociálnych sietí na zdieľanie. Určite to nie je miesto, kde môžete prezentovať jedinečnosť dizajnu svojich webových stránok alebo poskytnúť základné informácie. To patrí na začiatok. Ale je to miesto, kde návštevníci hľadajú konkrétne informácie a zároveň možno posledné miesto stránky, ktoré vidia. Vaša posledná šanca postarať sa o to, aby ešte chvíľu zostali, alebo sa preklikli ďalej.

Takže päta sa najnovšie mení na plnohodnotný priestor, ktorý môže obsahovať okrem doteraz používaných prvkov aj galériu obrázkov, registračný formulár, kontaktný formulár, kalendár plánovaných udalostí, link na webkamery alebo ďalšie konkrétne informácie.

Návštevníci vašej stránky by nikdy nemali váhať, čo ďalej. Zvážte aj použitie indícií na nasmerovanie ľudí (Call-to-action) na koniec stránky, k päte.

Hlavne nezabudnite

  • Mať rýchlu stránku, lebo ak sa človek nedočká načítania stránky max do 4 sekúnd, klikne inde. Najnovšie niektoré zdroje uvádzajú, že polovica ľudí nepočká ani 2 sekundy
  • Responzívny dizajn, tzn. pekné zobrazenie v počítači aj na mobile je už samozrejmosť
  • SSL certifikát musí byť
  • ALT texty pri obrázkoch pre ľudí s poruchami zraku, ktorí požívajú čítačky textu
  • Color blind palette – stránky majú byť viditeľné aj pre farboslepých

Čo príde potom?

  • Novým trendom hlavne pre e-commerce je personalizovaný obsah podľa vašej geografickej polohy a histórie prehliadania
  • Chatboty, ktoré odpovedajú takmer ako ľudia
  • Hlasové vyhľadávanie
  • Virtuálna realita sa bude používať nielen v realitách, hoteliérstve alebo na to aby ste si predstavili kus nábytku v svojej obývačke. Pri všetkých produktoch, kde pomôže ak si zákazník vizualizuje produkt, jej využitie má zmysel.
  • Nový prístup v umiestnení navigačného menu a kontaktných tlačítok v mobilnom zobrazení. Namiesto doteraz používanej hornej lišty sa využíva priestor dosahu palca