Copiați dacă puteți: îmbunătățiți-vă abilitățile de proiectare a interfeței de utilizare cu copiere

Ce se petrece aici?

Vorbesc despre copywork. Copywork-ul este o tehnică pe care scriitorii și pictorii o folosesc de secole. Este procesul de recreare a unei lucrări existente cât mai aproape posibil pentru a-și îmbunătăți abilitățile. În cazul nostru, aceasta înseamnă recrearea unui pixel de design al interfeței de utilizator (UI) pentru pixel.

Citiți suplimentare despre SmashingMag:

• Cum să vă transformați creativitatea și rezolvarea problemelor
• Utilizarea Sketch pentru Web Design responsive
• Înțelegerea drepturilor de autor și a licențelor
• Arta dezordonată a schiței UX
  

Nu este atât de inutil pe cât pare, promit. Trucul este să alegi un design care este mai bun decât ceea ce ești capabil în prezent. Copiind ceva în afara timoneriei, îți vei extinde abilitățile.

Deci, dacă doriți să vă îmbunătățiți utilizarea culorii, copiați ceva cu niște degrade nebunești sau o paletă îndrăzneață. Dacă doriți să vă îmbunătățiți brandingul de lux, copiați un site web preeminent, cu un aspect elegant.

Evident, această tehnică nu este știință rachetă. De fapt, ar fi greu să te gândești la un exercițiu mai banal. Dar este cel mai eficient mod pe care îl cunosc pentru a-mi îmbunătăți abilitățile de design UI.

Dar trecem înaintea noastră.

Scriitori Copierea Scriitorilor

Am auzit prima dată despre copywork pe blogul The Art of Manliness, unde Brett McKay oferă o istorie lungă a celor care au folosit copywork pentru a-și dezvolta abilitățile de scris.

• Jack London a copiat fragmente din scrisul lui Rudyard Kipling pentru a adapta cadența și fraza de clasă mondială a strămoșului său.
• Robert Louis Stevenson studia cu meticulozitate secțiunile scrise pe care le găsise deosebit de frumoase, apoi le reproducea cuvânt cu cuvânt din memorie.
• Benjamin Franklin a urmat o variantă de copiere, scriind note despre fiecare propoziție dintr-un eseu și apoi, câteva zile mai târziu, încercând să recreeze eseul citind notele sale - și comparând rezultatele.

Lista continuă. Știu că Raymond Chandler, celebrul scriitor de mistere, a folosit o tehnică asemănătoare cu cea a lui Benjamin Franklin, rescriind o noveletă dintr-o descriere detaliată, apoi comparând-o cu originalul pentru a studia fluxul.

De fapt, i-a scris autorului original mai târziu în viață, spunându-i cât de instructiv a fost exercițiul. Fii atent la analiza lui:

Am aflat că cea mai dificilă parte a tehnicii tale a fost abilitatea de a pune peste situații, care s-au apropiat de neplauzibil, dar care în lectură părea destul de reală. Sper că înțelegi, vreau să spun asta ca un compliment. Nici măcar nu m-am apropiat să o fac eu. Dumas avea această calitate într-un grad foarte puternic. De asemenea, Dickens. Probabil că este elementul fundamental al oricărei lucrări rapide, pentru că munca rapidă în mod natural are o mare măsură de improvizație, iar a face ca o scenă improvizată să pară inevitabilă este un truc.

Acesta nu este un exercițiu de memorare. Chandler este extrem de atent la diferențele dintre opera sa și originalul și este bine versat în subtilitățile stilului multor autori. Puteți vorbi acest lucru în mod articulat despre designul UI? Dacă nu, pot recomanda copierea?

Așa cum un scriitor care copiază cele mai mari dinaintea lui absoarbe în mod inconștient cele mai mici alegeri făcute de acei autori - alegerea cuvintelor, fraza, cadența și așa mai departe - un designer care face copywork absoarbe, de asemenea, cele mai subtile alegeri din desenele pe care le studiază - spațierea, aspectul, fonturile. , elemente decorative. Aici constă puterea sa.

Să aruncăm o privire rapidă la copierea într-o altă formă de artă, totuși, una cu o istorie remarcabil de lungă.

Pictura Vechii Maeștri

