webdesigner

Webdesign alapok, avagy mit csinál egy webdesigner?

Szűcs Máté

Szűcs Máté

A webdesign, vagy magyarosan webdizájn, egy nagyon komplex terület. Egy weboldal fejlesztési projekt igen nagy részét teszi ki, mivel ezen folyamat részeként alakul ki lépésről-lépésre weboldalunk, vagy egyéb webes alkalmazásunk megjelenése.

Manapság egyre nagyobb a fókusz a webdesignerek munkája körül, hiszen egyre több internetképes eszközzel rendelkezünk, egyre több időt töltünk az interneten. Ebből következik, hogy a vállalkozásoknak egyre fontosabb, hogy egyrészt kiemelkedjenek a tömegből, másrészt képesek legyenek azt nyújtani a látogatóknak, amit azok elvárnak.

Szóval egyszerre kell igényes és hatékony megjelenést tervezni az internethasználók számára. Itt jönnek képbe a dizájnerek, hiszen az ő feladatuk egy olyan design megalkotása, amely támogatja ezeket a célokat.

Na de kezdjük az elején és nézzük meg, hogy mi is tartozik a webdesign témakörébe és hogy mivel is foglalkozik egy webdesigner.

Mi az a webdesign?

Röviden megfogalmazva a webdesign (webdizájn) egy folyamat melyben egy weboldal megjelenését tervezzük meg, majd készítjük el.

A valóság ennél viszont jóval bonyolultabb, ugyanis számos lépésből egy weboldal megtervezése és felépítése. Ezeket a későbbiekben részletesebben is kifejtem majd.

Régebben (>10 éve) a webdesign csak és kizárólag weboldalak tervezését foglalta magában, ezen belül is leginkább asztali gépekre terveztek a dizájnerek. Azonban az idő előrehaladtával, a hordozható eszközök terjedésével kiszélesedett a paletta és ma már tabletektől kezdve, mobiltelefonokon át nagy felbontású eszközökig szinte mindenre képesnek kell designt készítenie egy szakembernek. Sőt vannak designerek, akik egy-egy eszközre specializálódtak, például gyakran találkozhatunk mobil UI tervezőkkel.

200+ Ingyenes Marketing Eszköz​​
Emeld magasabb szintre vállalkozásod teljesítményét teljesen ingyenes marketing eszköztárunkkal. Több, mint 200 eszköz havidíj nélkül.

Mit csinál egy webdesigner?

Ahogy fentebb már említettem a webdesigner az a személy aki a folyamat egyes feladatait elvégzi. Tehát feldolgozza a beérkező adatokat, kiválasztja a használandó eszközöket, kiválasztja a felhasználandó elemeket, mint a betűtípusok, vagy a színek. Ezt követően lépésről lépésre tervezi, majd a visszajelzések alapján kialakítja a végleges megjelenést.

Szóval nem egyszerűen megtervez egy megjelenést, hanem a folyamat minden elemében proaktív szerepet vállal. Éppen ezért is tartogat rengeteg kihívást ez a szakma. Képben kell lenni a legújabb trendekkel, tudni kell használni az ismertebb szoftvereket, eszközöket. Továbbá vizualizálni kell az elképzeléseket és képesnek kell lenni összegyúrni az elképzeléseket és elvárásokat egy komplett egésszé.

design készítése

Hogyan épül fel a webdesign, mint folyamat?

Nézzük hogyan is néz ki a webdesign folyamata. Minden vállalkozás más és más, tehát eltér a folyamat menete és a lépések is, azonban egy tipikusnak mondható webdizájn projekt a következőképp néz ki.

1. Lépés – Információgyűjtés

Pre-design, azaz a dizájnt megelőző lépések. Mielőtt nekiesünk a tervezésnek információt, adatot kell gyűjtenünk és fel kell dolgoznunk azt. Az adatgyűjtés feladata legtöbbször nem a webdizájnerre hárul, elé általában már a klienstől begyűjtött adatok érkeznek.

Fontos többek között megismerni a kliens vállalkozását, azaz hogy mivel foglalkoznak, mik a főbb versenyelőnyeik, kik a versenytársaik, milyen célcsoportot céloznak és még sorolhatnám. Ezek egész kézzel fogható dolgok, azonban absztraktabb információkat is be kell gyűjtenünk, mint például a kliens elképzelései, vagy víziója.

