Tot ce trebuie să știți despre UX Sketching

Dacă ați făcut orice fel de muncă creativă serioasă, sunteți prea familiarizat cu blocajul creativ. E ca și cum ai lovi un zid de cărămidă: niciuna dintre ideile pe care le poți vizualiza nu este suficient de bună sau nu poate funcționa în viața reală.

Pentru designeri, sentimentul este prea familiar. Cu toate acestea, ca orice problemă complicată fără o soluție clară, un proces inteligent poate face toate diferențele. Aici intervine schița UX.

Schița UX este un aspect crucial, dar adesea trecut cu vederea, al designului experienței utilizatorului. Schița este o modalitate foarte eficientă de comunicare a designului, permițând în același timp designerilor să încerce o multitudine de idei și să le repete înainte de a se decide pe una.

În această postare, intenționez să acopăr tot ce trebuie să știți despre schița UX, inclusiv următoarele puncte:

• Introducere în schițe și wireframes UX
• Elemente de bază, instrumente și tehnici de schiță UX
• Clarificarea schițelor cu note, adnotări, numere
• Sfaturi și trucuri pentru schițe UX
• Mini-metode concepute pentru a crește calitatea și productivitatea
• Tot ce trebuie să știți despre Wireflows
• Un ghid rapid pentru schițarea fluxului UX

Schițarea UX este un proces în doi pași

Multe opțiuni trebuie luate în considerare în proiectare, ceea ce are ca rezultat alegerea și executarea celei mai bune. Designerii își iau în considerare opțiunile și apoi procedează la elaborarea detaliilor, făcând astfel designul UX un proces în doi pași:

• Generarea de idei

În pasul inițial, sunt generate mai multe idei, dar din moment ce nu pot fi modelate pe deplin, nu este neobișnuit ca unele dintre elemente să fie incomplete sau lipsă. Principalul lucru este să luați în considerare diferite abordări și să decideți care este cea mai eficientă în contextul sarcinii dvs. și a diferitelor constrângeri ale proiectului.

• Adăugarea de detalii și rafinament

Pas cu pas, te stabilești pe câteva variante promițătoare și treci la elaborarea specificului, făcând astfel unele idei nepotrivite.

Schițe și wireframes UX: introducere și clasificare

Wireframes-urile dvs. pot diferi în funcție de factori precum nivelul dorit de detaliu, culori și stil, dacă le veți arăta cuiva și așa mai departe.

Am evidențiat următoarele tipuri de schițe:

• Schiță: Generarea ideii

Acestea sunt schițele inițiale. Detaliile de nivel inferior sunt pur și simplu notate. Se folosește un număr limitat de culori.

Desenez o mulțime de schițe de bază pentru a considera problema din unghiuri diferite și pentru a lua în considerare diferite soluții. În timp ce desenez astfel de schițe, mă străduiesc și să generez cât mai multe variante de soluție.

La acest pas special, incompletitudinea îmi eliberează mintea, motiv pentru care este atât de important să evit să mă blochez în detalii în această etapă. Scopul meu este să generez cât mai multe idei și să le aleg pe cele mai promițătoare.

• Wireframe: specificație, fază detaliată

De obicei aleg schițe promițătoare și trec peste detalii, după care aleg cea mai bună variantă și o rezolv mai în detaliu.

Cu toate acestea, acest lucru nu înseamnă fiecare detaliu . Lucruri evidente pot fi doar observate. Mai mult, unele aspecte vor fi greu de descris pe hârtie.

La acest pas, desenez toate detaliile importante , dar nu desenez încă wireframes în Balsamiq. După ce totul este făcut pe hârtie, încep să desenez în Sketch.

Instrumentele digitale oferă mult mai multă libertate creativă decât hârtia și puteți muta cu ușurință atenția asupra lucrurilor minore. De exemplu, vă puteți concentra pe „lustruirea pixelilor” în loc de design.

• Proiect de design vizual

Aceasta este o abordare rar folosită, dar uneori poate fi utilă. Diverse soluții vizuale sunt luate în considerare într-o fază incipientă a proiectului, dar poate dura mult timp pentru a crea schițe digitale pentru toate. De aceea, desenez mai întâi schițele de design pe hârtie, pentru a lua în considerare diferite opțiuni și pentru a alege o direcție vizuală de design.