Dacă ați rătăcit printr-un muzeu de artă, probabil că ați văzut copywork în acțiune. În afară de propriul meu birou, este singurul loc în care l-am văzut.

Pictorii au o istorie și mai lungă decât scriitorii de a copia maeștrii. Leonardo da Vinci și-a dezvoltat arta (una dintre artele sale, oricum) prin copierea profesoarei sale, Andrea Del Verrocchio - o practică comună printre artiștii ucenici ai Renașterii. Da Vinci a prescris de fapt copywork ca practică numero uno pentru studenții la arte:

Artistul ar trebui mai întâi să-și exercite mâna copiend desene din mâna unui bun maestru.

De ce? Pentru că copierea directă de la un master oferă o setare controlată în care să-ți antrenezi ochiul.

Când pictați o scenă live, pe de altă parte, sunt multe de care să vă faceți griji — modelul se va mișca, vântul se va ridica, soarele va apune. Până când creierul tău poate gândi în mod natural în formă și culoare, pictura în lumea reală va fi dificilă. Dar, în studio, îți poți lua tot timpul de care ai nevoie pentru a absorbi elementele de bază.

În timp ce designerii UI nu modelează nimic după o scenă naturală în același mod ca pictorii, copywork-ul oferă o modalitate utilă de a elimina variabilele și distragerile în timp ce îți perfecționezi abilitățile.

Dar, deși odată a fost un exercițiu de bază al unora dintre cei mai mari artiști ai lumii, copywork-ul a căzut în disgrație. În zilele noastre, este privit ca un memoriu, necreativ și miroase a plagiat.

Deci, de ce ar trebui un designer UI să copieze pentru practică?

Este totul despre (recrearea) detaliilor

Esenta este aceasta: atunci când recreați un design, pixel cu pixel, sunteți forțat să refaceți fiecare decizie luată de designerul original. Ce font? Cat de mare? Cum sunt aranjate lucrurile? Ce imagini și fundal și decorațiuni? Te cufunda în micile decizii de design luate de designeri minunați.

Ai putea argumenta că ai pierde toate alegerile pe care designerul le-a luat în considerare și motivul pentru care a ales ceea ce a făcut. Destul de corect - dar asta nu e rostul. Efectuat corect, copywork-ul vă expune la decizii de proiectare pe care pur și simplu nu le-ați fi luat singur.

Să luăm un exemplu. Una dintre cele mai extinse piese de vocabular pe care le-am copiat este minunatul site Epicurrence al lui Dann Petty. Am interiorizat trei lucruri numai din antet:

• Dimensiunea fontului nebunește de mare . Copia mea a originalului includea inițialele Hawaii „HI” în font de mărime 365. Niciodată în anii mei de muncă profesională nu m-am gândit să fac text atât de mare. Cu toate acestea, îl folosește ca element vizual, aliniindu-l cu celelalte elemente de antet, punând chiar și o imagine între litere. Foarte tare.
• Contur de vopsea ca „umbră” O pată de acuarelă trece pe partea inferioară a sigiliului, a antetului și a ananasului. Este în locul unde ar putea fi o umbră, ca și cum umbra ar fi pictată pe pagină. Uau, asta nu este modul obișnuit de a face asta!
• Tip majuscule cu spațiere generoasă între litere . Fără îndoială, acel text cu majuscule adaugă un element puternic de aliniere, iar creșterea spațierii dintre litere este o modalitate manuală de a adăuga o oarecare clasă la tastare, dar devin conștient de faptul că o fac mult. A fost cool să văd că tot textul de aici este scris cu majuscule și, practic, tot are și spațierea dintre litere modificată.

Acum, văzusem designul lui Dann Petty înainte de a decide să-l copiez. M-am gândit: „Uau, asta arată grozav”. Și chiar dacă ochii mei au trecut peste design, nu este ca și cum aș interiorizat imediat fiecare tehnică pe care a folosit-o. Abia când l-am copiat, am început să adopt în mod conștient aceste lucruri în setul meu de instrumente UI.

Iată un alt exemplu, pictograma Skedio setată de designerul principal de pictograme Vic Bell. (Originalele ei sunt în albastru, copia mea în roșu.)

