Moarte pentru mașinile de procesare!

Găsește-ți procesul ideal de proiectare, respectând câteva principii simple în loc de un script rigid.

Auziți o mulțime de sfaturi diferite despre modul corect și greșit de a parcurge proiectarea unei aplicații sau a unui site web.

„Ar trebui să folosești Sketch.”
„Sisteme de proiectare sau GTFO.”
„Realii designeri proiectează 100% în cod.”
„Wireframes sunt o pierdere de timp.”
„Dacă nu creați prototipuri, nu o faceți bine.”
„Trebuie să începeți pe hârtie.”

Ați crede că nu există niciun acord cu privire la modul corect de proiectare, dar există un punct care este în mare parte lipsit de controverse - că procesul dvs. ar trebui să fie liniar.

Abordarea liniară clasică arată cam așa:
cercetare → schiță → cadru de filă → calculatoare statice → prototip → cod

Este ca acele mașini de fabricație Rube Goldberg-esque pe care le folosesc pentru a face Doritos și Ding-Dongs. Aruncați o idee în mașina de procesare și după ce ați făcut piure și modelați în formă, pe măsură ce va trece prin pași, un produs finit iese pe partea cealaltă! ! previzibil Eficient!

Cam.

Mașinile de procesare funcționează, dar numai atunci când funcționează. Ei nu se adaptează, ceea ce le face fragile. Nu este nevoie decât de un mic Sabot pentru a vă macina mașina de proces.

Hank, a.k.a. „Sabotul”

Am urmărit în ultimul timp găsirea lui Dory cu copilul meu, iar o parte din materialele „make of” continuă sări la mine.

În film, există această caracatiță pe nume Hank:

Disney / Pixar

Septopus, tehnic. Modelul său de personaj a fost atât de oneros cu care a lucrat, au lăsat un tentacul pentru a-l face animabil făcător. Cu toate acestea, cu 4.000 de controale separate cu care a fost incredibil de dificil să lucreze.

În acest moment al procesului, au trecut schițele și redările și animatics - acele etape de fidelitate mai mică care vă ajută să faceți o mulțime de idei rapid și ieftin. Deja au primit Real. S-a construit platforma personajelor, s-au elaborat detalii tehnice, răspunsurile la întrebările fundamentale.

Sunt în ultima etapă de animație - modele 3D în medii 3D. S-ar fi putut solda pe cheltuiala programului de producție și a bugetului. În schimb, au făcut ceva cu adevărat interesant - s-au întors la schiță.

Disney / Pixar

Schițând mișcarea complexă a tentaculelor lui Hank pe hârtie, ei puteau închide animația perfectă și fluidă pe care o căutau într-o fracțiune a timpului. Odată ce au fost mulțumiți de secvență, au animat în 3D pentru a se potrivi. Au obținut un produs mai bun în mai puțin timp, deoarece au ales să valorizeze principiile procesului în locul unei prescripții de proces.

Leacul pentru un proces prescriptiv

Echipa Finding Dory a făcut un produs mai bun mai rapid, luând decizii care au prioritat viteza și calitatea, în loc să se lipească de un proces de votare.

S-ar putea să alegeți alte lucruri pe care să le valorizați, dar dacă lucrați într-un cadru comercial, concentrarea pe punctul dulce dintre viteză și calitate ar trebui să fie în vârful listei. Întoarcerea rapidă a muncii rapide este o afacere importantă pentru designeri și artiști profesioniști.

Definirea principiilor care îți conduc procesul este doar începutul. Iată cum le puteți pune în practică.

Începeți cu marile întrebări

Dacă apreciați viteza, începeți un proiect prin a afla care sunt cele mai mari întrebări fundamentale. În Obținerea reală, aceasta se numește „design de epicentru”:

Începeți din miezul paginii și construiți spre exterior
Designul epicentrului se concentrează pe adevărata esență a paginii - epicentrul - și apoi se construiește spre exterior. Aceasta înseamnă că, la început, ignori extremitățile: navigarea / filele, subsolul, culorile, bara laterală, logo-ul etc. În schimb, pornești de la epicentru și proiectezi cea mai importantă piesă de conținut.
Indiferent de epicență, oricare ar fi pagina care nu poate trăi. De exemplu, dacă proiectați o pagină care afișează o postare pe blog, postarea de blog în sine este epicentrul. Nu categoriile din bara laterală, nu antetul din partea de sus, nu formularul de comentarii din partea de jos, ci unitatea de postare blog reală. Fără unitatea de postare pe blog, pagina nu este o postare pe blog.
Doar când această unitate este completă, ați începe să vă gândiți la cel de-al doilea element cel mai critic din pagină. Apoi, după cel de-al doilea element cel mai critic, veți trece la al treilea și așa mai departe. Acesta este designul epicentrului.
Designul epicentrului scuteste modelul traditional „hai sa construim cadrul, apoi arunca continutul in” model. În acest proces, forma paginii este construită, apoi nav este inclusă, apoi „chestiile” de marketing
 este inserat și apoi, în sfârșit, funcționalitatea principală, scopul real al paginii, este turnată în orice spațiu rămâne. Este un proces invers care ia ceea ce ar trebui să fie prioritatea principală și îl salvează pentru final.

Iată un exemplu de ce acest lucru este crucial. Lucram la o aplicație iOS pentru proiecte laterale, care folosea o interfață audio unică, posibil nefuncțională. Dacă nu aș fi apreciat viteza, aș fi putut petrece nenumărate ore proiectând numeroasele detalii care se bazează pe fundamentul acestei idei ciudate. Designul vine înainte de cod în procesul liniar clasic, până la urmă.

În schimb, am pornit în cod pentru a-mi da seama dacă această idee era sau nu viabilă. Nu a fost! Așa că mi-am ajustat planurile și m-am economisit o cantitate enormă de timp și energie.

Întreabă, WMGMTCATMQITLAOT?

După ce cunoașteți mai întâi întrebările care au nevoie de răspunsuri, întrebați-vă:
„Ce mediu îmi oferă cel mai clar răspuns la întrebările mele în cel mai scurt timp?”

În cazul proiectului meu lateral, răspunsul a fost cod. Pentru o pagină de pe Basecamp.com, răspunsul este adesea text sau o schiță. Pentru tine, ar putea fi altceva în întregime.

Știind când să schimbați angrenajele

Asta vă oferă un loc de pornire, dar de unde știți când este momentul să treceți la un alt mediu? Când lovești rezistența.

Gândește-te la conducerea unei mașini. Căutați pe autostradă - motorul se îndepărtează ca un pisoi mulțumit. Dar apoi începi să conduci un deal. Echipamentul în care vă aflați a fost excelent pentru croazieră, dar nu și pentru alpinism. Pentru a vă menține viteza, vă schimbați într-o nouă viteză.

Același lucru aici. Dar, spre deosebire de mașini, nu există niciun indicator solid care să fi atins prea multă rezistență în mediul ales. Din fericire, majoritatea designerilor și artiștilor au o manieră solidă atunci când trebuie să treceți la un mediu care oferă mai multă fidelitate. Aceasta este partea care se alătură procesului clasic de fidelitate joasă → fidelitate înaltă până la urmă. Știți că sunteți gata să treceți de la schițare atunci când schițarea nu mai oferă informații utile.

După ce ați ajuns în acest punct, descoperiți următoarea cea mai importantă serie de întrebări și puneți-vă din nou: „ce mediu îmi oferă cel mai clar răspuns la întrebările mele în cel mai puțin timp?”

Al doilea caz - trecerea la o fidelitate mai mică - este mai dur. Atât pentru că oamenii sunt mai puțin practicați, cât și pentru că este complicat. Lucrați în cod. Lucrezi cu o fidelitate de 100%, deci nu există nicio limită la capacitatea mediului de a răspunde la întrebări. Dar există o limită a capacității sale de a răspunde rapid la întrebări.

Când te simți că nu urmărești căi, deoarece te simți ca prea multă muncă, acesta este un semn foarte bun de care trebuie să faci o rezervă. Când lucrurile simt că nu fac clicuri ca și cum ar trebui, este timpul să evaluați. Fiți atenți și veți începe să dezvoltați o idee pentru asta.

Folosind un mediu în avantaj

Există un al treilea caz pentru trecerea la - sau lipirea cu - a unui mediu. Acesta nu-i pasă de rezistență, îi pasă doar de un adevăr fundamental; procesul influențează rezultatul. La fel ca desenul cu un creion va arăta altfel decât desenul cu un marker, proiectarea în browser va produce un rezultat diferit de cel al proiectării în Sketch.

