iWiW redesign – alapok

Az előző posztban már belengettem, igen, megújul az iWiW. Ráadásul olyan szerencsés helyzetbe kerülhettem, hogy az új design az én egerem alol gördülhet ki... próbálom összefoglalni és egyben egy jó összeképet adni, hogyan is megy egy ilyen óriás oldalnak az áttervezése, mennyire nagy a rendszer és mennyi buktatóval kell számolni. Én nagyon élveztem, mégiscsak Magyarország legnagyobb oldalát kell újratervezni. Csapjunk a lecsóba.

Minek kell a redesign?
A legfontosabb, hogy javítsuk a felhasználói élményt, ami nagyjából két részből tevődik össze. Egyrészt szükség volt már, hogy kapjon egy egységes megjelenést az iWiW. Egy élesebb szemű látogató egy egész korszaknyi design munkát fellelhetett az oldalon :) Másrészt szükségessé vált, hogy újragondoljuk pár funkciónak a megjelenését. Átgondoljuk a navigációt, megvizsgáljunk esetlegesen jobb megoldásokat. Jelenleg nem voltak építőkockáink, legóelemeink, amihez hozzányúlhattunk és építhettünk belőlük. Ezalatt értsétek azt, hogy ha valamit kellett tervezni, próbáltuk igazítani is az oldalhoz, de próbáltunk valami újat is készíteni így pl. eltérő gombok, formok jöttek létre. Ez most megváltozott. Alapelemeire boncoltuk az oldalt, és minden kapott egy saját kinézetet. Így a tervezési folyamat vége felé tulajdonképpen már minden megvolt, a layoutokat csak össze kellett legózni a kész elemekből.

Design alapkoncepció, hangulatvilág
Nyilván az egyik legfontosabb dolog az összes design elkezdésekor, hogy kitalálunk, meghatározunk egy stílust, amit végigviszünk az összes terven. Nem volt ez másképp itt sem. Napjaink egyik legmeghatározóbb webes stílusa úgy gondolom a letisztult minimal. A letisztultság természetesen egy fontos szempont, hisz egy ilyen nagyságú weboldálnál a felesleges grafikai elemek nem csupán a felhasználói élmény rovására mehetnek, de az adatforgalmat is megdobhatják. De! Semmiképpen sem szerettem volna valami atom minimált létrehozni. Valami játék szerintem illik az iWiW arculatába, könnyebb is beleszeretni, ha nem egy steril felületet nézünk. Próbáltam ide-oda lekerekítéseket, finom grafikai elemeket csempészni. Ehhez a játékosság hozzáadnak az ikonok is, de azokról majd később.

Grid
A gridek létjogosultságáról, szerepéről nem szeretnék írni, úgyis nálam sokkal okosabbak már nagyon jó prezentációkat, case study-kat írtak. Nem volt egyszerű szülés. De végül a 60px-es gridelemeknél maradtunk 20px-es eltartásokkal.

Ez nagyon szép és jó, de vannak olyan esetek, amikor bizony meg kell erőszakolni ezt. Van ugyanis olyan, hogy adott hasábokat nem csak simán whitespace-szel akarok elválasztani, hanem a tömböt egy háttérszínnel szeparálnám.

Namost ilyenkor bizony el fog csúszni a grid, kompromisszumot kell hozni, ami nálunk valahogy így néz ki: Alapvetően minden gridre igazodik, ha egy kiemelt hasábot hozunk létre, akkor a hasáb tartalma gridre fog illeszkedni, de a hasáb háttérszíne már elcsúszhat. Rengeteget keresgéltem amúgy, hogy mi erre a best practice, de sehol sem volt feketén fehéren kimondva, hogy kell ilyenkor viszonyulni a gridhez.

Legóelemek
A redesign során ráragadt ez a név, de jól kifejezi, hogy miről is beszélünk. Legkisebb elemeire bontottuk a rendszert és ezeket az elemeket önmagukban próbáltuk tökéletesre csiszolni úgy, hogy egy rendszerben tudjanak működni. Hogy mire is gondolok? Egy hétvégén át olvasgattam preziket, case study-kat, arról, hogy milyen egy jó form, űrlap. Durva, de tényleg egy művészet, tudomány ez, vezetni a felhasználót, segíteni a kitöltésben. Átrágva, mérlegelve a helyzetet úgy gondolom egy jól felépített logóelem lett a formok rendszere.

Na most a formok, csak egy kis részei ezeknek az építőkockáknak. Ugyanilyen alapossággal próbáltunk átvizsgálni mindent, hova, mit lenne igazán jó használni. Nagyon fontos dolog ez. Mezei user nem fogja tudni, hogy ezek mögött ekkora “tudomány” van. Nem is feladata, hogy megértse, az a jó, ha szereti használni, nem pedig megszokja használni. Ezt szerintem mindig tartsátok szem előtt.

A másik kusza rendszer, ami a mostani iWiW-en jól megfigyelhető azok a gombok. Rengeteg féle/fajta megjelenik. Kék, sötétkék, világoskék, gradienses, pixeles, nagy, kicsi... van itt minden. Szükség van különböző gombokra, de nem ennyire. Itt is próbáltunk kialakítani egy olyan tárházat, ami mindent lefed. Vannak kiemelt “tartalom létrehozó” gombok, interface-be jobban beleillő fehér gombok stb. Definiálva lett egy szabályrendszer, amihez nyúlhatunk, könnyedén használhatjuk.

Na elsőre ennyi. Fontosnak gondoltam, hogy már az alapoktól belelássatok, de a következő posztban már kicsit nagyobb részelemeit szeretném bemutatni az új iWiW-nek. Lesz szó az új userminikről, és azok logikájáról. Lelibbentjük a fátylat az új fejlécről, láblécről stay tuned!