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.

kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet kubet