Share
În acest articol am de gând să mă uit la ce este nevoie pentru a trece de la designer de icoane la icon-ul pro. Mă voi uita la modul în care a început proiectarea icoanelor, unde este astăzi și unde va fi în viitor, precum și la împărtășirea unor sugestii și sfaturi utile.
Cu puțin peste șase luni în urmă am început noua slujbă, unde mi sa cerut să extind un set existent de icoane. Mă gândeam foarte bine, pot să fac icoane, după ce i-am creat 100 de ori înainte. Apoi, când am văzut setul existent de icoane, mi-a fost un șoc destul de mare. Acestea au fost cele mai simple desene și am găsit-o într-adevăr o provocare pentru a face ceva atât de simplu. Am fost obișnuit să petrec mai multe ore pe icoanele pe care le-am creat de obicei încât părea ciudat că am petrecut doar zece minute pe această icoană pentru a le termina.
Aceasta mă face să mă gândesc la o serie întreagă de întrebări referitoare la icoane precum "ce face o pictogramă bună" și "cât timp ar trebui să fie cheltuit pe o icoană?". Voi împărtăși câteva dintre răspunsurile de mai jos. Am vorbit cu câțiva alți designeri de pictograme de top pentru a-mi lua procesul. Vom analiza, de asemenea, modul în care a început proiectarea icoanelor, unde este astăzi, și (mai important) unde va fi în viitor. Deci, stai cu mine, fă-ți o ceașcă de ceai și te simți fericit!
De unde provin aceste mici capodopere grafice? Totul a început în 1973, când computerele nu erau decât sisteme bazate pe DOS, în care utilizatorii navigau în jurul lor folosind comenzi. Acesta a fost un moment în care designul grafic în computere nu exista. Nu a existat cu siguranță nici o mișcare a degetului sau gesturi pentru a funcționa.
După cum vă puteți imagina, aceasta nu a fost cea mai ușoară cale de a vă apropia de mașină, iar o companie relativ bine cunoscută în SUA, numită Xerox, a fost ocupată cu eforturi pentru a încerca să depășească această problemă. In acelasi an au lansat si "The Xerox Alto", care a devenit primul computer din istorie care functioneaza folosind o interfata grafica de utilizator (GUI pe scurt). Abia după doi ani, când un anumit domn Steve Jobs și partenerul său în domeniul criminalității, Steve Wozniak, au luat ideile dezvoltate de Xerox și le-au transformat în primul sistem de operare disponibil în comerțul din lume pentru a utiliza o interfață grafică. A fost numit Macintosh. Doamnelor și domnilor, sa născut icoana!
Primele icoane care au apărut au fost luate de curtoazia Apple pe Macintosh. Cu siguranță, a fost o revoluție pentru calcul. Directoarele au prezentat acum o reprezentare grafică care apare ca dosare, fișierele arătau ca note, ceasuri și calculatoare, de asemenea, au apărut.
O pictogramă a computerului este o pictogramă afișată pe ecranul unui computer și folosită pentru a naviga pe un sistem informatic sau pe un dispozitiv mobil.
Iată câteva dintre cele mai importante principii de design atunci când creați icoane
Acesta este, fără îndoială, unul dintre cele mai importante aspecte ale designului icoanelor. Mai presus de toate, icoanele trebuie să fie simple, clare și concise. În cele mai multe cazuri, trebuie să creați o pictogramă într-un spațiu limitat. Trebuie să puteți descrie produsul, serviciul sau acțiunea dvs. în mod clar și punctual.
Icoanele funcționează cel mai bine când funcționează bine în alb și negru. Odată ce ați făcut acest lucru, puteți să vă mutați în adăugarea de culori și să le acordați icoanelor. În unele scenarii, poate fi o idee bună să utilizați un singur obiect sau un singur caracter, de exemplu. Această metodă funcționează, de obicei, deși poate fi nevoie de un alt obiect. Mai mult de două obiecte și m-aș apropia cu prudență, deoarece uneori pot apărea neclarități și pot descuraja focalizarea de pe pictogramă. Dacă vă aflați în această situație, încercați să îndepărtați obiectele până când mesajul dvs. este încă evident.
O pictogramă reprezintă o acțiune pe care un utilizator o va întreprinde
Dacă vi se dă sarcina de a crea un set de icoane, atunci va trebui să aibă o anumită formă de coerență pe tot parcursul. Acest lucru poate veni sub formă de palete specifice de culori, forme și obiecte. Coerența ar trebui să fie, de asemenea, prezentă în întreaga aplicație. Ce se întâmplă când utilizatorul dvs. face clic pe pictograma? Este ecranul pe care sunt luate în stil într-un mod similar cu pictograma dvs.? Dacă răspunsul este "nu", atunci este posibil să trebuiască să redați câteva dintre deciziile dvs. - utilizatorii fac de multe ori o legătură între cele două evenimente de a face clic pe o pictogramă și pe ecranul următor pe care se aterizează. Dacă întrerupeți această convenție, atunci există un risc mult mai mare de a sparge încrederea utilizatorilor.
Ce fel de persoană va face cel mai probabil clic pe pictograma? Este icoana vizată la vârsta de cinci ani sau la vârsta de șaizeci și cinci de ani? Este pentru utilizatorii din China sau utilizatorii din Anglia? Dacă creați o pictogramă legată de alimente, atunci nu ar fi de nici un folos folosirea bețișoarelor ca tacâmuri dacă este orientată spre piața engleză. Veți avea nevoie să vă gândiți la acest lucru și să vă asigurați că demografia țintă va putea să se refere foarte bine la designul dvs..
Acum, mai mult ca niciodată, icoanele dvs. trebuie să iasă din mulțime. Dispunând de magazinele de aplicații care apar tot timpul într-o varietate de dispozitive, de la telefoane inteligente la televizoare inteligente.
Aceste icoane de Ramotion și George Gliddon arată calitățile de icoane bune care pop. Dacă pictograma dvs. este pentru o aplicație, va fi adesea primul punct de contact pentru aceasta. E magazinul tău în lume. Oamenii sunt în cele din urmă influențați de design. Este posibil să aveți cea mai bună aplicație din lume, dar utilizatorii vor fi opriți dacă nu sunt implicați inițial de pictograma dvs. Gândește-te, ar intra într-adevăr într-un magazin care arăta la fel de scârbit ca și iadul din afară? Este același principiu; nu mulți oameni vor face următorul pas pentru a afla mai multe despre aplicația dvs. sau pentru a lua următorul apel la acțiune.
Ok, o să recunosc. Arta digitală a fost primul meu contact cu lumea artei. Photoshop a fost schița mea și mouse-ul a fost creionul meu. Nici nu m-am gândit să schițez lucruri înainte; după toate am fost mereu gunoi la desenul liber în timpul școlii. Abia după un an, când i-am explicat uneia dintre lectorii mei că ea sa întors spre mine și mi-a spus "Schița Aaron este prietenul tău". Apoi mi-a explicat cum nu trebuie să fii cel mai bun ilustrator din lume pentru a schița.
Schițarea icoanelor în primul rând poate servi adesea ca un punct de plecare decent pentru proiectarea finală. Schițarea nu vizează crearea unei reprezentări realiste a ceea ce puteți vedea, ci este mai mult o metodă pentru a crea baza unei idei, inspirație, concept sau viziune. Din acea zi am mereu un tabel de schi în jurul valorii cu mine și, mai des, că nu voi schița desenele mele pentru icoane. Acest lucru poate fi cu adevărat neprețuit și poate salva o grămadă de timp. Vă ajută să obțineți baza icoanei dvs. și poate servi adesea ca un punct de plecare decent pentru proiectarea finală.
Am reușit să apuc câteva minute împreună cu designerul de pictograme talentat Alex Volkov și i-am pus câteva întrebări cu privire la designul icoanelor.
Icoanele create de Alex Volkov. Acestea demonstrează progresele înregistrate de-a lungul anilor în ceea ce privește designul icoanelor. Cel mai important factor este acela de a găsi cel mai expresiv stil pentru a ilustra pictograma, care va corespunde sarcinii cel mai evident și cât de eficient își va îndeplini funcția. Mai presus de toate, pictograma ar trebui să fie frumoasă.
Depinde de sarcina icoanei, a ideii și a stilului selectat al acesteia. Poate dura de la două la șaisprezece ore. Este timpul să mă duc să creez pictograma, în timp ce timpul pentru căutarea ideilor și aprobarea cu clientul variază și, uneori, poate dura mult mai mult decât implementarea.
Iată câteva sugestii și sfaturi care ar trebui să vă ajute să schimbați desenele de iconițe de la primul nivel la altul. Desigur, ca și în cazul întregului design, cu cât încercați mai mult, cu atât mai multe erori veți face. Dar cu cât mai multe erori veți face, cu atât veți deveni mai bine.
Dacă doriți să adăugați realism la icoanele dvs., atunci este foarte important să înțelegeți din ce direcție lumina strălucește pe ea. Trebuie să puteți vizualiza (în cap) o lumină imaginară care strălucește pe pictogramă. Imaginea de mai jos demonstrează acest lucru.
Această imagine exagerată demonstrează sursa noastră de lumină și cum ar cădea pe icoană. De aici putem determina unde ar trebui să fie cele mai importante și umbre. Prin vizualizarea acestui lucru, putem adăuga pictogramele și umbrele pe pictograme, deoarece acestea vor cădea în lumea reală.
Când creați icoane, atenția la detalii este foarte importantă: glazuri, umbre, reflexe, reflexii, proprietăți ale materialelor. Uită-te la lumea din jurul tău și gândește-te cum ar arăta în viața reală. Interacțiunea și comportamentul cu lumina și materialele din jur sunt importante. Lumina poate cădea deseori diferit în condiții meteorologice diferite. De exemplu, lumina nu va călători la fel prin o cameră goală ca într-o încăpere cu fum. Când luăm în considerare acești factori putem crea nu doar o formă de icoană, putem crea icoane cu anumite stări și simțim.
Odată cu introducerea pe scena a telefoanelor inteligente (mai ales a iPhone-ului), a tabletelor și a aplicațiilor, icoanele au trecut printr-o revoluție. Niciodată icoanele nu păreau atât de lustruite, atît de reale, încât erau pline de adîncime, culoare și intensitate.
Această imagine prezintă dimensiunile diferite ale diferitelor pictograme ale aplicațiilor Limitările stabilite de iPhone și instrucțiunile privind modul în care pictogramele de aplicații pot fi afișate pe ecranul lor tactil. Cel mai evident, trebuie să se încadreze într-o cutie de 57 x 57 pixeli (114 x 114 pixeli înaltă). Aceste limitări impun imaginația comunităților de design și, ca urmare a acestui fapt, avem acum tot felul de icoane ciudate și minunate, care s-au bazat în jurul limitării pătratului pictogramei pătratului iPhone.
Unele limitări ale icoanelor au creat un nou stil de design icoanelor, cum ar fi acestea de Livie Leontidis, Ramotion și Jackie Tran Anh. Privind la drumul pe care icoanele l-au luat anterior, putem încerca să anticipăm cum vor apărea icoanele în viitor și ce formă ar putea să ia. Desigur, viitorul icoanelor se bazează în mare măsură nu doar pe principiile de bază ale designului bun al icoanelor, ci și pe instrumentele folosite pentru a crea acele icoane. De exemplu, pentru fiecare caracteristică nouă adăugată la software-uri precum Photoshop, acest lucru ar putea contribui la formarea viitorului icoanelor. Cu toate acestea, principiile de bază ale designului bun al icoanelor rămân aceleași. O persoană care știe probabil mai mult decât alții despre designul bun iconic este Rob Janoff. Rob a creat logo-ul mărului în anii '70. Am reușit să apuc o conversație rapidă pe Skype cu Rob, care mi-a spus ce crede că a făcut o pictogramă bună.
Ceea ce caut, de obicei, este simplitatea și eleganța. Odată cu apariția tehnologiei, există mai multe și mai complicate interpretări ale icoanelor. Ceea ce este frumos să se uite la, dar uneori tehnica este înlocuită de concept. Când lucrurile sunt foarte simple, ele sunt mai ușor de reținut. - Rob Janoff
Pentru a înțelege, de asemenea, viitorul icoanelor, ar trebui să ne uităm la platformele pe care sunt utilizate. Într-un interviu recent, Bill Gates a fost întrebat cu privire la viitorul internetului. El a raspuns:
Conexiunile rapide de internet și îmbunătățirile hardware vor face posibilă crearea unei pagini web care să ne ofere informații în 3D Bill Gates
Aceasta ar putea da o idee despre viitorul icoanelor. Poate că s-ar putea să se îndepărteze de obiectele plate 2d și să devină parte a lumii din jurul nostru. Icoanele ar putea deveni mânere pe care le tragem, le formează pe noi și obiectele pe care le apăsăm.
Icoanele viitorului vor deveni mai bune, mai profesioniste și mai interesante. Designerii încearcă deja să realizeze desene frumoase și se speră că această tendință va continua.
Însoțind acest articol este un .PSD pentru a descărca și utiliza în proiectele dvs., tweak sau doar pentru a arunca o privire prin. Motivul pentru includerea acestui design este de a vă prezenta câteva tehnici care sunt folosite în a treia parte a designului icoanelor; interpretare.
Primul pas ar trebui să fie acela de a colaționa toate ideile, de a arunca o privire în jurul internetului și de la obiectele pe care le vedeți în jurul vostru, încercați să obțineți inspirație (acest lucru vă ajută întotdeauna). Al doilea este să schițezi câteva idei și să te asiguri că apelul la acțiune sau mesajul pe care încerci să îl portrezi este clar, concis și evident. A treia parte este randamentul. Aceasta este partea în care începeți să adăugați culori, umbrire și iluminare. În opinia mea, este cea mai interesantă parte, deoarece atunci când icoanele noastre încep să vină la viață.
Aruncați o privire prin PSD și ar trebui să puteți vedea cum este construită pictograma.
Nu există nici o îndoială că icoanele au fost complet regenerate în ultimii ani și cine ar fi crezut că designerii ar pune atât de mult timp și efort în ceva care poate fi la fel de mic ca 16x16px!
Cu toate acestea, aceste icoane ne ajută să navigăm în jurul dispozitivelor noastre mai ușor și, în cele din urmă, să ne îmbogățească viața în fiecare zi. Vă puteți imagina cât de frustrant ar fi viața dacă am fi înapoi în anii '70 și trebuie să navigăm în jurul nostru utilizând instrucțiuni de comandă? Ar fi un coșmar. Din fericire, lucrurile au progresat de atunci și este datoria noastră ca designeri de a împinge granițele când vine vorba de icoane; ar trebui să îmbrățișăm tehnologiile pe care le avem astăzi în jurul nostru, astfel încât să putem produce icoane, așa cum nu au mai fost produse până acum. Dacă începeți doar cu designul de icoane sau dacă totuși sunteți o virgină icoană, atunci acum este momentul potrivit pentru a sari în a ști că sunteți acum înarmat cu cunoștințele fundamentale, din acest articol, care vă vor stabili pe potecile drepte pentru a crea propriile capodopere ale pictogramelor.
Până data viitoare, proiectarea fericită!
Accentsconagua