• Defalcarea componentelor/elementelor

Găsesc această tehnică utilă atunci când am deja o idee generală și mă gândesc la o anumită funcționalitate a paginii sau la părțile integrale ale componentelor interfeței. Desenez diferite elemente de pagină, intrând în detalii, apoi desenez diferite poziții posibile ale elementelor paginii.

Elementele, chiar și cele mai simple, trebuie să aibă o stare; un buton poate fi apăsat și are un bloc de text care poate fi sau nu gol. Cu cât este mai complex, cu atât are mai multe stări.

Începeți cu elementele de bază

• Pregătiți-vă uneltele. Găsiți cel mai convenabil loc posibil, o masă mare, cu mult spațiu. Luați multă hârtie și pregătiți niște pixuri și markere.
• Încălzire. Pentru a vă pregăti, vă recomand să desenați câteva linii, cercuri, șabloane de bază și pictograme.
• Definiți-vă obiectivele. Decideți ce doriți să desenați. Stabilește-ți scopul și decide ce poveste trebuie să spui. Determinați nivelul dorit de detaliere. Decideți dacă sunteți gata să desenați mult.
• Definiți-vă publicul țintă. Dacă faci asta pentru tine, nu trebuie să-ți faci griji cu privire la felul în care arată schița ta. Cu toate acestea, dacă intenționați să arătați desenele unui client, asigurați-vă că acordați ceva timp suplimentar pentru a adăuga mai multe detalii la schiță.
• Stabiliți un interval de timp. După ce te-ai hotărât cu privire la cantitatea de timp pe care ești gata să o aloci pentru schiță, să spunem 30 de minute, te va ajuta să te concentrezi asupra muncii tale.

Acum, ești gata și poți începe:

• Desenați marginile. Desenați cadrele, o fereastră de browser sau telefon, o parte a interfeței și așa mai departe.

• Adăugați elementele cele mai mari sau de bază: meniu, subsol, conținut principal.

• Adăugați detalii. Adăugați detalii relevante, dar păstrați-le simple în această etapă.

• Adăugați adnotări și note. Acestea sunt necesare numai dacă intenționați să distribuiți schițele. Cu toate acestea, pot fi utile chiar dacă le faci doar pentru ochii tăi.

• Schițați alternative. Schițați câteva alternative rapide la soluția dvs.

• Alege cea mai bună soluție. Alegeți cele mai bune opțiuni.

• Adăugați umbră și teșire. Acest lucru este deosebit de important în scopul partajării. Adăugați o umbră pentru a face schița dvs. atrăgătoare din punct de vedere vizual, ceea ce este important dacă intenționați să o împărtășiți membrilor echipei și/sau clienților.

• Salvați schița. Faceți o fotografie sau puneți-o într-un folder. Am câteva tăvi de hârtie pe masă pentru schițe.

• Acțiune. De obicei folosesc una dintre următoarele metode de partajare:
  • Scanează schițele prin Evernote și oferă un permalink altor membri ai echipei sau părți interesate.
  • Faceți o fotografie și încărcați în InVision.
  • Încărcați și mapați imagini pe Realtimeboard.
  • Sau pur și simplu trimiteți prin e- mail o fotografie.
• Examinați schițele și adăugați note. Luați o pauză și apoi reveniți la schițele dvs. un timp mai târziu. Aruncă o privire la ele din nou. Mai are sens schița pentru tine? O schiță bună trebuie să fie ușor de urmărit.

Clarificarea schițelor cu elemente suplimentare

Găsiți sau desenați o schiță adecvată și apoi adăugați-i următoarele detalii:

1. Titlu. Uneori, adăugarea unui titlu este o opțiune bună. Scrieți o descriere și data, dacă este necesar, în partea de sus a schiței. Titlul vă va ajuta să înțelegeți la ce vă uitați și dacă schița este sau nu relevantă. Acest lucru este util mai ales dacă aveți o mulțime de schițe sau urmează să le arătați altora.