2. Lépés – Scope meghatározása

A feladat ami elválasztja a kezdőket a profiktól.

Meg kell határoznunk a projektünk határait, azaz hogy milyen komplexitású munkát fogunk elvégezni. Többek közt kijelöljük, hogy milyen oldalakat készítünk el, milyen típusú és mennyiségű tartalmat készítünk ezekhez az oldalakhoz, milyen funkciókkal vértezzük fel a weblapot, milyen kiegészítő szolgáltatásokat nyújtunk, valamint hogy ezt időben hogyan ütemezzük.

Ezzel megakadályozható az úgynevezett scope-creep, amikor az ügyfél olyan feladatot végeztetne el, ami nem a projekt része. Egy jól körvonalazott scope segítségével pontosan kijelölhetjük a projekt határait, ezzel elkerülve azt, hogy olyan extra munkát kelljen végeznünk, amelyet nem vállaltunk el.

3. Lépés – Oldaltérkép és drótváz

Az oldaltérkép, avagy sitemap segítségével tudjuk felvázolni az elkészítendő weboldal architektúráját. Az oldaltérkép segítségével a webdesignerek könnyen szemléltethetik a weboldalt felépítő aloldalakat, elemeket és ezek relációit.

Ezt követi szorosan a drótváz elkészítése. A drótváz nem más, mint a weboldal vázlatos formában. Tehát felskicceljük a különböző aloldalakat és azok felépítését. Így jobb képet kaphatunk arról, hogy hogyan is fog felépülni a kész website. A wireframe, segít felfedni az egyes kihívást jelentő pontokat, még nagyobb mennyiségű munka invesztálása nélkül alakíthatunk a megjelenésen és inspirációt is nyújt a webdesignerek számára.

4/A. Lépés – Tartalomkészítés

A negyedik lépést két részre bontottam. Csapatról csapatra változik, hogy milyen sorrendben is haladnak a dizájnerek. Van ahol egy folyamatként működik a szöveges és vizuális tartalmak előállítása, van ahol külön, de van ahol ez még több kis lépésre van lebontva.

Kiemelném, hogy a tartalom elkészítése nem a webdesigner és nem is a fejlesztők dolga. A szöveges tartalmat vagy a kliens biztosítja, vagy szövegírók készítik el, aztán jobb esetben egy tartalommarketinges csapat még foglalkozik vele. Azonban szerves része a webdesign menetének a megfelelő mennyiségű és minőségű tartalom elkészítése, hogy azt a designerek feldolgozhassák el elhelyezhessék a weboldalon.

4/B. Lépés – Vizuális elemek készítése

A drótvázra építve elkezdődik a megjelenés felépítése. Jellemzően az inspirációgyűjtéssel kezdődik a folyamat, valamint a korábban begyűjtött információkra alapozva vág neki a webdesigner a munkának.

Célszerű a globális, azaz a website egészét érintő elemekkel és beállításokkal kezdeni, tehát a színek, betűtípusok, gyakran alkalmazott elemekkel. Valamint figyelembe kell venni a kliens megkötéseit is, például, hogy mit enged meg számunka az arculati kézikönyv.

Lépésről lépésre haladva az oldaltérképben felvázolt összes aloldal elkészül. A legritkább esetben kerül elfogadásra a design első változata. Több körös oda-vissza kommunikáció segítségével, a webdesignerek, a fejlesztők, a kliens, a marketinges kollégák és további szakértők kialakítják a végső megjelenést.

5. Lépés – Fejlesztés

A fejlesztés a programozók feladatai közé tartozik. Ők fogják a webdesigner által készített terveket tudásuk segítségével egy működő weboldallá, vagy egyéb webes alkalmazássá változtatni. Itt a webdizájner szerepe annyi, hogy szükség esetén információt szolgáltat a fejlesztőnek, tehát visszajelzéseket és instrukciókat ad a tervvel kapcsolatban.

6. Lépés – Tesztelés

