A webdesign az interneten megjelenített webhelyek tervezésére utal. Általában a weboldal fejlesztésének felhasználói élmény szempontjairól szól, nem pedig a szoftverfejlesztésről. A webdesign korábban az asztali böngészők weboldalainak tervezésére összpontosított; azonban a 2010-es évek közepe óta a mobil és táblagépes böngészők tervezése is egyre fontosabbá vált.
A webdesigner a webhely megjelenésén, elrendezésén és bizonyos esetekben tartalmán dolgozik. A megjelenés például a használt színekhez, betűtípushoz és képekhez kapcsolódik. Az elrendezés az információ strukturált és kategorizált módjára utal. A jó webdesign könnyen használható, esztétikailag kellemes, és megfelel a felhasználói csoportnak és passzol a vállakozás vagy tulajdonosa arculatához. Sok weboldalt úgy terveztek, hogy az egyszerűségre összpontosítson, így nem jelennek meg olyan idegen „idegesítő” információk és funkciók, amelyek elvonhatják vagy összezavarhatják a felhasználókat. Mivel a webdesigner célja, hogy egy olyan webhelyet tervezzen, amely megnyeri és erősíti a célközönség bizalmát, ezért lehetőleg minden felhasználói frusztrációt okozó dolgot kerüljünk. (nagy villogó bannerek, állandóan felugró ablakok).
Miből áll a webdesign?
A webdesign számos összetevővel rendelkezik, amelyek együttműködnek a weboldal kész élményének megteremtésében, beleértve a grafikai tervezést, a felhasználói élmény tervezését, az interfész tervezését, a keresőoptimalizálást (SEO) és a tartalomkészítést. Ezek az elemek határozzák meg, hogyan néz ki, érzi és működik egy weboldal különböző eszközökön.
Webdesign különbözik a webfejlesztéstől?
Igen a webdesign különbözik a webfejlesztéstől, webfejlesztésről akkor beszélünk amikor a tényleges kódolás történik, ami a webhelyet működőképessé teszi. Amikor valaki weboldalt épít, webdesignerre és webfejlesztőre is szüksége van. Bár megtalálhatóak olyan webdesignerek, akik szintén webes és UX fejlesztők, de ezek alapvetően különböző készségkészletek.
A webdesignerek veszik az ötleteidet, és olyan tervé (mockup) alakítják őket, amely megmutatja, hogyan fog kinézni a jövőbeli webhelyed. A webdesignerek kezelik a weboldal tervezésének kreatív részét, ikább nevezném egy spciáli grafikai munkának.
A webfejlesztők– más néven mérnökök vagy programozók – fogják a webdesigner által készített tervet (mockup), és lefordítják kódolási nyelvre, hogy megjeleníthető legyen az interneten. A weboldalaknak egyedi funkcionalitást is adhatnak, mint például egy kalkulátor vagy egyedi kapcsolat mező ezek gyakran egyedi kódolást igényelnek és oldal spcifikusak.
A felhasználói élmény fejlesztője, más néven UX fejlesztő, az, aki felhasználóbaráttá teszi webhelyét. Technikai készségekkel és tervezési készségekkel is rendelkeznek, és olyan weboldalakat építnek, terveznek amelyek vonzzák és megtartják a látogatókat.
Az asztali és mobil weboldalak tervezésének két leggyakoribb módszere a reszponzív és adaptív kialakítás. A reszponzív kialakításban a tartalom dinamikusan mozog a képernyő méretétől függően; adaptív kialakítás esetén a webhely tartalma a szokásos képernyőméretnek megfelelő elrendezési méretben van rögzítve, jó példa erre a HVG oldala aminek van egy asztali verziója és egy mobilos verziója.
Miért fontos a webdesign?
Az első benyomások tényleg számítanak. Nem tudom eléggé hangsúlyozni ezt a pontot: ha nincs erős webes jelenléted, akkor az visszahúzza a márkádat brandedet.
A leendő ügyfelek, akik az interneten keresnek valakit, szolgáltatást, vagy egy márkát, és nem találnak semmit, azt gondolhatják, hogy megszűnt vagy valami nincs rendben hiszen nem találtak semmit róla.
Nézzük a következő esetet, találnak valamit rólad, termékedről vagy a vállakozásodról, de a weboldal rettenetesen elavult (Tudod miről beszélek ugye? Szerintem Te is találkoztál már ilyennel, bannerek villognak, látogatószám kijelzés esetleg időjárás widget) nem mobilbarát az oldal. Ez mit jelent a látogató számára? Úristen meneküljünk innen, ha ilyen a weboldala milyen lehet a szolgáltatás, termék mögötte, még akkor is ha ez nem feltétlenül igaz, és sajnos fordítva is működik. (szép modern weboldal, rossz szolgáltatás)
Legyen a látogató első benyomás jó, keltsen bizalmat azáltal, hogy honlapunk modern és letisztul. Most, hogy tudod, mi kicsoda és ki kicsoda, nézzük meg a nagyszerű webdesign néhány árulkodó jelét, és mi különbözteti meg azt a nem olyan nagyszerű webdesigntól.
Milyen a jó webdesign?
A jó webdesign nem szubjektív. Más típusú tervezéseknél, például illusztrációknál vagy matricáknál, sok a felhasználók ízlésén múlik, hogy mi számít „jónak”. A webdizájnnál sokkal határozottabb a határ a „jó” és a „nem jó” között. A jól megtervezett weboldal olyan weboldal, amely tökéletesen megteremti a látogató által keresett élményt.
A működő webdizájn a konvertáló webdizájn. A webes nyelven a „konvertálás” azt jelenti, hogy a felhasználót egy adott művelet végrehajtására késztetjük. A konverzió bármi lehet, például hírlevélre való feliratkozás, vásárlás, fiók megnyitása vagy további tartalmak elérése a webhelyen.
A hatékony webdesign néhány különböző elemet egyesít a konverziók előmozdítása érdekében.
Ezek tartalmazzák:
- A negatív tér használata
- Világosan bemutatott választási lehetőségek a felhasználók számára (minél kevesebb választási lehetősége van a felhasználónak, annál kisebb a valószínűsége annak, hogy túlterheltek és összezavarodnak)
- Nyilvánvaló, egyértelmű cselekvésre ösztönzés
- Korlátozott zavaró tényezők és jól átgondolt felhasználói út (vagyis csak olyan képek és szövegek használata, amelyek 100%-ban relevánsak az oldalon lévő témával kapcsolatban, csak olyan gombok vannak amelyek a kívánt műveletekhez vezetnek, a betűtípus-változatok használata a hangsúly és cselekvésre ösztönzés céljából csak a különböző betűtípusok megjelenítése érdekében)
- Reszponzív dizájn (olyan kialakítás, amely átméretezi és a felhasználó képernyőjéhez igazodik, így a weboldal könnyen használható bármilyen eszközön: telefon, táblagép, laptop vagy asztali böngésző.
- Megfelelő méretű, hierarchiát követő betűtípusok (lásd: „Korlátozott zavaró tényezők”)
- Releváns, jó minőségű tartalom és képek, amelyek felkeltik az olvasók figyelmét
- Egyensúly a szöveg és a képek mennyisége között az egyes oldalakon (a túl sok szöveg túlterhelheti a látogatót, a túl kevés szöveg pedig ugyanolyan elkalandozó lehet)
Ha úgy gondolod, hogy az esztétikus tervezési döntések nem befolyásolják a konverziót, gondold át újra. Webhelyednek vonzónak kell lennie – különösen a leendő felhasználó számára, ezért fontos kitalálni, megtervezni hogy milyen stílus fogja legjobban megszólítani őket.
Fektessen be olyan szemet gyönyörködtető képekbe, amelyek passzolnak a márkádhoz. Lehetőleg használj minél kevesebb stockfotót, és inkább a sajátjaidat használd.
A sikeres webhelytervezés kulcsa, hogy hű maradj a márkádhoz. Még a legcsodálatosabb webhely is használhatatlan, ha nem egyezik a márkával.
A hatékony webdizájn alapjai a következők:
- Gombok
- Betűtípusok
- Szín paletta
- Vizuális egyensúly a képek és a másolat között minden oldalon
Természetesen a jó webdizájn nem csak haszonelvű, a látogatók kedvelik az olyan webhelyeket, amelyek vonzóak és illeszkednek a márka esztétikájához. A lényeg, hogy az esztétikus és szép webdesignak köszönhetően a konverziós arányunk nőjön és a végén mindenki boldog legyen.
Webdesign: Ami nem működik
Megbeszéltük, milyen a jó webdesign. Most nézzük meg, hogy mi az ami nem működik.
Általános szabály, hogy a látogatóknak semmilyen munkát ne kelljen végezniük a webhely használatáért, egyértelműnek és intuitívnak kell lennie.
Íme néhány példa: Az egyértelmű cselekvésre ösztönzés nagyszerű webdesign; a nehezen értelmezhető átláthatatlan felület rossz webdizájn. A nagy kontrasztú betűtípusok okos, hatékony webdesign; az alacsony kontrasztú nehezen olvasható betűtípusok használata rossz webdizájnt jelentenek.
Íme néhány további elem, amelyet kerülni kell:
- Zavaró képek és hátterek. Általános szabály, hogy tartózkodj a „csempézett” hátterektől. Bár van néhány eset, amikor a csempézett háttér jó választás lehet, a legtöbb esetben ezek elvonják a figyelmet.
- Nem reszponzív kialakítás. Manapság a webhelyednek egyszerűen mobilreszponzívnak kell lennie.
- Nem egyértelmű hivatkozások és gombok. A látogatóknak ne kelljen linkekre és gombokra vadászniuk, gyorsan látniuk kell, hogy mely képek és szövegrészek juttatják új oldalra, vagy erősítik meg választásukat. Hasonlóképpen, a felhasználóknak képesnek kell lenniük egyértelműen felismerni a kitölthető mezőket.
- Általános vagy irreleváns stockfotók és kitöltő szövegek értékes információk nélkül.
Bizonyos webdizájnelemek, például a rács elrendezések, alapvetően nem jó vagy rossz választások. Használhatók hatékonyan és nem hatékonyan, ezért ügyelni kell a helyes használatukra. Egy hír oldal vagy portfólió oldal elrendezésének például tökéletes, egyéb esetekben nem használnám.
Egy másik trükkös webdesign elem az animáció. Már nem 1997 van, nem szabad, hogy üstökös farka húzza a felhasználó kurzorát, vagy ne kényszerítsük őket táncoló hörcsögök sora mellett, hogy elérjék a kívánt tartalmat.
De kilépéskok egy előugró ablak, amely utoljára még megragadja a látogatók figyelmét és konverzióra készteti őket az jó ötlet? Igen, határozottan.
Hogyan készítsünk webdesignt?
Hú na ez egy jó kérdés, a webdesign megfelelő kialakítása összetett folyamat, és sok mindenre kell figyelni. Szerencsére nem kell egyedül megtenned. Ha professzionális webdesignerrel dolgozol együtt, támaszkodhatsz az ő készségeire a tökéletes eredmény elérése érdekében.
Együttműködhetsz olyan ügynökséggel, akik egyedi webhelyeket készítenek. Válasszd ezt a lehetőséget, ha összetett webhelyet kell felépítened sok kiegészítő funkcióval az alapoktól, de vedd figyelembe, hogy ez a teljes körű megoldás többe fog kerülni. Hátránya, hogy ha egyszer elkezdtél velük dolgozni utána nehéz váltani, valamint az esetek 90%-ban nincs szükség egyedileg kódolt és épített weboldalra.
Közvetlenül dolgozhatsz egy szabadúszó webdesignerrel. Egyszerűen böngéssz a portfóliók között, és válasszd ki az neked leginkább tetsző tervezőt, aki illik az általad keresett stílushoz és megjelenéshez. Egy szabadúszó tervező személyre szabhat egy már meglévő sablont, vagy megtervezhet egy teljesen friss sablont a webhelyedhez. Ha azt szeretnéd, hogy webhelye a semmiből épüljön fel, dolgozhat olyan szabadúszóval, aki rendelkezik a megvalósításhoz szükséges készségekkel.
Saját webhely létrehozása sablonvezérelt webhelykészítővel (például Wix vagy Squarespace) szintén lehetséges. Gyakorlatiasabbnak kell lenned, és ha nem ismered könnyen el lehet veszni benne, ráadásul az oldal funkcionalitása csak arra fog korlátozódni, amit ezek a platformok kínálnak.
CMS rendszerek, WordPress, Drupal, Joomla, hogy csak a legnépszerűbbeket említsem, előnyük: rengeteg plusz funkció és sablon érhető el hozzájuk, szinte már mindent kitaláltak. Technikai tudás kell hozzá, bár tény, hogy rengeteg info elérhető az interneten. Az utóbbi évek során iszonyatos fejlődésen mentek keresztül és jobbak megbízhatóbbak és könnyebben kezelhetőek mint valaha. Nagyon gyorsan lehet velük weboldalt építeni a rengeteg sablonnak köszönhetően, de valószínűleg szükséged lesz valakire aki ért hozzá.
GY.I.K
Mi a reszponzív webdesign?
A reszponzív webdesign kialakításban a tartalom dinamikusan mozog a képernyő méretétől függően.
Mi az adaptív webdesign?
Adaptív webdesign kialakítás esetén a webhely tartalma a szokásos képernyőméretnek megfelelő elrendezési méretben van rögzítve, jó példa erre a HVG oldala aminek van egy asztali verziója és egy mobilos verziója
Mi a webdesign?
A webdesign számos összetevővel rendelkezik, amelyek együttműködnek a weboldal kész élményének megteremtésében, beleértve a grafikai tervezést, a felhasználói élmény tervezését, az interfész tervezését, a keresőoptimalizálást (SEO) és a tartalomkészítést. Ezek az elemek határozzák meg, hogyan néz ki, érzi és működik egy weboldal különböző eszközökön.
Ki a webdesigner?
A webdesignerek veszik az ötleteidet, és olyan tervé (mockup) alakítják őket, amely megmutatja, hogyan fog kinézni a jövőbeli webhelyed. A webdesignerek kezelik a weboldal tervezésének kreatív részét, ikább nevezném egy spciáli grafikai munkának.
Ki a webfejlesztő?
A webfejlesztők– más néven mérnökök vagy programozók – fogják a webdesigner által készített tervet (mockup), és lefordítják kódolási nyelvre, hogy megjeleníthető legyen az interneten.
Ki a UX fejlesztő?
A felhasználói élmény fejlesztője, más néven UX fejlesztő, az, aki felhasználóbaráttá teszi webhelyét.
Zárszó
Ha gyakorlati szerepet vállalsz webhelyed tervezési folyamatában, akkor olyan webhelyet lesz, amely megfelel vagy meghaladja az elvárásaidat. Mondj el webtervezőjének mindent, mutasd be a márkádat és azt, hogy mit szeretnél elérni a webhelyeden. Minél több információval rendelkeznek, annál felkészültebbek a tökéletes webdesign elkészítéséhez. Magyarázd el nekik a látásmódodat, majd hagyd, hogy működjön a varázslat.