2. Adnotări. Adnotările sunt nume și note plasate în apropierea unui element, pentru a explica conținutul acestuia sau alte atribute. Ele adaugă detalii care clarifică alte elemente și sunt de obicei greu de desenat. De exemplu, ar putea fi numele blocului, unele detalii de interacțiune, o explicație a unei imagini, câteva idei pentru viitoare variații de design și așa mai departe. Puteți consulta unul dintre exemplele mele pentru a vedea cum arată o schiță de adnotare.

3. Numerele. Numerotați elementele schiței dvs. sau schițele în sine. Puteți decide cum să le comandați (de exemplu, după fluxul de interacțiune, ordinea în care le-ați creat etc.). De asemenea, poate fi util în timpul discuțiilor (în special discuții la distanță), deoarece colegii și clienții tăi pot indica doar numărul schiței în feedback-ul lor și vei înțelege la care se referă comentariile lor.

4. Săgeți. Puteți folosi săgețile pentru a indica tranzițiile ecranului. Ele pot fi, de asemenea, folosite pentru a conecta diferite părți ale schițelor, pentru a indica o secvență de acțiuni și așa mai departe. Deoarece semnificația unei săgeți poate varia, chiar deasupra săgeții puteți adăuga o descriere sau o explicație a ceea ce înseamnă săgeata. Iată un exemplu de schiță de bază care arată o tranziție și mai multe stări diferite.

5. Note. La fel ca adnotările, notele sunt folosite pentru a explica concepte. Cu toate acestea, notele diferă de adnotări în ceea ce privește plasarea lor. Ele nu sunt atașate unui element sau situate în apropierea elementului descris, similar cu acest exemplu. Notele pot fi plasate în partea de sus sau de jos a paginii. Ei pot chiar descrie elemente care nu sunt incluse în design, întrebări pe care le puteți avea, explicații generale, idei neschițate și așa mai departe.

6. Gesturi. Gesturile sunt relevante în cazul designului dispozitivului tactil. Desenarea unui gest cu mâna poate necesita practică. Există mai multe variante de gesturi folosite pentru a indica diferite tipuri de acțiuni, așa că este mai bine să decideți dinainte cum desemnați o anumită acțiune (dacă nu este evidentă, desigur) și să exersați desenarea acesteia.

7. Părere. Este posibil să primiți sugestii pentru remedierea sau îmbunătățirea schiței după ce o arătați altora sau după ce o aruncați o altă privire personal. Este adesea util să marcați un astfel de feedback într-o culoare diferită pentru a ajuta la diferențierea feedback-ului de schița originală.

Puteți utiliza culori diferite pentru diferite tipuri de elemente. Uneori, folosesc negru pentru desene, albastru pentru link-uri, verde închis pentru note, roșu pentru titluri și feedback. Încercați să utilizați culori diferite în schițele dvs., dar asigurați-vă că alegerea culorilor este consecventă!

Sfaturi și trucuri mai specifice

1. Nu vă faceți griji pentru calitate. Nu te uita la schițele de pe Dribbble; sunt despre ceva complet diferit . Rețineți că scopul principal al schițelor este să vă ajute să gândiți mai clar, să găsiți soluții mai bune și să economisiți timp.

2. Practică. Pentru început, puteți încerca să desenați câteva aplicații. Deschideți o aplicație web sau mobilă și încercați să copiați ecranul, descriind elementele din note. Ori de câte ori aveți ceva timp liber, exersați desenul elementelor de bază ale modelelor dvs. În general, practica face perfectă. Peste un timp, va deveni parte din sinele tău designer.

3. Cumpărați un folder. De multe ori nu lucrez de la birou, ci mai degrabă de la o cafenea sau acasă. Schițele din hârtie sunt foarte predispuse la deteriorare, așa că cumpărați un folder simplu pentru a le păstra în siguranță.

4. Aduceți instrumente cu dvs. oriunde ați merge. Acest lucru vă ajută să vă asigurați că vă puteți surprinde ideea pe hârtie în orice moment, altfel s-ar putea să vă pierdeți gândul sau să nu vă puteți aminti suficient de detaliat. Am mereu cu mine un blocnotes, câteva coli A4 și pixuri.

5. Distribuie altora. Este foarte important să implici alți oameni și să comunici cu echipa ta. Implicarea altora și obținerea feedback-ului lor, mai ales devreme, ajută la economisirea de timp și resurse pe termen lung. De asemenea, îi puteți încuraja pe alții să deseneze așa cum își imaginează ei designul.