Acesta a fost un exercițiu fascinant pentru mine, în special pentru că pictogramele lui Vic sunt cu un pas sau doi mai detaliate decât majoritatea a ceea ce fac pentru aplicațiile la care lucrez. Ea a adăugat această complexitate în două moduri subtile:

• O a doua nuanță mai deschisă de albastru . Comparați culoarea de umplere a pictogramei „Setări” (rândul 2, pictograma 1) cu culoarea conturului. Majoritatea pictogramelor pe care le-am proiectat au o singură culoare.
• O a doua lățime de linie, mai ușoară . Îl puteți vedea în „textul” pictogramei „Etichete” (rândul 1, pictograma 2) și în săgeata de pe pictograma „Actualizări” (rândul 1, pictograma 3). Am trăit după regula conform căreia consistența este primordială în designul pictogramelor, așa că a fost fascinant să văd utilizarea de către Vic a liniilor de accent de 3 pixeli într-un set de linii în principal de 4 pixeli.

Dar puterea copywork-ului nu constă doar în a vedea aceste detalii la un nivel superficial, ci și în a deveni familiarizat cu modul în care sunt utilizate în design.

Să luăm ideea celei de-a doua nuanțe, mai deschise. Un lucru este să decizi să folosești o a doua nuanță ca culoare de accent. Iată patru moduri în care Vic a folosit nuanța mai deschisă în acest set de pictograme:

• Ca o umbră . Capacul coșului de gunoi al pictogramei „Ștergeți” (rândul 2, pictograma 3) are acest albastru secundar în umbră. Puteți vedea o umbră similară, dar și mai subtilă, sub medalion în pictograma „Actualizări” (rândul 1, pictograma 3).
• Ca o licărire de lumină . Nuanța mai deschisă este folosită ca reflectare a luminii în lupa pictogramei „Căutare” (rândul 3, pictograma 5).
• Pentru contrastul de culoare . Vic folosește albul și albastru deschis ca două culori contrastante în inelul de salvare al pictogramei „Ajutor și feedback” (rândul 1, pictograma 4). Aceeași poveste cu creionul din pictograma „Redenumire” de sub el (rândul 2, pictograma 4).
• Pentru contrastul vizual al greutății . Acesta a fost cel mai subtil pentru mine. Observați cum cărțile de fundal - dar nu și cardul din prim-plan - ale pictogramei „Toate schițele” (rândul 1, pictograma 1) și pictogramei „Straturi” (rândul 3, pictograma 5) sunt albastru deschis. Cardul din prim-plan în ambele este alb, oferindu-i mai mult contrast cu restul pictogramei. Dacă cardurile de fundal aveau umpluturi albe, atunci contrastul puternic dintre marginile și umpluturile lor ar fi distras atenția ochiului - așa cum este, ochiul este îndreptat direct către cardul din față.

Aceste strategii sunt mai detaliate decât ar intra în orice clasă despre pictograme. Sunt sfaturi și tehnici unice care merg direct din mintea unui maestru la a ta, dacă ești dispus să depui efortul în a face copywork.

Bine, hai să acoperim încă un exemplu aici.

Am văzut designul Dia de los Muertos al lui Taylor Perrin nu cu mult timp în urmă și m-a uluit. El face o treabă fantastică folosind elemente cu care mă lupt, cum ar fi fotografii frumoase, texturi bogate și machete panoramice.

O mare parte din acest lucru se datorează a ceea ce îmi petrec timpul proiectând - în principal aplicații de informații pentru companii. Aspectul este curat și simplu, brandingul stabil.

Copierea machetei lui Taylor Dia de los Muertos mi-a extins gândirea de design în mai multe moduri:

• Un nou flux de lucru . Am fost un mare susținător al Sketch-ului încă din prima zi și chiar predau un curs de UI bazat pe Sketch, dar simplitatea lui are dezavantaje. Și anume, de când am trecut de la Photoshop la Sketch, reflexele mele de design au tins mult spre ca totul să fie dreptunghiuri plate. În acest exercițiu, am texturat aproape fiecare fundal de pe întreaga pagină și a fost o reamintire grozavă că o trecere în Photoshop în timpul procesului de proiectare îmi permite mult mai multă versatilitate în stil decât dreptunghiuri colorate simple.
• Faceți să strălucească bunurile decente . Unul dintre primele atuuri pe care a trebuit să le urmăresc și să le remodez a fost ilustrarea scheletului cântând la corn. Când l-am găsit online, am fost dezamăgit. De fapt, dacă aș fi proiectat macheta originală și aș fi găsit acea ilustrație, probabil că aș fi renunțat la ea. Cu toate acestea, arăta grozav în macheta lui Perrin. Compararea imaginii originale cu macheta sa a fost o lecție în toate lucrările de curățare pe care le puteți face cu active mediocre și în imaginarea utilizării lor dincolo de aspectul lor imediat.
• Aspecte pe toată lățimea . Deși a devenit popular ca aspectele panoramice să acopere lățimea paginii, indiferent cât de lat este ecranul, am făcut foarte puțin din asta. Acest exercițiu a fost un mare spor de încredere pentru acest tip de aspect. Pe măsură ce copiam, aș încerca să ghicesc anumite detalii (cum ar fi dimensiunea fontului unei anumite piese de copie) și să văd ce mi s-a părut corect; apoi, am verificat si ajustat. Data viitoare când fac un aspect de 1400 de pixeli lățime, nu mă voi simți ciudat că titlurile au 60 de pixeli.

Deci, sunt la fel de bun ca Dann Petty sau Vic Bell sau Taylor Perrin acum? Mi-e teamă că va dura ceva timp - se numără printre cei mai buni designeri de UI din joc. Dar mai bine credeți că în fiecare zi îmi împing setul de abilități și tehnici pentru a le încorpora know-how-ul.

Intrebari obisnuite

Când faceți copiere?

Încep multe dimineți cu 30 de minute de copiere. Aceasta are două beneficii:

• Mă energizează ziua pentru că învăț lucruri noi chiar când mă trezesc.
• Este o activitate de trezire cu energie redusă mult mai productivă decât verificarea e-mailului sau a rețelelor sociale. Trebuie făcut ceva în timp ce cafeaua se prepară.

Doar 30 de minute? Ce se întâmplă dacă nu termini o piesă?

Apoi continui a doua zi. Și așa mai departe.

Ce ar trebui să copiez?

Copiază ceva care împinge una dintre abilitățile tale dincolo de nivelul actual . Copiați ceva care prezintă o tehnică pe care nu ați perfecționat-o.

Pentru idei, îmi place să răsfoiesc Dribbble. Păstrez o găleată Dribbble de imagini copywork - lucruri pe care le-am găsit de la alți designeri pe care vreau să le copiez (sau le am deja).

De asemenea, pot recomanda câțiva designeri care și-au croit propriul stil și oferă multe celor care încă învață elementele de bază:

• Jonathan Quentin folosește foarte bine culoarea și degradeurile. Uită-te la munca lui pentru a-ți îmbunătăți culoarea.
• Brijan Powell este șeful în realizarea de modele elegante și de lux, dar complet masculine.
• Tubik Studio este fantastic la tot ce este luminos, colorat și vesel.

Deși folosesc Dribbble pentru copywork (este o modalitate excelentă de a răsfoi rapid și de a salva imagini de înaltă calitate), site-urile web live funcționează grozav. De exemplu, Blu Homes este următorul pe lista mea!

Dacă ești un designer profesionist, iată câteva idei suplimentare:

• Uneori copiez site-urile web și aplicațiile clienților mei dacă doresc mai multă lucrare de UI în stilul respectiv.
• Uneori copiez site-urile și aplicațiile potențialilor mei clienți, astfel încât încă de la prima conversație să am o cunoaștere mai profundă a limbajului lor de design vizual.

De exemplu, am făcut niște lucrări de design pentru Soylent, compania de înlocuire a mesei. De îndată ce m-au contactat, l-am pus pe lista mea de lucruri de făcut pentru a reproduce pagina lor de pornire. Am vrut să pot vorbi fluent despre modul în care au folosit culoarea, tipografia și imaginile.

Trebuie să copiez perfect originalul?

Cred că copierea este supusă unor randamente descrescătoare - deci, nu, nu trebuie să copiați perfect. Dar (și acest lucru este important) nu îl puteți copia mai rău decât originalul. Trebuie să obții ceva pe care îl consideri egal sau mai bun, chiar dacă detaliile nu se aliniază în totalitate.

