Tudod-e, hogy mi a webdesign?
Sokan ezt rosszul értelmezik. A legtöbben azonnal rávágják, hogy grafika tervezés, pedig  a webdesignak csak kb a 30%-a grafikai tervezés, a többi felhasználói felület tervezés, marketing, és egyebek. A webdesigt nem a saját szempontjaink, ízlése szerint vagy a megrendelő ízlése szerint, hanem a célcsoport igényei szerint tervezzük meg a weboldalt.

A webdesignban, nem az esztétikum az elsődleges! Persze fontos, hogy a honlapod jól nézzen ki, de nem a szép grafika miatt fognak vásárolni tőled. A tervezés során leginkább a használhatósági szempontokra kell helyezni a hangsúlyt. Minden elemnek funkciója van, konkrét céllal és üzleti hatékonyságra fókuszálva születik meg a honlap. 

 

Akkor egyáltalán nem számít a design?
De számít. Nagyon is számít, csak a webdesign nem egy művészet, nem az a lényege, hogy feltűnőbb legyen a weblapod, hanem egy érzést váltson ki a látogatódból, ami segíti a vásárlás döntésben. A marketinget egészíti ki, az énmárka, brand arculatát adja, és segít megkülönböztetni a versenytársaktól. 
A jó webdesign bizalmat kölcsönöz az olvasónak, segíti a navigálásban, és vonzóvá teszi számára a tartalmat.

 

Első amire figyelj a designben a színek.

A laikus honlapkészítő gyakran esik abba a hibába, hogy azt gondolja, minél több színt használ egy oldalon, annál dizájnosabb és esztétikusabb lesz a felület. Az igazság az, hogy teljesen az ellenkező hatást váltja ki a honlap a látogatódból a sok szín, egy káoszt fog látni így az érdeklődőid. Egy honlap esetében az egyszerűség az, ami igazán gyönyörködtet.

A weboldalakon 2-3-4 féle színt használunk legtöbb esetben. A színek kiválasztása során, az érzelmi hatásuk jelentését, a weboldal üzenetét, és a célközönség stílusát vesszük figyelembe.   

Kontrasztos színeket válassz!
Minél távolabb esik egymástól két szín a világossági és sötétségi skálán, annál nagyobb köztük az ellentét, annál nagyobb a kontraszt.
A kontraszt mindig feszültséget szül, mindig figyelemfelkeltő.
A Kontrasztos színek a hideg és a meleg színek keveréke.

A színkör táblázat
képén láthatod, hogy melyik színek a hideg és a meleg színek.  Pl jó választás a brand színeknek választani a kék és a sárga színt.  

Arra mindig ügyelj hogy
címsoroknak, ikonok, keretek, gombok színeinek  legtöbbször ugyanazokat a színeket használd. Ha kettő sötétebb színt választasz pl: Piros Zöld Akkor az egyik szín legyen világosabb árnyalat. pl így Piros Zöld. Így kellemesebb a szemnek is és a designben is szebben néz ki. 

 

Betűtípusok

Ismét egy klasszikus dizájn hiba, amikor a honlap készítője különleges betűtípusok használatával próbálja egyedivé tenni egy oldal megjelenését.
A legfontosabb a betűtípus választásban, hogy ne fáradjon tőle a szem, hanem inkább olvastassa magát. Hiába a szép íves betűtípus ha olvashatatlan, vagy csak hunyorogva lehet elolvasni. A másik leggyakoribb hiba amit látni szoktam, hogy Világos színű betűvel írnak világos háttérre.  

A betűk mérete is számít.
Apró bolha betűkkel ne írj, és óriási betűkkel sem. Én 14px betűméretet használok az open sans fontot, de ez a méret betűtípusonként változik. A szövegek leírásainak talpatlan betűtípusokat használunk, mert ezeknek az olvasása könnyebb a képernyőn. 

Címsoroknak választhatod
A talpas betűket,vagy a kézírás jellegű díszes fontokat mert azokat nagyobb méretben írjuk, és rendszerint csak 1 mondatok aminek az olvasása nem okoz még gondot. A címsorjaid a leírás szövegéhez képest minimum legyen másfélszer nagyobb, hogy ott könnyen értelmezhető legyen, hogy új témáról írsz. 

Túl sok betűtípus
Nem csak a különleges, cirádás betűtípusok rontják egy oldal
használhatóságát, de a túl sokféle betűtípus is igazán zavaró lehet egy
oldalon belül. Ahogyan a túl sok szín használata, ugyanúgy a túl sokféle
betűtípus használata is káoszt kelt. Címsoroknak használj 1 féle betűtípust, és a leírásoknak használj egy másik féle betűtipust, maximum az alcímsoroknak használj egy harmadik félét, de több féle betűtípusra nincs szükséged. 

Hatalmas hiba
Ha hosszú sorokat írsz blogra, vagy a honlapod főoldalára, aloldalaira.

Nagyon sokszor a látvány alapján döntünk arról, hogy valamit elolvassunk-e, márpedig egy összefüggő, megfelelő tördelés és formázás nélküli szöveg nem közvetít pozitív üzenetet.