6. Tavi de hartie. Gândiți-vă să așezați tăvi de hârtie pe masa de lucru. De exemplu, am trei dintre ele: pentru sarcinile primite, pentru schițe și foi de hârtie curate.

7. Experimentați și personalizați. Recomandările mele se bazează pe experiența mea. În timp, vei afla ce ți se potrivește cel mai bine; ce metode, ce succesiune de pași, ce anume îți împlinește potențialul creativ. Veți ajunge acolo doar dacă încercați constant ceva nou, de aceea este important să experimentați cu diferite formate, stiluri și să încercați șabloane noi.

8. Folosiți șabloane. Șabloanele vor economisi timp și, implicit, vor ține cont de restricțiile de format, eliberând mai mult timp pentru a vă concentra pe ceea ce este important.

Mini-metode suplimentare pentru a vă îmbunătăți schițele

Acestea nu sunt neapărat sfaturi și trucuri, dar sunt o colecție de metode, instrumente și sugestii care ar trebui să vă sporească productivitatea sau să vă îmbunătățească calitatea schițelor.

1. Creați o tablă de schiță. Unul dintre cele mai mari beneficii ale folosirii pixului și hârtiei în locul unui instrument digital de schiță este că le puteți lipi de perete. Toți membrii echipei dvs. îl pot vedea și pot participa (deși recomand să stabiliți sesiuni de revizuire).
   
   • Îți vei vedea singur schițele, iar asta îți va stimula gândirea și îți va permite să vezi imaginea de ansamblu, nu piese izolate, ci întregul sistem. Veți vedea interacțiunile dintre părți și modul în care acestea se potrivesc unele cu altele.
     
   • Creați tabla de schiță - atașați schițele de la tabla albă. Dacă nu există tablă albă în biroul dvs., puteți folosi bandă adezivă de dimensiuni duble sau foi de note post-it pentru a lipi schițele pe perete. Dacă nu vrei să te lipești de perete, poți găsi în schimb o bucată mare de hârtie de carton. Recomand cu tărie folosirea plăcilor de schiță, deoarece sunt unul dintre cele mai bune instrumente de design.
2. Folosiți o tablă albă. O tablă albă este un instrument grozav de desen. Are o serie de avantaje:
   • Este colaborativ și este ușor să implici alți membri ai echipei în discuție și în desen. Chiar dacă ideile lor nu se potrivesc bine, vei înțelege modul lor de a gândi și te va ajuta să fii pe aceeași pagină.
     
   • Markerii nu vă lasă să vă concentrați pe detalii, trebuie să vă gândiți la lucrurile generale. Schițele sunt deschise interpretării.
     
   • O tablă albă este ușor de curățat și de corectat.
     
   • Există mult spațiu și vă puteți gândi cu ușurință la întregul flux al sistemului.
     
   • Puteți atașa schițe, imprimări și materiale de referință folosind magneți.

3. Prototipuri. Realizați un prototip pe care se poate face clic pentru a vă evalua designul. Încercați să obțineți feedback despre unele elemente. Acest lucru funcționează deosebit de bine atunci când utilizați șabloane - schițele dvs. sunt de aceeași dimensiune. Evident, va fi mult mai ușor să desenați schițe de aceeași dimensiune dacă utilizați un șablon. Voi încerca să o fac și mai ușoară, oferindu-vă câteva șabloane pe care le puteți descărca și utiliza: Mobil, Fereastră multiplă a browserului, Defilare a browserului, Personaj.

   

4. Utilizați imprimanta și scanerul. Desenați cadrul manual (puteți folosi rigla pentru a desena mai precis), apoi scanați-l folosind un scaner sau o aplicație mobilă și imprimați-l. Puteți edita șablonul în redactorul de imagini înainte de imprimare. Puteți elimina detaliile inutile sau puteți duplica unele elemente. De asemenea, puteți imprima o pagină de site gata făcută, fotografii și alte elemente descriptive. Puteți lipi decupajele în schiță.