Kritikus fontosságú, hogy ha készen van a site első működő verziója, akkor azt tesztelnünk kell, mielőtt elérhetővé tennénk az interneten. A tesztelés sokrétű lehet. Tesztelhetünk manuálisan, ilyenkor a tesztelők az olyan tényezőket vizsgálják, mint a reszponzivitás, a helyesírás, vagy a funkciók megfelelő működése. De lehet automatizált is a tesztelés, ilyenkor szoftvereket használunk a hibák feltáráshoz.

7. Lépés – Élesítés

Ha sikerrel zárult a tesztelés és elfogadásra került a projekt, akkor a fejlesztők áthelyezik tesztkörnyezetből a végleges tárhelyére a weboldalt és elérhetővé teszik azt a látogatók számára.

webdesigner munka

Webdesign alapismeretek

Van néhány olyan ökölszabály amelyet minden webdesigner ismer és a gyakorlatban alkalmaz. Egy designer a szakmát az eszközök megismerése és az általános gyakorlás mellett, talán ezen irányelvek elsajátításával fogja kezdeni. Nézzük melyek ezek a szakmai berkekben szinte mindenki által ismert szabályok.

Vizuális hierarchia

Gyakorlatilag azt jelenti, hogy úgy alakítjuk ki az adott oldalt építő elemeket, hogy az természetesen navigálja a látogató tekintetét. Így érhetjük el, hogy először a legfontosabb elemeket vegye észre a látogatónk, majd haladjon tovább a kevésbé fontosabbak irányába.

Természetesen mindig egy-egy kijelölt cél felé érdemes terelgetni a látogatót és erre nagyon jó eszköz az, ha egyfajta hierarchiát alakítunk ki. Például egy weboldal nyitóblokkján, gyakori hogy egy nagyméretű, rövid, velős szöveggel nyitnak a designerek, ezt követi egy valamivel hosszabb, de kisebb méretű szöveg, majd zárnak egy figyelemfelkeltő színű gombbal, amin egy felhívás szerepel.

Logikus navigáció

Fontos, hogy a weboldalon belül minél logikusabbá és egyszerűbbé tegyük a navigációt. Segítenünk kell a látogatót abban, hogy megtalálja amiért jött. Erre pedig rengeteg eszközünk van. Kezdve a megszokott helyen elhelyezett navigációs elemekkel, mint a menüsávval az oldal tetején. Folytatva a láblécben található navigációs elemekkel, vagy a menüsávok alatt elhelyezkedő breadcrumb, azaz morzsamenüvel. Vagy megemlíthetjük a szövegekben elhelyezett linkeket és a weboldalon belüli keresési lehetőséget.

Reszponzivitás

Manapság, mikor mindenkinek ott a mobiltelefon a zsebében, elengedhetetlen, hogy ne csak asztali gépeken legyen megfelelő megjelenésű a weboldalunk. Lehetőleg minél több felbontásra és eszközre optimalizálnunk kell a webdesignt, azért hogy a felhasználók legszélesebb körének biztosíthassunk megfelelő felhasználói élményt.

Konzisztencia

A weboldal egészének egységességet érdemes mutatnia, azaz a gyakran használt elemeket érdemes egységesítenünk, valamint általánosságban fontos konzisztensnek lennünk. Többek közt javasolt globális színeket, betűtípusokat és háttereket alkalmazni.

Sokkal egyszerűbb egy hasonló elemekből felépülő weboldalt kezelni egy felhasználó számára, mint egy olyat, ahol minden egyes oldalon valami szokatlannal találkozik. Nem beszélve arról, hogy vizuálisan mennyivel igényesebb egy ilyen website.

Egyszerűség

Néhány trend amit a későbbiekben felsorolok szembe megy ezzel, de az egyszerűség szerintem az egyik legfontosabb íratlan szabály. Az emberek döntő többsége nem azért fog jönni, hogy a webdesignt csodálja, hanem azért mert valamilyen célja van azzal, hogy felkereste az oldalt.

Megfelelő információval kell támogatnunk ezeket az embereket és lehetőséget kell biztosítanunk arra, hogy elérjék a célukat. Szóval fontos, hogy a design ne álljon ennek útjába.

Konvenciók

Egyszerűen vannak olyan megoldások a webdesign területén, amik lépten-nyomon szembejönnek az interneten és az internethasználók hozzászoktak ezekhez.

