Poate ați auzit vechea zicală: „Măsurați de două ori, tăiați o dată”. Ei bine, tocmai de aceea ar trebui să planificați un site web înainte de al construi. Și acolo intervine prototiparea.

Când proiectăm site-urile noastre web, trecem de la wireframing la prototipare până la – în cele din urmă – un design complet.

Am vrut să explorez și să mă extind asupra a ceea ce înseamnă de fapt Prototiparea, ducându-te prin procesul complet.

Poti urmăriți-mi cursul complet despre proiectarea interfeței și crearea unui prototip timpuriu pe YouTube sau aici, în acest videoclip încorporat (vizionare de 36 de minute)

Rețineți că am creat un alt curs care acoperă primul pas al proiectării unui site web: construirea unui wireframe. Puteți citi despre wireframing și puteți urmări cursul meu video de 30 de minute aici.

În acest tutorial, vom acoperi:

  1. Ce este un prototip timpuriu
  2. Crearea unei structuri: cadru, rânduri, coloane
  3. Adăugarea de conținut: antet, glisor, Despre
  4. Proiectarea secțiunilor
  5. Concluzie: Ce am învățat din procesul de prototipare

Ce este un prototip timpuriu?

Un prototip este în mod normal iterația secundară a unui design, deoarece este construit deasupra unui cadru de sârmă.

Un wireframe implică de obicei o schiță simplă desenată prin hârtie, stilou sau instrument online. Apoi construim prototipul, care este macheta noastră mai rafinată pentru site-ul web sau aplicație.

Să aruncăm o privire asupra vechiului wireframe pe care l-am construit în articolul anterior:

Cum sa proiectezi un prototip de site web dintr un Wireframe.svg
Wireframe-ul pe care l-am creat în cursul meu anterior de wireframing.

Are un număr de pagini, secțiuni și zone în care textul și imaginile vor fi adăugate ulterior.

Scopul, prin urmare, în prototip este de a construi acest lucru vizual, dar fără a adăuga culoare sau imagini.

În acest exemplu, voi folosi Figma să fac Prototipul. Poti vizualizați întregul prototip Figma aici.

Cum să creați o structură de prototip de site: cadru, rânduri, coloane

Cum sa proiectezi un prototip de site web dintr un Wireframe

Când am creat wireframe-ul, am luat în considerare grilele – dar acestea au fost desenate manual.

Când facem un prototip timpuriu, trebuie să le definim în mod corespunzător, astfel încât întregul design să urmeze structura grilei.

În acest exemplu, voi folosi un design cu 12 coloane cu o lățime regulată de 1140 px, care este utilizat în mod tradițional și văzut în desenele Bootstrap. Acest lucru ne oferă o marjă de 15-30 px între unitățile de rețea.

Acest lucru va fi util mai târziu atunci când restrângem coloanele pe rânduri pentru o mai bună reacție mobilă.

Puteți crea propria structură a grilei în Figma. Dar rețineți că mai târziu va trebui să codificați aceste modele (sau altcineva).

Ori de câte ori proiectați ceva, asigurați-vă că luați în considerare dezvoltatorul.

Cum să adăugați conținut la un prototip de site: antet, glisor, secțiuni

1611627606 152 Cum sa proiectezi un prototip de site web dintr un Wireframe

Spre deosebire de Wireframe, nu mai reprezentăm text cu linii și anteturi cu blocuri. În schimb, trebuie să completăm conținutul pentru o machetă.

Aceasta nu înseamnă adăugarea de culori sau imagini. Dar înseamnă că trebuie să arătăm text real.

În această etapă, este o idee minunată să vă asigurați că antetul și secțiunile sunt afișate cu conținutul real pe care vor fi intenționate să îl dețină. Acest lucru va permite o selecție mai bună pentru culori și imagini în etapele ulterioare ale proiectării.

În această parte a exemplului, am construit glisorul cu text erou și o descriere dedesubt. Există câteva lucruri de care trebuie să țineți cont în această fază a procesului de prototip:

  • Dimensiunea și poziționarea fontului
  • Localizarea și spațierea conținutului
  • Margini și căptușeală între secțiuni și conținut

Cum să proiectați secțiuni ale prototipului site-ului web

1611627606 723 Cum sa proiectezi un prototip de site web dintr un Wireframe

Pentru prototipare și macheta finală, este important să începeți straturile grupurilor și secțiunilor. Secțiunile pot include lucruri precum antetul, secțiunea „despre noi” și secțiunea sponsori.

Puteți crea grupuri în instrumentul dvs. UI (Figma face acest lucru cu Ctrl + G). Etichetați secțiunile și setați-le cu culori de fundal diferite. Acest lucru va facilita identificarea acestora și vă va permite să le deplasați cu ușurință.

De prea multe ori mi s-a cerut să mut anumite părți ale unui site web în sus și în jos în grupare. Prin gruparea tuturor componentelor dvs. în secțiuni, vă va fi mult mai ușor pentru dvs. în timpul fazei de prototip a lucrării de proiectare.

Concluzie: ceea ce am învățat din procesul de prototipare

1611627606 542 Cum sa proiectezi un prototip de site web dintr un Wireframe

Pe măsură ce construim restul designului, este important să ne asigurăm că acest prototip timpuriu nu devine o machetă completă pentru un design de site web.

Este ușor să te lași dus. Dar scopul realizării unui prototip după un wireframe este să ne asigurăm că putem continua să planificăm dezvoltarea site-ului web.

Este mult mai ușor să identificați problemele și problemele în primele etape de planificare și să le actualizați înainte de a vă scufunda în crearea designului complet. O astfel de prototipare vă poate dura doar câteva ore, dar poate economisi zile în valoare de efort mai târziu în proces.

După ce ați prototipat mai multe pagini, puteți trece la faza completă de proiectare a machetei. Aceasta va implica descoperirea teoriei culorilor, a tipografiei și a imaginilor care funcționează corespunzător. Vom arunca o privire la acest lucru în următorul articol din această serie luna viitoare.

Bonus: Adăugarea unei prototipuri interactive

Am creat doar o singură pagină pentru acest exemplu. Acestea fiind spuse, prototiparea vă permite, de asemenea, să creați un exemplu emulat al funcționării site-ului.

Această emulare este foarte utilă pentru desfășurarea de demonstrații, pentru testarea modului în care clienții răspund la vizualizarea unui exemplu real al unei machete timpurii și pentru revizuirea modului în care toate legăturile dvs. circulă.

Routech

Sper că v-a plăcut acest articol. Dacă nu știi cine sunt, eu sunt Adrian din Australia. ? Am un canal minuscul pe Twitter și YouTube, așa că, dacă vrei să afli mai multe despre mine sau să te bucuri de conținutul meu, verifică-mă cândva?