5. Utilizați Evernote pentru scanare. Evernote este un instrument excelent de design. Vă puteți păstra și partaja schițele în el, puteți crea teme și puteți folosi etichete pentru a vă organiza schițele. Abilitățile modului „Scanner” sunt deosebit de impresionante. Îți pui schița în fața ei și o „scanează”, astfel încât să obții copia schiței. Apoi vă puteți invita colegii la Evernote și le puteți oferi linkul pentru nota dvs. Deoarece există o aplicație mobilă pentru tablete și telefoane, puteți avea oricând schițele la îndemână.

6. Schiță hibridă. Pentru a da puțină viață și realism schițelor tale, le poți combina cu fotografii. Asta înseamnă că trebuie să faci o fotografie și apoi să desenezi o poveste cu elemente de interfață pe ea. Acest lucru vă poate ajuta, de asemenea, să observați unele probleme de interacțiune și detalii.

7. Urmărirea lumii reale. Dacă trebuie să creați un storyboard, să ilustrați o experiență într-un context specific (de exemplu, o persoană care folosește un smartphone la o stație de autobuz), trebuie să includeți reprezentări ale oamenilor, locurilor și diferitelor obiecte din viața reală. Acestea pot fi dificil de desenat, mai ales dacă nu ați stăpânit abilitățile de desen, dar iată un sfat simplu: Faceți o fotografie a obiectului sau a situației și apoi obțineți conturul obiectelor cheie folosind un editor de imagini. Puteți utiliza conturul rezultat în schițe după aceea. Desigur, dacă aveți o tabletă și un stylus , va fi și mai ușor.

Wireflow: conturarea fluxului și ramificarea sistemului

Fluxul de sârmă este în esență o secvență a fluxului sistemului, ecran după ecran, cu ramuri și puncte de decizie. Ar trebui să luăm în considerare modul în care un utilizator își adresează sarcina, modul în care se deplasează de la ecran la ecran și experiența sa generală a produsului de-a lungul timpului.

Wireflow, sau ceea ce desenați și modul în care este conectat, ar putea fi organizat conform următoarelor abordări:

• Secvenţă. O secvență este o călătorie dreaptă, ecran după ecran. Poate fi și o poveste cu puncte de decizie; arătați nu numai călătoria, ci și punctele de decizie și diferite căi pe care utilizatorul le poate alege. Puteți afișa structura interacțiunii ecranului.
• Schimbări de stat. Prezentați diferite stări de ecran ale unui element și condițiile sau acțiunile care provoacă tranzițiile între aceste stări.
• Ecran vs. elemente de ecran. Puteți desena toate ecranele sau puteți lua în considerare micro-interacțiuni și interacțiuni.
• Platforme. Puteți lua în considerare o experiență de platformă sau mai multe platforme.
• Domeniul de aplicare. Veți descrie o parte din călătoria utilizatorului sau întreaga călătorie? Interacțiunea unui utilizator cu sistemul sau interacțiunile mai multor utilizatori?

În general, încerc să definesc următoarele tipuri de fluxuri, în funcție de organizare și utilizare practică:

1. Cartografierea fluxului general și a fluxului la nivel înalt. Schițați rapid deplasările ecranului și desenați călătoria generală a utilizării produsului. Aici puteți include un anumit context și, opțional, puteți afișa unele interacțiuni ale utilizatorului. De exemplu, un serviciu de cumpărături de comerț electronic este o călătorie destul de lungă, care poate include o mulțime de pași: cum a găsit utilizatorul magazinul, pașii prin care a trecut pentru a comanda produsul, cum a plătit și așa mai departe.

2. Fluxul ecranului. Aceasta se concentrează pe un flux funcțional specific prin sistem. Ar putea fi o mică secvență dreaptă de ecrane sau o călătorie cu ramificare. De exemplu, un utilizator care încarcă niște fotografii sau un videoclip.

3. Schema de navigare. Desenați ecranul și opțiunile pe care le conține. Aceasta nu ar trebui să cartografiaze călătoria. Acest pas include informații care arată opțiunile pe care le poate alege un utilizator, direcțiile pe care le au utilizatorii și diverse părți ale aplicației. De obicei creez o schemă de navigare la începutul unui proiect. Servește la înțelegerea modului în care ar trebui să fie structurată navigația (ce puncte trebuie incluse, câte niveluri sunt necesare).

