A jó webdesign legfontosabb szempontjai

Mi az a webdesign egyáltalán?

Nem csak kinézetből, hanem a működésből is áll, azaz a UI (Felhasználói felület) és a UX (Felhasználói élmény) együttese alkotja. Az alapvetés tehát az, hogy egy jól kinéző felületen, logikusan felépített szerkezettel találkozzunk, amin könnyen megtaláljuk azt, amiért az oldalra érkeztünk.

Arculattervezés - még a konkrét design előtt

Ahhoz, hogy egy logóból vagy bizonyos színekből azonnal a mi márkánk jusson a felhasználó eszébe, szükség van egy jól felismerhető arculatra. Ez fogja meghatározni a felhasznált színösszeállítást, betűtípusokat, háttérelemeket az egész oldalon, mondhatni egy “téma”. Ha kész a terv, csak akkor állunk neki a konkrét dizájn elkészítésének.
Egyébként ha belegondolunk, mi is szívesebben vásárolunk egy ismert márkától, ez mindenkivel így van.

Egyszerűség / Átláthatóság / Könnyű használat

Bármennyire is szeretnénk a lehető legegyedibb kinézetet, sajnos nem mindig célravezető szétborítani a layoutot teljesen.
Ha megnézünk néhány modern oldalt, biztosan találunk majd hasonló vagy majdnem teljesen ugyanolyan megoldásokat. Ez nem azért van, mert a webdesigner lusta és csak másolgat, hanem azért, mert ezek már jól bevált elemek, amelyek kézre állnak és logikusak a legtöbb felhasználó számára.
Az egyszerű, de bevált dizájn egyébként még egy szempontból jó lehet: Általában kevesebb kódot igényelnek, ezáltal gyorsabbak és kevesebb idő alatt, olcsóbban készülnek el.
A modern stílusok 2022-ben egyébként is letisztult, egyszerű elemeket használnak, így ezzel a megközelítéssel nagyon is jól kinéző felületeket lehet alkotni.

Következetesség

A jó webdesign egyik kulcsfontosságú eleme a következetesség. Ezalatt értjük az oldal dizájn részét, és a funkciókat is. Ügyelnünk kell arra, hogy ránézésre is “összefüggő” legyen az oldalunk, meglegyen a “harmónia” a használt elemeink között.

Érdemes a projekt elkezdése előtt megtervezni a kulcsfontosságú komponenseket, amiket előre tudunk, hogy kelleni fognak.

Ilyen lehet például egy gomb. Érdemes 3-4 különböző témát létrehozni. Általában ennyi megjelenési forma elég szokott lenni a projekt egészére. Ez azért is hasznos, mert nem kell a fejlesztés során azon gondolkozni, hogy hogyan is nézzen ki egy adott gomb, mivel már előre megterveztük őket. Egyedül azt kell eldöntenünk, hogy a gomb funkciója mennyire fontos, mennyire kell kiemelnünk, illetve az adott háttérhez melyik illik jobban. Ez alapján már egyszerűen ki tudjuk választani a megfelelőt.

Ha valahol például lekerekített gombokat használtunk, akkor illik figyelni arra, hogy mindegyik ilyen legyen, ne keverjük a témákat. Esetleg ha erősebben szeretnénk kiemelni egy adott elemet, akkor használhatunk más mértékű border-radiust, de ügyeljünk rá, hogy ne rontsuk el vele az összképet.

Ide sorolhatjuk még a dizájnerek között typography és a spacing néven ismert fogalmakat is.

Tipográfia

Webdizájnban a typography tulajdonképpen az oldalunkon megjelenő szövegek stílusát, megjelenését írja le. Érdemes olyan fontkészletet választanunk, ami illik a projektünk témájához. A fontokat különböző kategóriákba sorolhatjuk, melyek ismeretével egyszerűbb lehet a választás.

A teljesség igénye nélkül pár példa:

Serif

