Instrumentele de proiectare rămân fără cale. Iată cum le putem repara.

Rar trece o zi în care nu petrec cel puțin ceva timp gândindu-mă la instrumentele de proiectare. Acum câțiva ani, am construit un instrument de design care a fost achiziționat de Marvel. Asta a fost mai bine de doi ani în urmă, dar de atunci peisajul nu s-a schimbat prea mult și nici nu am pasiunea mea de a-l îmbunătăți.

Recent, am trimis un tweet despre instrumentele de proiectare - lucru despre care se știe că se întâmplă din când în când.

Nu am fost singurul care mi-a spus mintea în acea zi, alții au intrat și ei.

28 iulie 2017 nu a fost o zi bună pentru instrumente de proiectare.

Există o mulțime de cunoștințe grozave în aceste fire de Twitter, dar de mult timp îmi doresc să-mi iau timpul pentru a te afunda adânc în ceea ce înseamnă că cred că este atât de fundamental rupt de modelul actual de instrument de proiectare. ca indiciu în direcția cred că ar trebui să ne îndreptăm.

Toți facem doar imagini. Este nebun.

Aproape toate instrumentele de design populare exportă în imagini. Acest lucru este problematic din mai multe motive:

  1. Nu puteți interacționa cu o imagine. Instrumentele de prototipare ne permit să adăugăm tranziții de ecran și interacțiuni simple la imagini. Cu toate acestea, deoarece produsele noastre continuă să solicite tranziții de ecran și micro-interacțiuni mai avansate, imaginile pur și simplu nu pot păstra pasul.
  2. Imaginile nu sunt fluide. Comunicarea deciziilor de proiectare receptivă prin imagini este de obicei o sarcină dificilă.
  3. Imaginile nu sunt statuale. Pentru a comunica eficient diferitele state pentru o interfață de utilizator, deseori multe imagini sunt necesare.
  4. Imaginile Bitmap depind de rezoluție. Odată cu apariția dispozitivelor de retină, imaginile pot fi redate uneori slab.
  5. Fișierele cu imagini tind să fie grele și sunt adesea greoaie pentru a stoca, gestiona sau partaja.

Atâta timp cât instrumentele de proiectare continuă să exporte imagini, acestea nu vor putea niciodată să producă reprezentări precise ale produselor noastre. Această lipsă de precizie împiedică comunicarea între proiectanți și dezvoltatori. Atâta timp cât designerii continuă să folosească un mediu neplăcut inadecvat pentru a-și comunica munca, acea muncă va fi întotdeauna deschisă pentru interpretarea greșită.

Acesta este un punct foarte important, deoarece, în centrul lor, aproape toate instrumentele de proiectare transformă forme vectoriale în imagini. Photoshop, Illustrator, Marvel, Adobe XD, Sketch și Figma sunt la fel în această privință. Cu toate acestea, imaginile nu pot comunica decât parțial intenția de proiectare. Pe măsură ce produsele noastre continuă să adopte și să susțină interacțiuni complexe, intrare vocală, intrare video, realitate augmentată, realitate virtuală, sensibilitate la temperatură etc., valoarea pe care aceste instrumente o furnizează se va diminua rapid. Designul bazat pe imagini este un punct mort.

Instrumentele noastre de proiectare ar trebui să manipuleze produsul propriu-zis, nu o imagine a acestuia.

Produsele noastre sunt interactive. Instrumentele noastre sunt statice.

Am atins acest aspect în punctul meu anterior, dar este foarte critic, așa că m-am gândit că voi elabora puțin.

Gândiți-vă la cantitatea de interacțiuni simple care sunt obișnuite în aproape toate produsele noastre, dar nu pot fi comunicate prin intermediul instrumentelor noastre de proiectare. Iată o scurtă listă din partea de sus a capului meu:

  • Prin apăsarea unui buton
  • Focalizarea unei intrări
  • Bifând o casetă de selectare
  • Conținut tăiat
  • Zonele de defilare
  • Tab index pentru stări focalizate
  • Comenzile rapide de la tastatură

Sigur, unele dintre aceste caracteristici pot fi imitate cu unele inginerii hacky, dar trebuie să ne întrebăm, care este ideea pe Pământ? De ce designerii nu pot proiecta doar produsul real ?! În cele din urmă, toate modelele sunt de unică folosință, dar designerii petrec luni întregi modificându-le la perfecțiune. Acest timp ar fi mult mai bine petrecut în reglarea produsului propriu-zis.

Nu voi merge prea departe în gaura iepurelui „ar trebui să codeze designerii”, dar nu sugerez să scriem codul. Spun doar că nu există niciun motiv bun pentru care instrumentele noastre de proiectare nu pot susține manipularea directă a produselor noastre vii.