4. Stările ecranului. Desenați ecranul sau stările elementului (un exemplu ar putea fi un dialog de încărcare a fișierului). În acest caz, de exemplu, ecranul va avea următoarele stări:

   • Gol
   • Un utilizator extrage fișierul în zona activă
   • Fișierul se încarcă
   • Fișierul este încărcat
   • Există o eroare

Schițarea fluxului UX: un ghid rapid de utilizare

Procesul de proiectare wireflow este similar cu cel wireframe. Mulți pași sunt similari sau identici, dar există câteva diferențe importante:

Definiți ce trebuie să desenați. Decideți exact ce doriți să desenați (de exemplu, istoricul general sau un fragment din designul dvs.). Doriți să generați diferite opțiuni sau să vă gândiți la detaliile unei călătorii? Decideți dacă veți arăta sau nu schițele dvs. altcuiva.

Definiți ce cadre cheie și tranziții ar trebui să includeți în desen. Dacă adăugați toate ecranele și schimburile, fluxul dvs. va fi foarte lung și complex. Luați în considerare ce ecrane cheie ar trebui să afișați pentru a transmite esența interacțiunii care vă ajută să vă îndepliniți sarcina. Același lucru este valabil și pentru deplasările ecranului. Trebuie să alegi care ture vor fi mai utile în exprimarea ideii tale. Consultați acest exemplu pentru referință.

Definiți punctul de plecare. Care va fi punctul de plecare al călătoriei tale? Puteți începe cu punctul de intrare, adică începutul călătoriei, de exemplu, ceea ce vede un utilizator când se conectează la aplicația dvs. Alternativ, puteți începe de la mijlocul sau cu cele mai interesante/dificile/importante ecrane sau pași de proces. Sau puteți începe de la sfârșit, cu rezultatul final obținut de un utilizator și să descrieți pașii pe care acesta i-a făcut pentru a ajunge în acest punct.

Decideți ce urmează. După ce desenați pașii de pornire, decideți ce urmează, răspunzând la următoarele întrebări:

• În ce sens îi conduce acest pas pe utilizatori?
• În ce direcție vrei să meargă?
• Ce trebuie să facă pentru a ajunge acolo?

Schițați rute alternative, intrări. Gândiți-vă la modalități alternative prin care utilizatorul poate ajunge la fiecare pas:

• Ce se va întâmpla dacă conexiunea la internet a utilizatorului eșuează?
• Ce alte variante mai au?
• Ce poate merge prost în cazul erorii utilizatorului sau a aplicației, ce se va întâmpla?
• Ce se va întâmpla dacă utilizatorul închide aplicația la acest pas?
• Unde va începe utilizatorul data viitoare când lansează aplicația?

Gândiți-vă la fluxuri alternative. Analizați istoria, proiectați un flux alternativ și schițați-l.

Adăugați adnotări, note, detalii. Adăugați elementele explicative care vor clarifica detalii neevidente.

Salva. Faceți o copie digitală a schiței.

Acțiune. Distribuiți schița (de exemplu, prin Evernote sau InVision).

Sfaturi și trucuri esențiale pentru schițarea fluxului UX

Desenați mai întâi un flux de sârmă. Dacă ai de gând să te gândești la o călătorie destul de lungă, mai bine ai face o schiță rapidă pentru a înțelege de cât spațiu ai nevoie și pentru a nu rata câțiva pași sau detalii importante. Ar fi dificil să le adăugați la schița de hârtie după aceea.

Nu creați o hartă uriașă cu prea multe detalii. Schițele pe hârtie nu au un buton de anulare , așa că va fi dificil să faceți modificări. Este posibil să desenați detaliile prea precis și acest lucru vă va distrage atenția imaginației de la generarea diferitelor variante de nivel înalt. În loc să creați o schemă uriașă care să ilustreze întregul sistem, încercați să vă concentrați pe scripturile cheie și să încercați să dedicați o pagină individuală pentru fiecare script.

Tăiați detaliile inutile și combinați diferite niveluri de detaliere. Nu este necesar să desenați toate descrierile interacțiunii, așa că încercați să utilizați doar elementele cheie ale călătoriei dvs. În timp ce desenați o hartă uriașă de interacțiuni, nu aveți nevoie să lucrați fiecare ecran în detaliu. Unele ecrane ar putea fi reprezentate doar de mai multe pătrate, iar altele, ecrane cheie, ar putea fi elaborate în detaliu.

