Webshark Blog

Amikor a weboldalad tervezed, van egy dolog, melyről nem lenne szabad elfeledkezned: ez a stílus-útmutató a céged számára. Ez segít abban, hogy javítsd és egy új szintre emeld a weboldalad felhasználói élményét is. (Frissítés, 2023.05.26. – A bejegyzést több új fejezettel is kiegészítettük, többek között a definícióra vagy a szövegek stílusára vonatkozóan.)

Egy stílus-útmutató (style guide, style guideline) 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.

Mi az a stílus-útmutató?

A stílus útmutató szabályokat tartalmaz, melyek meghatározzák, hogy nézzen ki a tartalmad (milyen érzést keltsen a felhasználóban, hogyan szóljon hozzá). Az alapvető elemek tartoznak bele, mint a márka hangneme, a logó, a színpaletta, a nyelvtani szabályok, hogyan írod le a márkaneved, hogyan használsz vizuális elemeket a tartalmaidban, stb.

Általában a márka stílus útmutatóját egy megosztott dokumentumban rögzítik, hogy a csapat minden tagja hozzáférjen, hiszen pont azért készül, hogy mindenki betartsa a megjelenésre vonatkozó szabályokat. Amennyiben a megosztott dokumentumban változtatás történik, annak következetesnek kell lennie.

Milyen előnyei vannak egy stílus-útmutatónak egy weboldal esetében?

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

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űké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?

Ahhoz, hogy létre tudd hozni a stílus-útmutatód tisztában kell lenned a céged (márkád) személyiségével (identitásával): a küldetésével, az értékekkel, a közönséggel és a célokkal. Ezek képezik az alapját az irányelveknek. Amíg ezek a márka irányelvek nincsenek pontosan meghatározva, rögzítve, addig ne is lépj tovább! Tehát először:

Határozd meg a márkád identitását!

Ide tartozik a céged küldetésnyilatkozata, a jövőkép, az értékek, melyekre épül a márka. Ebbe beletartozik a céged története, vagyis ami része lehet a „rólunk” oldalad tartalmának.

• Küldetésnyilatkozat: egy vagy néhány mondat, mely kifejezi, hogy miért létezik a céged. Kiért dolgozik, hogyan, milyen céllal?
• Jövőkép: merre tart a céged, mit akar elérni a jövőben? Itt a bevételek növelésén egy kicsit túl kellene lépni.
• Értékek: milyen értékek fontosak a céged számára? Milyen értékeknek próbálsz megfelelni működés közben?
• A történeted: hogyan indult a céged? Ki alapította és miért? Hogyan nőtt akkorára, mint jelenleg? Mit ért el eddig?

A márka irányelvekben kell ezeknek szerepelniük, mert meghatározzák a márka személyiségét, stílusát, és persze azt is, hogyan és milyen tartalmat készítesz.

Közönség

A következő lépésben át kell tekintened a közönségedet. Ez alapvetően közönségkutatáson alapul, vagyis ha ilyet még nem végeztél, akkor érdemes megfontolni. Ha már létrehoztál néhány céges personát a közönségszegmensek alapján, akkor az mehet az útmutatóba.

Ezután jöhetnek a vizuális elemek:

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.

Emellett olyan dolgok is fontosak lehetnek, hogy mi legyen a képek forrása (saját vagy stockfotó), milyen legyen a stílusuk, fotókat vagy grafikákat használ inkább, stb.

A márka stílusa a szövegekre vonatkozóan

Egy weboldalon azonban nem csak vizuális elemek jelennek meg, hanem szövegek is. A tartalomkészítőknek tudniuk kell, hogy szavakon keresztül hogyan jelenjen meg a céged. Nem csak a weboldalon, hanem minden egyéb felületen is, hogy következetes legyen a hangja.

Ennek olyan elemei vannak, mint az, hogy hogyan kommunikálsz: viccesen, kifinomultan, titokzatosan, komolyan, esetleg szaknyelven. Ide tartozik, hogy az írott tartalmat hogyan adod át, milyen érzéseket közvetítesz. Ez természetesen változó, hiszen az adott téma függvénye, azonban érdemes rögzíteni, hogy milyen típusú üzenetnél milyen érzelmek jelenhetnek meg a céged kommunikációjában.

Az írott stílushoz tartozik emellett a szóhasználat, a nyelvtan, formázás is. Tehát az, hogy milyen szavakat kerül a céged, milyen szavakkal beszél a termékeiről/szolgáltatásairól, hogyan használja a márkanevet. A nyelvtani szabályokhoz tartozik, hogy hogyan használ például rövidítéseket, írásjeleket, hogyan írod a számokat, stb. Végül a formázás része, hogy hogyan jelennek meg az oldalon például a felsorolások, a címsorok, a linkek, kiemelések, stb.

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