Többek közt:

  • Logó a bal felső sarokban
  • Navigáció az oldal tetején
  • Effektek a gombokon
  • Logóra kattintva átirányítás a főoldalra
  • Lábléc az oldal alján
  • Kosár ikon a webáruházakon

Attól, hogy az ilyen és ezekhez hasonló “best practice” megoldásokat alkalmazod, lehet teljesen egyedi az a webdesign amit alkotsz. Szóval nem kell valami újat kitalálni, csak azért hogy eredeti legyen, miközben felhasználói szempontból lehet, hogy borzalmas megoldás.

webdesigner szakma

Webdesign eszközök

Számos olyan eszköz és software érhető el amelyek használata nagyságrendekkel meggyorsítja a webdesignerek munkáját, sőt némelyikük használata talán már kötelezőnek is mondható. Ritka például, hogy egy designer nem használ valamilyen mockup készítő szoftvert, vagy kollaborációs appot. Nézzük azokat amelyekkel a leggyakrabban találkozni.

figma

Figma

Tudom, ezt a szoftvert szinte minden szakmabeli ismeri és használja, úgyhogy gyorsan le is tudom a felsorolás első elemeként

A Figma egy freemium alkalmazás ami a tervezés minden fázisában segítségünkre lesz. Könnyedén készíthetünk vele drótvázakat, mockupokat, de talán a legfontosabb funkciója mégsem a széleskörű design eszköztárában rejlik. Ugyanis akár több felhasználó is dolgozhat ugyanazon a felületen valós időben, így több webdesigner is dolgozhat egy mockupon, de akár a fejlesztői csapatot, vagy a klienseket is be lehet vonni valós időben.

sketch

Sketch

A Sketch egy MacOS-en elérhető design szoftver, melyet leginkább UI és UX tervezéshez használunk. A Mac-es változaton kívül egy böngészőben elérhető változata is van, ezzel tudjuk élesben tesztelni az elkészített megjelenéseket. Hasonlóan a Figmához is itt van egyfajta valós idejű szerkesztési lehetőség, azonban ez nyilván korlátozottabb, mivel csak hasonló OS-t használó felhasználók érhetik el.

adobe creative cloud

Adobe XD

Én ugyan nem használom ezt a szoftvert, de fontos megemlíteni, hogy az Adobe is rendelkezik saját UI/UX tervező szoftverrel, ez az Adobe XD. Ha már van Adobe Creative Cloud előfizetésed, vagy kedveled az Adobe szoftvercsaládot, akkor érdemes lehet megismerned, hiszen alternatívát jelent a Figma, vagy a Sketch helyett.

Wireframe.cc

Nagyságrendekkel egyszerűbb, mint a fentebb felsoroltak. A Wireframe.cc nem való másra, mint drótvázak készítésére. Végtelenül egyszerű a felülete, így nagyon gyorsan elsajátíthatod a használatát és könnyedén készítheted el az elsó skicceket, vázakat egy új webdesign projekt kezdetén.

Balsamiq

Újabb drótváz készítő eszköz, azonban jóval több funkcionalitással felvértezve. Nagyon gyorsan lehet a Balsamiq használatával dolgozni, percek alatt összerakható egy low-fidelity váz, amivel szemléltethetjük az elképzeléseinket. Egyébként az egyik legrégebbi cég ebben a felsorolásban.

Adobe Illustrator

Újabb elem az Adobe szoftvercsaládból. Az Illustrator talán a legismertebb vektoros képszerkesztő program. Segítségével szinte bármilyen felhasználásra kerülő elem elkészíthető legyen szó bannerekről, ikonokról, logókról, vagy illusztrációkról. Vektoros szerkesztőként olyan grafikai elemeket hozhatsz létre melyek minősége nem romlik a méretük növelésével, ez pedig kulcsfontosságú a reszponzív webdesign során.

affinity designer

Affinity Designer

Viszonylag újkeletű szoftvercsalád az Affinity cégé. Az Affinity Designer nagyon hasonló funkcionalitást nyújt, mint az Adobe Illustrator, csak havidíjak nélkül, így sok cég teljesen átállt az Affinity termékek használatára. Személyes preferencia, hogy ki melyiket preferálja, de ha vektoros szerkesztőprogramot keresel, akkor javaslom, hogy mindenképp tegyél ezzel is egy próbát.