A zsúfolt szöveg azt közvetíti a látogatónak, hogy rengeteget kell olvasni azért, hogy picit is kibontakozzon a szöveg tartalma, ilyen esetekben pedig legtöbbször úgy dönt a látogató, hogy inkább nem kockáztat, és bezárja az oldalt.

Szabály, hogy 4-5 soros bekezdéseknél hosszabbat nem írunk. Ha a bekezdés hosszabb mint 5 sor akkor egy sort kihagyunk, egy új bekezdést kezdünk. Így a szöveg olvasása is könnyebb, és designben is szebb a szövegeink.  

Az újabb bekezdéseket
Elláthatod címsorokkal is ahogy én is alkalmazom ebben a blog cikkemben. A témák fő címsorjai legyen félkövér, vagy színes banded színe, az alcímsorok pedig csak nagyobb betűs, vagy aláhúzott. Blogon nem kötelező más betűtípus címsoroknak, de a főoldaladon és az aloldalaidon mindig más betűtípus legyen a címsorod és a leírás.

Ékezetes betűtípusokat válassz
Ha magyar nyelvű szöveggel dolgozunk, mindig olyan betűtípust kell használni, amelyben megtalálható az ékezetes betűk mindegyike, különben automatikusan egy másik betűtípussal fogja helyettesíteni a nem található betűket a program. Ennek ellenőrizésére írd le azt, hogy árvíztűrőfúrógép.
Ebben a szóban megtalálható minden  ékezetes magánhangzó.

 

Képek grafikák
A designbe sokat számít a képek, ikonok, grafikák, és a szövegek elhelyezése egymáshoz képest. Minden egyes szövegblokk mellé szoktunk társítani egy képet vagy grafikát, ami segít a szöveg megértésében és a weboldal se lesz tömör szövegek halmaza. 

Az ikonjaid legyenek
Egyszínűek a branded színe vagy színesek ami a saját színe az ikonnak. pl a szív ikon piros színű legyen. A fekete fehér ikonok nem javasoltak mert az csak elnyomja a képeid hangulatát. 

A fotók, képek 
Ne legyenek fakók, homályos, pixeles, nyújtott. Ne használj stock fotókat.
Használj helyette saját fotókat. Ha a saját fotón a pózód nem is olyan profi, a környezet sem olyan szép, és a fotó sincs olyan szépen fotoshoppolva, még akkor is eredetibb, élethűbb fotó mint sok stock fotó. Legtöbb stock fotón a modell pózja, mosolya mű. A díszlet mű.

Ezeknek mindnek negatív üzenete lesz
 ami nem segíteni fogja, hanem hátráltatni az eladást. Még a webes szakembereknek is több óra találni olyan stock fotót amit nem használ mindenki, vagy nem egy mű fotó. Laikusként pedig a stock fotók feltöltését a weboldalra nem ajánlom. 

Az úriembert már láttam kávé hirdetésben, üzleti tanácsadás oldalán, nyelv tanfolyam oldalán. Egy ilyen képet te is tudsz készíttetni egy fotóssal. Ne azt nézd, hogy te nem vagy ilyen jóképű, nem vagy vékony. Egy jó fotós előnyös helyzetben fényképez, és máris egy eredeti megnyerő fotód van. 

 

Ne zsúfold tele mindennel a honlapod!
Sokan beleesnek abba a hibába, hogy szeretnék minnél több elemmel díszíteni a honlapjuk, de a webdesignben van egy szabály.
A kevesebb néha több.
Minden oldalnak megvan a szerepe, fókusza, és igyekezz megszabadulni minden mástól, ami elvonja a figyelmet. ne rakj sok nyilakat, felsorolást szimbólumot, gombot, ikont, ami elvonná a figyelmet a lényegről. 

A jó design az, amiből már nem tudsz mit elvenni. Ügyelj a részletekre! A tűéles képek, az árnyék, a keret, az ikonok, és hasonló apróságok nagyon sokat adnak hozzá az összképhez. Az ilyen kicsi részletek adják azt a pluszt, amitől az oldalra jó ránézni. Ellenőrizd, hogy ugyanolyan betűtípust használsz-e minden címsorban. Ellenőrizd a betűk méreteit, hogy minden bekezdésben ugyanakkora-e.

Nagyon sokszor a látvány alapján döntünk arról, hogy valamit elolvassunk-e, márpedig egy összefüggő, megfelelő tördelés és formázás nélküli szöveg nem közvetít pozitív üzenetet.

A zsúfolt szöveg azt közvetíti a látogatónak, hogy rengeteget kell olvasni azért, hogy picit is kibontakozzon a szöveg tartalma, ilyen esetekben pedig legtöbbször úgy dönt a látogató, hogy inkább nem kockáztat, és bezárja az oldalt.

 

