Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Mik azok a tervezési minták?

2013. október 07. | Tóth Zsuzsanna

# # #

A webdesignnak ez az a része, amiről sokan nem is sejtik, hogy létezik. De ahogyan egy házat sem csak úgy, a hasunkra csapva húzunk fel, a webes tervezésnek is vannak szabályai, és a cél érdekében sokkal mélyebben kell elgondolkodni, mint hogy milyen színű legyen.

A funkciók szolgálják ki a különböző célokat – ha képeket akarsz bemutatni, galériára, ha sok a cikked, kategorizálásra, lapozásra, kereshetőségre stb. lesz szükség. Amikor a felépítésen gondolkodunk, akkor egyből a megvalósítási lehetőségekkel is kell számolnunk. Itt kezdődik a tudatos tervezés.

Design Patterns

A Design Patterns elnevezés azt sugallhatja, ez egy design fogalom. Pedig nem az – a tervezési mintákat főleg a fejlesztői oldalon használnak az újra és újra előforduló funkciók létrehozásához pl. regisztráció.

Webdesign esetén is erről van szó, de működési módok helyett a megjelenítési módokról van szó – Webdesign Patterns vagy UI (User Interface) Patterns néven is találkozhatsz velük. A tervezési minták – továbbiakban design patterns – egy hatalmas legókészlet.

Van ajtó, ablak, cserép, kiskocka, nagykocka, virág – vagyis menük, gombok, űrlap elemek, navigációk stb.

Egy doboz legóból számtalan különböző házat fel lehet építeni, nem csak azt ami a rajzon van. Így van ez a webdesign tervezés elemeivel is – amelyek a legváltozatosabb módon ismétlődnek, attól függően milyen funkciókra van szüksége a weboldalnak. Ezek a funkciók/elemek azokba a dobozokba kerülnek, amelyeket a drótváz
megrajzolásával hozunk létre.

Drótváz
Példa:
Az ügyfelünk egy egyszerű kis bemutatkozó oldalt szeretne, néhány menüpont, egy
kapcsolat űrlap, és egy képgaléria.
Egyszerűnek tűnik igaz?

Na jó, de hogy néz ki egy menü? Különböző linkekből áll! Vagy gombokból? Vagy esetleg csak az a gomb, ami épp aktív? Van vízszintes, függőleges, sőt lenyíló, és legördülő. Tehát mégegyszer… Hogy néz ki egy menü?

Kapcsolat űrlap. Ez már könnyebb! Vagy mégsem? Milyen adatokat kell megadni?
Jobbra, vagy balra zárt legyen?

Képgaléria. Képek egymás mellett. De hogyan is néz ki egy képgaléria? És csak
nézegetni lehet, vagy hozzászólni, elküldeni, megosztani is? Lesznek kategóriák? És
azokat hogyan jelenítse meg?

Tehát egy ilyen látszólag egyszerűnek tűnő honlap esetén is számtalan működésbeli kérdés merül fel, amiket neked kell megválaszolni, illetve leegyeztetni a megrendelővel, és a kéréseinek ill. a logikának megfelelően betervezni az oldalra.

Összetett honlap, sok kérdés

Minél összetettebb a honlap, annál több ilyen kérdés vetődik majd fel!

Ezek eldöntése egyrészt az ügyfél kívánságain múlik. Ha ő nem szeretne lenyíló menüt, akkor bizony valami más, mégis praktikus megoldást kell kitalálni az almenük elhelyezésére. De lehet, hogy annyit mond: Mittudomén! Te értesz hozzá! De…

A személyes meggyőződéseken túl (amelyek indoka a CSAK) fő szempont a használhatóság, ésszerű, logikus felépítés, az egyes adatok, funkciók hierarchiája, és a kialakult szokások un. webes konvenciók.
A menüknél mindenki tudja, hogy mire számíthat – az oldalon belüli tartalmak navigációját szolgálja – a főoldalról eljuthatunk a Szolgáltatások menüpontra, és vissza.

Ilyen konvenció, hogy bárhol is vagyunk, a logóra kattintva a főoldalon kellene találnunk magunkat. Ha a kereső mezőbe beírunk valamit, akkor megkell nyomni egy gombot, és/vagy az Entert, és egy listázást kapunk eredményül, vagy egy üzenetet, hogy nincs találat.

Keresés
Ilyen konvenció, hogy a kereső az oldal felső részében középtájon, vagy jobb oldalt helyezkedik el – az évek alatt így alakult ki, ott keresik az emberek először, és nem a lap alján.
Kereső pedig kell. Méghozzá pontos! Tehát ha sok témakör, kategória van a honlapon, akkor a Mindenben keresés mellett egy Részletes keresés, vagy kiválasztható kategórián belüli keresés is dukál!

Ha egy gombformát látunk, akkor az alatt linket várunk. Ha aláhúzott szöveget, az alatt is.

Ezek talán triviálisnak tűnnek, mert persze hogy a menü az menü, a link az link – de a tervezés során ezeket a folyamatokat mind végig kell játszani, a teljes bejárható útvonalakra.

Mi történik akkor, ha a kitöltik az űrlapot? Új oldalra kerülnek – pl. Köszönjük… Esetleg visszakerül a főoldalra?
Hová jut az ember, ha kitöltötte a regisztrációs űrlapot? Saját profilra? Melyik adatok szerkeszthetőek a saját profilban? Tud majd képet is feltölteni?…………. ………………………………………………………………………………….

Ha nem tudod hogyan működik egy webáruházban a megrendelési folyamat, akkor nem is fogod tudni megtervezni. Ha nem használod a közösségi oldalakat, akkor nem tudod milyen funkciókat kell majd elhelyezni, és azok hogyan működnek! Ezért próbálj ki minél több szolgáltatást! Látsz egy csinos menüt, vagy egy ötletes megoldást? Nyomj egy printscreent, és mentsd el egy erre fenntartott mappába!

Amikor szükséged lesz arra, hogy vajon egy termék kategória listázásakor milyen módon tudod megjeleníteni a termékeket, már nem fogod tudni, vajon melyik oldal nyújthat támpontot!

Azt vallom, hogy a webdesign tervezés itt kezdődik, és nem a Photoshopban. Ha valaki jó tervező szeretne lenni, a folyamatot kell átlátnia, mi történik a látogatóval miközben használ egy oldalt, és segítenie olyan kényelmes és használható böngészési lehetőséget nyújtani, amilyet csak tud!

A teljes leckét – merthogy ez egy Prémium lecke a sok közül –  ami bevezet a tervezési minták és funkciók világában is elolvashatod itt – http://bit.ly/1eCxUDX

Iratkozz fel YouTube csatornákra!

blog

Virtuális asszisztens legyél vagy webdesigner?

Virtuális asszisztens legyél vagy webdesigner?

2024. február 01.

Mindkettő fantasztikus lehetőség arra, hogy elhagyd a hagyományos kereteket, mint szoros, rugalmatlan munkaidő, helyhez kötöttség vagy akár a bérplafon. Egy ponton találkozik is a két munkakör, ahol a grafikai munka már az asszisztenciába hajlik – designerként is végezhetsz weboldal adminisztrációt, közösségi média tartalom készítést vagy felügyeletet és virtuális asszisztensként is sokszor találkozni már-már tervezői munkába […]

Tovább a cikkre
Secured By miniOrange