Ez a fajta fontkészlet “klasszikus” megjelenést biztosít oldalunknak. Szokták talpas betűknek is nevezni őket, mivel ránézése olyan, mintha maguk a betűk egy “talphoz” lennének rögzítve. Újságok, magazinok is előszeretettel használják. Alapvetően nyomtatáshoz találták ki, de olyan projekteknél, ahol “eleganciát” kell sugallnia a weboldalnak megfontolandó lehet a serif font használata.

Sans Serif

Ennél a típusnál a Seriffel ellentétben nincsenek “talpakhoz” rögzítve a betűink (a nevéből is ez derül ki, mivel a “sans” francia szó jelentése “nélküli”). A Sans Serif fontok használatával egy letisztult, modern megjelenést biztosíthatunk weboldalunknak. Számítógépeken, vagy okostelefonokon “természetesebbnek” érződik az olvasás, ha ilyen betűket használunk.

Display

Díszes megjelenést biztosít betűinknek. Ezeket a fontokat dekorációs, figyelemfelkeltő céllal használhatjuk, de ügyelnünk kell rá, hogy egybefüggő szövegeken ne alkalmazzuk, mivel ilyen esetekben zavaróak lehetnek.

Egy projekt során érdemes kombinálni a különböző típusú fontokat. A megfelelő használatukkal biztosak lehetünk benne, hogy sikerülni fog egy “összeillő” tipográfia megalkotása.

Érdemes figyelni még arra is, hogy ne alkalmazzunk “túlhasznált” betűkészleteket, továbbá a fentebb felsorolt kategóriákból se használjunk egyszerre több típust, mert bántja az ember szemét.

Kiemelési céllal szokás használni másik betűtípust, illetve ha valamilyen egyedi, nem beépített betűtípust használunk alapként, érdemes megadni egy szabványos fallback fontot is, így ha a felhasználónk böngészője nem tudja betölteni az egyedit, a fallbacket még tudja használni.

Spacing

A spacing az oldalon megjelenő elemek közötti hely. Ez mind a 4 irányban, egymástól függetlenül szabályozható.

A projekt elején egy szorzót szokás meghatározni, amit a későbbiekben a spacingre használunk. Például elég gyakori a 4 pixel egész számú többszöröseinek használata, amikből úgynevezett utility classokat generálunk. Ezek segítenek majd egységesen tartani a spacinget, mert ha 1 egységnyi távot szeretnénk, akkor csak megadjuk osztálynak, hogy mb-1 és az aktuális elem alá be is kerül ez a távolság.

Számos frontend könyvtárban már van erre alapbeállítás, például a Bootstrapben vagy a Tailwindben, amit telepítés után csak használnunk kell, nincs feltétlen szükség konfigurációra.

Megfelelő színpaletta kiválasztása

A modern design trendek alapvetően kevés színt használnak egyszerre, hiszen a letisztult kinézet lett a menő. Az ezredforduló környékén a weboldalak rengeteg színt használtak, amik mára elég komikusnak tűnnek.

Ha van egy felépített brand vagy egy kész arculat, akkor értelemszerűen annak a színeit fogjuk használni. Ha nincs, akkor először az alap színét találjuk ki, amire a tartalom kerül majd. Ennek nem kell feltétlen fehérnek lennie, de kétségtelen, hogy az elegáns megjelenés könnyebben elérhető vele. Ezután kell egy olyan szín, amit elsődlegesként fogunk használni, ez adja majd a kisebb elemek hátterét, a gombok alapszínét, körvonalakat és így tovább. Ezen kívül szükség van egy másodlagos, kevesebbszer használt színre is, amellyel az elsődlegesből ki tudunk emelni fontosabb elemeket, illetve kontrasztot adhatunk egy-egy elementnek. Ehhez lehet további színeket adni, de a legtöbbször elég ennyi, hiszen ezeknek a sötétebb/világosabb árnyalatait is használhatjuk.

Tipp: A komplementer színek gyakran jól mutatnak egymás mellett, ha megfelelő arányban használjuk őket.