Čo je populárne na stránkach v roku 2018: 7 hlavných trendov vo web dizajne

V tomto článku sa budeme zaoberať technológiami VR, hrami, interaktívnymi mapami a ďalšími najnovšími funkciami používanými vo web dizajne. To všetko s príkladmi zozbieranými na stránkach a súťažiach pre web dizajnérov, ako aj v portfóliu špičkových štúdií a digitálnych agentúr. Všeobecne platí, že čítanie, hodinky, byť inšpirovaný.

animácie

Animáciu na stránkach nájdete už v roku 2000. V posledných rokoch sa však posunul zo stavu „za krásu“ na riešenie, ktoré pomáha poskytovať informácie efektívnejšie ako text a obrázky.

Priemyselné brúsky

Dostať sa na stránky nemeckej spoločnosti WEIMA, vyrábať priemyselné brúsky a lisy na odpad, okamžite pochopíte, čo sa ponúka, ako funguje a prečo je to potrebné.

Na prvej obrazovke bola demonštrovaná prevádzka strojov. A tipy, ktoré sa objavia, keď sa vznášate nad obrázkami, odhaľujú hlavné výhody zariadenia.

Poisťovňa

Na promo stránke poisťovne "Arsenal" s pomocou SVG animácie sú ilustrované najčastejšie poistené udalosti. A izometrický štýl, v ktorom sú zobrazené, umožňuje presnejšie znázornenie architektúry a automobilov, čo vytvára 3D efekt.

Výrobca zariadení a chemikálií

Medlex vyrába a dodáva chemické činidlá, zdravotnícke zariadenia a detergenty. Obrazovky na hlavnej stránke webu zobrazujú služby a animácia robí obrázky živšími.

Ďalšie príklady návrhu služieb nájdete v článku Alexey Alexandrov „Ako navrhnúť stránku Služby: príklad 14 spoločností z rôznych oblastí podnikania“

Online aukcia

Na webovej stránke Internetovej aukcie môže umelec dražiť obrázok a zberateľ na druhej strane sveta ho kúpi. A pomocou animácie na nej vysvetľuje zložitú mechaniku a fázy systému.

interaktívne

Posledných pár rokov sa začali objavovať čoraz viac interaktívnych stránok. Užívateľ má možnosť kontaktovať prvky na stránke: push, stretch, connect, draw, atď. Takéto riešenia vždy pomáhajú vyniknúť a zaujať pozornosť.

Zábavný kanál

Adult Swim je blok na kanáli Cartoon Network. Na ňom od 23.00 do 6.00 hod. A karikatúry pre dospelých. Na prvej obrazovke stránky venovanej tomuto kanálu, môžete držať asi päť minút, strečink elastickú tvár hlavnej postavy z karikatúry "Ricky a Morty."

Web štúdio

Na webovej stránke webového štúdia AERO imituje kurzorovú mapu "Yandex.Metrica" ​​- jeden z hlavných nástrojov na analýzu internetového marketingu. Toto je pravdepodobne všetko, čo potrebujete vedieť o tejto stránke. Prejdite ďalej.

Značková agentúra

Názov značky agentúry Revelé preložený z latinčiny znamená odhaliť neznáme.

A spoločnosť svoju pozíciu odráža nielen v názve, ale aj na mieste. Interaktívne kruhy, ktoré zakrývajú obsah, musia byť posunuté späť, aby ste si text prečítali. Ak chcete vidieť informácie v sekcii s kontaktmi, musíte vymazať stránku pomocou kurzora.

Osobná stránka Illustratora

Na prvej obrazovke osobnej stránky ilustrátora vidíme sedem náhodne rozptýlených bodov. Môžu byť prepojené v ľubovoľnom poradí, po ktorom sa riadky zmenia na vtipný charakter. A ku všetkým kombináciám, s ktorými môžete prepojiť bodky, sú nakreslené rôzne ilustrácie. Podľa môjho názoru takéto rozhodnutie hovorí o majiteľovi stránky lepšie ako akýkoľvek predajný text a UTP.

Hry a testy

Čo sa týka informačného hluku, do obsahu sa dostávajú len naj motivovanejší návštevníci. Preto samotné správanie moderného používateľa posunulo dizajnérov a dizajnérov k tomuto trendu. Na rozdiel od čítania, každý miluje hrať a robiť testy na internete. Toto zvyšuje návštevnosť, pretože výsledok je zdieľaný s priateľmi a zdieľaný na sociálnych sieťach.

