() translation by (you can also view the original English article)
A trecut un timp de când am mai facut acest tip de articol, dar azi m-am întors şi eu chiar cred că vă va place acesta. Am de gând să pun pe "stop" creativitatea şi să petrecem ceva timp de calitate împreună explorând istoria şi evoluţia acestor creaturi mici, care ne place să le numim "icoane".
Deci, dacă ești tot așa de nebun după designul de pictograme cât de mult sunt eu (putem da mâna zic eu), fă o oprire rapidă la cea mai apropiată maşină de espresso şi ia o ceaşcă de această licoare de boabe magice, şi apoi lasă-te uşor pe spate în scaun şi călătoria poate începe.
1. Icoane. Ce-ul, când-ul şi de ce-ul
Ei bine, cred că o mulţime dintre voi ştiu deja răspunsul, dar dacă ora de ştiinţe sociale "Metode şi tehnici de cercetare" mi-a învăţat ceva, este că pentru fiecare studiu (pentru care acest articol este în mod clar), ar trebui să începi întotdeauna la nivelul rădăcinii conceptului tău şi apoi treptat să construiești calea ta folosind mai multe straturi de informaţii.
Ce-ul
Deci, "icoana" este un substantiv de origine greacă (eikόn), şi este definit în conformitate cu dicţionarul online Merriam Webster ca "imagine religioasă convențională deobicei pictată pe un panou din lemn mic şi utilizată în adorarea religioasă de către creştinii estici."
Acum, cred că ne putem ridica o sprânceană mirată şi suntem de acord că acest lucru nu este exact genul de "icoană", care ne interesează, deoarece efectiv nu suntem în afacerea cu pictură de imagini laudei divinității pe lemn (sau cred că majoritatea dintre noi nu suntem), aşa că haideţi să încercăm să abordăm termenul dintr-o perspectivă mai modernă, tehnologică.
Din punct de vedere digital,o "icoană" este un "simbol grafic pe un ecran de afişare a calculatorului, care reprezintă un obiect (cum ar fi un fişier) sau o funcţie (cum ar fi o comandă sau ştergere)".
O explicaţie mai profundă poate fi găsită pe versiunea online a dicţionarul Cambridge unde ei o definesc ca "o imagine mică sau un simbol pe un ecran de computer pe care o țintești şi pe care dai clic cu un mouse pentru a da computerului o instrucţiune."
Acum, înainte de a trece mai departe, aş dori să subliniez faptul că deşi icoanele au fost iniţial create cu intenţia de a fi utilizate în cadrul interfeţelor grafice a calculatorului (desktop), s-au dovedit rapid utile, migrând spre alte dispozitive cu ecran, care au le-a adoptat din cauza uşurinţei lor de utilizare.
Când-ul
Primul set de icoane calculator s-a născut în 1981, când informaticianul David Canfield Smith şi designerul Norman Lloyd Cox și-au unit forţele pentru a aduce "office metaphor" la Xerox Star 8010, care a fost primul calculator destinat biroului din timpul său.
Ideea a fost ca Norman să proiecteze un set de articole de birou, cum ar fi documente, dosare, fișete, etc., pentru a defini primul stil de icon (artă pixel ) urmând a fi baza la altele apoi.
Ce-ul
Motivul pentru care icoanele au ajuns să existe este că computerele au avansat la un stadiu în care au avut nevoie de un simbol vizual capabil de facilitarea interacţiunii dintre software-ul lor de interfaţă (GUI sau Graphical User Interface) şi nevoile utilizatorului.
Acest lucru înseamnă că dintr-o perspectivă simbolistică, au o funcţie şi o semnificaţie, deoarece trebuie să transmită cu atenţie şi corect obiectul sau acţiunea care au fost destinate a-l descrie, folosind indicii vizuale, care au ca scop să fie auto-explicative.
Poți afla mai multe despre procesul de cercetare implicate în crearea acestor tipuri de metafore vizuale, prin citirea articolulului meu Top 10 sfaturi pentru crearea de icoane minunate, care va răspunde la cele mai multe dacă nu la toate întrebările tale.
2. Definirea stilului (creativ)
Deoarece articolul este axat pe prezentarea şi explicarea evoluţiei icoanelor din punct de vedere vizual, este normal că ne ia câteva momente pentru a vedea exact ce este "stilul", de multe ori termenul este înţeles greşit.
Dacă ne întoarcem la dicţionarul Merriam Webster, vom vedea substantivul definit ca "un anumit mod sau tehnică prin care ceva este făcut, creat sau efectuat".
O definiţie într-adevăr a fost în mintea mea, deoarece aceasta descrie termenul ca "un aspect distinctiv, deobicei determinat de principiile conform cărora ceva este conceput".
Pune ambele la un loc şi ne vom da mai repede seama că stilul este în esenţă o formă de exprimare (fie că este vorba de vizual sau de altă natură) bazat pe o relaţie complexă dintre metodele şi principiile atent alese şi dezvoltate de un creator (artist), pentru a aduce viziunea lui sau ei în formă.
Acum, de exemplu, stilul unui actor se poate uşor reduce la modul în care această persoană vorbeşte, umblă, şi arată. Cântăreţi se pot deosebi adoptând un anumit set de haine si o voce mai moale sau mai profundă.
Designerii, pe de altă parte, se străduiesc să depună eforturi pentru a realiza un sentiment de stil prin infuzarea caracteristicilor vizuale diferite, bazate pe metode şi tehnici care au fost dezvoltate printr-un lung proces de explorare şi rafinament, însușindu-și-le.
Aici devine un pic mai complicat, deoarece în design, stilul personal poate fi preluat rapid, imitat şi reiterat, transformându-l într-un stil colectiv, în cazul în care diferiți designeri urmăresc tehnici de compoziţie similare.
Acestea fiind spuse, niciun stil individual nu este complet pur, deoarece tot ceea ce este creat este de fapt o repetare vizuală şi/sau bazată pe evoluţia altcuiva.
3. Ce influenţează stilul?
În acest moment, am reuşit să obţinem un sentiment a ceea ce este "stilul", dar să luăm câteva momente şi să vedem ce factori pot influenta dezvoltarea şi evoluţia sa.
După cum ştim cu toţii, pentru fiecare formă de artă există un set de instrumente şi medii care influenţează creşterea şi popularitatea, iar proiectarea de icoane nu este o excepţie de la această regulă.
Ca designeri, ne petrecem zilele, creând produse digitale, care sunt menite să trăiască într-un mediu digital, care este influenţat de starea şi evoluţia tehnologiei determinate prin puterea de computarea şi avansurile display-urilor puse la dispoziţie în timpul vieţii cuiva. De aceea, călătoria de la icoane pixel la skeuomorphic complet dezvoltat a fost una foarte lungă, deoarece computerele nu aveau puterea pentru a afişa suma de pixeli pe care le avem în prezent.
Pentru designeri, acest lucru înseamnă că ei întotdeauna trebuie să se adapteze şi să devină complet dependenți de mediu, care, în funcţie de starea evoluționară poate influența stilul lor prin adăugarea sau eliminarea de limitări creative.
Un exemplu perfect în acest lucru este VR (realitatea virtuală) în cazul în căruia acuma începem a face avansuri imaginând posibilităţile şi limitările în acest mediu nou şi palpitant.
La început, am promis că studiul să se concentreze pe prezentarea şi descrierea pe scurt a zece stiluri care au modelat proiectarea de icoane până în starea sa curentă, Deci, fără a pierde mai mult timp, ia încă o înghițitură din acea cafea fierbinte şi haide să sarim direct în temă.
3.1 Cele trei originale
Vom porni lucrurile prin prezentarea trinității de la care au început toate.
Arta Icoanelor Pixel
Pe vremuri
Aşa cum am văzut câteva momente în urmă, primul stil de icoane vreodată, care a venit în existenţă a fost creat şi în funcție de tehnologia timpului său, atunci când computerele au fost lente şi designerii au trebuit să se ocupe cu display-ul monocrom.
Misiunea a fost de a face uz de limitările existente şi de a crea icoane folosind un proces elaborat de poziţionare într-un anumit număr de pixeli negri peste o grilă pătrată, până când simbolul a început a lua formă, de unde și vine numele stilului.
Stilul în sine poate fi descris doar ca și curajos, deoarece folosește linii grele, groase, negre pentru contururi şi linii mai moi, mai subţiri cu detalii pentru compunerea secţiunii interioare.
Pentru mine personal, icoanele pe bază de pixel sunt cu adevărat impresionante deoarece nu numai că au pus calculatoare personale pe piaţa de consum, dar ele au reuşit să fie relevante din cauza simplității naturii lor, în cei 36 de ani de existenţă, nu s-au schimbat mult, şi poate că e un lucru bun.
Acum
Astăzi, arta icoanelor pixel continuă să-și menţină popularitatea, deoarece acestea sunt declanşatoare puternice de nostalgie, aducând înapoi senzația şi aspectul din primele zile ale calculatorului, când stilul nu era despre cât de multe detalii încap într-un spaţiu mic, ci despre cum s-ar putea capta atenţia ochilor folosind elemente vizuale cât mai puţine posibil.
Icoane izometrice
Atunci
Anul 1985 este, şi ATARI tocmai a debutat cu TOS (The Operating System) la lansarea calculatorului Atari 520ST , fiind prima dată când vedem o evoluţie vizuală de la icoane pixel. Dacă înainte utilizatorul trebuia să se mulțumească cu icoane bidimensionale, acum experienţa se modifică în mai bine odată cu introducerea icoanelor izometrice, bazate pe aceeași "metaforă birou ", care a adăugat iluzia de profunzime şi dimensiunea la GUI (Graphical User Interface) folosind axe terţe.
În ceea ce priveşte stilul, acest lucru nu a fost o abatere radicală. Gândiți-vă mai mult ca la o îmbunătăţire vizuală, deoarece acestea erau încă pe bază de pixel, dar au adus unele modificări subtile, cum ar fi adăugarea de umbre grele proiectate și grosime uniformă.
Pentru unii, cuvântul "izometric" nu pare a fi cel mai bun mod pentru a eticheta stilul, deoarece prin definiţie, o proiecţie izometrică este o "metodă pentru a reprezenta vizual obiecte tridimensionale în două dimensiuni" în care "cele trei axe de coordonate apar la fel scurte şi unghiul dintre două dintre ele este de 120 de grade". Pentru mine personal, acestea ar putea fi văzute ca primele încercări de-a aduce o perspectivă nouă metaforei "office", care în cele din urmă a dus la ceea ce numim acum icoane izometrice.
Acum
Azi, stilul a văzut o abatere radicală de la originile sale monocrome pe bază de pixel, sprijinindu-se puternic pe utilizarea de culori și forme pentru a aduce la viaţă obiecte tridimensionale.
În ceea ce priveşte complexitatea, stilul este destul de dificil de stăpânit, deoarece este nevoie de designeri pentru a reimagina vizual obiectul pe care doresc să-l înfăţişeze folosind un cub rotit ca un obiect de referinţă, ceea nu este întotdeauna uşor, mai ales atunci când ai de a face cu forme ciudate de obiecte.
Icoane skeuomorphic
Apoi
Mergem înainte patru ani, iar lucrurile încep în sfârşit să rupă șablonul cu lansarea lui Steve Jobs calculatorului statiei de lucru NeXT, care a venit cu sistemul de operare NeXTSTEP OS.
Dacă până în acest punct icoanele erau gândite ca fiind simple simboluri destinate a uşura interacţiunea dintre om şi maşină, Jobs a dus-o la nivelul următor odată cu introducerea primelor icoane skeuomorphic, care au fost proiectate pentru a imita omologii lor reali.
Spuneți la revedere de la acele contururi groase, îndesate , şi salutați un nivel de măiestrie niciodată văzut înainte în interiorul un GUI (Graphical User Interface), caracterizat prin utilizarea de umbre şi foarte detaliate ilustraţii toate înghesuite în interiorul aceluiaşi spaţiu mic.
Acum
Odată ce computerele au devenit mai puternice şi tehnologia ecranului a evoluat, skeuomorphism-ul a devenit mai mult de o formă de artă decât un simplu simbol, împingând tehnicile și imaginația creatorilor săi la un punct în care obiectele descrise estompează linia de demarcaţie dintre pixeli şi realitate.
De la gradiente complicate la texturi realiste, reflexii şi umbre, procesul poate fi foarte greu de stăpânit în cazul în care nu aţi avut nicio instruire artistică. Dacă sunteţi interesați de acest stil, puteţi începe învăţarea prin recrearea unei Stylized Strawberry Icon care vă va arăta toate elementele de bază.
Stilul însăşi a devenit super popular în 2007 odată cu lansarea lui Apple iPhone, şi a rămas astfel până în anul 2012, când a existat o schimbare de la icoane realiste la cele minimaliste.
3.2. Evoluţia
În acest moment, cronologia noastră devine un pic neclară pe ici colo, deoarece pentru unele dintre stilurile viitoare nu vom fi capabili să identificăm exact momentul când au apărut şi au câştigat popularitate, de aceea m-am decis pentru a le grupa şi a le ordona bazat pe atributele care le împărtăşesc şi de la care au evoluat.
Icoane din linii
Icoane din linii sunt o ramură evolutivă directă a iconelor artă pixelată originale, fiind unul dintre stilurile populare curent practicate, datorită capacităţii lor de a portretiza puternic imagini folosind forme simple şi contururi.
Ca filosofie de design, stilul se foloseşte de aceleaşi principii de a separa obiectul pe diferite secţiuni componente folosind linii groase, grele dar utilizând contururi spre deosebire de pixeli individuali. Această schimbare de tehnică a făcut mai uşor pentru designer a le crea şi a le adapta, deoarece au de-a face cu forme şi traiectorii în loc de pixeli individuali.
Dincolo de asta, stilul a devenit mai organic, deoarece evoluţia monitoarelor digitale a făcut posibil să se utilizeze linii curbe și colturi rotunjite, comparativ cu vremurile când ideile puteau prinde viaţă doar folosind forme dreptunghiulare super-ascuțite.
Personal îmi place stilul, deoarece este uşor de abordat şi devii bun la el o dată ce l-ai practicat de câteva ori.
Icoane glifuri
Din punct de vedere terminologic, substantivul "glif" vine din franceza "glyphe" care provine din grecescul "gluphē" şi poate fi definit ca un "caracter sau simbol hieroglific ". Din perspectiva designului, un "glif" este un stil vizual, în cazul în care obiectele sunt reprezentate utilizând forme monocromatice, care poate avea spaţii goale subtile ca separare a diferite secţiuni componente.
În timp ce e simplu în natură, stilul poate fi cu adevărat eficient, mai ales atunci când este utilizat în dimensiuni mai mici, deoarece poate descrie obiectul folosind un stil minimalist dar încă uşor de înţeles, de aceea el poate fi văzută ca un precursor la design plat.
Icoane plate
Icoanele plate ca stil au devenit populare în jurul anului 2012, odată cu lansarea noului limbaj vizual reproiectat de la Microsoft care-l știm ca Metro (acum Fluent), venit ca un răspuns direct la abuzul lui Apple de skeuomorphism.
Vizual vorbind, a fost o mare schimbare în filozofia de design, țintind pentru o abordare clară, minimalistă împărțind obiectul în părțile sale esenţiale, eliminând cât mai multe detalii posibil în proces.
Acest lucru a dus la naşterea unui nou tip de icoane care au fost uşor de înţeles şi de folosit, datorită faptului că accentul a fost redirecţionat spre utilizarea atentă de culori si forme geometrice de bază.
În cele din urmă, designerii au văzut potenţialul care design-ul plat îl avea, şi au început crearea de icoane noi pe bază de forme clare, liber de orice gradient sau umbre aruncate, şi au dezvoltat stilul în ceea ce este acum.
Icoane materiale
Când lucrurile au început să se schimbe cu designul plat, în 2014 Google a decis să îmbrăţişeze schimbările şi l-a adus pe designerul Matias Duarte la bord pentru a ajuta la crearea propriul limbaj vizual, care se numeste Material Design.
Acum, dacă skeuomorphismul a fost prea împopoțonat, şi designul plat a fost prea plat, Google s-a poziţionat undeva la mijloc prin readucerea tonurilor luminoase şi întunecate, oferindu-le acestora o prezenţă mai subtilă, un stil vizual în care obiectele sunt aşezate unele peste altele. Au mers chiar mai departe şi au pus la dispoziție un ghid online destul de vast, unde vorbesc despre tot de la proprietăţile materialelor la principiile de aspect şi stiluri de culoare, care fac foarte uşor să atragă în adoptarea stilului.
În opinia mea, icoanele materiale sunt un plus frumos la designul plat, şi atâta timp cât Google are un cuvânt de spus, acestea vor continua să fie populare.
Icoane dimensionale
Pentru următorul stil, este într-adevăr greu pentru a pune o etichetă, deoarece se aşează undeva între limitele icoanelor din linii şi a celor izometrice, împrumutând elemente cheie din ambele.
Mi-am stresat creierul în încercarea de a-l defini, şi în cele din urmă am ajuns la concluzia că cel mai potrivit ar fi dimensional, deoarece procesul se concentrează pe adăugarea de dimensiune sau adâncime la icoană dintr-o perspectivă orizontală.
Modul în care e făcut este prin prezentarea atât a feței cât și a unei laterale a obiectului, folosind forme dreptunghiulare pentru tot ceea ce nu este de natură circulară sau curbă. Pentru obiectele care se încadrează în a doua categorie, acestea sunt reprezentate, de obicei, folosind o perspectivă, din față, care creează un contrast şi în acelaşi timp echilibru coeziv între elementele compozite ale icoanei.
În ceea ce priveşte dificultatea, stilul este oarecum uşor de înţeles şi de stăpânit, în măsura în care aveți o bază în înţelegerea perspectivei, astfel încât să puteţi defini corect şi poziţiona detaliile necesare pentru ambele secţiuni din faţă şi lateral.
Icoane desenate manual
Aceastea sunt într-o categorie proprie, deoarece fiind atrăgătoare aşa cum sunt (doar uită-te la aceste frumuseți puțin), nu sunt folosite frecvent, deoarece de cele mai multe ori sunt privite ca fiind prea "jucăuşe". Stilul a devenit mai popular după rebranding de la Dropbox, care a arătat potenţialul de a construi o identitate cu adevărat unică, folosind linii desenate manual, care au un caracter şubred tremurat.
În opinia mea, acest tip de icoană se poate dovedi a fi mai prietenoasă, deoarece relaţia dintre ea şi utilizator devine mai caldă, având de a face cu simboluri care se simt ca în cazul în care acestea nu au fost concepute de un computer, ci de o ființă umană vie.
În ceea ce priveşte complexitatea, stilul poate fi greu de stăpânit, mai ales dacă nu eşti foarte bun la desen şi umbrire, care, de asemenea, fac mai greu a imita, deoarece nu doar creezi forme făcând clic şi glisând dreptunghiuri şi cercuri.
Icoane animate
În sfârşit, avem o rasă de icoane, care este cu adevărat unică, deoarece natura sa dinamică imploră să faceţi clic pe ele. În timp ce arată poate doar ca și trucuri pur vizuale, icoanele animate sunt viitorul în interacţiune, deoarece deţin o putere incredibilă atunci când este vorba de procesul de angajare între utilizator şi interfaţă.
Indiferent ce formă iau (plate, linie, etc.), pictogramele animate poate aduce ceva nou şi proaspăt pe masă, din cauza celei de-a doua stări (când treci cu cursorul peste), şi astfel se dublează informaţiile disponibile pentru utilizator, deoarece atunci când treci peste, pot aduce date utile în câteva secunde.
Într-o lume unde VR (realitatea virtuală) şi AR (realitatea augmentată) sunt viitorul, se poate vedea potenţialul de integrare a animaţiilor în cadrul creării de icoane.
În ceea ce priveşte complexitatea, stilul poate fi greu de stăpânit, din moment ce nu doar trebuie proiectate, dar, de asemenea, trebuie aduse la viaţă, cea ce poate fi greu dacă nu ştii exact ce vrei să exprimi prin ele.
Câteva cuvinte de Final
Înainte de a am încheia lucrurile, chiar vreau să mulţumesc fiecărui designer care au participat la studiu, și cel mai important lui ToastyTech pentru furnizarea de imagini ale sistemelor de operare.
Acestea fiind spuse, sper că v-a bucurat trecerea prin istoria a ceea ce noi numim icoane şi ați descoperit ceva nou şi captivant.
De asemenea, dacă doriţi să aflaţi mai multe despre icoane, vă recomand a trece prin unele dintre următoarele articole, din moment ce eu sunt sigur că veţi găsi câteva sfaturi proaspete şi utile.
Cum să creezi artă Pixel-Perfect folosind Adobe Illustrator
Înţelegerea sistemului de grilă Adobe Illustrator
Sfat rapid: Exportul de icoane folosind felii în Adobe Illustrator
Cum să scalezi icoanele corect în Adobe Illustrator
Comparând cele două metode pentru crearea de icoane linie: Trasee offset vs. contururi
