Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2020-03-250 komment

A vizuális design öt alapelve

Ha megfelelően alkalmazod ezeket az alapelveket, akkor nem csak szép lesz a weboldalad, hanem a használhatósága is javul. 

Amikor ránézünk valamire, akkor egyből meg tudjuk állapítani róla, hogy az szép vagy sem. Akadnak, akik még el is tudják mondani, hogy miért vonzó egy bizonyos megjelenés. Ezek az okok alapelvekként is megfogalmazhatók. Ha valaki betartja a jó vizuális design alapelveit, az javítani tudja a terméke használhatóságát és vonzóságát. 

A vizuális design alapelvek világosan rámutatnak arra, hogy az olyan designelemek, mint egy vonal, egy forma, egy szín, egy rács, vagy a tér miként hangolható össze egy átgondolt, kerek egésszé. De melyik az az öt alapelv, mely meghatározza a vizuális design használhatóságát? A Nielsen Norman Group összeszedte.

Méretarány

Ezt az alapelvet gyakran használjuk, hiszen majdnem minden vizuális design számára előnyös. A méretarány elve a relatív méretek használatára utal, melyek jelezni tudják a fontosságot egy adott kompozíción belül. 

Tehát, ezt az alapelvet akkor használjuk helyesen, ha a legfontosabb elemek a legnagyobbak, illetve minél kevésbé fontos valami, az annál kisebb. Ennek az elvnek az alapja az, hogy ha valami nagy méretű, akkor azt könnyebben észrevesszük.

Egy vizuálisan vonzó design többnyire legfeljebb csak három különböző méretet használ. A különböző méretű elemekmegteremtik a vizuális hierarchia alapjait is.  

Vizuális hierarchia

A jó vizuális hierarchiájú elrendezést a felhasználók könnyebben megértik. A vizuális hierarchia arra utal, hogy az elrendezés vezeti a tekintetet a weboldalon, mégpedig a lényegesebbektől a kevésbé fontosak felé. 

A vizuális hierarchia megteremthető a méretarányok, az értékek, a színek, az elhelyezések, a tér nagysága és sok más egyéb jelzés által. Ha egy weboldalon nehezen tudod megállapítani, hogy hova kellene nézned, akkor valószínűleg hiányzik a megfelelő vizuális hierarchia az oldalon. 

A világos vizuális hierarchia megteremtéséhez, 2-3 betűtípus-méretet érdemes használni, melyek jelzik a felhasználónak, hogy mely tartalmak a legfontosabbak. Emellett használhatsz élénkebb színeket a fontosabb elemeknél, míg a visszafogottabb színeket meghagyod a kevésbé fontosak számára. 

A méretek ugyancsak segítenek a vizuális hierarchia kialakításában: ökölszabályként érdemes kicsi, közepes és nagy elemeket használni a designban. 

Egyensúly

Az egyensúly elve arról szól, hogy mennyire kiegyensúlyozottan vannak elrendezve és méretezve a desgin elemei. Egyensúly akkor jelenik meg, amikor egy képzeletbeli, középen húzódó tengely mindkét oldalán megjelenő elemek egyenlő súlyúak. Ebből a szempontból nem csak az elemek száma fontos, hanem az általuk elfoglalt terület is. 

A képzeletbeli tengely a referenciapont, melynek mentén elrendezheted az elemeket. Egy kiegyensúlyozott designban egyetlen terület sem vonja annyira magára annyira a figyelmet, hogy a többi területet ne vedd észre, annak ellenére, hogy bizonyos elemeknek nagyobb a vizuális súlya és sokkal inkább fókuszpontban vannak.

Milyen egyensúlyokról beszélhetünk? Szimmetrikus, aszimmetrikus és sugárirányú egyensúly. Ezt most nem részletezzük, korábban itt írtunk róla.

A lényeg, hogy olyan egyensúlyt kell választani, ami összhangban van azzal az érzéssel, amelyet közvetíteni szeretnél. Az aszimmetrikus egyensúly dinamikus hatást kelt, energia és mozgás érzetét adja át. A szimmetria ezzel szemben csendes és statikus, a sugárirányú pedig mindig a középpont felé vezeti a tekintetet. 

Kontraszt

A kontraszt elve egy másik nagyon gyakran használt elv, mely a weboldal egyes részeit kiemelkedővé teszi a felhasználók számára. A kontraszt elve a vizuálisan eltérő elemek egymáshoz viszonyított helyzetére vonatkozik, azt fejezve ki, hogy az elemek különböznek egymástól.

A kontraszttal teremtünk különbözőséget a szem számára két elem vagy elemek csoportjai között annak érdekében, hogy eltérő mivoltukat kihangsúlyozzuk. 

A kontraszt elve a leggyakrabban a színeken keresztül jelenik meg a designban. A designerek gyakran túlságosan is lecsökkentik a kontrasztot a háttér és a szöveg között annak érdekében, hogy annak lényegtelenségét megmutassák. Ezzel azonban sokszor nagymértékben lerontják a szöveg olvashatóságát. 

Gestalt elvek

Ezek olyan elvek, melyeket a 20. század elején fogalmaztak meg a Gestalt pszichológusai. A Gestalt elvek arról szólnak, hogy az emberek miként egyszerűsítik és rendszerezik az összetett képeket, melyek több elemet is tartalmaznak. A tudatalatti rendszerezés révén a részek egy szervezett egésszé állnak össze, és megszűnnek különálló részeknek lenni. A Gestalt elvek tehát arra mutatnak rá, hogy hajlamosak vagyunk az egészet figyelembe venni az egyedi elemek helyett.

Gestalt elvekből több is létezik, így a hasonlóság, a folytonosság, a közelség, alak és forma, szimmetria és rend. Különösen fontos ezek közül a közelség elve, mely arról szól, hogy az egymáshoz közel elhelyezkedő elemeket egy csoport tagjainak tekintjük. 

Miért fontos ezeket a vizuális elveket figyelembe venni?

  • Alkalmazásuk javítja a használhatóságot – az imént felsorolt vizuális design elvek betartása esetén könnyebben használhatóvá válik a weboldal. 
  • Pozitív érzéseket vált ki a design – az elvek használatának eredményeként a designerek olyan felhasználói felületet tudnak létrehozni, mely jól néz ki, így pedig kellemes érzéseket vált ki a felhasználóból.
  • Figyelembe vételük révén erősödik a márka – egy erős vizuális rendszer fokozza a felhasználói bizalmat és érdeklődést a termék iránt, ami erősíti a márkát.
Kategória: Design | Címke: ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.