Tanuld meg, hogy egyszerű Wireframe-eket használsz a tervek elindításához
A web drótvázlat egy egyszerű vizuális útmutató, amely megmutatja, milyen lesz a weblap . Javasolja az oldal felépítését, grafika vagy szöveg használata nélkül. A weboldal drótvázlata megmutatná a teljes webhelystruktúrát - beleértve, hogy mely oldalak linkjei hol.
A web drótvázak kiváló módja a tervezési munkának. És miközben hatalmas részletekkel bonyolult drótvázakat lehet létrehozni, a tervezés egy szalvétával és egy tollal kezdődhet. A jó drótvázak készítésének kulcsa az, hogy elhagyja az összes vizuális elemet. Használjon dobozokat és vonalakat képek és szövegek ábrázolásához.
A weboldal wireframe-be történő felvétele:
- dobozok az elsődleges grafikus elemekhez
- főcímek és alfejek elhelyezése
- egy egyszerű elrendezési struktúra
- cselekvésre szólít fel
- szövegblokkok
Hogyan készítsünk egy egyszerű webes drótvázakat
Hozzon létre egy weboldal drótvázát bármilyen papírdarab felhasználásával. Így csinálom:
- Rajzolj egy nagy téglalapot - ez képviselheti az egész oldalt vagy csak a látható részt. Általában a látható részből indulok el, majd bontsam ki azokat a elemek közé, amelyek a hajtás alatt lennének.
- Vázolja le az elrendezést - 2 oszlop, 3 oszlop?
- Egy fejléc grafika mezőjének hozzáadása - Az oszlopok átrajzolása, ha azt szeretné, hogy az oszlopok felett egyetlen fejléc legyen, vagy csak add meg, ahol azt szeretné.
- Írj "Headline" -et, ahol a H1 címsorodat szeretnéd.
- Írja alá az "Al-Head" -t, ahol a H2-et és az alacsonyabb címsorokat szeretné látni. Segít, ha arányosak - h2 kisebb, mint h1, h3 kisebb, mint h2 stb.
- Vegye fel a dobozokat más képekhez
- Hozzáadás navigációhoz. Ha lapokat tervez, csak húzza be a dobozokat, és írja felül a "navigációt". Vagy helyezzen felsorolt listákat az oszlopokban, ahová a navigációt szeretné. Ne írja a tartalmat. Csak írjon "navigációt", vagy használjon egy vonalat a szöveg megjelenítéséhez.
- További elemek hozzáadása az oldalhoz - azonosítsd, hogy mit tartalmaznak a szöveggel, de ne használja az aktuális tartalomszöveget. Ha például a jobb alsó sarokban lévő cselekvésre ösztönzést szeretne, tegyen be egy dobozt, és jelölje azt "cselekvésre ösztönzés". Ne írjon "Vedd meg most!" abban a mezőben.
Miután megkapta az egyszerű drótvázát, és nem tehet több mint 15 percet a vázlat elkészítéséhez, mutasd meg valaki másnak. Kérdezze meg őket, hogy hiányzik-e valami, és egyéb visszajelzésekre. Szerintem azt mondhatod, hogy írhatsz egy másik drótvázkeretet, vagy megtarthatod azt, amelyik van.
Miért a papírkötegek a legjobbak az első tervezetekhez?
Bár lehetséges, hogy olyan programokat használjon, mint a Visio, a kezdeti brainstorming munkamenetekhez ragaszkodnia kell a papírhoz. A papír nem tűnik állandónak, és sokan azt feltételezik, hogy 5 perc alatt összetörte, ezért ne habozzon jó visszajelzést adni neked. De ha olyan programot használsz, amely tökéletes négyzetekkel és színekkel díszes drótvázakat hoz létre, fennáll annak a veszélye, hogy felzárkózódsz a programba és órákat töltesz, amelyek tökéletesítenek valamit, ami még soha nem fog menni.
A papír drótvázakat könnyű elvégezni. És ha nem tetszik, csak összezúzza a papírt, dobja újra az újrahasznosítást, és megragad egy új lemezt.