Kā noformēt vietnes prototipu no vadu rāmja

Jūs, iespējams, esat dzirdējuši veco teicienu: "Divreiz mēra, vienu reizi sagriež". Nu tieši tāpēc jums jāplāno vietne, pirms to izveidojat. Un tur rodas prototipu veidošana.

Veidojot savas vietnes, mēs virzāmies no stiepļu veidošanas līdz prototipu veidošanai un beidzot ar pilnīgu dizainu.

Es gribēju izpētīt un izvērst plašāku informāciju par to, ko patiesībā nozīmē prototipēšana, pārvedot jūs cauri visam procesam.

Ņemiet vērā, ka es izveidoju vēl vienu kursu, kas aptver pirmo vietnes izstrādes posmu: stieples rāmja izveidi. Jūs varat izlasīt par stieplēm un noskatīties manu 30 minūšu video kursu šeit.

Šajā apmācībā mēs aplūkosim:

  1. Kas ir agrīnais prototips
  2. Struktūras izveide: rāmis, rindas, kolonnas
  3. Satura pievienošana: Header, Slider, About
  4. Sadaļu projektēšana
  5. Secinājums: ko mēs esam iemācījušies no prototipu veidošanas procesa

Kas ir agrīnais prototips?

Prototips parasti ir dizaina sekundārais atkārtojums, jo tas ir uzbūvēts virs drāmja.

Karkass parasti ietver vienkāršu uzzīmētu skici, izmantojot papīru, pildspalvu vai tiešsaistes rīku. Tālāk mēs izveidojam prototipu, kas ir mūsu izsmalcinātākais vietnes vai lietotnes makets.

Apskatīsim agrāko stiepļu rāmi, kuru mēs izveidojām iepriekšējā rakstā:

Tajā ir vairākas lappuses, sadaļas un apgabali, kur vēlāk tiks pievienots teksts un attēli.

Prototipa mērķis ir veidot to vizuāli, bet nepievienojot krāsas vai attēlus.

Šajā piemērā es izmantošu Figma, lai veiktu prototipu. Šeit varat apskatīt visu Figma protipu.

Kā izveidot vietnes prototipa struktūru: rāmis, rindas, kolonnas

Kad mēs izveidojām stiepļu rāmi, mēs apsvērām režģus - bet tie tika zīmēti ar roku.

Veicot agrīnu prototipu, mums tie ir pareizi jādefinē, lai viss dizains atbilstu režģa struktūrai.

Šajā piemērā es izmantošu 12 kolonnu dizainu ar parasto platumu 1140 pikseļi, kas tradicionāli tiek izmantots un redzams Bootstrap dizainos. Tas dod mums 15-30 pikseļu starpību starp režģa vienībām.

Tas būs noderīgi vēlāk, kad mēs sakļausim slejas līdz rindām, lai nodrošinātu ātru atsaucību mobilajām ierīcēm.

Jūs varat izveidot savu režģa struktūru Figma. Bet ņemiet vērā, ka jums (vai kādam citam) vēlāk būs faktiski jākodē šie dizainparaugi.

Ikreiz, kad jūs kaut ko projektējat, noteikti ņemiet vērā izstrādātāju.

Satura pievienošana vietnes prototipam: galvene, slīdnis, sadaļas

Atšķirībā no Wireframe, mēs vairs nepārstāvam tekstu ar līnijām un galvenes ar blokiem. Tā vietā mums jāaizpilda maketa saturs.

Tas nenozīmē krāsu vai attēlu pievienošanu. Bet tas nozīmē, ka mums ir jāparāda īsts teksts.

Šajā posmā ir lieliska ideja pārliecināties, ka galvene un sadaļas tiek parādītas ar faktisko saturu, kuru tās paredzēts glabāt. Tas ļaus labāk izvēlēties krāsas un attēlus vēlākos dizaina posmos.

Šajā piemēra daļā es izveidoju slīdni ar varoņa tekstu un aprakstu zem tā. Šajā prototipa procesa posmā ir jāpievērš uzmanība dažām lietām:

  • Fonta lielums un pozicionēšana
  • Satura atrašanās vieta un atstarpes
  • Maržas un polsterējums starp sadaļām un saturu

Kā noformēt vietnes prototipa sadaļas

Lai izveidotu prototipus un galīgo maketu, ir svarīgi sākt kārtot savas grupas un sadaļas. Sadaļās var ietvert tādas lietas kā galvene, sadaļa “Par mums” un sponsoru sadaļa.

Savā lietotāja saskarnes rīkā varat izveidot grupas (Figma to dara, izmantojot Ctrl + G). Iezīmējiet sadaļas un iestatiet tās ar dažādām fona krāsām. Tas atvieglos viņu identificēšanu un ļaus tos ērti pārvietot.

Pārāk daudzas reizes man ir lūgts pārvietot noteiktas vietnes daļas uz augšu un uz leju grupā. Sagrupējot visus komponentus sadaļās, jūs to daudz atvieglosiet projektēšanas prototipa posmā.

Secinājums: ko mēs esam iemācījušies no prototipu veidošanas procesa

Izstrādājot pārējo dizainu, ir svarīgi nodrošināt, lai šis agrīnais prototips nekļūtu par pilnu vietnes dizaina maketu.

To ir viegli aizraut. Bet prototipa izgatavošanas mērķis pēc stieples rāmja ir nodrošināt, ka mēs varam turpināt plānot vietnes attīstību.

Ir daudz vieglāk identificēt problēmas un problēmas sākotnējās plānošanas stadijās un atjaunināt tās pirms ienirt pilnīga dizaina izveidē. Šāda prototipa veidošana var aizņemt tikai dažas stundas, bet tas var ietaupīt dienu vērts pūles vēlāk procesā.

Kad esat izveidojis vairāku lapu prototipus, varat pāriet uz pilnu maketa noformēšanas fāzi. Tas ietvers krāsu teorijas, tipogrāfijas un atbilstoši darbojošos attēlu izdomāšanu. Mēs to aplūkosim nākamajā sērijas nākamajā rakstā nākamajā mēnesī.

Bonuss: Interaktīvā prototipa palaišanas pievienošana

Šim piemēram mēs izveidojām tikai vienu lapu. Tas nozīmē, ka prototipēšana arī ļauj jums izveidot līdzīgu vietnes darbības piemēru.

Šis atdarinājums ir ļoti noderīgs, lai veiktu demonstrācijas, pārbaudītu, kā klienti reaģē, redzot agrīnā modeļa piemēru reālajā pasaulē, un pārskatītu visu jūsu saišu plūsmu.

Es ceru, ka jums patika šis raksts. Ja jūs nezināt, kas es esmu, es esmu Adrians no Austrālijas. ? Man Twitter un YouTube ir neliels kanāls, tāpēc, ja vēlaties uzzināt vairāk par mani vai izbaudīt manu saturu, pārbaudiet mani kādreiz?

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