Framer face o treabă mai bună decât majoritatea din acest departament, susținând interacțiuni avansate și detaliate. Restul ambalajului sunt foarte departe.

Instrumentele noastre ar trebui să sprijine paradigma de dispunere a web-ului

Până acum aproximativ un an, singura modalitate de a construi machete pe web a fost utilizarea afișajului: tabel și proprietăți CSS cu aliniere verticală. Acum avem Flexbox și în curând vom avea grilă CSS. Aceste trei motoare de dispunere funcționează destul de similar, utilizând fluxul DOM. Aproape toate site-urile web sunt construite folosind unul dintre aceste trei sisteme de dispunere.

Deci, are sens că instrumentele noastre de proiectare acceptă același model de aspect. Dreapta?

Ei bine, aproape toate instrumentele de proiectare ignoră aceste sisteme de dispunere, în schimb optează pentru poziționarea fiecărui strat în interiorul tabloului de artă. Acest lucru deschide o prăpastie între modul în care funcționează webul și modul în care funcționează instrumentele noastre de proiectare, introducând numeroase probleme:

  • Proiectarea sensibilă devine foarte dificilă, deoarece fiecare strat trebuie reamenajat manual pentru fiecare punct de întrerupere. În mod alternativ, poate fi introdus un sistem de dispunere bazat pe constrângeri, dar care adaugă complexitate, accelerează curbele de învățare și, în final, împiedică dezvoltatorii să transfere aspectul direct pe web.
  • Deoarece fiecare strat se află în afara fluxului documentului, manipularea conținutului devine dificilă. De exemplu, dacă doriți să adăugați un articol într-o listă, trebuie să repoziționați manual celelalte elemente din listă. Desigur, pot fi introduse funcții repetate și alte funcții fanteziste pentru a ușura durerea, dar din nou, acest lucru introduce un plus de complexitate și complică ceva pe care DOM ne oferă gratuit.
  • Poziționarea absolută duce în mod natural la coordonate și dimensiuni fixe ale pixelilor. Acest lucru crește inflexibilitate și, din nou, este o îndepărtare uriașă de modul în care funcționează web-ul. Web-ul este construit pe unități fluide precum em, rem, vh, vw și%. Instrumentele noastre ar trebui să accepte aceste unități în mod implicit.

Instrumentele de proiectare nu ar trebui să fie asemănătoare sau care să reflecte web-ul și nuanțele sale - trebuie doar să fie web.

Un instrument monolitic nu este așa

Un design bun se întâmplă în etape. Un sistem de proiectare bine structurat are câteva straturi distincte:

  1. Paleta de stiluri O colecție de culori, umbre, distanțare, raze de graniță, caractere tipografice, dimensiuni de fonturi, animații și alte stiluri care formează identitatea dvs. de marcă. În prezent, majoritatea instrumentelor de design acceptă doar paletele de culori. Până când nu vor susține celelalte proprietăți de stil, va fi extrem de laborios să proiectăm sistematic.
  2. Active Aceasta include elemente precum pictograme, ilustrații și imagini. Există niște editori de imagini fenomenale, iar instrumentul vectorial Figma este excelent, dar când vine vorba de suport SVG, instrumentele noastre de design lasă mult de dorit.
  3. Biblioteca de componente O componentă este o colecție de stiluri și active care redă datele unui singur element într-o varietate de variații. Exemple includ butoane, intrări, ecusoane etc. După cum am menționat, Figma și Sketch au extras recent acest proces departe de fluxul principal de desen - este păcat că sunt doar imagini cu componente și nu componente reale.
  4. Module Un modul / compoziție este o colecție de componente care redă datele unei bucăți UI încapsulate într-o varietate de stări. Exemple ar putea include barele de antet, meniurile cu file, formularele de autentificare, tabelele, deoarece modulele sunt doar componente complexe, cred că Figma și Sketch se pot ocupa și de acestea. Deși poate exista un oarecare merit pentru separarea celor doi.
  5. Ecrane Un ecran este o colecție de module, componente și date pentru a forma o interfață de utilizator completă cu care utilizatorul poate interacționa.

Majoritatea instrumentelor de proiectare oferă funcții care susțin fiecare dintre aceste etape de proiectare, cel puțin într-o oarecare măsură. Problema este că toate etapele sunt combinate. Aproape toate instrumentele de proiectare oferă un singur mod - modul de desen. Creați un set de planșe și începeți să desenați imagini. Doar foarte recent, instrumente precum Sketch și Figma au abstractizat componente / simboluri departe de modul de desen principal - ceea ce este ciudat, deoarece în dezvoltarea front-end, componentele au fost abstractizate de mulți ani.

