Mi az a drótváz? Ez az UX Design bemutató megmutatja.

A weboldal tervezésének első lépése: drótváz.

A jó drótváz elképzelést adhat a weboldal teljes elrendezéséről és funkcionalitásáról. A tervezés első szakaszaként is szolgálhat.

A drótvázak képet adnak az oldal struktúrájának átfogó alakjáról és a navigáció folyamatáról.

Ha egy webhely felépítését fontolgatja, akkor drótvázat készíthet gyorsan és egyszerűen. Ehhez nem is kell grafikusnak lenni.

A kezdéshez csak ceruzára és néhány papírra van szükség. (Vagy ha szeretnél kedvet kapni, akkor egy iPadet és iPencilt, amilyet a fenti videó bemutatómban használok.)

Drótvázat fogunk létrehozni, és megmutatjuk, hogy ez hogyan teszi lehetővé a gyors, iteratív tervezési folyamatot. Ez létrehoz egy élő dokumentumot, amelyet felhasználhat magának és az ügyfélnek. És ezt felhasználhatja okfejtésre a tervezés során - mindezt mielőtt bármikor befektetne a tényleges kódolásba.

Íme néhány lépés, amelyet ebben a cikkben (és a mellékelt oktatóvideóban) ismertetünk:

  1. Webhelytérkép tervezés
  2. Honlap drótváz létrehozása
  3. Jelölés használata drótvázakban
  4. Drótváz-alkatrészek (fejléc, menü, lábléc)
  5. A Funkciók oldal és a Kapcsolat oldal drótvázolása
  6. Mobil érzékeny drótvázak

1. lépés: Webhelytérkép-tervezés

A drótkeret használatának megkezdése egy jó webhelytérképpel kezdődik. Az oldal drótváz létrehozása előtt egy webhelytérkép ad némi felépítést. Így meg fogja érteni, hogy mely oldalakat fogja felépíteni, és hogyan kapcsolódnak majd egymáshoz.

Előfordulhat, hogy a legtöbb kis webhelynek nincs szüksége webhelytérképre. Általában csak egyetlen céloldaluk van, vagy néhány közös oldaluk, például a Jellemzők, a Névjegy és a Kapcsolatfelvétel oldal.

Ez azt jelenti, hogy amint a webhely vagy alkalmazás nagyobb és összetettebb lesz, szüksége lesz egy webhelytérképre.

A webhelytérképek rövid áttekintést nyújtanak az elemek létezéséről és összekapcsolásáról.

Példánkban létrehozunk egy egyszerű webhelytérképet, amely csak a Kezdőlapot, a Funkciók oldalt és a Kapcsolat oldalt tartalmazza.

Erre nem kell túl sok időt tölteni. Csak adjon hozzá néhány négyzetet minden oldal megjelenítéséhez, alatta pedig az aloldalak megjelenítéséhez, és ennyi.

2. lépés: Honlap drótváz létrehozása

Elkészítjük az első drótvázas oldalunkat. Ha még nem drótozott, akkor a folyamat meglehetősen egyszerű. A weboldal minden aspektusát alakkal vagy egyszerű grafikával ábrázolják, például:

  • dobozok, amelyeken átlós vonalak találhatók a képek ábrázolására
  • vízszintes vonalak a szöveg bekezdéseinek ábrázolására
  • és egy kört, benne L betűvel, amely a logódat ábrázolja.

A kezdőlap számára elkészítünk egy csúszó képet, menüt és logót. Néhány címkét is adunk neki, hogy megmutassa, mi minden elem.

Ez akkor is hasznos, ha az egyes szakaszokat téglalapokká rendezi, amelyeket később más oldalakra másolhatunk (különös tekintettel a fejlécre és a láblécre).

Hozzon létre egy másik részt a vállalat bemutatásához (Rólunk) és egy szponzor részt (a szponzorok logóival és képeivel).

Ahogy haladunk a tervezés során, más elemeket is bevezethetünk a kezdőlapra, például a cselekvésre ösztönző gombokat a megfelelő területeken.

A tervezést egy Lábléc részleggel fejezzük be, ahol általános elemeket adunk hozzá, például egy Kapcsolatfelvételi űrlapot, Kapcsolattartási információkat, és még egyszer felhasználjuk a logót.

3. lépés: A jelölés használata drótvázakban

A drótvázat gyakran nemcsak a tervezők, hanem a fejlesztők, az ügyfelek és a menedzsment is megtekintik. Ezért hasznos a tartalom minden részéhez hozzáadni némi jelölést. Ez segíthet az embereknek, akik először nézik meg a drótvázat. Általában ezt egy oldal kitöltése végén csinálom.

Példánkban jelöljük meg a kezdőlapot, és címkézzük a tartalom minden részét piros szöveggel.

