Webdesign trendek

Webdesign trendek

 

con-szolgaltatasaink

6 webdesign trend, amit ismerned kell

Ki ne emlékezne a ’90-es évek GIF-jeire vagy a legkorszerűbb flat designokra?

Az utóbbi időkben megnőtt a kereslet a reszponzív webdesignok iránt, mivel egyre több honlap válik mobil alapúvá, amely most még időszerűbb a Google mobil-barát frissítése miatt.

Vizsgáljunk meg néhányat a legnépszerűbb design trendek közül, a 2015-ös és 2016-os évből.

1. Az UI minták elterjedése

A reszponzív designok legnagyobb hátránya a különböző weblapok hasonlóságában rejlik. Azonban nem csak a reszponzív irányzatot okolhatjuk emiatt. A WordPress honlapkészítés elterjedése és az előre elkészített webdesign témák népszerűsödése is közre játszik.

wordpress honlapkészítés

Kép forrása

Azonban a hasonló megjelenés nem feltétlenül rossz dolog. Elsősorban azért, mert a mi internetezési szokásaink is változnak, ami nagyban hozzájárult sok UI design minta kialakulásához. A tervezési minták érlelődésével megfigyelhető némi innováció is az UI mintákban.

Más szóval, a kijelentkezés ugyanúgy kijelentkezés marad és úgy is kell működnie. Ugyanígy a bejelentkezési modell. Nincs szükség a kerék újra feltalálására, az UI minták is ugyanúgy biztosítják a kellemes felhasználói élményt.

Íme néhány minta, amit érdemes ismerni:

1. A hamburger menü: Míg vannak akik kritizálják ezt a mintát, ahhoz kétség sem fér, hogy a népszerűsége miatti megszokottsága megkönnyíti a felhasználók dolgát.

Hamburger menü, honlap tervezés

Kép forrása

2. Regisztráció: Ezzel a regisztrációhoz szükséges felépítéssel mindenhol találkozhatunk. Pár kitöltendő mező, vagy a gomb ami lehetővé teszi, hogy social account-tal regisztráljunk. Többlépcsős formában a varázslók is hatásosak, hiszen automatikusan kitöltik a szükséges mezőket, megkönnyítve a regisztrációt és arra ösztönzik a felhasználót, hogy csinálja végig az így leegyszerűsített folyamatot.

Regisztráció felépítése, honlap tervezés

Kép forrása

3. Hosszú görgetés: Ha minden fontos elem egy oldalon van, nincs is másra szükség csak legörgetni. Emellett szinte mindenki megszokta, hogy görgetni kell, a mobil felületek elterjedése miatt. Ugyanez a technika különösen jól működik az olyan weboldalakon, ami egy történet elmesélésére invitálja a felhasználókat, az oldal letisztult szakaszokra való osztása tökéletesen utánoz egy több oldalas weboldalt.

Hosszú görgetés, honlap készítés

Kép forrása

4. Kártyás felépítés: A Printest nyomán elterjedt kártyás felépítés már szinte mindenhol megtalálható a weben, mivel a „feldarabolt felépítés” által a különböző információk tökéletesen elkülönülnek. Minden egyes kártya egy egységes koncepciót képvisel. Az információ hordozó kártyák nagy előnye, hogy bármikor könnyen átrendezhetőek a szögletes formák miatt, akár különböző eszközökről is.

Kártyás felépítés, honlap készítés

Kép forrása

5. Hősies/Epikus képek: Mivel a látás a legerősebb az emberi érzékelésben, az epikus HD képek használata az egyik legjobb módja, hogy a lehető leggyorsabban megragadjuk a felhasználó érdeklődését. A sávszélesség előnyeinek és az adattömörítésnek hála, az oldal gyorsabban betöltődik, így a felhasználónak nem kell sokáig várakoznia. A legnépszerűbb elrendezésben egy HD kép kerül az oldal tetejére és ezt követik különböző szekciók vagy a fent említett kártyás elrendezés.

