Webshark Blog

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.)