Hogyan lehet megtervezni egy webhely prototípusát drótvázból

Lehet, hogy hallotta a régi mondást: "Kétszer mérjen, egyszer vágjon". Nos, pontosan ezért kell megterveznie egy weboldalt, mielőtt felépítené. És itt jön létre a prototípus.

Webhelyeink megtervezésekor haladunk a drótvázasítástól a prototípus készítésen át a teljes tervezésig.

Meg akartam vizsgálni és kibővíteni, hogy mit is jelent a prototípus, azáltal, hogy végigvezetem a teljes folyamaton.

Ne feledje, hogy létrehoztam egy másik tanfolyamot, amely a weboldal tervezésének első lépését tartalmazza: drótváz felépítését. Itt olvashat a drótvázolásról és megnézheti a 30 perces videotanfolyamomat.

Ebben az oktatóanyagban a következőkre térünk ki:

  1. Mi a korai prototípus
  2. Struktúra létrehozása: Keret, Sorok, Oszlopok
  3. Tartalom hozzáadása: Fejléc, Csúszka, Névjegy
  4. Szakaszok tervezése
  5. Következtetés: Amit a prototípus-készítés során megtudtunk

Mi az a korai prototípus?

A prototípus általában a terv másodlagos iterációja, mivel drótváz tetejére épül.

A drótváz általában egyszerű, rajzolt vázlatot foglal magában papíron, tollal vagy online eszközön keresztül. Ezután elkészítjük a prototípust, amely a weboldal vagy az alkalmazás rafináltabb modellje.

Vessünk egy pillantást az előző cikkben felépített korai drótvázra:

Számos oldala, szakasza és területe van, ahová a szöveget és képeket később hozzáadják.

A cél tehát a Prototípusban ennek vizuális felépítése, de szín vagy képek hozzáadása nélkül.

Ebben a példában a Figma segítségével fogom elkészíteni a prototípust. Itt megtekintheti a teljes Figma prototípust.

Hogyan készítsünk egy webhely prototípus struktúrát: Keret, Sorok, Oszlopok

A drótváz létrehozásakor figyelembe vettük a rácsokat - de kézzel rajzoltak.

Korai prototípus készítésekor meg kell határoznunk őket megfelelően, hogy az egész kialakítás kövesse a rácsszerkezetet.

Ebben a példában egy 12 oszlopos kivitelt fogok használni, amelynek szabályos szélessége 1140 képpont, amelyet hagyományosan a Bootstrap tervekben használnak és látnak. Ez 15-30 képpontos margót ad a rácsegységek között.

Ez később hasznos lesz, amikor összecsukjuk az oszlopokat sorokba a mobil válaszkészség érdekében.

Saját rácsszerkezetet hozhat létre a Figmában. De ne feledje, hogy később Önnek (vagy másnak) valóban kódolnia kell ezeket a terveket.

Amikor valamit tervez, mindenképpen vegye figyelembe a fejlesztőt.

Tartalom hozzáadása egy webhely prototípusához: Fejléc, Csúszka, Szakaszok

A drótvázzal ellentétben a szöveget már nem ábrázoljuk vonalakkal, a fejléceket pedig blokkokkal. Ehelyett ki kell töltenünk egy tartalmat egy maketthez.

Ez nem azt jelenti, hogy színeket vagy képeket adunk hozzá. De ez azt jelenti, hogy valódi szöveget kell mutatnunk.

Ebben a szakaszban nagyszerű ötlet megbizonyosodni arról, hogy a fejléc és a szakaszok a tényleges tartalommal jelennek meg. Ez lehetővé teszi a színek és képek jobb kiválasztását a tervezés későbbi szakaszaiban.

A példa ezen részében kiépítettem a csúszkát hősszöveggel és alatta egy leírással. A prototípus folyamatának ebben a szakaszában néhány dologra kell figyelni:

  • Betűméret és pozícionálás
  • A tartalom helye és térköze
  • Szélek és betétek a szakaszok és a tartalom között

Hogyan tervezzük meg a weboldal prototípusának szakaszait

A prototípus készítéshez és a végső maketthez fontos, hogy elkezdje rétegezni a csoportokat és szakaszokat. A szakaszok tartalmazhatnak olyanokat, mint a fejléc, a "rólunk" és a szponzorok.

Csoportokat hozhat létre az UI eszközben (a Figma ezt a Ctrl + G billentyűkombinációval teszi meg). Címkézze fel a szakaszokat, és állítsa be őket különböző háttérszínnel. Ez megkönnyíti az azonosításukat, és könnyedén mozgathatja őket.

Túl sokszor kértek felém egy webhely bizonyos részeinek fel- és lefelé mozgatására a csoportosításban. Ha az összes alkatrészt szekciókba csoportosítja, akkor a tervezés prototípus fázisában sokkal könnyebbé teszi majd ezt.

Következtetés: Mit tanultunk a prototípus-készítés folyamatából

A tervezés többi részének kialakításakor fontos biztosítani, hogy ez a korai prototípus ne váljon a weboldal tervezésének teljes modelljévé.

Könnyű elragadni. A drótváz utáni prototípus elkészítésének célja azonban annak biztosítása, hogy továbbra is meg tudjuk tervezni a weboldal fejlesztését.

Sokkal könnyebb felismerni a problémákat és problémákat a tervezés korai szakaszában, és frissíteni őket, mielőtt belevágna a teljes terv elkészítésébe. Az ilyen prototípusok készítése csak néhány órát vehet igénybe, de napokig tartó erőfeszítéseket takaríthat meg a folyamat későbbi szakaszában.

Miután több oldalt prototípust készített, folytathatja a makett tervezésének teljes szakaszát. Ez magában foglalja a színelmélet, a tipográfia és az ennek megfelelően működő képek kitalálását. Ezt megnézzük a sorozat következő cikkében a következő hónapban.

Bónusz: Interaktív prototípus futtatás hozzáadása

Ehhez a példához csak egyetlen oldalt hoztunk létre. Ez azt jelenti, hogy a prototípus-készítés emulált példa létrehozását is lehetővé teszi a webhely működésére.

Ez az emuláció nagyon hasznos bemutatók lebonyolításához, annak teszteléséhez, hogy az ügyfelek hogyan reagálnak a korai modell valós példájára, és áttekinthetik az összes link áramlását.

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