Încercați diferite dimensiuni de hârtie. Încercați diferite formate de hârtie, A3 sau A5. Dimensiunea foii de hârtie vă va limita și vă va afecta procesul în moduri diferite. O foaie mică de hârtie nu vă va permite să adăugați multe ecrane sau detalii, dar vă poate ajuta să vă concentrați asupra ideilor principale. Folosind o foaie mare de hârtie, puteți desena o călătorie uriașă, o mulțime de detalii și note suplimentare. Alternativ, puteți plasa o serie de călătorii mici pe el.

Notele post-it pot ajuta și ele. De asemenea, puteți încerca să utilizați note post-it. Puteți desena ecrane separate sau câteva note de subsol pe ele sau puteți desena stări suplimentare ale elementelor schiței dvs. Avantajul lor este că pot fi înlocuite cu ușurință, de asemenea, puteți muta pur și simplu nota în altă parte. De exemplu, în cazul în care fluxul s-a schimbat, puteți doar să schimbați ordinea notelor dvs. post-it.

Folosiți șabloane. Încercați să utilizați șabloane. Acestea vor economisi timp și vă vor permite să creați prototipuri mai multe clicabile, de înaltă calitate.

Încercați să utilizați o tablă albă. O tablă albă are o serie de avantaje. Devine din ce în ce mai popular pentru că vă permite să desenați o călătorie uriașă cu o mulțime de ramuri. Puteți desena o mulțime de componente de aplicație pe hârtie și apoi doar să le atașați la tabla albă folosind magneți, adăugându-le în călătorie.

Schițând o umbră. Umbrele te pot ajuta să marchezi elemente importante și adaugă atractivitate vizuală schiței tale. Folosesc trei tipuri diferite de umbre:

• Linii care urmează direcția luminii - nu arată întotdeauna frumos, dar puteți folosi gradația și alegeți obiectele la diferite „înălțimi”.
• Conturând o parte cu o culoare mai închisă (doar partea inferioară sau partea inferioară și dreapta)
• Folosind marcatorul Pro (sau echivalentul acestuia în aplicația pe care o utilizați pentru desen)

Componente de desen. O obiecție de genul „Nu pot să desenez atât de bine” vă poate înăbuși inițiativa. Este de fapt mai ușor decât pare. Chiar și cele mai complexe schițe sunt în general compuse dintr-un număr de blocuri de bază, ca în acest exemplu. Dacă puteți desena un punct, o linie, un triunghi, un pătrat și un cerc, atunci aveți elementele esențiale de care aveți nevoie pentru a desena orice pentru schița dvs.

Punând totul împreună. Elementele de bază, butoanele, butoanele radio și meniurile derulante sunt compuse din elemente de bază. După ce ați învățat să desenați aceste elemente, le puteți combina și desena blocuri și componente complexe.

Învelire

Scopul acestei postări nu a fost acela de a crea ghidul final, unic pentru schițe UX sau schițe în general, deoarece designerii au nevoi și preferințe personale diferite.

După cum puteți vedea, este mult de acoperit. Designerii folosesc o multitudine de instrumente, tehnici și abordări pentru a produce schițe UX și este mai degrabă subiectivă. Anumite tehnici pot funcționa sau nu pentru diferiți oameni care lucrează la proiecte diferite. Dacă abia ai început, cu siguranță ar trebui să experimentezi. Practica și experimentarea constantă vă vor ajuta să găsiți ceea ce funcționează pentru dvs.

Depinde de tine să alegi sfaturi și tehnici care se potrivesc cel mai bine pentru proiectul tău și pentru abordarea ta de proiectare. Aveți sfaturi suplimentare de schiță pentru colegii UX? Simțiți-vă liber să le distribuiți în secțiunea de comentarii.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• eCommerce UX – O privire de ansamblu asupra celor mai bune practici (cu infografic)
• Importanța designului centrat pe om în proiectarea produsului
• Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare
• Principii euristice pentru interfețele mobile
• Design anticipator: Cum să creați experiențe magice pentru utilizator