Nem csalás-nem ámítás, bejegyzésünkben a leggyakoribb webdesign „malőröket” járjuk körbe. Mert bizony időnként akadnak – ha szemfülesek vagyunk. : )
Korábbi bejegyzéseinkben több „ízben” is összeszedtük azokat a „jellegzetes” hibákat, hiányosságokat, melyeket gyakran elkövetünk/melyekkel gyakran találkozunk weboldalakon – a webergonómiai kérdésektől kezdve a hitelességet/bizalmat romboló faktorokon át egészen a felhasználóbarát és vevőmágnes honlapok ismérvéig. (Ezek között is akadnak olyanok, melyek magához a dizájnhoz is kapcsolódnak.)
Most kifejezetten dizájn, megjelenés szempontjából vesszük górcső alá a weboldalakat, rámutatunk a leggyakoribb webdizájn hibákra.
A megjelenésbeli, stílusbeli kérdések általában szubjektív megítélés alá esnek – nem vagyunk egyformák, mást tartunk szépnek, másra mondjuk azt, hogy igen, ez jól néz ki. Míg nekünk ez és ez tetszik, addig a másiknak az és az, míg az egyikünk nagyon otthonosan mozog a dizájn, a kreatív alkotások területén, addig a másik kicsit esetlenebb ezeken a területeken.
A WebdesignSuli hallgatói közül is vannak olyanok, akik rögtön ráéreznek arra, hogy mi a jó, mi a szép, mi az ízléses – legyen szó akár grafikai munkáról, akár weboldalról –, és vannak hallgatók, akiknek kicsit több idő, több gyakorlás és inspiráció kell ahhoz, hogy ők is ráérezzenek a stílusbeli finomságokra. : )
A stílus, a szépérzék, a kreativitás igenis fejleszthető!
A DesignAkadémia Kreatív stílusfejlesztés kurzusa éppen ebben lesz a segítségedre!
No, de kanyarodjunk is vissza a webdesignhoz!
Abban talán egyetérthetünk, hogy a weboldal dizájnjának megtervezéséhez elengedhetetlen az esztétikus designszemlélet, jó stílusérzékkel kell bírnunk az adott honlap megjelenésének kialakításához. A stílusos, igényes megjelenés azonban „csak egy szelet a tortából”, valójában tudatos tervezésre van szükség, minden pixelnek a „helyén kell lenni” ahhoz, hogy a kis részekből összeálljon a nagy kerek egész.
Az én értelmezésemben a webdesign azon gondosan megtervezett látványelemek összessége, melyek amellett, hogy hűen prezentálják a brandet, 100%-osan támogatják az oldal konverziós céljainak (pl. megrendelés, letöltés, feliratkozás) megvalósulását, segítik a weboldal üzenetének közvetítését. Az ütős webdesign azonnal megszerzi a látogató figyelmét, azt mindvégig fenntartja és folyamatosan tereli. A jó webdesign az érdeklődőt végigvezeti egy varázsporral meghintett képzeletbeli úton, melynek végén megtörténik a konverzió (pl. megrendelés), azaz a potenciális vásárlóból valódi vásárlót varázsol. Az érzésekre, érzelmekre elbűvölően ható, stílusos és hangulatos webdesign ugyanakkor a látogatóból a wow érzést is kiváltja, mely szintén képes akár vásárlási döntéseket is befolyásolni.
Cziráki Barbara: “Varázslatos weboldalak”
Színek, betűk, formák*
Gyakorlatilag ebből a három összetevőből épül fel a webdesign. Mindegyik „hozzávaló” kulcsfontosságú. Az igazán ütős hatás kedvéért a webdesignernek nagy gonddal és szakértelemmel kell megválasztania ezen „triumvirátus” tagjait.
* Formák alatt ezúttal a grafikák, illusztrációk (alakzatokkal, mintázatokkal, textúrákkal együtt) és fotók összességét értjük.
Cziráki Barbara: “Varázslatos weboldalak”
Tulajdonképpen mi is ezen „triumvirátus” tagjai mentén nézzük meg a gyakori webdesign hibákat, és mindezeket kiegészítjük elrendezésbeli és egyéb „bakikkal”.
# egységes, következetes design hiánya
Nulladik hibaként, egyfajta „összefoglalóként” említhetjük meg az egységes, következetes design hiányát.
Szemet bántó probléma, ha a weboldalon sem elrendezések, sem méretek/arányok, sem színek, sem betűk, sem fotók/illusztrációk tekintetében nincs harmonikus egység. Nem kell ahhoz „szakértőnek” lennünk, hogy lássuk, érezzük a diszharmóniát: valami nem „oké”, a weboldalt alkotó design- és egyéb elemek között nincs meg az összhang, az összetartás.
Hiába is lennének kreatív szerkezetek, ütős színek, figyelmet megragadó tipográfiai megoldások, hangulatos fotók az oldalakon, ha azok nem tudnak összeállni egy egységgé.
# elrendezési és méretezési hibák
Sem a zsúfolt elrendezések, sem a túl tágas terek nem ideálisak a weboldalon, ezek mind-mind befolyásolják a design minőségét és ezen felül a tartalmak átláthatóságát, értelmezhetőségét is. Meg kell találni az „arany középutat”, kellően szellős, mégis kompakt egységet kell kapnunk.
A két „véglettel” gyakran találkozhatunk: egy helyre zsúfolva mindenféle tartalom, méretek, térközök és margók arányos tartása nélkül, vagy éppen ennek az ellenkezője, túl tágas elrendezésekben itt-ott bedobálva egy vizuális vagy egy szöveges elem, szintén a méretek, a térközök és a margók tudatos használata nélkül.
Alapvető probléma az is, amikor minden oldatartalom (még egy űrlap is) teljes oldalszélességű, „méteres” sorokat kell olvasni, átláthatatlanok a tartalmak, nincsenek „feldarabolt”, jól áttekinthető, esztétikus oldalszerkezetek.
Hasonló problémát jelent az is, amikor egy azonos háttérre (pl. fehér háttérre) kerül minden oldaltartalom, ezért az adott oldalt alkotó tartalmi blokkok nem tudnak egymástól vizuálisan elkülönülni, „egybefolyik” minden.
A vizuális hierarchia is sokszor elmarad. Az adott oldalt, annak egy-egy blokkját alkotó tartalmak között vizuális hierarchiát állítunk fel. Ez nem csak értelmezhetőség, átláthatóság miatt, de design szempontjából is fontos. Ha túl nagy távolságot tartunk az adott tartalmak között, akkor egyrészt nem tudjuk, hogy mi mihez tartozik, másrészt a tér is feldarabolódik, ami nem szép.
És ne feledjük, a méreteknek, az arányoknak, a térközöknek és a margóknak jól kell működniük az adott reszponzív (pl. tablet, mobil) képernyőn is. Sokszor futhatunk reszponzív hibákba, mint például adott címsor, törzsszöveg betűmérete telefonon már óriási, mobilon aránytalanul nagyok a margók, a térközök, az elemek közötti távolságok, kisebb képernyőn a bekezdések elcsúsznak.
# színezési hibák
Itt egy kis kék, ott egy kis sárga, egyik gomb zöld, a másik piros, ez a címsor lila, az a címsor már pink színű…. – a weboldalon a szivárvány összes színe visszaköszön. Na jó, ha nem is az összes, de az adott arculathoz/témához kapcsolódó színek nem egyenletesen, nem arányosan, nem következetesen vonulnak végig a weboldalon, vagy éppen a helytelen színválasztás miatt a színes háttérről nem tud kiemelkedni egy másik színes elem.
Szintén nem kell „szakmai berkekben” mozognunk ahhoz, hogy lássuk, még inkább érezzük – nincs meg az egység, a dizájn színek tekintetében (is) vegyes összképet mutat.
Akár arculati színekkel, akár kifejezetten a weboldalra összeállított palettával dolgozunk, célszerű fő színekként egy-két árnyalatot kiemelni, melyek visszaköszönhetnek a főbb elemeken, mint például a honlap címsoraiban, a CTA, azaz a cselekvésre ösztönző gombokon, valamint az ikonokon is. A további tartalmakat, elemeket pedig a fő színhez passzoló kiegészítő színekkel érdemes ellátni.
Nagyon fontos arra is törekednünk, hogy a kiválasztott árnyalatokat egységesen, következetesen, arányosan alkalmazzuk a weboldalon – a logótól kezdve a címsorokon, az egyéb szöveges tartalmakon, a különféle gombokon, az ikonokon, a kereteken, a linkeken keresztül egészen a szövegdobozokig, a fejlécig, a láblécig.
Még több hasznos tippért-tanácsért csekkold a “Színezd ki a weboldalt!” című blogbejegyzésünket!
# tipográfiai hibák
A színek után/mellett a leggyakrabban tipográfiai baklövésekbe futhatunk bele weboldalakon.
Aránytalan (túl nagy/túl kicsi) méretezésű címsorok, több szempontból (pl. méret, szín, betűtípus) olvashatatlan tartalmak, betűtípusok közötti harmónia és kontraszt hiánya, igazítási, elrendezésbeli problémák – csak hogy néhány példát említsünk.
A betűkkel való tervezés is gondos, következetes munkát igényel. Jól kell bánunk magukkal a betűtípusokkal, a betűméretekkel- és vastagságokkal, a betűközökkel, a szedésmódokkal, az igazításokkal, a sorok vagy éppen a bekezdések közötti távolságokkal. A szöveges tartalmakat minden esetben úgy kell kialakítani, hogy az olvasónak szinte azonnal egyértelmű legyen, hogy az adott szöveg miről szól – weboldalon ennek különösen nagy jelentősége van, hiszen a látogatók csak átfutják a tartalmakat, gyorsan meg akarják találni az őket érdeklő/érintő információkat.
Éppen ezért az alapszabály mindig érvényes: A hosszú szövegekhez, törzsszöveges tartalmakhoz egyszerű betűtípust használunk, kiemelt címsorokhoz bátran alkalmazhatunk egyedi, de jól olvasható fontot vagy akár az alap-betűtípus vastagabb verzióit is bevethetjük.
Maguk a hosszú tartalmak is a design rovására mennek. Bár a weboldalon eleve kerüljük a „kisregényeket”, de ha hosszabb tartalmat kell megjelenítenünk, akkor azt jól daraboljuk fel, különféle elrendezésekben (pl. 1/2-1/2; 1/3-2/3) osszuk el őket, hogy könnyebben feldolgozhatók legyenek és a dizájnt se rontsák.
Továbbá a gyakori tipográfiai melléfogások közé sorolhatjuk azt az „esetet” is, amikor az adott mondat vagy bekezdés teljes oldalszélességű, egyszóval „végigér a képernyőn”. Tulajdonképpen így végtelen sorokat olvasunk. A tartalom nehezen átlátható, az olvashatósága nehézkes. 1/2-1/2; 1/3-2/3 és hasonló felosztású szerkezetekben kell elrendezni minden tartalmat, továbbá a szövegek mellé kerülhetnek fotók, illusztrációk, a szövegek közé kerülhetnek kreatív elválasztók, a tartalmak köré design elemek is helyezhetők, egy-egy „elcsúsztatással” pedig igazán izgalmas elrendezéseket is kialakíthatunk, hogy a tartalmak feldolgozhatósága könnyű legyen és maga a dizájn kiváltsa azt a bizonyos „wow-hatást”.
Még több hasznos tippért-tanácsért csekkold a “Betűzz a weboldalon!” című blogbejegyzésünket!
# fotókkal, illusztrációkkal kapcsolatos hibák
Ahogyan a honlap színei és betűi esetében is a tudatos és körültekintő választás a siker kulcsa, úgy a weboldal számára kidolgozott fotók, illusztrációk, ikonok, mintázatok esetében is pontosan ez vezet eredményre.
Gyakori hiba, hogy a weboldal vizuális elemei nincsenek jól „összeválogatva”. Ezt még egy nem „szakavatott” szem is látja, érzékeli. „Stílusficam” sokszor kijön, ha a „formák” eleve nem az adott arculati koncepcióba illeszkednek, és erre „rátesz egy lapáttal” az, ha még ezek között sincs meg az összhang. Nincs meg a „közös hang”, azaz a mondanivaló, a színvilág, a stílus, a hangulat.
A stílusbeli különbségeken kívül méretbeli különbségek is gyakran adódnak. Például egy blokkon belül különböző méretű, különböző „fekvésű” fotók, grafikák találkoznak. Tény, hogy az aszimmetrikus tervezés trendi, de ezek nem e trend miatt ilyenek. : ) A katonás „vigyázzállás” még mindig előnyösebb, mint az összevisszaság, továbbá a fotók, illusztrációk rendezésében is a szellősségre kell törekedni.
Kicsit kapcsolódva az előző ponthoz: a szöveges tartalmak és a fotók találkozása is gyakran „hibás”. Fotókra kerülnek feliratok, de a fotó sem tud megfelelően érvényesülni és a szöveg is olvashatatlan. Minden esetben úgy feliratozzuk a fotókat, hogy a kép részei megfelelően kirajzolódhassanak, a szöveg pedig jól olvasható maradjon.
Grafikákkal, illusztrációkkal és ikonokkal kapcsolatban pedig leginkább stílushibák fedezhetők fel. A hiba az, ha egyrészt a grafikák, illetve az ikonok rajzolási módjukban, kivitelezési technikájukban, felépítésükben térnek el egymástól, másrészt nem passzolnak az adott témához, arculathoz. Ahhoz sem kell „gurunak” lenni, hogy látható, érezhető legyen, ha ezek a vizuális elemek nem „egy nyelvet beszélnek” – sem egymással, sem mással nincsenek szinkronban.
Még több hasznos tippért-tanácsért csekkold a “Fotózz a honlapon!” című blogbejegyzésünket!
A lista természetesen nem teljes, bejegyzésünk áttekintés volt a leggyakoribb webdesign hibák „tárházából”.
Egészítsd ki bátran! : )