Hősies/Epikus képek, weblap készítés

Kép forrása

2. Animációkban gazdag

Hogy még interaktívabb és szórakoztatóbb legyen a felhasználói élmény, érdemes animációkat használni weboldalunkon.

Azonban nem szúrhatunk be animációkat bárhová. Érdemes fontolóra venni, hogy valóban beleillik-e az oldalunk felépítésébe és stílusába. Az animációkat két csoportba oszthatjuk:

1. Nagy felbontású animációk. Ezeket egy elsődleges érintkezési eszközként felhasználva nagyobb hatást érünk el a felhasználón, mint a folytonos görgetéssel vagy felugró értesítésekkel.
2. Kis felbontású animációk. Ezeket leggyakrabban hover eszközként vagy loading kurzorként alkalmazzuk és nem igényelnek felhasználói beavatkozást.

Íme a 7 legnépszerűbb animációs technika:

1. A töltődő animációk: Legfőbb szerepük a felhasználó szórakoztatása, gyönyörködtetése és a figyelem elterelése a közben unalmasan töltődő weboldalról.

Töltődő animációk, holnap készítés

Kép forrása

Minél egyszerűbb, annál jobb, érdemes elkerülni a hang használatát. Azonban arra ügyelnünk kell, hogy megegyezzen a honlapunk stílusával, mind formában, mind színeiben.

2. Navigáció és menühasználat (nem görgethető): A rejtett navigációs menük száma gyorsan megugrott az elmúlt évben, ennek legfőbb oka a helytakarékosság. A menü megjelenítése animációval történik, amikor a felhasználó egy bizonyos gombra kattint, ezzel mellőzve a kellemetlen élményt, ahogy a navigációs menü a hamburger ikon mögül előbukkan.

3. Hover animációk: A hover effektek egy sokkal intuitívabb érzést adnak egy oldalnak, ahogy a felhasználó az egérrel navigál a tartalmak között. Amikor egy felhasználó bizonytalan egyes elemek funkciójában, hajlamos a kurzort automatikusan az elem fölé vinni, hogy azonnali vizuális visszajelzést kapjon.

Hover animációk, weblap készítés

Kép forrása

4. Galériák és slideshow-k: Hogy ne terheljük le a felhasználót több különböző képpel egyszerre, a galéria és slideshow használat a legjobb megoldás. Nagyszerűen alkalmazhatóak fényképes weboldalakon, termék bemutatásra, valamint portfólió oldalakon is.

Galériák és slideshowk a honlap tervezésben

Kép forrása

5. Mozgó animációk: Mivel szemünket természetes módon vonzza a mozgás, ez tökéletes eszköze a figyelemfelkeltésnek. A mozgás segíthet a vizuális hierarchia kialakításában is, emellett érdekessé és vonzóvá tehet különböző elemeket weboldalunkon, ezáltal ösztönzi a felhasználót a kattintásra.

Mozgó animációk használata a honlapkészítésnél

Kép forrása

6. Görgetés: Az animációra épülő egyenletes görgetés lehetővé teszi, hogy a felhasználó határozza meg a görgetés gyorsaságát, és hogy az animáció hogyan valósuljon meg.

Görgetés, honlap tervezés

Kép forrása

7. Háttér animációk/videók: Egy egyszerű animált háttér segítheti a honlap könnyű áttekintését, azonban érdemes mértékkel használni, mivel könnyen zavaróvá válhat a felhasználó számára. Kulcs fontosságú, hogy csak egyes szekciókban alkalmazzuk vagy érdemes egy finomabb mozgást alkalmazni egy teljes képen.

Háttér animáció/videó, honlap tervezés

Kép forrása

3. Mikro-interakciók

