Teljes márka- és UI design tervezési folyamat

Az alábbi blogbejegyzésben megmutatom, hogy hogyan épül fel egy teljes tervezési folyamat a hangulattáblától, azaz a moodboardtól egészen a webdesign részig, hogyan dolgozom én, és miért nem érdemes kihagyni bizonyos szinteket.

Nagyon stílusos ezt a folyamatot alátámasztani a tortakészítéssel. Ugyanis a tortákat sem mindjárt a díszítéssel kezdjük. Nem esünk neki a torta dekorálásának, ha nincs meg hozzá a váz, azaz a tojásból, lisztből, egyéb hozzávalókból összeállított piskótás-krémes tortaalap. Ezt követően jön csak a dekorálás, ez a honlap esetében a webdesign, amelyre a logó olyan, mint a torta tetején elhelyezett különféle Mr. & Mrs., Love és hasonló tortadíszek. 

Hogyan alakítható ki és mitől lesz egységes a folyamat? Előkészületekkel, tervezéssel.

Lássuk hát a teljes tervezési folyamatot, amely folyamat szerint dolgozom!

1) DESIGN BRIEF / A PROJEKT ÖSSZEGZÉSE, ÜGYFÉL IGÉNYEKKEL

Alapvetően ebből indul ki a tervezési folyamat. A brief egy útmutató. Nélküle a tervezés csak találgatás, koncepciók nélkül. A végeredmény nem az lesz, amit a megrendelő szeretne.

A brief olyan írásos dokumentum, amit a tervező vagy tervező csapat állít össze az ügyféllel, megrendelővel konzultálva az ő – honlappal, grafikai munkákkal kapcsolatos – igényeiről. Ez kibővül még további részekkel, pl. tervezői kondíciókkal, határidőkkel, stb…

Az igény feltérképezéséhez egy jól összeállított kreatív kérdéssor elgondolkodtatja a megrendelőt. A kérdéseket olvasva válaszok fogalmazódnak meg benne, amikre előzőleg nem is gondolt. Ennek kitöltésétől azonban nem kell megijedni! Lehet, hogy néha unalmasnak, vagy túl hosszúnak, bonyolultnak tűnik egy-egy ilyen kérdéssor megválaszolása, de végig azt szolgálja, hogy a megrendelő minél pontosabb képet adjon a tervezőnek. A kérdések által igények, elképzelések fogalmazódnak meg a megrendelőben, amik lehet, hogy eddig benne sem merültek fel. Ezekből a válaszokból aztán egy pontos elképzelés születik, amely a brief része lesz. Ezáltal válik sikeressé a közös munka és a tervezési folyamat.

2) MOODBOARD / HANGULATTÁBLA

A moodboard egy kollázs, amely elsődlegesen a márkához köthető hangulatos fotókat, színeket, mintákat, a stílust mutatja be. Ezzel határozzuk meg a márka stílusát.

Elsődlegesen fontos, hogy milyen briefet (rövid kivonat, jegyzet) kap az ügyféltől a tervező. Ez a kiindulási alap, amiből elkezdődik a moodboard (hangulattábla vagy stílustábla) megalkotása.

A briefből kapott információk, kulcsszavak segítségével indul el a képek utáni kutatási folyamat. A fotók segítségével határozzuk meg a színvilágot, melyeket a kiválasztott képekből nyerek. A fotókhoz, színekhez passzoló fontokat (betűtípus) párosíthatunk, de ezt később is elég meghatározni.

3) LOGÓ

Amennyiben még nincs és igény van logóra is, úgy ez is a teljes projekt részét képezi.

A márka egyik fontos eleme a logó, melynek elsődleges célja a megkülönböztetés.
A jó logó részletektől, sablonoktól mentes és emlékezetes. Beazonosítja az őt képviselő szolgáltatást, terméket.

Léteznek csak szöveges (csak szöveget tartalmaz), ikonikus (csak ábrát tartalmaz), és vegyes (szöveg és ábra együttesen) logók is. A szövegesre példa a Nivea, az ikonikusra a jól ismert Apple cég almája és a vegyesre a Chanel logója.