Cu cât înțelegeți mai mult modul în care un mediu vă afectează munca - felul de mărci pe care îl lasă - cu atât îl puteți folosi în avantajul dvs. Doriți ca designul dvs. să fie expresiv? Probabil mai bine să lucrezi cu un instrument vizual precum Sketch, Illustrator sau chiar * gasp * Photoshop. Vrei un design minim, ușor? Stick la proiectarea în cod.

Un exemplu practic

Acum că am discutat despre pericolele procesului prescriptiv, aș dori să vă împărtășesc ... procesul meu. Nu pentru tine să urmezi pas cu pas! Doar pentru a vă oferi un exemplu din viața reală a modului în care puteți utiliza principii pentru a vă ghida procesul.

Lansăm un nou mod de a lucra cu clienții din Basecamp, iar sarcina mea a fost să creez o nouă pagină pe Basecamp.com pentru a o comercializa. Iată cum s-a redat:

Determinarea întrebărilor mari, alegerea unui mediu

Acesta nu este un site nou sau un aspect complet nou. În primul rând, a trebuit să descopăr scopul acestei pagini, ce încearcă să spună și structura generală.

„Ce mediu îmi oferă cel mai clar răspuns la întrebările mele în cel mai scurt timp?”

Compușii și schița sunt afară. Acest lucru este plasat într-un design existent și un șablon existent. Aș putea sări direct la cod, dar marcajul este zgomot în acest moment. Textul este corect.

O grămadă de copii pe jumătate coapte

Creșterea fidelității

Nu am rămas cu textul suficient de lung pentru a termina toată copia paginii. Odată ce am avut un contur și o idee despre cum am vrut să vorbesc despre funcție, am schimbat angrenajele în cod.

De ce?

Un document text nu mi-a spus nimic despre faptul dacă o linie ar părăsi o văduvă, dacă un paragraf „se simțea” lung, cum vor curge imaginile, etc. Aveam nevoie de mai multă fidelitate. Unele dintre noile întrebări ar fi putut răspunde printr-o compunere statică, dar aceasta nu ar fi răspuns la întrebări legate de potrivirea copiei, decât dacă am pierdut timpul potrivindu-mă exact cu codul. Nu multumesc.

Lucrând prin editarea copiilor în cod

Scăderea selectivă a fidelității

După alte câteva runde de revizii ale copiei, pagina începe să prindă contur. Din punct de vedere vizual, a fost mecanic și subpunător. Mi-am dorit să fie mai expresiv, așa că am trecut pe Sketch pentru a reproșa câteva idei.

Aș fi putut să rămân în cod în cea mai mare parte, dar cu Sketch puteam să scot o grămadă de idei mult mai repede decât le-aș putea codifica. Mă permite, de asemenea, să compar direct acele idei unele față de altele și nu aș lăsa un cuib de șobolan CSS din toată puterea. Win-win-win.

O grămadă de compule Sketch pe jumătate coapte

Observați cum niciunul nu este copt complet? Pentru că nu contează! Acestea nu sunt pentru o prezentare a clientului sau pentru transmiterea unui dezvoltator. Ei sunt acolo pentru a mă ajuta să descopăr ceva, apoi sunt gunoiul. A investi timpul pentru a le lustrui ar fi fost o pierdere totală de efort.

Terminand

Odată ce am avut sensul direcției, a fost codul restului drumului. Șlefuirea copiei, reducerea capturilor de ecran și evaluarea întotdeauna împotriva întrebării cheie: „Este gata de livrare?”. Puteți arunca o privire pe pagina Clienților live din Basecamp aici.

Nu așa se joacă fiecare proiect. Uneori voi schița ceva în Procreate, alteori voi începe cu un calcul vizual rapid și murdar, alteori voi scrie o copie în Sketch, alteori voi lucra 100% în cod. Totul depinde de proiectul la îndemână.

Sperăm că acest lucru vă oferă o perspectivă asupra modului în care puteți utiliza principii pentru a vă ghida procesul de la caz la caz, fără să simțiți că veți reinventa continuu roata.

Gândiți-vă la procesul dvs. și la tipul de muncă pe care îl efectuați. Definiți principiile care sunt importante pentru dvs., concentrați-vă mai întâi pe lucrurile mari și continuați să puneți întrebări dacă mediul în care lucrați este cel potrivit pentru moment. Munca ta va fi mai bună pentru asta.