Adobe Photoshop

Hiába alapvetően nem vektoros szoftver a Photoshop, mégis muszáj megemlítenem. Extrém gyorsan lehet vele képeket, grafikai elemeket manipulálni, így ha épp nem fontos a fidelitás, akkor nagy hasznát veszi bármelyik webdesigner. Intuitív a kezelőfelülete, így a használatát viszonylag könnyű elsajátítani.

drótváz készítése

Webdesign trendek 2023-ban

Ahogy minden terület, úgy a webdesign terén is jönnek-mennek a trendek. Egyik évben a lekerekített formák, máskor az üveg hatású felületek, vagy az életszerű illusztrációk törnek népszerűségre. Mindig vannak olyan megoldások melyek gyakran szembejönnek az interneten, szóval összegyűjtöttem néhány olyan trendet ami jelenleg dominálja a piacot.

Motion design

2023-ban a kizárólag fixen rögzített elemekkel rendelkező oldalak ideje lejárt. Akár csak apró mikrointerakciót, akár komplex görgetésre reagáló parallax animációkat nézzük, megállapíthatjuk, hogy nagy teret nyertek a legkülönfélébb animációk.

Talán a közösségi média appoknak is köszönhető az, hogy a felhasználók megmaradt minimális figyelmét is egy folyamatosan mozgásban lévő megjelenéssel próbáljuk megragadni. Persze ezen a téren is vannak balul elsült megoldások, de elég csak megnéznünk top márkák weboldalait, hogy láthassuk hogyan is lehet ezt profin megvalósítani.

Apple website
Az Apple weboldalán szinte mindegyik terméknél tesztelhetjük a görgetésre reagáló megjelenést.
Wickret
A Wickret weboldalán is dominálnak a parallax effektek.

Letisztultság mindenek felett

Általánosságban kijelenthető, hogy az utóbbi években az egyszerűnek tűnő, minimalista webdesign meghatározó iránnyá vált. Akárhányszor egy SAAS cég, vagy egy startup honlapjára tévedek szinte már tudom, hogy milyen megjelenés fog fogadni. Sok whitespace, nagy terek, letisztult elemek, harmonikus színek. Úgy tűnik ez a trend a továbbiakban is velünk marad, ugyanis semmi jele annak, hogy kevesebb ilyen weblappal fogunk találkozni, elég csak a legnézettebb projekteket megtekinteni Behance-on, vagy Dribbble-ön.

Coinbase
A Coinbase weboldala nagyon jól mutatja, hogy egy extrém letisztult design-nal sem lehet mellélőni.

Gradiensek, avagy színátmenetes elemek

Színátmenetes hátterek, színátmenetes gombok, színátmenet a fejléc szövegeken. Ez a webdesign trend is megállíthatatlan és azt kell, hogy mondjam én kifejezetten szeretem a jól eltalált gradienseket. A legegyszerűbb designt is fel lehet dobni azzal, ha egy helyett kettő színből választunk, vagy akár háromból. Jól érzékelteti ezt a példaként hozott néhány weboldal.

Stripe
Színátmenetes háttér a Stripe weboldalán.

Sötét weboldalak, avagy Dark UI

Sok vállalkozás bevállalja a fekete, vagy nagyon sötét hátterek és elemek alkalmazását, valamilyen jellemzően lila, vagy kék alkalmazása mellett. Én még nehezen tudom ezt a trendet megszerettetni az ügyfelekkel, de már várom, hogy valaki ilyen jellegű weboldal ötlettel keressen meg.

Talán a dark mode, azaz a sötét mód általánossá válása hozta el ezt a webdesign trendet, hiszen az emberek egyre inkább hozzászoknak a fekete hátterekhez és az ezeken jól olvasható, mégis alacsony kontrasztú elemekhez.

Github
A Github igazán igényesen megtervezett sötét felhasználói felülete.

Óriási betűk, egy új tipográfiai trend

Főleg nagyfelbontású, asztali nézeteken lehet találkozni, akár az egész képernyőt kitöltő brutalista, maximalista szövegek alkalmazásával. Nehéz jól eltalálni, de ha sikerül akkor nagyon jól működik.

