Keresés
Header Háttér

Webshark Blog

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

2021-03-180 komment

Hogyan hozz létre egy stílus-útmutatót, ami javíthatja a weboldalad felhasználói élményét?

Amikor a weboldalad tervezed, van egy dolog, melyről nem lenne szabad elfeledkezned: ez a stílus-útmutató. Ami segít abban, hogy javítsd és egy új szintre emeld a weboldalad felhasználói élményét.

Egy stílus-útmutató (style guide) segít abban, hogy kialakíts egy következetes designrendszert, és hogy hatékonyan adhasd át a gondolataidat egy jó tartalom elkészítésével. Ráadásul időt is spórol számodra, valamint professzionálisabb megjelenést kap általa a céged és a márkád.

Milyen előnyei vannak egy stílus-útmutatónak?

  • Könnyebben elkészítik a fejlesztők a CSS-t és a HTML-t, mert alapul vehetik a leírt információkat, rendelkezésre állnak a színkódok, újrahasználhatnak UI-komponenseket, stb.
  • Segít a UX tervezésében, és egy olyan felépítés kialakításában, mely jól igazodik a márkádhoz.
  • A közösségi média kezelése során is használhatók a dokumentumban szereplő információk: ugyanazt a betűtípust, színeket, grafikus elemeket lehet használni.
  • A szövegírók számára is segít a munkában, hiszen kiderül belőle, hogy a cég milyen nyelvezetet, hangnemet használ.

Látható tehát, hogy a stílus, a vizuális megoldások, és az írott szövegek jellegének megadása minden fejlesztő, designer, projekt manager, szövegíró számára hasznos. A stílus-útmutató mintegy referenciapontként működik, hogy a végtermék az elképzeléseknek megfelelő legyen, de segít a határidők betartásában, a hatékonyság fenntartásában és mérsékli a feszültségeket a weboldal tervezése során.

Mi a különbség stílus-útmutató és márka-irányelvek között?

A stílus-útmutató nem azonos a márka-irányelvekkel. A stílus-útmutatót egy weboldal megtervezésének indulásától kezdve használjuk a végleges termék vizuális megjelenésének kialakításáért.

Ezzel szemben a márka-irányelveket tartalmazó dokumentum arról szól, hogy miként használhatjuk a márkaelemeket, például a logókat, grafikus elemeket, ikonokat a weben, nyomtatásban vagy bármely más megjelenésnél. Kitér arra, hogy mi az optimális alkalmazási méret, milyen térközöket használjunk, stb.

Ezzel szemben a stílus-útmutató meghatározza:

  • a betűtkészleteket
  • a színeket
  • az ikonokat
  • képeket
  • UI-elemeket
  • színkódokat
  • a hangnemet
  • kód-dokumentációt

Hogyan hozz létre stílus-útmutatót?

Tipográfia

Ehhez meg kell határozni a betűkészletet és megfelelő betűméreteket a szövegtörzs és a címsorok esetében, hogy elérjük a lehető legjobb olvashatóságot.

Színpaletta

A színek segítenek abban, hogy érzéseket válts ki a felhasználókból. A jó színpaletta hatással van a felhasználók hangulatára egy adott pillanatban, és befolyással van arra, hogy miként éreznek a márkával kapcsolatban, ami javuló konverziós arányt eredményez.

Amikor színeket választasz, meg kell határoznod az elsődleges és másodlagos színeket a márkád tulajdonságait figyelembe véve. Az elsődleges színek a márkádnál is megjelennek, míg a másodlagos színek kontrasztos színek. Utóbbiak használhatók bizonyos szövegeknél, gomboknál, menünél, animációknál, stb. A színek kiválasztásáról és használatáról itt írtunk bővebben.

UI-elemek

A felhasználói felület desginelemei fontos részei a felhasználói élménynek. A felhasználói felülettel tudsz életet lehelni a weboldaladba. Az UI-komponensek között olyan elemeket kell meghatározni, mint

  • gombok
  • űrlapok
  • beviteli mezők
  • ikonok
  • eszköztárak
  • elrendezés
  • menük
  • listák
  • rácsok
  • felugró ablakok

Az UI elemeinek világosnak, jól működőnek, pontosnak kell lenniük. A vizuális megjelenésükkel kell átadni azt a speciális jelentés, melyért megtervezik őket. A felhasználóknak a segítségükkel kell tudni meghatározni a következő lépésüket.

Képek

A fotók és az illusztrációk részei a márkád egyéniségének és jövőképének. Egy kép többet mond minden szónál: vagyis a vizuális kommunikáció sokkal hatékonyabban képes megérinteni az embereket, mint a szavak. A képek esetében meg kell határozni a megfelelő színeket, oldalarányokat minden megjelenésnél, valamint a csatornákat, melyeken keresztül a felhasználók kapcsolatba lépnek a márkáddal.

Összességében elmondható, hogy a stílus-útmutató segít összegezni a csapatod elképzeléseit, és mindenkivel betartatja a vonatkozó szabályokat annak érdekében, hogy a márka személyiségével összhangban érd el a kitűzött célokat.

(A bejegyzés ezen szöveg felhasználásával készült.)

Kategória: Egyéb | 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.