Nu veți avea întotdeauna acces la aceleași fonturi și resurse, așa că diferențele ușoare sunt normale pentru curs. Am descoperit că Identifont și WhatTheFont sunt resurse excelente pentru a găsi fonturile folosite în imagini.

Copiați mai multe imagini în serie pentru a îmbunătăți o anumită abilitate?

Copierea a cinci modele care demonstrează excelența, de exemplu, în tipografie este o modalitate excelentă de a îmbunătăți acea abilitate. Cu toate acestea, prefer mult să mă duc la orice îmi atrage atenția. Este un bun contrabalans la ceea ce lucrez în acel moment și menține lucrurile interesante.

Copiați în Sketch sau în HTML și CSS?

Copiez în Sketch. Găsesc că CSS este un mediu slab pentru gândirea vizuală, iar copywork-ul este un exercițiu vizual. Scriind CSS, mă blochez să mă gândesc la modul corect de a poziționa fiecare element mic - care este exact genul de lucru de care să vă faceți griji dacă doriți să fiți un codator CSS bun, dar o distragere teribilă dacă încercați să vă îmbunătățiți abilități de proiectare vizuală.

Pot să-l pun în portofoliu?

Nu face asta. Portofoliile sunt pentru a vă prezenta propria lucrare. Copywork este doar un exercițiu pentru a vă îmbunătăți abilitățile de proiectare.

Asta nu mă va face să plagiez?

Nu, dar iată câteva sfaturi grozave de la designerul Sean McCabe despre evitarea plagiatului:

1. Savurați toată inspirația pe care o doriți.
2. Dormi pe el.
3. Produceți-vă noua lucrare din memorie.

De altfel, copierea din memorie, mai degrabă decât din originalul chiar în fața dvs., este o variantă de copiere care vă face mult mai puțin predispus la reproducere exactă. Cu toate acestea, aș recomanda acest exercițiu pentru copiatoare mai avansate. Lucrând orb, veți lua atât deciziile de nivel scăzut, cât și cele de nivel înalt, fără îndrumare. Dacă încercați să reproduceți ceva peste nivelul dvs., sunt multe de învățat din copierea directă.

Există un consens remarcabil în rândul artiștilor și al oamenilor creativi conform căruia creativitatea înseamnă în esență amestecarea a ceea ce există deja. Nimic nu este complet original.

Poeții imaturi imită; poeții maturi fură; poeții răi deturnează ceea ce iau, iar poeții buni îl transformă în ceva mai bun, sau cel puțin în ceva diferit. Poetul bun își sudă furtul într-un întreg sentiment care este unic, cu totul diferit de cel din care a fost rupt; poetul rău îl aruncă în ceva care nu are coeziune.

– TS Eliot

Am vrut să aud muzică care nu se întâmplase încă, punând cap la cap lucruri care sugerau un lucru nou care încă nu exista. – Brian Eno

Tot scrisul este de fapt decupaje. Un colaj de cuvinte citite auzite auzite. Ce altceva? – William S. Burroughs

Copywork-ul vă permite să vă inspirați și să o amestecați în propriul stil. O privire obișnuită asupra unui nou design grozav ar dezvălui doar nivelul de suprafață al tehnicii și stilului, dar cu copywork, vă puteți aprofunda și vă puteți extinde cu adevărat abilitățile.

Copywork este cu adevărat pentru mine?

Dacă nu ești cunoscut în întreaga lume pentru stilul tău inimitabil, atunci da, probabil ai beneficia de el.

Acesta acoperă cele mai frecvente întrebări pe care le primesc despre copywork. Este o practică simplă, dar care aduce dividende. Dacă copiați în mod constant piese care vă impresionează sau sunt peste nivelul dvs., atunci veți obține o mână - dacă nu zeci - de tehnici și tactici pe care le puteți aplica la orice lucru la care lucrați. Restul lumii artei a făcut asta de secole; este timpul ca designerii să ajungă din urmă.

Deci, data viitoare când doriți să vă extindeți vocabularul vizual, deschideți un design grozav (pentru început, puteți să răsfoiți găleata mea de copywork Dribbble pentru inspirație), puneți puțină muzică bună și începeți să scoateți pixeli.