Heart Aerospace
A Heart Aerospace weblapja igazán jól alkalmazza a hatalmas méretű tipográfiai elemeket.

Claymorphism

Új, főleg szemléltető ábrák, elemek, alakok esetén használatos. Lehet, hogy maga a claymorphism kifejezés nem mond elsőre semmit, de ha megnézed a példákat azonnal tudni fogod, hogy miről is van szó. A pasztel színek, a dupla árnyékok és a lekerekítések gyurmaszerűvé változtatják a különböző elemeket.

Claymorphism
A Humans illusztrációi szemléltetik a claymorphism irányvonalait.

3D-s modellek

A 3D újra hódít, de most nem csak egyes elemek modelljeit, hanem komplett weboldalakat renderelnek 3D-ben a hozzáértők. Eléggé eltér az eddigi trendektől, hiszen elég specializált tudás szükséges mind a tervezéshez, mind a megvalósításhoz.

Joshua's world
A Joshua’s World weboldalon egy komplett kis 3D-s szigetet készített az alkotó.

Vissza a 90-es évekbe

Mindig divat valamelyik random érát előkapni, ez jelenleg épp a 90-es évek. Pixelezett megjelenésű elemek, össze-vissza rendezett ikonok, erős kontrasztok. Azoknak akik a 90-es években és 2000-es évek elején neteztek, ezek mind ismerősek lehetnek, míg a fiatalabbaknak egy teljesen új dolog.

Poolsuite
A múltból visszatérő designra talán a Poolsuite weboldala a legjobb példa.
webes megjelenés

Összefoglaló

Ezzel a bejegyzéssel egy kis ízelítőt szerettem volna adni azoknak, akik most ismerkednek a webdesigner szakmával. Rendkívül sokrétű a terület és jóval több annál a képnél, mint ami a legtöbbek fejében él. Miszerint a webdesign különböző elemek és sablonok összekattingatásából áll.

Egy jó webdesigner képes megérteni a kliens elvárásait, képes több hasonló, de mégis eltérő design elkészítésére, képes a legmodernebb eszközök használatára, képes együttműködni a fejlesztőkkel, marketingesekkel és legfőképp a klienssel. Valamint megemlíteném, hogy nagy stressztűrő képesség is kell ehhez a szakmához, mert nehéz szó nélkül bírni azt, mikor már a huszadik módosítási körnél tartotok és még mindig alakítani kell valamin :).

Tetszett a cikk?
Iratkozz fel hírlevelünkre és olvass még több hasonló tartalmat!

Mi az a webdesign?

Röviden megfogalmazva a webdesign egy folyamat melyben egy weboldal megjelenését tervezzük meg, majd készítjük el. A valóság ennél viszont jóval bonyolultabb, ugyanis számos lépésből egy weboldal megtervezése és felépítése. Ezeket cikkünkben részletesen kifejtem.

Mit csinál egy webdesigner?

A webdesigner az a személy aki a webdesign folyamat egyes feladatait elvégzi. Tehát feldolgozza a beérkező adatokat, kiválasztja a használandó eszközöket, kiválasztja a felhasználandó elemeket, mint a betűtípusok, vagy a színek. Ezt követően lépésről lépésre tervezi, majd a visszajelzések alapján kialakítja a végleges megjelenést.

Szűcs Máté
Szia. Szűcs Máté vagyok, a Features.hu alapítója. Már lassan tíz éve foglalkozom online marketinggel, ezalatt megfordultam ügynökségeknél, kis-, és középvállalkozásoknál és startupnál is. A tapasztalataimra alapozva indítottam el a Features.hu-t 2018-ban, először csak blogként, majd ügynökségi formában is. Az itt megjelent bejegyzéseimmel szeretnék segíteni abban, hogy közelebb kerülj üzleti céljaid megvalósításához.
Olvass tovább, ezek a cikkek is érdekelhetnek:
small_c_popup.png

200+ Ingyenes marketing eszköz​

Emeld magasabb szintre vállalkozásod teljesítményét teljesen ingyenes marketing eszköztárunkkal. Több, mint 200 eszköz havidíj nélkül.