A jelölni kívánt aspektusok olyan elemeket tartalmaznak, mint a szakaszok, címek, kapcsolatfelvételi űrlapok, és hogy milyen képek lehetnek.

Ne feledje, hogy a Jelölésnek nem kell szó szerint megmagyaráznia, mi lesz a tartalom végül - csak azt, amit képvisel. Tehát ahelyett, hogy a tényleges "Bevezetési cím példája" beírna, a címet "Bevezető címként" jelölheti meg.

4. lépés: Adjon hozzá más drótváz-összetevőket, például fejlécet, menüt és láblécet

Most, hogy már létrehoztunk egy fejlécet és láblécet, újra felhasználhatjuk további oldalakra. Ha digitálisan dolgozik, fejléceket, lábléceket és egyéb visszatérő elemeket másolhat be új oldalas drótvázakba. (És ha csak papírt és tollat ​​használ, akkor borotvát és fénymásolót is használhat ugyanazon hatás eléréséhez.)

Ez lehetővé teszi, hogy a drótváz kialakítása következetes maradjon. Az olyan eszközök, mint a Figma, lehetővé teszik olyan eszközkomponensek létrehozását, amelyeket másolni és beilleszteni is lehet a tervbe. Akár úgy is beállíthatja őket, hogy dinamikusan frissítsék a drótváz más részeit, amikor megváltoztatja a gyökérösszetevőt.

Példánkban újból felhasználjuk az összetevőket egy funkciók oldalának felépítéséhez. Az első funkciós részkomponens létrehozásával ezután többször átmásolhatjuk és beilleszthetjük az alábbiakban, hogy néhány perc alatt elkészítsük a teljes funkciós oldalunkat.

5. lépés: Jellemzők és Kapcsolattartó oldal

Könnyebbé és könnyebbé válik további oldalak kiépítése, ha elkezdte a drótvázasítást és egyes összetevőket. A funkciók oldal elkészültével létrehozhatunk egy Kapcsolatfelvétel oldalt. Csak annyit kell tennünk, hogy hozzáadunk néhány általános elemet, például egy Google Map-ot, a Kapcsolatfelvétel űrlapot, és néhány alapvető elérhetőséget, például egy telefonszámot és e-mail címet.

Ebben a példában kicsi logóim vannak a telefonhoz és az e-mailhez, és nagy tömbökkel jelölöm, hogy hol helyezkednek el az oldalon.

A kapcsolatfelvételi űrlap alul található (doboz vázlat nélkül), valamint a Google térkép a jobb oldalon.

6. lépés: Készítsen mobilra érzékeny drótvázat

Nincs jó drótváz manapság mobil verzió nélkül. Ennek oka, hogy a web nagy részét ma mobil eszközökön tekintik meg.

Jó tudni, hogy egy design hogyan eshet össze kisebb nézetablakokká. Ha több ideje van a kezére, elkészítheti az érzékeny drótváz tablet verzióját is.

Példánkban szakaszonként építjük fel a kezdőlap tervezésének drótvázát. A legtöbb sor és oszlop összeomlott. És mivel mobil nézetablakon vagyunk, sok kép, szöveg és blokk mérete csökken.

Emiatt lehetséges, hogy egyes szakaszok továbbra is ugyanolyan magasságúak, mint a megfelelő asztali verziók. Másrészt néhány sok képpel rendelkező rész (például a szponzorok rész) sokkal nagyobb görgetési magassággal bírhat.

Emiatt gyakran további jelöléseket is felveszek, hogy megmutassam, melyik asztali verzió szakaszok felelnek meg a mobil verzió válaszadó megfelelőinek.

Következtetés

A drótkeretezés egy gyors módja annak, hogy vizuálisan jobb képet kapjon webhelyéről vagy alkalmazásáról. Azt javaslom, próbálja ki a következő projektjéhez, hogy segítsen megtervezni a működését és megjelenését.

A drótvázolás ideális megközelítés ehhez, mivel sokkal kevesebb időbe telik, mint ha egy tervező egy teljes felhasználói felület prototípust készítene.

Fejlesztőként évek óta drótvázakat építettem a webhelyeimhez. Szinte soha nem fejlesztek ki egy weboldalt anélkül, hogy felvázolnám legalább néhány elképzelésemet arról, hogyan fog kinézni vizuálisan.

Boldog drótváz.

Remélem tetszett ez a cikk. Ha nem tudod, ki vagyok, Adrian vagyok Ausztráliából? Van egy aprócska csatornám a Twitteren és a YouTube-on, így ha többet szeretne megtudni rólam vagy élvezni a tartalmaimat, nézzen meg valamikor?

  • Youtube: //youtube.com/adriantwarog
  • Twitter: //twitter.com/adrian_twarog