A mikro-kölcsönhatások mindenhol jelen vannak, amikor például kikapcsoljuk a telefonon az ébresztőt vagy amikor kedvelünk valamit facebook-on. Ezt mind gondolkodás nélkül tesszük. Valószínű, hogy a mai napod is egy micro interakcióval kezdődött. Amikor kikapcsoltad az ébresztő órát a telefonodon, egy pillanat alatt kapcsolatba léptél a felhasználói felülettel. Egyre több ilyen interakciót építenek be az alkalmazásokba és a különböző használati eszközökbe.

Mikró interakciók, weblap készítés

Kép forrása

A mikro-kölcsönhatások több különböző dologban is segíthetnek nekünk:
1. Egy státuszt kommuniálnak vagy visszajelzést adnak
2. Megmutatja egy mozdulat eredményét
3. Segít a felhasználónak, hogy manipuláljon valamit

A mikro-kölcsönhatások bármely alkalmazás létfontosságú része. Csak úgy mint az animációknál, itt is érdemes odafigyelni az interakciók használatának mértékére. Nem szabad túlzásba esni, a legjobb, ha szinte észrevétlenül történnek. Fontolja meg minden részletét gondosan, de a leglényegesebb, hogy az egyes interakciók kölcsönözzék az emberi érintkezés érzetét. Ez által a szöveg emberibbé, azaz kevésbé robotikussá válik.

A mikro-kölcsönhatások fontos részei szinte minden digitális design projektnek. Előfordul, hogy úgy kell megalkotni egy weboldalt vagy egy mobil alkalmazást, hogy az nem tartalmaz bizonyos elemeket, viszont mégis interakcióba kell lépniük a felhasználóval.

Minden ilyen interakció típus egy ember-központúbb designt eredményez. Ezek az ember-központú koncepciók az alkalmazhatóság és a használhatóság kulcsai.

4. Material design: A flat design egy gazdagabb változata

Tavaly indította el a Google az új stílus nyelvét, a material designt, ami által sokkal élethűbbnek tűnik a grafika. Ezt az árnyék effektek használatával, mozgás és mélység koncepciók variálásával éri el.

Material design, honlap tervezés

Kép forrása

A material design célja, hogy egy letisztult, modern designt hozzon létre, ami a felhasználói élményre fókuszál. Míg a Google design esztétikáját sokan ellenzik, az új stílus irány már nagy népszerűségnek örvend.

A minimalista megjelenése miatt ez az irányzat sokban egyezik egy másik feltörekvő irányzattal, a flat designnal. A material design mindazonáltal él a mélység és árnyékhasználattal, ami nagyobb térbeliséget ad a designnak, mint a letisztultabb flat design.

Flat design,applikáció készítés

Kép forrása

Korábban a material design leginkább az appok designjára korlátozódott. A Google azonban bejelentette a „Material Design Lite”-ot júliusban, ami már jobban alkalmazható a weboldalaknál. Mindazonáltal az material design célja az volt, hogy egy jobb felhasználói felületet és jó felhasználói élményt is biztosítson a különböző eszközök között. A Lite vanilla CSS-t, HTML-t és Java Scriptet használ és célja, hogy egy egyszerű kinézetet és érzést adjon a weblapnak a material design által.

Az „Material Design Lite” nem épül semmilyen konkrét keretrendszerre, így a front-end eszközök széles választéka a designerek rendelkezésére áll weboldalaik megalkotása során. Ráadásul a kódolásnál szintén egyszerűbb dolgunk van.

5. Reszponzív design

A reszponzív webdesign szintén nagyon népszerűvé vált az elmúlt években, hála a mobil internet használat elterjedésének.

reszponzív design, honlap készítés

Kép forrása

Biztonsággal állíthatjuk, hogy a reszponzív design nem fog eltűnni egyhamar, mivel viszonylag egyszerű és olcsó módja egy teljesen működőképes és mobil-barát weboldal létrehozásának (a vállalkozások számára). Viszont a reszponzív webdesign bizonyos problémákkal, legfőképpen teljesítménybeli problémákkal jár, ha nem pontos a kivitelezés.