A logótervezést (véleményem szerint) nem érdemes elsietni. A tervezés elején sok összefüggést, kapcsolódást, jelentéseket, szinonimákat kell végig venni, átgondolni, amik mind befolyásolhatják a tervezést. Először ceruzával papírra skicceket készítünk, lehetőleg minél többet, mert ezekből formálódik és alakul a logóterv.

A legjobbnak ítélt skiccek végül grafikai programban is elkészülnek.

4) MOCKUP / PREZENTÁCIÓ

Amikor elkészül egy arculat, jó ha látjuk és tudjuk előre, hogy hogyan fog működni élőben, mielőtt még a nyomdába sietnénk vele. Szeretnénk tudni, hogy hogyan mutat a névjegykártyán, bögrén, pólón, papírtáskán, stb., amikre majd a szolgáltatásnak szüksége lesz.

A mockup jelentése magyarul mintadarab, modell, makett. Lényegében egy prezentációs eszköz. Jól szemléltetni, hogy a logó hogyan néz ki a különböző felületeken. Sőt, előre el is lehet tervezni, hogy hol szerepeljen a logó és mekkora méretű legyen a pólón, a bögrén. Így a nyomdában már nem kell kézzel-lábbal mutogatni és a végeredmény is az lesz, amit mi szeretnénk.

5) BRANDBOARD / ARCULATI TÁBLA

A Brand board egy kisebb, online, egyéni vállalkozás, vagy személyes márka számára megalkotott arculati tábla.

Elkészítése opcionális, nem mindenki tart rá igényt. Leginkább személyes márka, egyszemélyes vagy kis és közepes vállalkozás számára alkalmas a Brand board.

Nagy cégek, városmarketing részére már egy sokkal hosszabb, átfogóbb arculati kézikönyvet kell készíttetni.

Miért van rá szükség?

Amikor grafikai anyagokat szeretnénk készíttetni a közösségi felületekre, honlapra vagy egyéb reklámanyagra, akkor csak elővesszük a Brand board-ot és minden fontos arculati elemet megtalálunk rajta, ami a grafikai anyag tervezéséhez szükséges. Melyek ezek a fontos arculati elemek? A legfontosabbak a logó, a színpaletta, a betűtípusok (nem a logó betűtípusa!), fotók a stílus, az irányvonal szemléltetésére. Ezeken kívül tartalmazhat a Brand board igény szerint még mintákat, ikonokat, egyéb kiegészítő elemeket, amik tovább növelik a márka értékét.

 6) WIREFRAME / DRÓTVÁZ

A drótváz a honlaptervezés kiinduló pontja, elhagyhatatlan része. Kell egy jól átgondolt alap, amire lehet építkezni.

Nem beszélve arról, hogy nem mindig az első terv a befutó! Lehet, hogy többször átgondolva, több verziót elkészítve jutunk el a végleges elrendezéshez. Ezért egyszerűbb drótvázat készíteni, amely könnyebben módosítható, mint a már kész – képekkel, színekkel, elemekkel, a teljes felhasználói felülettel rendelkező – terv.

A drótváz először papíron, skiccelés formájában készül el. Nem tartalmaz színeket, szövegeket, elemeket, még csak pontos arányokat sem. Itt elsősorban átgondoljuk és papírra vetjük, hogy mi, hol legyen, milyen szakaszokat tartalmazzon a honlap.

Végig gondoljuk a funkciókat, mi után mi következzen, hová kell gomb, az hová vezessen, stb… 

Itt fontos megemlíteni a már sokat emlegetett felhasználói élményt, más szóval user experiencet (UX). Kell hozzá logikus és rendszerben történő gondolkodás.

Nem javasolt értelmetlenül és funkció nélkül elhelyezni elemeket és cselekvésre buzdító gombokat az oldalon. Azonban ott, ahol szükség van rá, alkalmazni kell azokat. Rá kell vezetni az olvasót, hogy mit csináljon a honlapon. Feliratkozzon egy hírlevélre, ajánlatot kérjen, vásároljon, üzenetet küldjön? Ha nem tudja, hogy mit tegyen, el fog veszni az oldalon és gyorsan tovább lép.