Logikátlan, nehezen átlátható az oldal elrendezése
Egy weboldal nem attól lesz egyedi, ha olyan bevett dolgokon kezdesz el
változtatni, melyekhez már rég hozzászoktak az internetezők. Az emberek
már megszokták, hogy a legtöbb esetben hol helyezkedik el, és hogyan néz
ki a menüsáv egy honlapon, hogyan épül fel egy webshop, vagy egy blog
oldal. 

Pl a kosár ikon a jobb felső sávban a helye. ha te átrakod máshova a látogatónak keresnie kell és fél perc után feladja a keresést,  elhagyja az oldalad örökre, és elveszítettél egy vásárlót. Ennyire fontos, hogy ne térj el a megszokott elrendezésektől. díszíteni lehet az elemeket, csak ügyelj, hogy felismerhető maradjon az elem. 

 

Nem vezeti az oldal kialakítása a szemet, nehezen derül ki a lényeg

Egy weboldal akkor épül fel igazán jól, ha, csak az oldal hangsúlyos elemeit összeolvasva is kiderül belőle a lényeg, tehát az, hogy pontosan miről szól, mit ígér. Erre azért van szükség, mert a legtöbb látogató nem fog elmélyülni az oldal olvasásába, böngészésébe, hanem elsőre csak át fogja pörgetni, végig fogja szkennelni a tekintetével.

Beszédes legyenek a címsorjaid már a címsorjaid összeolvasásából, az oldalon kiemelt szövegekből derüljön ki, hogy mivel foglalkozol, kinek segítesz és miért vagy te az egyik legjobb választás számára.

 

Animációk
Egy ötletesen elhelyezett animáció kiválóan feldobja az egyébként egyszerűbb, funkcionálisabb dizájnt is és elegáns profizmust kölcsönözni az oldalnak… egészen addig, amíg a tervező nem esik át a ló túloldalára. Amikor az animációkat túlzásba viszik, olyankor a látogatók zavarodottak lesznek és jobbról balra kapkodják a fejüket. Egyszer egy kép ugrik be balról, aztán egy írás tűnik elő a homályból. Közeben pedig az alsó sáv pördül egyet a tengelye körül.

Az animáció olyan, mint egy fűszer. Csak mértékkel alkalmazva érheted el vele a kívánt hatást és varázsolhatsz a segítségével középszerűből kiváló weboldalt. Ha viszont túlzásba esel, akkor használhatatlan és élvezhetetlen lesz az összhatás.

Az animációkat nem azért alkalmazzuk, hogy feldobjuk vele a honlapunkat, hanem, hogy kiemeljünk vele olyan részeket amire fel szeretnénk hívni a látogatóink figyelmét. 

 

Összefoglalás
A weboldalon az első benyomást a megjelenés (design) képezi. A jó design megkülönböztet a konkurenciától és az eladást segíti. Segít stílusos betűkkel, képekkel, ikonokkal, animációkkal, a megértésben, és segít a vásárlónak a döntésben, hogy szüksége, van-e a termékedre, szolgáltatásodra, hogy ez segít-e neki, minőségi-e, vagy sem. Egy vonzó weboldal sokkal valószínűbb,hogy vásárlásra, 

időpontfoglalásra, asztalfoglalásra ösztönözi a látogatót. Első lépésben legyen szép, esztétikus. Ez a honlap fogja képviselni a vállalkozásod. 
Egy jó weboldalról elmondható, hogy:
 – Pozitív az első benyomásunk. Vonzó a megjelenése.
– Azonnal látszik, hogy mivel foglalkozik a cég.
– A szolgáltatás, termék minősége színvonala tükrözi a megjelenést.
– A látogató a problémájára megoldásra talál és segítséget kap.
– Hitelesen bemutat téged. Megbízhatónak érez az internetező.
– Észrevehetően látható hogy a te szolgáltatásod, terméked nem egy tucat a sok közül, hanem igen is értéket ad neki.
– Ár érték arányban te vagy a legkedvezőbb a piacon. 

És azt az üzenetet közvetíti a weboldalunk, hogy: 
– Jöjjenek el az üzletünkbe?
– Iratkozzanak fel a hírlevelére.
– Töltsék le ingyenes anyagunkat.
– Kérjenek ingyenes termékmintát, árajánlatot a szolgáltatásunkról.
– Rendeljék meg a termékeinket, szolgáltatásunkat a honlapról. 

A látogatók a weblap stílusával fogják azonosítani a céged/vállalkozásod. Ha egy oldal ronda,igénytelen, csicsás, akkor téged is annak fognak tartani, viszont ha szép, átgondolt, letisztult, akkor a látogatók ezt fogják a vállalkozásodról gondolni. 

A weboldal kinézete érzelmekre hat színekkel, képekkel, elrendezésekkel. A jó design vonzza a látogató tekintetét, felkelti az érdeklődését. Utána pedig megkönnyíti és egyszerűbbé teszi az üzenet megértését. És nem vonja el a figyelmet a tartalomról. 

A jó weboldal letisztult szokták mondani. Ez azt jelenti, hogy nincs telezsúfolva sok képpel, szöveggel, hanem szellősen nagy térközöket, üres helyeket hagytak a szövegek és a képek között. Így kellemes olvasni a szöveget.