Annak érdekében, hogy kihozzuk a lehető legtöbbet a reszponzív design-ból, a Guy’s Pod szerint az alábbiakra kell odafigyelnünk a tervezés során:
1. Kerüljük a Java Script és a „CSS” kép betöltésénél a display:none címkét. Ez letölti a képet az eszközre és szükségtelenül terheli a weboldalat.
2. Ügyeljünk a reszponzív képhasználatra, tehát százalékban adjuk meg a képek méretét.
3. Használjunk feltételes betöltést JavaScriptnél, mivel sok JavaScript komponens, amit asztali gépes (PC) használatra terveztek, nem feltétlenül ugyanúgy jelenik meg egy kisebb képernyőjű eszközön. Érdemes különösen odafigyelni a harmadik-fél szkriptekre, mint például amiket a social médiás megosztásokra használunk, mivel ezeknek gyakori a negatív hatásuk és csökkentik a teljesítményt.
4. Használjunk RESS-t – Responsive and Server Side
5. Teszteljük oldalunk teljesítményét, ez által hatékonyan optimalizálhatjuk weboldalunkat

A teljesítmény nem csak a felhasználói élmény szempontjából fontos, a Google is szem előtt tartotta az új mobil-barát frissítés fejlesztése során, amit 2015 áprilisában adtak ki. A reszponzív webdesign erősen versenyképes a minimalista stílussal is, mivel alacsonyan tartja a weboldal méretét. Könnyen ötvözhetjük a reszponzív webdesignt a kártyahasználattal, mivel ez a design átalakítás során könnyen alkalmazható bármely képernyőméretre.

Kártyás felépítés

Kép forrása

A reszponzív webdesign már egyre kevésbé trend, manapság már sokkal inkább egy jó módszer. A sebesség-probléma kiküszöbölésére pedig már egyre több jó módszerrel álltak elő a designerek.

Kétség sem fér a reszponzivitás sokoldalúságához és népszerűségéhez, azonban a gyors sebesség nem elhanyagolható tényező, ha biztosítani akarjuk a jó felhasználói élményt.

6. A „Flat” sem most fog kimenni a divatból

A Flat design méltó versenytársát képezi a material designnak és a reszponzív webdesignnak.

Kártyás felépítés, honlap tervezés

Kép forrása

Ahogy végig tekintünk a flat designokon, valószínűleg észrevesszük az alábbi trendek előtérbe kerülését:

-hosszú árnyékok: Ezek nagyobb mélységet biztosítanak a grafikának.
-vibráló színek: A népszerű UI keretrendszerek és sablonok már egyre inkább megkövetelik az éles színhasználatot.
-egyszerű tipográfia: Az egyszerű betűtípusok biztosítják a szöveg olvashatóságát a flat designokon.
-szellem gombok: Ezek lehetővé teszik a gombok működést, anélkül, hogy megzavarnák a felhasználói élményt. Gyakori megjelenítési formája az outline-olt kattintható linkek, amik akkor változnak meg, amikor a felhasználó fölé húzza a kurzort
-minimalizmus: A minimalista megjelenítés a kevés elem használattal hozzájárul egy új, zsúfolatságtól mentes design létrejöttéhez.

További tanácsok a webdesign trendekhez:

Nem érdemes trendeket követni, csak azért mert épp felkapottak abban a pillanatban. Egy bizonyos trend okkal válik trenddé, hisz egy népszerű technikát képvisel, de jobb, ha megbizonyosodunk előbb arról, hogy valóban erre van szüksége a felhasználónak. Például egy e-commercial weboldal nem mutatna jól egy egyoldalas, lefelé görgetős oldalként.

A trendek nem többek, mint plusz eszközök egy designer eszköztárában. Győződjünk meg róla, hogy mindig a helyes eszközt választjuk a munka elvégzéséhez!

 

Comments are closed