Visi – nuo masinių kompanijų iki pradedančių tinklaraštininkų – pasikliaujame tinkamos išvaizdos svetaine. Šiais laikais net liberaliausias ar mažiausiai technologijas išmanantis vartotojas nepasitikės viduramžių GeoCities puslapiu (sveiki atvykę į 90-uosius). Svetainių kūrimas norint pasiekti tinkamo ir šiuolaikinio lygio svetainės išvaizdos yra labai svarbi internete. Tai gali sudaryti kokybišką ar, priešingai, sugadintą vartotojo patirtį, suvilioti klientus ir sukurti unikalią prekės ženklo išvaizdą. Štai kodėl šiame straipsnyje ieškome novatoriškiausių šių metų interneto dizaino pavyzdžių.
Pastaba: Norint užtikrinti šio straipsnio SEO veiksmingumą Lietuvos regione, turinyje yra panaudoti tam tikri raktiniai žodžiai, kurie gali būti parašyti su klaidomis. Tai yra daroma efektyvesnės paieškos tikslais – viskas Jūsų patogumui.
Nors vizualus šių dizainų pristatymas gali atrodyti subjektyvus, šio straipsnio tikslas nėra įtikinti skaitytojus, kad visos svetainės turi būti panašios. Šis straipsnis apibrėžia tendencijas, a) į kurias verta atkreipti dėmesį, ir b) naudingos iliustruojant esminį dalyką: kaip šių tendencijų dėka pagerinti svetainės funkcionalumą. Dėl šios priežasties šio straipsnio pagrinde bus nagrinėjamas svetainių kūrimas ir svarbiausių elementų funkcija, o ne išvaizda.
Dažniausiai ieškosime vaizdinių komponentų, kurie prideda vertės jūsų svetainei, ypač daugialypės terpės metodų. Tikimės, kad net tik profesionalus dizaineris, bet net ir paprastas skaitytojas taip pat gali tai panaudoti įgyvendinant interneto rinkodarą. Nesvarbu, ar esate laisvai samdomas web-dizaineris, ar dirbate įmonėje, mes tikimės, kad šis straipsnis suteiks jums bent šiek tiek idėjų, kurias galėsite panaudoti.
Techninis minimalizmas miršta
Minimalistinių prekės ženklo logotipų ir svetainių kūrimas pasirodė įmonėms lengvesnis. Tačiau, kaip rodo tyrimai, ši tendencija jau yra neaktuali. Paprastam vartotojui minimalistiniai logotipai atrodo neproduktyvūs, nes jie neišreiškia įmonių tikslų. Abstraktūs konceptai mums nieko nepasako apie tai, kokias paslaugas įmonė siūlo ar kokias prekes bando mums parduoti.
Laikui bėgant milžinų kompanijų – nuo Twitter iki Instagram – logotipuose matėme populiarėjantį minimalizmą. Jie tiesiog nori būti įsimenami vartotojams ilgam laikui. Mums šie logotipai jau yra tiek artimi, kad atpažįstame įmonę vien tik matydami jų logotipų kontūrus. Jūsų įmonės logotipui stipriai įsišaknijus žmonių atmintyje, tai yra ženklus žingsnis jį minimalizuoti ir supaprastinti iki pat pagrindinių komponentų.
Tačiau minimalizmo realizavimo svetainėje ar logotipo išvaizdoje metu kažkas gali nepasisekti. Naujo Google kompanijos sukurto G-suite dizaino Gmail’e yra blogas minimalizmo pavyzdys:
Pertvarkymas suglumino daugelį žmonių
Naujų dizainų neefektyvumo priežastis yra ta, kad šia nauja išvaizda jie labiau norėjo paryškinti prekės ženklą, nei funkciją. Dizaineriams labiau norėjosi universalizuoti spalvų gamą ir sukurti minimalistines formas, nei išlaikyti simbolinę funkcijos prasmę.
Retro stilizuoti dizaino elementai
Kaip sakoma, „nauja – tai seniai pamiršta sena“, (tai ypač iliustruoja mano mintį jei dar to negirdėjote). Tačiau, mes neturie omeny, kad interneto svetainių kūrimas ir jų dizainas turi atrodyti kaip nostalgiški 90-ųjų dizainai, iš naujo interpretuojami mūsų laikų pokyčių atžvilgiu. Šiuo metu yra visa karta skaitmeninių čiabuvių, kurie mielai prisimena retro stiliaus technologijas ir „dinozaurų laikų internetą“.
Team3D svetainė šiuo atžvilgiu yra fantastiškas pavyzdys. Joje yra “old-schoolinio”, senamadiško dizaino atspalvis: ryškios 80-ųjų spalvų schemos, kiber-tinkleliai, senosios mokyklos GUI (grafinės vartotojo sąsajos) komponentai viršuje dešinėje, ryškiai rausvi grafičiai ir dideli, griozdiški, rožiniai sąsajos mygtukai. Nebūdami įkyrūs, jie taip pat sugeba įkelti animaciją puslapyje, o tai suteikia retro stiliui daugiau atmosferos.
Team3D retro stilizavimas
Nors Team3D svetainė yra „retro“ versija, kai kuriems žmonėms tai gali pasirodyti įkyru ar net perdaug ryšku. Tačiau yra subtilesnių būdų, kaip tai padaryti, pavyzdžiui, taip, kaip kitame pavyzdyje:
Cycles Gladiator puslapis
Cycles Gladiator turi gana tvarkingą svetainę, kurią atsidarius matome prie stalo valgančių žmonių animaciją. O triukas yra tas, kad kamera yra sufokusuota ant vyno butelio, kuris yra įmonės parduodama prekė. Scroll’inant žemiau, prasideda retro stiliaus svetainės išdėstymas: puslapis turi susidėvėjusio atviruko išvaizdą, pirmasis paveikslėlis ir vaizdo įrašas turi tą prislopintą polaroidinį prieskonį, o šriftai yra pavaizduoti senamadišku nuožulnumu ir raminančiomis spalvomis.
Be to, nors šis puslapis atrodo paprastesnis ir turi mažiau detalių nei ankstesnis pavyzdys, jis neatrodo tuščias dėl tokių papildomų detalių, pavyzdžiui, ekrano viduryje pjaustančios linijos. Šrifto skaidrumo dėka paveikslai lyg tai kvėpuoja ir atrodo lengvesni, ir kiekviena spalva atitinka nuotaiką. Toks stilizavimas įrodo, kad norint suformuoti individualybę nereikia kelti į svetainę visus elementus kartu. Kartais mažiau yra stipriau.
Abi svetainės pažadina nostalgiškus jausmus ir klasikinės estetikos prisiminimus, ir tuo pačiu interpretuoja turinį šiuolaikišku atžvilgiu. Galima rinktis iš daugybės dizaino variantų ir stilių, tačiau svarbu, kad jis išreikštų klasiką, bet ir tuo pačiu – aktualumą.
3D svetainių kūrimas ir animacija
Kiekvienas profesionalus svetainės dizaineris gali įvertinti gerai atliktą “gylio” efektą. 3D formato svetainių kūrimas gali būti sudėtingas, tačiau jis suteikia daug vaizdinio kolorito. Tai taip pat gali efektyviai panaudoti erdvę, kurioje elementai gali atsiskirti nuo plokštumų, paliekant daugiau vertikalios ir horizontalios informacijos.
Erzinančių patirčių muziejus fantastiškai tai iliustruoja:
Ši nuotaikinga ZenDesk svetainė yra skaitmeninė ekskursija po muziejų, demonstruojanti daugelį erzinančių dalykų. Čia jie naudoja daugiasluoksnį efektą įtraukdami žiūrovą į lyg tai naršyklės žaidimą. Life in Vogue veikia panašiai kalbant apie puslapių pavertimo mechanizmą, sklandžiai pereinant nuo puslapio vartymo iki įėjimo į liftą. Tai labai patrauklus ir puikus būdas nuvesti žiūrovą per svetainę.
Life in Vogue
Nors ne visi 3D efektai turi būti tokie akivaizdūs. Kai kurie gali aktyvuoti vartotojo jusles be ilgos kelionės per svetainės puslapį.
Miksuokite ir kombinuokite daugialypę terpę su horizontaliu ir vertikaliu slinkimu
Kiekviena įmonė naudojasi interneto multimedijos funkcijomis, dažnai viename puslapyje įkeldama 3 ar 4 daugialypės terpės rūšis. Tačiau dėl tokių savybių viskas gali atrodyti netvarkinga, jei dizaineriai nesutelks pakankamai dėmesio tam tikroms detalėms. Yra būdų, kaip tai padaryti natūraliau, naudojant alternatyvius slinkimo formatus apart vertikalaus.
Svetainių kūrimas daugialypės terpės atžvilgiu turi nuostabų būdą įvairinti puslapį, ir tai yra horizontalus slinkimas. Nors apie tai jau žinome ilgą laiką, pastaraisiais metais horizontalus scrolling’as populiarėja, ir nemažai gerų pavyzdžių tai įrodo. Tikriausiai pagrindinė to priežastis yra tai, kiek tai pagerina navigaciją telefonu. Horizontalūs elementai, sumiksuoti su vertikaliais, leidžia optimizuoti erdvę, ypač jei turite daug kategorijų, iš kurių vartotojas renkasi.
Kitas Life in Vogue pavyzdys (rimtai, tai gera svetainė) pateikiamas jų atvirukų skyriuose:
Life in Vogue puslapio slinkimas
Puslapis pereina nuo vertikalaus teksto prie horizontalaus vaizdo slinkimo gana lengvai. Tai taupo puslapio vietą ir leidžia vartotojams lengvai naršyti skaidrių demonstravimo karuselėje. Tai patraukli alternatyva nuolatiniam slinkimui žemyn, o kūrėjams nereikės terpti paveikslėlius aplink straipsnį. Tai taip pat dera su likusios svetainės puslapio kinetiniu pobūdžiu.
Tai padeda išdėstyti visas svetainės dalis tinkamai kombinuojant atitinkančius judesius ir konkrečius tikslus. Jie taip pat neturi būti tame pačiame puslapyje. Kai vienas puslapis slenka vertikaliai, o kitas – horizontaliai, tai individualizuoja kiekvieną puslapį. Vienas gali atlikti skaidrių demonstravimo funkciją, o kitas vaidinti kaip įprastas tinklalapis.
UI/UX dizainerio Beno Hamiltono asmeninis puslapis kokybiškai įgyvendina keistą dizainą, kad potencialūs klientai galėtų tai pamatyti:
Beno Hamiltono puslapis
Jo darbai ir atvejo tyrimai pasirodo karuselės formatu, o pagrindinis puslapis yra vertikalus. Tai atitinka svetainės tikslą – parodyti jo UI/UX dizainus. Tai taip pat iliustruoja tvarkingą svetainės tinklelio naudojimą, kai vienas rėmelis išlieka statiškas (jo kontaktinė informacija), o kiti juda. Pastaba: papildomas bonusas jam už galimybę perjungti didelio kontrasto režimą.
AR svetainių kūrimas
Daugialypės terpės atžvilgiu, AR svetainių kūrimas yra kūrybingas. Šiuo metu AR gali būti apgaulinga, tačiau, ją teisingai pritaikant tai suteikia nerealių galimybių. Tai yra viena naujausių svetainių kūrimo technikų, todėl kol kas jos potencialą gali būti sunku įvertinti.
Integruodami QR kodus, kuriuos vartotojas gali nuskaityti, jie gali pasiekti svetaines išsamesnes funkcijas:
Artishock svetainėje yra keli panašūs QR kodai
Kitos įmonės, pavyzdžiui, mažmeninės prekybos parduotuvės, naudojo šią funkciją kurdami vizualizavimo būdus, kad iliustruotų savo paslaugas ir prekes:
IKEA programėlė leidžia įsivaizduoti, kaip jų produktas atrodytų jūsų namuose. Tokiu būdu galima pasiekti bet kurio jų svetainėje esančio produkto 3D modelį. Tai suteikia naują būdą parduoti prekes ir sustiprinti klientų įsitikinimą. QR kodai ir vizualizacijos taip pat skatina unikalius CTA (raginimus veikti).
Paralakso slinkimas
Paralakso slinkimas jūsų svetainei suteikia stulbinantį judesių diapazoną. Tai gali būti vienas aukščiausios kokybės svetainių kūrimo būdų, kaip organizuoti animuotą, judančią vaizdinę informaciją. Jis veikia su žymeklio judesiu, todėl jis tampa kur kas patrauklesnis, kai svetainė atsiskleidžia kartu su vartotojo keliu.
STEEZY Studio svetainės pagrindinis puslapis turi gana vaizdingą “akordeono” stiliaus besiplečiantį paralaksinį išdėstymą:
STEEZY Studios svetainės pagrindinis puslapis paralaksinis slinkimo mechanizmas
Spalvos keičiasi kartu su ekrano judesiu, o žemiau esantys vaizdai plečiasi vartotojui slenkant puslapyje. Tai suteikia daugiau judesio pateikiamai informacijai. Dauguma interneto vartotojų tiesiog skenuoja būtent vizualią informaciją svetainėje, tačiau tokie metodai gali tai ištaisyti. Tai optimaliai pritraukia vartotojo dėmesį ir pabrėžia tam tikrus aspektus tinkamai naudojant erdvę ir linijų judesį.
Paralaksas gali būti svarbi scroll’inimo priemonė, kuri sujungia visus šiuos elementus ir pasakoja skaitytojui patrauklią nuoseklią istoriją, vieną elementą po kito. Tai gali būti prekės ženklo istorija, tokia kaip Life in Vogue, ar individualesnė, kaip ankstesnio Beno Hamiltono puslapis.
Pasirinktiniai žymekliai ir efektai užvedus pelę
Fontsmith šrifto parodymo puslapis
Pasirinktiniai žymekliai dažnai veikia nepatikimai. Vartotojui tai gali pasirodyti erzinantis, nepraktiškas, užtat ryškus elementas. Tačiau net ir paprastesni žymekliai gali turėti savo pranašumų, ypač kai jie atlieka vedlio funkciją ir padeda (netrukdo) vartotojui naršyti svetainėje.
Nuostabus, nors neįprastas, pavyzdys yra Fontsmith, kur žymeklis pasidaro pusiau skaidrus, kad skaitytojas galėtų peržiūrėti įvairius šriftų tipus, vaizduojamus kaip blokelius. Žymeklis neuždengia blokų, o paryškinta spalva gerai dera su fonu. Tai padeda vartotojui paspausti ir patekti į jų pasirinktų šriftų puslapį, ir pamatyti net ir minimalų skirtumą tarp šriftų.
Full Bundle pagrindinis puslapis
Full Bundle ir Made in Haus.com taip pat turi kūrybiškus ir vizualiai malonius efektus užvedus pelę. Full Bundle užsiima adaptyviu projektavimu ir kuria kinetinius, į žaidimą panašius, dviejų spalvų trikampius, krentančius ir atšokančius reaguojant į pelę, o Made in Haus suteikia subtilesnį, kaleidoskopinį lavos lempos efektą, kuris keičiasi judant jūsų žymekliui. Abi svetainės padaro nepakartojamą įspūdį, pabrėždamos šių kompanijų kūrybiškumą.
Minnim: raudonojo vinilo formos žymeklis, susiliejantis su fono elementais
Minnim, panašiai, turi žymeklio efektą, kai vilkant žymeklį seka vinilo stiliaus piešiniai ir “susilieja” su kitomis panašiomis formomis. Tai išryškina kontaktus ir platformas jų kontaktų puslapyje, kuris yra tokia svetainės dalis, į kurią žmonės retai atkreipia dėmesį. Toks žymeklis padeda lankytojui prisiminti detales, kurios kitose svetainėse dažnai atrodo kasdieniškos.
Toks efektas yra subtilios, bet kokybiškos rinkodaros dalis. Ką aš asmeniškai pridėčiau paminėtose svetainėse tai galimybę pereiti į jų socialinių tinklų puslapius ir kontaktus paspaudus ant paveikslėlio.
Išvada
Tai ir tiek. Šie pavyzdžiai aiškiai parodo, kad svetainių kūrimas yra atskiras menas, tačiau įspėjame dėl subjektyvaus vartotojų mąstymo estetiniu požiūriu. Svetainių kūrimas ir dizainas pirmiausia turi būti funkcionalus (na tai pagrindinis profesionalaus svetainių kūrimo tikslas yra atlikti funkciją). Ir nesvarbu, ar tik pradedate kurti svetaines, ar naudojate WordPress temas, ar net jei esate pilnavertis profesionalus dizaineris.
Tikimės, kad šių svetainių dizaino ir kūrimo atvejai įrodo, kad galite integruoti gražius vaizdus, kurie taip pat atlieka naudingą funkciją ir nuosekliai veda auditoriją per jūsų tinklalapį. Tai ne tik gražūs tinklalapiai, bet ir funkcinis menas, skirtas tinkamai veikti ir adaptuotis. Galime padaryti svarbiausią išvada, kad svetainė turėtų būti teikiama lygiomis dalimis vizualios išvaizdos ir funkcijos atžvilgiu, kad būtų optimizuota vartotojo patirtis.
Jei jus domina mūsų web developerių ir svetainių kūrėjų paslaugos, praneškite mums.
Be straipsnio pagrindinio paveikslo, visi vaizdai priklauso atitinkamoms svetainėms.
