Kako dizajnirati prototip web stranice iz žičanog okvira

Možda ste čuli staru izreku: "Dvaput izmjerite, jednom izrežite." E, to je upravo razlog zašto biste trebali planirati web mjesto prije nego što ga napravite. I tu dolazi prototipiranje.

Kada dizajniramo svoje web stranice, napredujemo od izrade žičanih okvira do izrade prototipa do - konačno - cjelovitog dizajna.

Htio sam istražiti i proširiti što prototipiranje zapravo znači provodeći vas kroz cijeli postupak.

Imajte na umu da sam kreirao još jedan tečaj koji pokriva prvi korak dizajniranja web stranice: izgradnju žičanog okvira. Ovdje možete pročitati o žičanim kadrovima i pogledati moj 30-minutni video tečaj.

U ovom uputstvu pokriti ćemo:

  1. Što je rani prototip
  2. Stvaranje strukture: okvir, retci, stupci
  3. Dodavanje sadržaja: zaglavlje, klizač, About
  4. Dizajniranje odjeljaka
  5. Zaključak: Ono što smo naučili iz postupka izrade prototipa

Što je rani prototip?

Prototip je obično sekundarna iteracija dizajna, jer je izgrađen na vrhu žičanog okvira.

Žičani okvir obično uključuje jednostavnu nacrtanu skicu putem papira, olovke ili mrežnog alata. Dalje gradimo prototip, koji je naša profinjenija maketa za web mjesto ili aplikaciju.

Pogledajmo rani žičani okvir koji smo izgradili u prethodnom članku:

Ima brojne stranice, odjeljke i područja na koja će se kasnije dodati tekst i slike.

Cilj je dakle prototipa izgraditi ga vizualno, ali bez dodavanja boje ili slika.

U ovom primjeru koristit ću Figmu za izradu Prototipa. Cijeli prototip Figme možete pogledati ovdje.

Kako stvoriti strukturu prototipa web stranice: okvir, retci, stupci

Kad smo stvarali žičani okvir, razmotrili smo rešetke - ali one su ručno nacrtane.

Kada radimo rani prototip, moramo ih pravilno definirati tako da cjelokupni dizajn prati strukturu mreže.

U ovom primjeru koristit ću dizajn s 12 stupaca pravilne širine 1140px, koji se tradicionalno koristi i vidi u dizajnu Bootstrapa. To nam daje maržu od 15-30 piksela između jedinica mreže.

To će biti korisno kasnije kad sažmemo stupce u retke za mobilni odgovor.

U Figmi možete stvoriti vlastitu strukturu mreže. Ali imajte na umu da ćete vi (ili netko drugi) kasnije morati stvarno kodirati ove dizajne.

Kad god nešto dizajnirate, uzmite u obzir programera.

Kako dodati sadržaj prototipu web stranice: zaglavlje, klizač, odjeljci

Za razliku od Wireframe-a, mi više ne predstavljamo tekst crtama, a zaglavlja blokovima. Umjesto toga, moramo ispuniti sadržaj za maketu.

To ne znači dodavanje boja ili slika. Ali to znači da moramo pokazati stvarni tekst.

U ovoj je fazi dobra ideja osigurati da se zaglavlje i odjeljci prikazuju sa stvarnim sadržajem koji će biti namijenjeni. To će omogućiti bolji odabir boja i slika u kasnijim fazama dizajna.

U ovom dijelu primjera izradio sam klizač s junačkim tekstom i opisom ispod. U ovoj fazi postupka prototipa treba paziti na nekoliko stvari:

  • Veličina i pozicioniranje fonta
  • Mjesto i razmak sadržaja
  • Margine i dodaci između odjeljaka i sadržaja

Kako dizajnirati odjeljke prototipa web stranice

Za izradu prototipova i konačni model, važno je započeti slojevito postavljanje grupa i odjeljaka. Odjeljci mogu uključivati ​​stvari poput zaglavlja, odjeljka "o nama" i odjeljka sponzora.

Možete stvoriti grupe u svom alatu za korisničko sučelje (Figma to čini pomoću Ctrl + G). Označite svoje odjeljke i postavite ih različitim bojama pozadine. To će ih lako identificirati i omogućit će vam lako kretanje.

Previše puta od mene se traži da pomaknem određene dijelove web stranice prema gore i dolje po grupiranju. Grupirajući sve svoje komponente u odjeljke, znatno ćete si olakšati tijekom faze prototipa projektnog rada.

Zaključak: Što smo naučili iz postupka izrade prototipa

Kako izrađujemo ostatak dizajna, važno je osigurati da ovaj rani prototip ne postane cjelovita maketa dizajna web stranice.

Lako se zanijeti. Ali cilj izrade prototipa nakon žičanog okvira je osigurati da možemo nastaviti planirati razvoj web stranice.

Puno je lakše prepoznati probleme i probleme u ranim fazama planiranja i ažurirati ih prije nego što krenete u izradu cjelovitog dizajna. Takvo izrađivanje prototipa možda će vam trebati samo nekoliko sati, ali kasnije u procesu može uštedjeti danima vrijedan trud.

Nakon što ste prototipizirali više stranica, možete prijeći na punu fazu dizajna makete. To će uključivati ​​utvrđivanje teorije boja, tipografije i slika koje rade u skladu s tim. To ćemo pogledati u sljedećem članku ove serije sljedećeg mjeseca.

Bonus: Dodavanje interaktivnog izvođenja prototipa

Izradili smo samo jednu stranicu za ovaj primjer. S tim u vezi, izrada prototipa također vam omogućuje stvaranje emuliranog primjera rada web mjesta.

Ova je emulacija vrlo korisna za provođenje demonstracija, testiranje kako klijenti reagiraju na gledanje stvarnog primjera ranog maketa i revidiranje kako sve vaše veze teku.

Nadam se da vam se svidio ovaj članak. Ako ne znate tko sam, ja sam Adrian iz Australije. ? Imam mali kanal na Twitteru i YouTubeu, pa ako želite znati više o meni ili uživati ​​u mom sadržaju, posjetite me kad-tad?

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