Náborová spoločnosť

Na majstrovstvách sveta vo futbale FIFA v Rusku Ancor prijal dobrovoľníkov a zamestnancov, ktorí využívajú HR-Landing na zhromažďovanie žiadostí o voľné pracovné miesta. A na zvýšenie pokrytia implementovali hernú mechaniku.

Z druhej obrazovky sme ponúkli ísť do uzavretej sekcie s hrou, ktorá je pravidelnou 2D arkádou. Umožňujú chytiť nahého futbalového fanúšika bežiaceho na ihrisko, skákať cez prekážky pozdĺž cesty (úprimne, nemohol som ho dohnať. Ak uspeješ, napíš do komentárov čo sa stane).

Umývanie áut

Na stránke autoumyvárne si môžete urobiť vtip test, ktorý vám povie o vzťahu s vaším autom. A šanca zdieľať výsledky zvyšuje vtipné otázky a gif.

Vodný park

A posledným príkladom sú minihry na mieste aquaparku. Návštevníci majú možnosť prejsť sa po celom území so šmýkačkami, bazénmi a plážami. A tak to bolo nudné, vývojári prišli s mnohými zaujímavými interaktivov. Môžete spadnúť z najvyššieho kopca, strieľať vodné delá alebo plávať v priehľadnej guli. Takéto rozhodnutia zahŕňajú nielen návštevníkov, ale aj to, že najdôležitejšia vec je sprostredkovaná emóciami.

Účinky paralaxy

Pravdepodobne ste videli stránky, kde sa pri rolovaní pohybujú objekty v popredí a pozadí rôznymi rýchlosťami, čím sa vytvára vzhľad trojice. V skutočnosti je to paralaxový efekt. To sa stalo rozšírený s príchodom technológií CSS3 a HTML5, čo vám umožní vytvoriť zaujímavejšie a živšie efekty. Teraz sa začalo objavovať stále viac a viac stránok, na ktorých slúžia nielen na dekoráciu, ale aj na odhaľovanie výhod alebo sprostredkovanie informácií.

nity

"K2 Expert" - internetový obchodný spojovací materiál a hardvér. Aby bolo možné predať svoj vlajkový produkt, spustili promo stránky pre nity. A nýt na ňom v doslovnom a obrazovom zmysle je v centre pozornosti. Počas celej stránky zostáva statický, zatiaľ čo zvyšok obsahu sa posúva. Táto technika doslova zachytí pozornosť návštevníka na stránku bez toho, aby ju uvoľnila na poslednú obrazovku.

Sledujte značku

Na stránke, ktorá predstavuje rad hodiniek, sa táto technika používa na efektívnejšie demonštráciu produktu. Keď prechádzame stránkou, mechanizmus hodín získa podrobnosti a objaví sa popis každého z nich.

Kozmetická spoločnosť

Viac ako raz sa objavil v nominácii "Webstránka dňa" v kozmetickej spoločnosti Awwwards Mowellens. Paralaxa na svojej internetovej stránke vytvára symbiózu s hladkými prechodmi a animáciou, ktorá je príjemná pre oči. Toto robí zdroj jedinečným a nezabudnuteľným.

Virtuálna realita

Toto je najťažšie implementovať príjem z celého zoznamu, ale jeden z najbežnejších. Na vytvorenie virtuálneho priestoru na stránke používajú celú sadu technológií, ako napríklad WebGL a WebVR, 3D modelovanie a textúrovanie.

Digitálne štúdio

Studio Little Workshop sa zaoberá využitím technológie VR pre podnikanie. Na preukázanie svojich služieb vytvorili webovú stránku s virtuálnou miestnosťou, kde odhalili plný potenciál navrhovaných technológií.

VR kino

Na stránke venovanej virtuálnemu kinu CINEVR vám ponúkame možnosť zakúpiť si lístok na reláciu filmu, ktorý sa vám páči, a sledovať ho pomocou VR-okuliarov. S cieľom priniesť všetky výhody tejto technológie, stránka implementovala interaktívny priestor 3D kina.

"Kaspersky Lab"

Na počesť 20. výročia "Kaspersky Lab" začala projekt predpovedať budúcnosť.

Každý môže zdieľať svoju víziu toho, čo nás čaká v roku 2050. A najlepšie nápady sa pridajú na stránku.