Amennyiben a skicceléses tervezés véglegessé válik, a tervet digitálisan is elkészítjük.

Még itt sem szerepelnek elemek, képek, színek, csak maximum szürke árnyalatok, melyek a képek, elemek helyét jelölik.

végleges honlapszövegek azonban már megjelennek. Ez azért lényeges, mert könnyebb a meglévő szöveggel tervezni, mint hogy később kelljen átrendezni a tervet, amikor utólag kiderül, hogy mégsem fér ki a szöveg a kívánt dobozba.

7) UI DESIGN

Amikor véglegessé válik a drótváz, kezdődhet a felhasználói felület (UI, azaz User Experience) kialakítása, lényegében a drótváz „kiszínezése“. Ügyelni kell arra, hogy a brand által képviselt stílus és hangulat, színvilág megjelenjen a honlap terven, mellyel visszakanyarodunk az arculattervezési fázisba és az ott lefektetett elemekkel dolgozunk.

Itt olyan alapvető dolgoknak kell teljesülnie, ami befolyással van a felhasználói élményre. Például:

· megfelelő betűméretet kell használni (ne legyen túl kicsi vagy túl nagy) 

· maximum 1-2 betűtípust kell alkalmazni

· a betűtípusok támogassák a magyar ékezetes betűket

· mindig az üzenethez, stílushoz illő színek használata

· az aktivitásra buzdító gomboknak (CTA) megkülönböztethető színnel kell rendelkezniük

· jól olvasható tartalomra van szükség a mobilon, tableten

· kerülni kell, hogy a saját ízlésünk szerint alakítsuk ki a designt

· legyen átlátható, kerülni kell a túlzsúfolt oldalakat

· gondot kell fordítani a mobil telefon, tablet elrendezés megtervezésére is, fontos a reszponzív megjelenés is

A honlap betöltése után a következő pár másodperc alatt először a vizuális megjelenés az, amivel találkozik az olvasó. Ez az, ami vagy meggyőzi őt, vagy nem. Kialakul benne, hogy jó helyen van-e vagy sem. Emellett az is lényeges, hogy milyen benyomás alakul ki benne a cégről, a termékről az esztétikus megjelenés által. Az elé táruló látványvilág a termékre, szolgáltatásra egyedileg kialakított, így az olvasó jobban megjegyzi.

A tervezési folyamat itt véget ér, de a munka még nem, hiszen élővé kell alakítani a megtervezett webdesignt.

8) KÓDOLÁS

A webdesign után nem áll meg az élet, hiszen a kialakított design még nem működőképes.

Ahhoz, hogy kattintható formában megjelenjen az interneten, a tervből sitebuild készül HTML5 és CSS3 kódolással. A kész sitebuild végül a WordPress tartalomkezelő rendszerre kerül, mint egyedileg kódolt sablon.

Amennyiben valaki már rendelkezik kialakított arculattal, logóval és csak honlapra van szüksége, úgy a tervezés a drótváz kialakításával indul. A webdesign megalkotásánál kiindulási pont a már meglévő arculati elemek, a hangulattábla. Azonban ebben az esetben sem hagyható el az 1) pont.

A teljes tervezési folyamat képes prezentációja az alábbi lenti linkre kattintva látható:

Little Bird Wedding Cake márka teljes tervezési folyamat 

A blogbejegyzésekkel betekintést engedek a színfalak mögé. Márkastratégia fókuszú arclat, megjelenés kialakítása, design tippek, ötletek. A bejegyzések a saját tudásom, tapasztalataimon alapulnak, saját megfogalmazásban. Enjoy! 
Növeld márkád presztízsét - tekintsd át, milyen márkákkal dolgoztam legutóbb, és segítségemmel alakíttasd ki márkád elegáns megjelenését!

A szerző: Deák Zsuzsi

Bejegyzés megosztása