Egyre több tevékenységünket végezzük különböző felhasználói felületeken (UI). Ezért ezek tervezése (UI design) szintén az egyik legkeresettebb grafikai kivitelezés lett. Ezért is fontos, hogy a UI design alapelveket áttekintsük. Nem teljes a lista, de próbáltam a legfontosabbakat összeszedni.
De hogyan lehet valakiből UI designer? Milyen készségeket kell elsajátítani, illetve mikre kell mindenképp odafigyelnie.
Bár ennek a cikknek nem célja, hogy átfogó ismeretet nyújtson a teljes szakterületről, 5 olyan alapelvet mégis elsajátíthatsz belőle, amelyek létfontosságúak, ha felhasználói felületek vizuális tervezéséről van szó.
Kezdjük is!
Mit csinál egy UI designer?
A UI design jelentése user interface (felhasználói felület) design. Ez lényegében párban jár a UX, vagyis a user experience design (felhasználói élmény) fogalmával.
Az alapvető különbség a kettő között, hogy a UI design vizuális , míg a UX design stratégiai műfaj.
De ismerkedjük meg részletesebben is ezekkel a fogalmakkal:
A UX design fogalma
A UX designer elsődleges feladata, hogy szolgáltatás- vagy terméktervezés közben biztosítsa annak feltételeit, hogy az eredmény végül a lehető legjobb élményt nyújtsa a felhasználó számára.
Éppen ezért szokták néha érzelemtervezésnek vagy empátiatervezésnek is hívni.
Ez jelentheti egy honlap, egy mobil applikáció vagy egyéb szoftver felhasználói felületének a megtervezését is.
A UX designer:
- segít a célcsoport feltérképezésében és a versenytársak elemzésében;
- megtervezi azokat az útvonalakat, amelyek mentén a user az általa kívánt célba ér;
- felhasználóbarát funkciókat tervez;
- drótvázat (wireframe-et) tervez az applikáció vagy weboldal felhasználói felületéhez;
- ellenőrzi a meglévő felületet a felhasználó szemszögéből;
- együttmükődik a fejlesztőkkel és a UI designerrel;
Emellett nem árt, ha tisztában van az aktuális trendekkel, de az ezekhez való túlzott ragaszkodás hátrányairól a Hová tart a UI design? című cikkben már beszéltem.
A UI design fogalma
Ez lényegében a felhasználói felület (user interface) vizuális kialakítását jelenti. A UI designer feladata, hogy a meglévő szerkezetet és a tartalmat a lehető legvonzóbban tálalja a potenciális felhasználók számára.
A UI designer:
- megtervezi az olyan elemeket, mint a gombok, ablakok, menük, üzenetek stb., és szabályokat határoz meg ezek használatára, megjelenésére;
- létrehoz egy vizuális style guide-ot, amelyben végigvezet a színek, formák, tipográfia és egyéb elemek következetes használatán;
- együtt dolgozik a fejlesztőkkel.
De mit is jelent UI designernek lenni napjainkban?
A UI design ma
Egyre több digitális folyamat létezik (pl. bankolás, biztosításkötés, online bevásárlás). Ezek mind olyan digitális felületeken kívánnak, amelyek alapos UX és UI tervezést igényelnek.
Ez azt jelenti, hogy a grafikusoknak tudniuk kell digitális felületekben gondolni. Az alap skill set része egy egyszerűbb weboldal vagy interface megtervezése.
Jó hír viszont, hogy bár egy UI designer számára a folyamatos önfejlesztés kötelező, létezik egy olyan alaptudás, amivel, ha tisztában vagyunk, viszonylag könnyen boldogulhatunk a szakma kihívásaival.
Ezeket vesszük át az alábbiakban, 5 lépésben.
A UI design 5 alapeleme
Egy UI designer feladatköre alapvetően roppant szerteágazó. Mégis meghatározhatunk öt területet, amelynek ismerete esszenciálisan fontos – és komoly segítséget is jelent.
Lássuk, melyek ezek:
1. Matéria és fény
Designer alaptézis, hogy a fény felülről jön és a tárgyak árnyékot vetnek. (Ezt nevezhetjük a fény és a matéria játékának is.)
Ez azt jelenti, hogy árnyékokkal érjük el a kívánt hatást. Egészen pontosan a megvilágítás és a környezet árnyékával.
Ha ugyanis egy fizikai térben létező tárgyat az asztalra teszünk, észrevehetjük, hogy nemcsak a tárgy vet árnyékot, hanem az asztal is visszaver bizonyos fényeket.
Szerencsére ezt a Google jól definiálta a Material design alapelvei között.
Ezeket a szabályokat tehát nem érdemes megszegni.
(Persze, ez nem azt jelenti, hogy mindenkinek csak a Material desigban kell gondolkodnia. Sőt.)
2. Konzisztencia
Ennek a legnagyobb előnye, hogy a konzisztens felületet szeretni (és használni) fogják a userek.
Viszont konzisztenciából is többféle van. Egy designer szempontjából a legfontosabbak:
- vizuális konzisztencia (a színek, a tipográfia, a vizuális nyelv stílusa és minősége legyen állandó);
- funkcionális konzisztencia (ez lényegében a rendszer használatának következetessége, mely külső és belső konzisztenciára osztható);
- belső konzisztencia (a rendszerben lévő funkciók elérhetőségének módja külön oldalakon is legyen ugyanazon logika szerint elérhető és használható, mint az azt megelőző oldalakon);
- külső konzisztencia (ha olyan best practice-eket «jó gyakorlatokat» tudsz alkalmazni a saját felületeiden, amelyeket más interface-ekben már megtanultak a felhasználók, mindenképpen élj a lehetőséggel).
3. Vizuális hierarchia
Ha elképzelünk egy képernyőt, azon láthatunk tartalmi és funkcionális elemeket. A designer szerepe ezzel kapcsolatban, hogy a felhasználó számára könnyen megérthető legyen, mit vár tőle a rendszer.
Egy olyan rendszerben, ahol minden egyforma hangsúlyt kap, a felhasználónak túl sokat kell gondolkodnia azon, mit kell tennie a kívánt cél eléréséhez.
Ha viszont a hierarchia jól van kialakítva, jól áttekinthető, funkcionális, egyszerűen használható rendszert kapunk. (És ezt a felhasználó imádni fogja.)
Ebben rengeteg eszköz van a segítségünkre, ezek közül hármat érdemes kiemelni:
- tipográfia
- white space
- színek
Ennek szemléltetéseként próbálj meg úgy interface-t vagy weboldalt tervezni, hogy tipográfián (és távolságokon) kívül nem szemléltetheted mással a fókuszokat.
A white space-ekkel szimmetriát és asszimetriát hozhatunk létre. Ugyanis ezekkel is jól szemléltethetjük az egyes elemek közti hierarchiát.
A színekkel pedig plusz fókuszpontokat adhatunk a felület egyes részeihez.
4. Reszponzivitás
Ma már megszámlálhatatlan kijelzőtípus (és ezzel együtt -méret) érhető el. Azaz nem tudhatjuk biztosra, hogy milyen és mekkora megjelenítőn találkozik majd a felhasználó az általunk tervezett felülettel.
Szerencse azonban, hogy a különböző tervezőprogramok (pl. Figma, AdobeXD, Sketch) már lehetővé teszik a reszponzív tervezést, nem kell számtalan külön méretet elkészítenünk egy adott elemből.
A UI és a reszponzív design fontos elemei a kártyák. Ezek különböző tartalmi elemeket foglalnak magukba, valamint segítenek különválasztani bizonyos tartalmi csoportokat egymástól.
Ezek a kártyák ráadásul méretben is változtathatóak, egymás alá rendezhetőek és összeolvaszthatóak.
5. (Le)fejleszthetőség
A print világában is fontos, hogy a design, amit létrehozunk, nyomdakész, kivitelezhető legyen. Ez a UI területén is kulcsfontosságú.
Ha ugyanis a design nem lefejleszthető, a munkának gyakorlatilag nincs értelme.
Fejlesztés szempontjából az alábbiakat kell figyelembe vennünk a tervezés során:
- mennyi idő vagy pénz szükséges a tervek megvalósításához?;
- mennyire ismerjük a keretrendszert, amiben a fejlesztés zajlik majd – és ennek tudatában mennyire komplex az általunk tervezett rendszer?;
- mennyire ismerjük az adott platformot (pl. iOS vagy Android) és annak lehetőségeit, amelyre tervezünk?
De mitől lesz valaki UI designer?
Általánosságban igaz, hogy minden grafikus kicsit UI designer. Hiszen van néhány alap, amit grafikusként is mindenképp tudni kell (ilyenek például a tipográfiai ismeretek, a színskálák és a színpárok ismerete, a minták és a terek következetes és tudatos használata).
A vízválasztó az, hogy ki mennyire merül el a digitális világ rejtelmeiben.
És az, hogy mennyire empatikus.
Persze, mindenképp előny grafikusként, ha tudunk a befogadó fejével gondolkodni. De felhasználói felületeket tervezni anélkül, hogy bele tudnánk magunkat élni annak a helyzetébe, aki majd használni fogja a rendszerünket, nagyon nehéz.
A jó hír viszont, hogy nem szükséges egyetemi diploma ahhoz, hogy valaki UI designer legyen.
Szakemberkereséskor sokkal inkább arra kíváncsiak a munkáltatók és a megbízók, hogy a designer birtokában van-e az alábbi skilleknek:
- Interakciótervezési elvek
- Márkaépítés, tipográfia és színelmélet
- Drótvázolás (wireframing) és prototípuskészítés (prototyping)
- Stílus útmutatók (stlye guide) készítése
- Csapatmunka és kommunikációs készség
- Kulcsfontosságú iparági eszközök ismerete (Figma, AdobeXD, Sketch)
Kezdőként érdemes saját magunk számára felhasználói felületeket tervezni vagy épp online UI design tanfolyamok keretében kitanulni az alapokat. És fokozatosan, kisebb munkák elvégzésével nevet szerezni a szakmában.
Konklúzió
Lényegében elmondható tehát, hogy ha szerethető, jól használható rendszert akarunk tervezni, öt szempontra kell kiemelt figyelmet fordítanunk:
- a matéria és a fények viszonyára;
- a konzisztenciára,
- a vizuális hierarchiára,
- a reszponzivitásra,
- valamint a (le)fejleszthetőségre.
A UI design az egyik legkeresettebb grafikai terület napjainkban – és ez a jövőben nemigen fog negatív irányba változni.
Tehát még most sem késő, hogy megtanuld az alapokat és te magad is UI designer légy. Ebben rengeteget segíthetnek neked online designer kurzusaink is. (De akkor sem fogunk megharagudni, ha megosztod ezt a cikket ismerőseiddel, akik számára érdekes lehet.)
Ha pedig kérdésed van, akár a cikkel, akár egyéb grafikai témával kapcsolatban, írj nekünk bátran!