În timp ce proiectează o paletă de stil, nu trebuie să văd tablouri sau instrumente vectoriale. Vreau să văd instrumente pentru alegerea culorilor armonioase. Vreau presetări pentru lucruri precum o scară de spațiu de 8dp sau o selecție de scale de tip.

Proiectarea unei pictograme necesită un mod de gândire complet diferit pentru proiectarea unui flux de utilizatori. Un simplu editor SVG care mi-a permis să desenez dreptunghiuri SVG native, cercuri, linii și căi, apoi exportul de cod SVG optimizat ar fi ideal.

În timp ce proiectează o componentă, nu ar trebui să mă mai gândesc la stiluri individuale - ar trebui să aleg pur și simplu stiluri din paleta mea de stil predefinită. Nu pot începe doar stilurile de reglare pentru o componentă, deoarece asta ar introduce inconsistența, diluând eficacitatea sistemului meu de proiectare. Odată ce o paletă de stil este pusă la punct, ar trebui să fie editabilă doar la sursă.

În mod similar, în timp ce compun un modul, ar trebui să fiu expus doar la biblioteca mea de componente predefinite. Nu trebuie să existe proprietăți de stil într-o bară laterală. Nu există instrumente vectoriale. Doar o bibliotecă de componente refolosibile pe care le pot trage și fixa pentru a compune module.

Același lucru este valabil și pentru compunerea ecranelor. În acest moment, reutilizăm doar componente și module pentru a construi o UI. Nu ne gândim la stiluri sau forme sau alte eforturi creative. Ne-am concentrat în principal pe proiectarea fluxurilor de conținut și de utilizatori.

Fiecare dintre aceste etape de proiectare ar putea avea loc în instrumente separate complet sau doar moduri diferite în cadrul aceluiași instrument. Nu cred că contează prea mult. Un lucru este sigur, însă, majoritatea instrumentelor de proiectare actuale nu reușesc nici măcar să recunoască procesul.

Instrumentele noastre ar trebui să încurajeze un design bun

Designerii au rarul lux de a putea adăuga un număr infinit de stiluri unice unui proiect fără repercusiuni vizibile. Aveți nevoie de o dimensiune de font ușor mai mare? Doar dă-i drumul. Fără biggie. Aveți nevoie de o culoare puțin mai strălucitoare? Doar modifică-l. E cool. Puteți crea chiar mai multe planșe de artă în același proiect, fiecare folosind valori ușor diferite pentru stiluri similare și probabil că ar trece neobservat.

Instrumentul dvs. de proiectare nu vă va spune niciodată că nu puteți face ceva. Niciodată nu vă va atrage pentru a utiliza o culoare off-brand. Nu vă va împiedica niciodată să utilizați o valoare spațială care nu aparține scării de spațiere. Nu vă va avertiza niciodată că 20% din populație literalmente nu pot vedea acel text gri deschis pe care tocmai l-ați conceput.

De ce nu…? Pentru că instrumentele de proiectare nu le pasă.

Instrumentele de proiectare sunt atât de încântate de o viziune pentru o creativitate nelimitată încât au pierdut din vedere ceea ce înseamnă să proiectăm în mod sensibil, să proiectăm inclusiv, să proiectăm sistematic.

Simplu, instrumentele de proiectare ne permit să facem orice ne dorim. Într-o oarecare măsură, acest nivel de creativitate nelimitată este util, mai ales în fazele de idee. Ca designeri UI, însă, majoritatea fluxului nostru de lucru nu necesită prea multă creativitate. Mai degrabă, fluxul nostru de lucru solicită reutilizare, repetare, familiaritate și standardizare; nevoi pe care instrumentele noastre nu prea le pot satisface

Această libertate nelimitată este în contradicție cu realitatea dezvoltării web. Întrucât dezvoltatorii lucrează cu produsul real, toți trebuie să lucreze cu același cod. Dezvoltatorii nu pot adăuga pur și simplu dimensiuni de font izolate sau valori de culoare aleatoare la baza de cod. În primul rând, o linterie (un mesaj de avertizare despre un cod slab scris) ar începe probabil să urle imediat. Dacă nu, atunci măiestria lor înfricoșată ar fi probabil prinsă în timpul unei analize a codului. Dacă ar fi reușit cumva să alunece prin fisuri, un impact vizibil asupra performanței va suna în cele din urmă alarma.

Una dintre cele mai perturbatoare probleme pe care le văd în echipele de produse este deconectarea dintre echipele de proiectare și dezvoltare. Dezvoltatorii lucrează cu ghiduri și restricții stricte de ani buni. Dacă instrumentele noastre de proiectare nu adoptă aceleași constrângeri, decalajul nu se va reduce niciodată.

Ar trebui să proiectăm cu date live

