Kuidas kujundada veebisaidi prototüüpi traatvõrgust

Võib-olla olete kuulnud vana ütlust: "Mõõtke kaks korda, lõigake üks kord." Just sellepärast peaksite enne selle ehitamist veebisaidi välja töötama. Ja seal tuleb prototüüpimine.

Veebisaitide kujundamisel läheme edasi traadiraamistamisest prototüüpide loomiseni - lõpuks - täieliku kujunduseni.

Tahtsin uurida ja laiendada, mida Prototüüpimine tegelikult tähendab, viies teid läbi kogu protsessi.

Pange tähele, et lõin veel ühe kursuse, mis hõlmab veebisaidi kujundamise esimest sammu: traadiraami ehitamist. Traatrammi kohta saate lugeda ja minu 30-minutilist videokursust vaadata siit.

Selles õpetuses käsitleme järgmist:

  1. Mis on varajane prototüüp
  2. Struktuuri loomine: raam, read, veerud
  3. Sisu lisamine: päis, liugur, teave
  4. Sektsioonide kujundamine
  5. Järeldus: mida oleme prototüüpimisprotsessist õppinud

Mis on varajane prototüüp?

Prototüüp on tavaliselt disaini sekundaarne iteratsioon, kuna see on ehitatud traatraami kohale.

Traatraam hõlmab tavaliselt paberi, pliiatsi või veebitööriista abil lihtsat joonistatud visandit. Järgmisena ehitame prototüübi, mis on meie veebisaidi või rakenduse täpsem makett.

Heidame pilgu varasele traadiraamile, mille lõime eelmises artiklis:

Sellel on palju lehti, jaotisi ja alasid, kuhu hiljem teksti ja pilte lisatakse.

Prototüübi eesmärk on ehitada see visuaalselt, kuid ilma värve ega pilte lisamata.

Selles näites kasutan Prototüübi tegemiseks Figmat. Kogu Figma protüüpi saate vaadata siit.

Kuidas luua veebisaidi prototüübi struktuur: raam, read, veerud

Traadiraami loomisel kaalusime võreid, kuid need olid käsitsi joonistatud.

Varajase prototüübi tegemisel peame need õigesti määratlema, nii et kogu kujundus järgiks võrgu struktuuri.

Selles näites kasutan 12-veerulist kujundust korrapärase laiusega 1140 pikslit, mida traditsiooniliselt kasutatakse ja nähakse Bootstrapi kujundustes. See annab meile võrguüksuste vahel 15-30px varu.

See on kasulik hiljem, kui koondame veerud ridadeks mobiilsuse reageerimiseks.

Figmas saate luua oma võrgustruktuuri. Kuid pidage meeles, et teil (või kellelgi teisel) tuleb hiljem need kujundused tegelikult kodeerida.

Kui kavandate midagi, arvestage kindlasti arendajaga.

Sisu lisamine veebisaidi prototüübile: päis, liugur, jaotised

Erinevalt traatvõrgust ei esinda me enam teksti joontega ja päiseid plokkidega. Selle asemel peame täitma maketi sisu.

See ei tähenda värvide ega piltide lisamist. Kuid see tähendab, et peame näitama tõelist teksti.

Selles etapis on hea mõte veenduda, et päis ja jaotised kuvatakse tegeliku sisuga, mida nad kavatsevad hoida. See võimaldab värve ja pilte paremini valida disaini hilisemates etappides.

Näite selles osas ehitasin välja liuguri kangelasteksti ja selle all oleva kirjeldusega. Prototüübi protsessi selles etapis tuleb tähelepanu pöörata mõnele asjale:

  • Fondi suurus ja positsioneerimine
  • Sisu asukoht ja vahekaugus
  • Veerised ja polsterdused jaotiste ja sisu vahel

Kuidas kujundada veebisaidi prototüübi jaotisi

Prototüüpide ja lõpliku maketi jaoks on oluline alustada oma rühmade ja sektsioonide kihistamist. Jaotised võivad sisaldada näiteks päist, jaotist „meie kohta” ja sponsorite jaotist.

Rühmi saate luua oma kasutajaliidese tööriistas (Figma teeb seda klahvikombinatsiooniga Ctrl + G). Sildistage jaotised ja määrake need erineva taustavärviga. See muudab nende tuvastamise lihtsaks ja võimaldab teil neid hõlpsalt liigutada.

Liiga mitu korda on mul palutud teatud veebisaidi osi grupeerimisel üles ja alla liigutada. Rühmitades kõik komponendid osadeks, muudate selle disainitöö prototüübi etapis enda jaoks palju lihtsamaks.

Järeldus: mida oleme õppinud prototüüpimisprotsessist

Ülejäänud kujunduse väljatöötamisel on oluline tagada, et see varajane prototüüp ei muutuks veebisaidi kujunduse täielikuks maketiks.

Seda on lihtne kaasa haarata. Kuid juhtmeta järgse prototüübi tegemise eesmärk on tagada veebisaidi arengu kavandamise jätkamine.

Palju lihtsam on probleemid ja probleemid varakult kavandamise etapis tuvastada ja neid enne täieliku kujunduse loomisele sukeldumist värskendada. Selline prototüüpimine võib võtta vaid paar tundi, kuid see võib säästa hilisemaid pingutusi päeva jooksul.

Kui olete mitme lehe prototüübi teinud, saate minna kogu maketi kujundamise etappi. See hõlmab värviteooria, tüpograafia ja vastavalt töötavate piltide väljamõtlemist. Vaatame seda järgmisel kuul selle sarja järgmises artiklis.

Boonus: interaktiivse prototüübi jooksu lisamine

Selle näite jaoks lõime ainult ühe lehe. See tähendab, et prototüüpimine võimaldab teil luua ka saidi toimimise jäljendatud näite.

See emulatsioon on väga kasulik demode läbiviimiseks, testimiseks, kuidas kliendid reageerivad varase maketi reaalses maailmas näite nägemisele, ja kõigi teie linkide voogude ülevaatamiseks.

Loodan, et teile meeldis see artikkel. Kui te ei tea, kes ma olen, olen Adrian Austraaliast. ? Mul on Twitteris ja YouTube'is väike kanal, nii et kui soovite minu kohta rohkem teada saada või minu sisu nautida, siis vaadake mind millalgi?

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