A weboldalak esze: a drótváz. Érzelmeket később…
Ha megnézel egy lakást vagy házat, annak környezete, berendezése, színei az érzelmeidre hatnak. Azonban azt, hogy kényelmes lesz-e használni, megfelel-e céljainak, jobban láthatod a tervrajzaiból. Ha állandóan keresni kell a villanykapcsolókat vagy az ajtók folyton bosszúságot okoznak, hiábavaló a legszebb berendezés, nem lesz pozitív az élmény. Ha viszont minden jól működik, elmerülhetsz a színek, képek, kellemes berendezés keltette jó érzésekben.
Weboldalad látogatóit is így kell elképzelni. Ha könnyen megtalálnak mindent, amit keresnek, minden az elvártaknak megfelelően működik, akkor átadják magukat a weboldalad hangulatának, az élménynek. Ha viszont nem tudnak navigálni, nem találják a számukra fontos információkat, akkor bármilyen szép is a kinézet, nem fognak a mondanivalódra időt vesztegetni.
Hogyan lehet biztosítani a remek látogatói élményt egy weboldal tervezése során? A tervezés folyamata során erre a legjobb biztosíték a drótváz készítése.
Miről olvashatsz?
Mi az a drótváz?
A drótváz (vagy angolul wireframe) nagyon hasznos eszköz a weboldalak megtervezésénél.
A drótváz a leendő weboldal nagyon leegyszerűsített modellje: a tartalmak elhelyezésére és az oldal fő funkcióira fókuszál.
Nem tartalmaz színeket, képeket, grafikai elemeket. Nagyon hasonlít egy ház tervrajzához: megmutatja a technikai részleteket anélkül, hogy a végső stílussal, kinézettel foglalkozna. Segítségével ellenőrizni lehet a weboldal logikai felépítését, a navigációs lehetőségeket, az oldalak egymáshoz való kapcsolódását. Kinézetében is nagyon hasonlíthat egy tervrajzra: különböző alakzatok, vonalak helyettesítik a szövegeket, képeket, gombokat.
Egy weboldal tervezésekor érdemes a drótváz létrehozásával és egyeztetésével kezdeni. Így az egyes oldalak, tartalmi szakaszok célja egyértelmű lehet számodra ügyfélként és a weboldal készítője számára is, ráadásul megkönnyíti a grafikai tervezést. Nem beszélve arról, hogy olcsóbban előállítható, mint egy grafikai terv, és sokkal könnyebben módosítható.
A drótváz olyan, mint egy weboldal technikai specifikációja, azaz leírása. A megjelenésen túl számos, az oldal kódolásához szükséges információt is tartalmazhat, mint például filterek definiálása, űrlapok érvényesítése.
Drótváz készítése előtt
Még mielőtt elkezdődik a drótváz készítése, érdemes néhány kérdést megválaszolni.
- eszköztámogatás: várhatóan milyen eszközökön fogják a felhasználók az oldalt látogatni? Az általános webes böngészésben a legtöbben már az okostelefonjukat használják, de egy céges intranetes oldalnál lehetséges, hogy elegendő a desktop szélességet figyelembe venni. A design kidolgozásához és az oldal kódolásához is elengedhetetlen, hogy a tervek elkészüljenek különböző monitor szélességekre. Jelenleg kb. 360px az alsó határ, ahonnan érdemes elkezdeni a tervezést, felső határnál 1600-2000 px-t érdemes figyelembe venni.
- funkciók: a kialakítandó funkciók minden eszközön hasznosak-e, minden esetben meg kell őket valósítani?
Hogyan készül a drótváz?
Ha ügyfélként megválaszoltad az összes, a weboldal felépítésével és stílusával kapcsolatos kérdést a közös munkát megalapozó kérdőívben, érdemes számba venni, milyen különböző oldalakra van szükség. Ehhez segítséget jelenthet az esetleg már létező weblap felmérése, de ekkor is érdemes felülvizsgálni az aktuális struktúra célszerűségét. Nagyon fontos, hogy az oldaltérkép elkészültekor te és a weboldal készítője is tisztában legyen minden egyes oldal céljával.
Az elkészített oldaltérkép alapján könnyű meghatározni, milyen típusú oldalakra van szükséged. Biztosan kell majd egy, a többitől alapvetően különböző főoldal, egy bemutatkozó és egy kapcsolatfelvételi, és persze a szolgáltatásaidat bemutató oldalak, de lehet, hogy a többi lap készülhet nagyon hasonló felépítésben. Valószínűleg szükség lesz blog oldalra, illetve az egyes posztok teljes megjelenítésére. Előfordulhat, hogy aloldalakat kell megjeleníteni, például Rólunk oldal estében külön bemutatni a munkatársakat.
Hogyan néz ki a drótváz?
A drótváz alapján még nagyon nehéz elképzelni a weboldal végső kinézetét. Általában fekete-fehérben vagy legfeljebb szürke árnyalatok használatával készül. A betűtípus ekkor még semleges. A képeket keresztben áthúzott négyszögek jelzik. A szövegek helyét még általános szövegjelölő bekezdések vagy akár csak szürke téglalapok mutatják.
A legegyszerűbb drótváz (vagy ez még inkább csak tervezet) akár lehet egy word dokumentum is, amiben a honlap statikus szövegei szerepelnek, illetve az ezeket összekötő struktúra (navigációs gombok).
Mit kell rajta megvizsgálni?
Ügyfélként arra kell figyelned, hogy a weboldal funkciói az oldal céljának megfelelően vannak-e felépítve.
Információk
Hogyan van strukturálva és bemutatva az információ? Logikusan követik egymást a szövegrészek? Jól vannak csoportosítva? Megfelelő a hierarchikus felépítés? A fontos dolgok megfelelően ki vannak emelve? A tartalom felépítése világos, könnyen áttekinthető? Az oldal látogatói minden szükséges információt megkapnak?
Navigáció
Könnyen kezelhetők, elérhetők-e az egyes navigációs elemek? Minden oldal kapcsolódik a többihez? A tájékozódást segítő elemek megfelelőek-e? A weboldal minden részében egyértelműen látható, hová navigált, hol van éppen a látogató?
Látogatói aktivitást ösztönző elemek
Megfelelő helyen, megfelelő mennyiségben vannak elhelyezve látogatói aktivitást serkentő elemek?
Megjelenés arányai
Megfelelő-e a szöveg és a képek, fotók, videók aránya? Megfelelő a vizuális hierarchia? A fő vizuális elemek megfelelően vannak-e elhelyezve, megfelelő súllyal jelennek meg?
A finomítás folyamata
Az első drótváz lehet, hogy szinte alig tartalmaz személyre szabott elemet: a menüpontok helyén csak számozás van, a címek, szövegek helykitöltő mondatok. Idővel érdemes egyre jobban finomítani a tartalmakat, részleteket. A finomítás egyre nagyobb foka azt jelenti, az oldal egyre inkább hasonlít a végleges formájára.
A legelsőként készülő drótváz még csak zónákra vagy blokkokra osztja a teret, elhelyezi az elemeket, de semmilyen információt nem tartalmaz arról, hogyan néznek majd ki ezek.
Ehhez képest az erősen finomított drótvázak már egyedi betűtípust használnak, színeket, valós szövegeket, esetleg képeket is tartalmaznak.
Folyamatosan szükséges lehet újra megvizsgálni, az egyes oldalak vajon betöltik-e majd rendeltetésüket? Logikus-e a felépítés?
Miért és kinek hasznos a drótváz?
A drótváz elsősorban abban segít, hogy tisztán látható és vizsgálható legyen: a weboldal meg fog-e felelni céljainak, illetve megfelelő lesz-e a látogatói élmény. Segít, hogy már ebben a korai fázisban kiszűrhetőek legyenek a hibák: egy értelmetlen, céltalan szakaszt nem érdemes megvalósítani, és a nehezen használható menürendszeren is könnyen lehet még módosítani.
Emellett elősegíti a projekt áttekinthetőségét, a megvalósítás szervezettségét. Könnyen követhető az egyes funkciók megvalósítása, látható, melyik rész az, amivel még munka van.
Ügyfélként – ha még soha nem láttál ilyet – kezdetben biztosan nehéz lesz értelmezni, és ennek alapján elképzelni a kész munkát. Érdemes azonban időt szánni megismerésére, mivel nagyon sok fejlesztési időt lehet vele spórolni.
Hasznos folyamatosan szem előtt tartani, hogy a drótváznak nem célja a termék vagy szolgáltatás egyediségének bemutatása, vagy a leghatásosabb kép, szín, grafikai elem megtalálása. Cél inkább a fontosabb szakaszok kialakítása, illetve az iparágadnak megfelelő sztenderdek (elvárások) áttekintése, megvalósítása.
Mi történik az egyeztetés után?
A drótváz sosincs „kész”. A megvalósítás során biztosan módosulni fognak részletek, ahogyan a tartalom és a célok is finomodnak. Amikor eljön az a pont, hogy az oldaltérkép, a szövegek viszonylag véglegesek, érdemes elkezdeni a design tervezését. Ekkor érdemes mockupokat, azaz a valós megjelenítést bemutató, de nem működő „képeket” készíteni. Ezek a képek már meg tudják mutatni, hogyan mutatnak majd a részletek életszerű helyzetekben, és már biztosra veheted, hogy az oldalad nemcsak szép, hanem könnyen kezelhető is lesz!
Szeretnél látni egyet?
Nagyon hasznos megnézni néhány ismert oldal drótvázát, így könnyebb megérteni a saját, készülő weboldaladhoz tartozót is. Online elérhető eszköz erre a Wirify.
Az oldalra látogatva a Wirify by Volkside elemet kell a könyvjelzők közé húzni (Chrome böngészőben kicsit más az eljárás). Ezután egy tetszőleges weboldalt megnyitva, majd a könyvjelzőbe húzott elemre kattintva az oldal nézete átvált drótváz nézetre.
Miért ugranád át a készítését?
Ha ilyen fontos és előnyös az elkészítése, miért ugranád ezt át?
- mert ha weboldalt tervezel, a színek és a formák tervezgetése sokkal vonzóbb elfoglaltságnak tűnik. Ha új lakásról álmodozol, ott is a színek és a berendezés az, amiről terveket szősz, nem pedig a konnektorok elhelyezése. Viszont ezek a praktikus részletek adják az oldal „eszét” és működésének célját.
- mert kezdetben gyorsabbnak tűnik a munka. Ez igaz lehet! Viszont később a oldal elkészítésének ideje (és költsége) akár két-háromszoros is lehet, ha nem több. A későbbiekben egy-egy kisebb változtatást is sokkal nehezebb lesz kivitelezni, mint amekkora munka a drótváz módosítása lett volna.
- ügyfélként nehezen érthető a tartalma és a szerepe. Ez igaz, hiszen ahhoz is idő és energia kell, hogy ezzel megismerkedj és átlásd, mire jó és mit ne várj tőle. Ha ügyfélként a fejlesztő megmutatja ezeket, akkor a közös munka sokkal hatékonyabb lehet!
Ha úgy döntesz, velünk dolgozol az oldalad felépítésén, sokat beszélgetünk majd az oldalad felépítéséről és funkcióiról, és első körben a moodboard mellett egy drótvázat egyeztetünk majd.
* * * * * * * *
Legyen még szuperebb a weboldalad! Hasonló bejegyzéseket a Blogban találsz!