Datele live au fost încorporate într-o oarecare măsură de o mulțime de instrumente, ceea ce este minunat de văzut. Adobe XD are unele caracteristici foarte bune pentru generarea de date false care seamănă cu date live tipice. Invision Craft oferă, de asemenea, câteva caracteristici excelente de date live pentru Sketch.

Cu toate acestea, datele live nu ar trebui să se oprească cu textul. Alte elemente precum imaginile și videoclipurile pot avea un impact imens asupra experienței utilizatorului prin creșterea semnificativă a timpului de încărcare. Dacă lucrați pe web, instrumentele dev browser vă permit să accelerați conexiunea pentru a semăna cu o varietate de viteze de internet. Apoi, puteți vedea în primul rând cum un nou conținut ar putea afecta experiența utilizatorului.

Instrumentele noastre de proiectare ne permit aceste luxuri?

Într-un cuvânt: nu.

Cu cât ne apropiem mai mult de proiectarea produsului propriu-zis, cu atât mai util și de impact poate fi munca noastră de proiectare.

Web-ul este deschis. Instrumentele noastre ar trebui să fie și ele.

Unul dintre lucrurile cu adevărat frumoase despre web este accesibilitatea sa deschisă. Un site web poate fi vizualizat în orice browser web pe aproape orice dispozitiv.

Cum se compară asta cu instrumentele de proiectare? Ei bine, acum câteva zile, fratele meu David mi-a cerut o recenzie de proiectare a unei aplicații pe care o construiește. Mi-a trimis un dosar Sketch. Când am deschis-o, s-a întâmplat ...

Majoritatea instrumentelor de proiectare sunt grădini cu pereți. Dacă un coleg lucrează în Photoshop, un alt coleg nu poate deschide acel proiect în Sketch. Nu este chiar suficient să aveți întreaga echipă folosind același instrument - trebuie să folosească și aceeași versiune a instrumentului respectiv.

Marvel și Figma fac o treabă bună aici, oferind planuri gratuite și caracteristici inovatoare de colaborare.

Deci, care este viitorul instrumentelor de proiectare?

Inovația în domeniul instrumentelor de proiectare este extrem de valoroasă și a existat o mulțime de lucruri recent. La instrumentele de proiectare Airbnb, Jon Gold și Benjamin Wilkins au lucrat la React-Sketchapp, care preia componentele React și le redă în Sketch. Jon și Ben au lucrat, de asemenea, la un nou instrument minunat, care ia schițele șervețelului și le transformă cumva în componente React.

Adam Morse, Brent Jackson și John Otander lucrează la o serie de instrumente la Compositor care rezolvă practic toate problemele din acest articol și poate din lume.

Lucrez la Modulz, un nou instrument de proiectare și un sistem de design open-source, care are ca scop și rezolvarea problemelor menționate în acest articol. Dacă sunteți interesat, urmați pe Twitter pentru actualizări.

Deși inovația în instrumente este importantă, adevărata provocare este educația. Comunitatea de proiectare nu este pur și simplu pregătită pentru un instrument sistematic de proiectare. Mulți designeri nu au prea puțin interes pentru sistemele de construcții. Pentru unii, JPG-ul este obiectivul final - Dribbble îi place.

Trebuie să inspirăm cumva o cultură a răspunderii. Dezvoltatorii au o cultură a răspunderii de ani de zile. Au instrumente pentru a-și menține codul sub control. Dacă un dezvoltator se abate în mod repetat de la ghidurile de cod stricte, puteți fi sigur că problema va fi abordată.

Între timp, proiectanții adună frecvent munți de straturi în dezordine completă, având în vedere puțină atenție denumirea, gruparea și ordonarea straturilor. Este foarte mult pentru fiecare. Deoarece ieșirea (imaginea raster) nu este afectată de intrare (straturi vectoriale), nu există nicio sarcină reală asupra proiectanților care trebuie organizate. Proiectanții scuză adesea această lipsă de organizare, romanticizând arta designului, pictându-se ca magii care trebuie lăsați la propriile dispozitive pentru a face performanță.

De asemenea, trebuie să inspirăm o cultură a incluziunii. Ar trebui să descurajăm în mod activ abaterile de genul, cum ar fi culorile de text ultra ușor, ceea ce face ca textul să fie greu de citit pentru mulți oameni sau tipografii de înaltă calitate, care fac ca paginile web să se încarce lent sau elemente de model fără interfață care să facă lucrurile dificil de înțeles pentru persoanele nevăzute. În prezent, acest tip de malpraxis este aplaudat în rândul comunității de proiectare. Dacă dorim să primim un instrument inteligent de proiectare, trebuie să inversăm această cultură.

Dacă un instrument sistematic de proiectare este să ne câștige inimile, trebuie mai întâi să educăm.