Ak ste umelec alebo dizajnér, môžete pre svoj futuristický projekt nakresliť priestor VR. Ak to chcete urobiť, prevezmite na stránku špeciálnu mriežku, pomocou ktorej nakreslíte obrázok, a potom ju nahrajte na svoj osobný účet. Potom je vaša ilustrácia premietnutá do gule a umiestnená na interaktívnej zemeguli, kde ju vidí každý návštevník.

Vlastná mechanika

Teraz sa dizajnéri čoraz viac odkláňajú od noriem budovania staveniska, hovoriac nie o plochých stránkach, vertikálnom rolovaní a známej navigácii.

Tento trend nie je viazaný na konkrétnu technológiu alebo príjem. V rôznych príkladoch - rôzne riešenia. Všetko záleží na myšlienke, ktorú chcete vyjadriť.

Energetická spoločnosť

Namiesto nudného opisu vykonanej práce RTE navrhlo portfólio vo forme interaktívnej mapy s projektmi, na ktorých sa zúčastnili. A keď prejdete na každý z objektov, zobrazí sa podrobný popis.

nakladateľstvo

Šikmé stránky na stránkach vydavateľstva Rhombus Press, napodobňujúce odtlačok z tlačiarenského stroja, rozbijú všetky kánony použiteľnosti. Klasické menu tiež nie je k dispozícii: môžete sa dostať do inej sekcie kliknutím na oblasť v jednom z rohov obrazovky.

Napriek tomu, koncepčná povaha stránky robí to oveľa zaujímavejšie a nezabudnuteľné ako akékoľvek iné stránky vlastníka.

Logistická spoločnosť

Na sekciách na webovej stránke dopravnej spoločnosti GUS-TRANS cestujeme pohybom kruhu na linke myšou. Dobrá vizuálna metafora a neštandardná prezentácia pomáhajú spoločnosti vyniknúť.

ilustrácií

Tento trend rastie od roku 2017 a pravdepodobne bude pokračovať aj v roku 2019. Veľkým plusom ilustrácií je, že na rozdiel od fotografických fotografií robia stránku jedinečnou a nezabudnuteľnou.

konferencie

Promo stránky tvorivej konferencie Epicurrence №8, ktorá sa konala v Yosemitskom národnom parku. To priťahuje dizajnérov, ilustrátorov, animátorov a ďalšie kreatívne chuť. Tam robia to, čo chcú: vytvárajú spoločné projekty, chodia na horolezectvo, lovia ryby, lov pokladov a večer sa zhromažďujú okolo ohňa pre inšpiratívne rozhovory.

Všeobecne platí, že návrh stránky venovanej tejto udalosti, dizajnér reagoval menej kreatívne. Na vyjadrenie správnych emócií maľoval tematické ilustrácie, inšpirované krásou rezervácie a atmosférou podujatia.

Portfólio aplikácie Illustrator

Mariano Pascual je ilustrátor a dizajnér z Argentíny. Namiesto štandardnej stránky vizitky, on kreslil paródiu na operačný systém, čo predstavuje stránku s jeho desktop, okná, kôš a prehliadač. Ukázalo sa, že zábava a non-vzorka ukázať svoju prácu.

Online požičiavanie

Creddy - služba na získavanie úverov a investícií v úrokoch. Ilustrácie na stránke sú metaforou pre zákazníkov a spoločnosti. Obrazy v nich vytvárajú dojem plastickej a otvorenej spoločnosti. A s cieľom sprostredkovať správne emócie každému divákovi, použili dve akcentačné farby: červenú - v sekcii pre dlžníkov, šedú - pre investorov.

Oblečenie značky

Stránka venovaná novej kolekcii Gucci Spring-Summer 2018 je kontinuálnou sekvenciou ilustrácií doplnenou animáciou a interaktívnymi momentmi. A kliknutím na akúkoľvek vec na obrázkoch ideme na jej kartu v internetovom obchode.

Čo ďalej

Väčšina módnych trendov je založená nielen na vízii dizajnérov, ale aj na správaní používateľov. Teraz ľudia neradi čítajú, každý rád sleduje a zúčastňuje sa. Preto sú moderné trendy na webových stránkach redukované na vizualizáciu a interaktivitu. To možno ignorovať a môžete sa prispôsobiť modernej realite a dosiahnuť výsledky na vyššej úrovni. Voľba je na vás.

Loading...

Zanechajte Svoj Komentár