10 stiluri care au schimbat chipul designului de icoane

A trecut ceva timp de când am făcut un astfel de articol, dar astăzi m-am întors și cred că o să-i iubești pe celălalt. Vom plasa sucurile noastre creative în așteptare și vom petrece ceva timp de calitate împreună explorând istoria și evoluția acelor mici creaturi pe care ne place să le numim "icoane".

Deci, dacă vă aflați în proiectarea icoanelor la fel de mult ca mine (baterea digitală a pumnului în timp ce zâmbește ca o persoană nebună), faceți o oprire rapidă la cea mai apropiată mașină de espresso și apucați o ceașcă de lichior de fasole magică și apoi săți ușor înapoi în scaun și lăsați călătoria să înceapă.

1. Pictograme. Ce, când și de ce

Cred că mulți dintre voi deja știți răspunsul, dar dacă clasa științelor sociale "Metode și tehnici de cercetare" mi-a învățat ceva, este că pentru fiecare studiu (care este clar acest articol), ar trebui să începeți întotdeauna de la nivelul rădăcină al conceptului dvs. și apoi să vă construiți treptat drumul prin utilizarea mai multor niveluri de informații.

Ce

Astfel, "icoana" este un substantiv de origine greacă (eikόn) și este definită în conformitate cu dicționarul online Merriam Webster ca fiind "o imagine religioasă convențională, în mod obișnuit, pictată pe un panou mic de lemn și folosită în devotamentul creștinilor orientali".

Acum, cred că putem ridica cu toții o sprânceană și suntem de acord că acest lucru nu este exact genul de "icoană" pe care suntem interesați, deoarece nu suntem de fapt în afacerea de a picta divinitatea - lăudând imagini pe lemn (sau Cred că majoritatea dintre noi nu suntem), așa că să încercăm să abordăm termenul dintr-o perspectivă mai modernă, tehnologică.

Din punct de vedere digital, o "pictogramă" este un "simbol grafic pe ecranul unui computer care reprezintă un obiect (cum ar fi un fișier) sau o funcție (cum ar fi comanda sau ștergerea)".

O explicație și mai inteligentă poate fi găsită pe versiunea online a dicționarului Cambridge, unde o definesc ca o "imagine sau simbol mic pe ecranul unui computer la care indicați și faceți clic pe (= apăsați) cu un mouse pentru a da computerului instrucțiuni.“

Acum, înainte de a merge mai departe, aș dori să subliniez faptul că, deși pictogramele au fost create inițial cu intenția de a fi utilizate în interfețe grafice de calculator (desktop), au dovedit rapid utilitatea lor, făcându-și drumul către alte dispozitive cu ecran activ le-au adoptat datorită ușurinței lor de utilizare.

Când

Primul set de pictograme de computer sa născut în 1981, când cercetătorul de calculator David Canfield Smith și designerul Norman Lloyd Cox și-au unit forțele pentru a aduce "metafora biroului" Xerox Star 8010, care a fost primul calculator destinat calculatoarelor din acea vreme.

Xerox Star 8010 - imagine oferită de DigiBarn

Ideea era ca designul lui Norman să aibă un set de articole de birou, cum ar fi documente, dosare, dulapuri de fișiere etc., care urmau să definească primul stil de pictograme (arta pixelilor) pe care se bazau toate celelalte.

De ce

Motivul pentru care icoanele au apărut este că computerele au avansat într-o etapă în care aveau nevoie de un simbol vizual capabil să ușureze interacțiunea dintre interfața software-ului (interfața grafică sau interfața grafică a utilizatorului) și nevoile utilizatorului.

Aceasta înseamnă că, dintr-o perspectivă simbolistică, are atât a funcţie și a sens, deoarece trebuie să transmită cu atenție și în mod corect obiect sau acțiune pe care sa intenționat să o descrie, folosind indicii vizuale care au ca scop să fie explicite.

Puteți afla mai multe despre procesul de cercetare implicat în crearea acestor tipuri de metafore vizuale, prin citirea celor 10 Top Sfaturi pentru crearea unui articol minunat de pictograme, care va răspunde la majoritatea, dacă nu la toate întrebările dvs..

2. Definirea stilului (creativ)

Deoarece articolul se concentrează pe prezentarea și explicarea evoluției icoanelor dintr-o perspectivă vizuală, este firesc să luăm câteva momente pentru a vedea exact ce "stil" este, deoarece de multe ori termenul devine greșit înțeles.

Dacă ne întoarcem la dicționarul Merriam Webster, vom vedea substantivul definit ca fiind "o manieră sau o tehnică particulară prin care se realizează, se creează sau se realizează ceva".

O definiție într-adevăr a stat în mintea mea, deoarece descrie termenul ca "un aspect distinctiv, determinat în mod obișnuit de principiile conform cărora este proiectat ceva".

Puneți amândoi împreună și vă dați seama rapid că stilul este o formă de expresie (fie ea vizuală sau de altă natură) bazată pe o relație complicată între metodele și principiile alese și dezvoltate cu atenție și dezvoltate de un creator (artistul), pentru a să-și aducă vederea în formă.

Acum, de exemplu, stilul unui actor poate fi ușor redus la felul în care persoana vorbește, merge și arată. Singerii se pot separa prin adoptarea unui anumit set de îmbrăcăminte și o voce mai adâncă sau mai profundă.

Designerii, pe de altă parte, se străduiesc să realizeze un sentiment de stil prin infuzarea unor caracteristici vizuale diferite bazate pe metode și tehnici care au fost dezvoltate pe parcursul unui lung proces de explorare și rafinament, făcându-le proprii.

Acum, aici este locul în care devine un pic dificil, deoarece în design, al cuiva stil personal poate fi repede luat, imitat și iteratat, transformându-l în a stilul colectiv, unde diferiții designeri urmează tehnici compoziționale similare, dacă nu identice.

Acestea fiind spuse, nici un stil individual nu este complet pur, deoarece tot ceea ce se creează este în esență o iterație vizuală și / sau o evoluție bazată pe munca anterioară a altcuiva.

3. Ce influențează stilul?

În acest moment, am reușit să înțelegem ce "stil" este, dar să luăm câteva momente și să vedem ce factori îi pot influența dezvoltarea și evoluția.

După cum știm cu toții, pentru fiecare formă de artă există un set de instrumente și medii care sfârșesc prin influențarea creșterii și popularității sale, iar designul icoanelor nu face excepție de la această regulă.

În calitate de designeri, ne petrecem zilele noastre creând produse digitale destinate să trăiască într-un mediu digital, influențat de starea și evoluția tehnologiei determinată de puterea de calcul și de avantajele de afișare făcute disponibile în timpul vieții. Acesta este motivul pentru care călătoria de la icoane de artă pixelă la cele de tip skeuomorf a fost foarte lungă, deoarece calculatoarele nu aveau puterea brută pentru a afișa numărul de pixeli pe care îi avem în prezent.

Pentru designeri, aceasta înseamnă că trebuie întotdeauna să se adapteze și să devină pe deplin dependenți de mediul care, în funcție de starea sa evolutivă, poate influența stilul lor prin adăugarea sau eliminarea limitărilor creative.

Un exemplu perfect al acestui lucru este VR (Realitatea Virtuala), unde incepem sa facem progrese prin imaginarea posibilitatilor si limitarilor acestui mediu nou si interesant.

La început, am promis că studiul se va concentra pe prezentarea și descrierea succintă a celor zece stiluri care au transformat designul icoanelor în starea lor actuală, fără a mai pierde timp, luați o altă gură de cafea fierbinte și să mergem direct în ea.

3.1 Cele trei originale

Vom da la o parte lucrurile prin prezentarea trinității de la care au început toate.

Icoane Pixel Art

Atunci

După cum am văzut cu câteva momente în urmă, primul stil de pictogramă care a apărut a fost creat și modelat de tehnologia vremii, când calculatoarele erau lente, iar designerii trebuiau să se ocupe de afișaje monocromatice.

Misiunea a fost de a face uz de limitările existente și de a crea pictogramele utilizând un proces elaborat de poziționare a unui anumit număr de pixeli negri pe o rețea pătrată, până când simbolul a început să se formeze, de unde vine numele stilului.

Stilul în sine poate fi descris doar ca îndrăzneț, deoarece folosește linii negre groase, groase pentru contururi și linii mai fine și mai subțiri pentru secțiunile de compoziție interioară.

Pentru mine personal, icoanele bazate pe pixeli sunt cu adevărat impresionante, deoarece nu numai că au fost primele care deschid computerele personale pe piața de consum, dar au reușit, de asemenea, să rămână relevante datorită simplității naturii lor, deoarece în cei 36 de ani de existență, nu sa schimbat prea mult și poate că este un lucru bun.

Xerox 8010 Star GlobalView OS - imagine oferită de ToastyTech

Acum

Astăzi, icoanele de artă pixelă continuă să-și mențină popularitatea, deoarece acestea sunt un puternic efect de nostalgie, aducând înapoi simțurile și privirile primelor zile de calcul, unde stilul nu se referea la cât de multe detalii ați putea să vă grăbiți într-un spațiu mic, dar cum puteți capta atenția ochilor folosind cât mai puține elemente vizuale posibile.

Icoane Pixel de Gustavo Zambelli

Icoane izometrice

Atunci

Anul este 1985, iar ATARI tocmai a debutat TOS (Sistemul de operare) cu lansarea computerului Atari 520ST, care este prima dată când vedem o evoluție vizuală de la pictogramele pixelilor. În cazul în care, înainte ca utilizatorul să se confrunte cu icoane bidimensionale, acum experiența se schimbă în mod mai bine prin introducerea unor pictograme izometrice, pe baza aceleiași "metafore de birou", care adaugă iluzia profunzimii și dimensiunii GUI-ului Interfață) utilizând a treia axă.

În ceea ce privește stilul, aceasta nu a fost o plecare radicală. Gândiți-vă mai degrabă la o îmbunătățire vizuală, deoarece acestea erau în continuare bazate pe pixeli, dar au adus unele schimbări subtile, cum ar fi adăugarea umbrelor proiectate și a grosimii uniforme a liniei.

Pentru unii, cuvântul "izometric" nu pare a fi cel mai bun mod de a eticheta stilul, deoarece prin definiția sa, o proiecție izometrică este o "metodă pentru reprezentarea vizuală a obiectelor tridimensionale în două dimensiuni", în care "cele trei coordonate axele apar în mod egal în timp și unghiul dintre oricare dintre ele este de 120 de grade ". Pentru mine personal pot fi văzute ca primele încercări de a aduce o nouă perspectivă metaforei de birou care a condus în cele din urmă la ceea ce noi numim acum icoane isometrice.

Atari TOS - imagine oferită de ToastyTech

Acum

Astăzi, stilul a văzut o deviere radicală de la originile monocromatice bazate pe pixeli, bazându-se puternic pe utilizarea culorilor și a formelor pentru a aduce la viață obiecte tridimensionale.

Din punctul de vedere al complexității, stilul este destul de greu de stăpânit, deoarece necesită designeri să reimagine vizual obiectul pe care doresc să-l prezinte folosind un cub rotit ca obiect de referință, ceea ce nu este întotdeauna ușor, mai ales atunci când aveți de-a face cu ciudat în formă de obiecte.

Icoane izometrice de Thomas Brunsdon

Icoane scumpe

Atunci

Inainte de patru ani, lucrurile incepe in sfarsit sa sparga modelul cu lansarea computerului Steps Jobs NeXT, care a venit cu sistemul de operare NeXTSTEP.

Dacă pînă în acest moment icoanele erau considerate simple simboluri menite să ușureze interacțiunea dintre om și mașină, Jobs a preluat-o la nivelul următor prin introducerea primelor icoane skeuomorfe vreodată, concepute pentru a imita omologii lor din lumea reală.

Spuneți la revedere acelor contururi groase, ciudate și salut la un nivel de măiestrie care nu a mai fost văzut niciodată în interiorul unei interfețe grafice (Graphical User Interface), caracterizată prin utilizarea de umbre și de ilustrații foarte detaliate, toate înghesuiți în interiorul aceluiași spațiu mic.

NeXTSTEP OS 0.8 - imagine oferită de ToastyTech

Acum

Pe măsură ce computerele au devenit mai puternice și tehnologia ecranului a evoluat, skeuomorfismul a devenit mai mult o formă de artă decât un simplu simbol, împingând tehnicile și imaginația creatorilor săi într-un punct în care obiectele descrise au încețoșat linia dintre pixeli și realitate.

De la gradiente complicate la texturi asemănătoare vieții, subliniere și umbre, procesul poate fi cu adevărat greu de stăpânit dacă nu ați avut nici o pregătire artistică. Dacă sunteți interesat de acest stil, puteți începe să învățați prin recrearea unei pictograme de căpșuni Stylized care vă va arăta toate elementele de bază.

Stilul însuși a devenit extrem de popular în 2007, odată cu lansarea iPhone-ului Apple, și a rămas până în 2012, când a existat o trecere de la icoane realiste la cele minimaliste.

Skeuomorphic Icon de Eddie Lobanovskiy

3.2. Evolutia

În acest moment, cronologia noastră va deveni puțin cam neclară, deoarece pentru unele dintre stilurile viitoare nu vom putea să identificăm exact momentul în care au apărut și au câștigat popularitate, de aceea m-am decis să grupați și ordonați-le pe baza atributelor de care au parte și au evoluat.

Icoane de linie

Icoane de linie de Justas Galaburda din Icon Utopia

Icoanele de linie reprezintă o ramură direct evolutivă a icoanelor originale de artă pixel, fiind una dintre stilurile populare actuale practicate, datorită capacității lor de a expune imagini puternice utilizând forme simple și contururi.

Pentru o filozofie a designului, stilul însuși folosește același principiu de separare a diferitelor secțiuni de compunere ale obiectului folosind linii groase și groase, dar face acest lucru folosind curse, spre deosebire de pătrate individuale. Această schimbare a tehnicii a făcut mai ușor proiectantul să-i creeze și să-l ajusteze, deoarece acum lucrați cu forme și căi în locul pixelilor individuali.

Dincolo de aceasta, stilul a devenit mai organic, deoarece evoluția afișajelor pe calculator a făcut posibilă utilizarea liniilor curbe și a colțurilor rotunjite, în comparație cu vechile zile când a trebuit să vă aduceți la viață ideile folosind forme rectangulare super-ascuțite.

Eu personal iubesc stilul, deoarece este ușor să vă apropiați și să faceți bine de îndată ce l-ați practicat de câteva ori.

Glyph Icons

Din punct de vedere terminologic, substantivul "glif" provine de la "glifhe" francez, care provine de la "gluphe" și poate fi definit ca un "caracter sau simbol hieroglific". Din perspectivă de proiectare, un "glif" este un stil vizual, în care obiectele sunt reprezentate folosind forme monocromatice care pot avea spații goale subtile care separă diferitele lor secțiuni de compunere.

În timp ce este simplu, în stilul său, stilul poate fi foarte eficient, mai ales atunci când este folosit în dimensiuni mai mici, deoarece puteți descrie obiectul folosind un rezultat minimalist, dar totuși inteligibil, motiv pentru care poate fi văzut ca precursorul designului plat.

Glyph Icons de Martin David

Icoane plate

Icoanele plate, ca stil, au devenit populare în jurul anului 2012, odată cu lansarea limbajului vizual redactat recent de Microsoft pe care l-am cunoscut sub numele de Metro (acum Fluent), care a venit ca un răspuns direct la abuzul Apple de skeuomorfism.

Din punct de vedere vizual, a existat o schimbare uriașă în filosofia de proiectare, urmărind o abordare clară, minimalistă prin ruperea obiectului până la cele mai importante lucruri, eliminarea cât mai multor detalii în acest proces.

Acest lucru a dus la nașterea unui nou tip de icoane ușor de înțeles și de utilizat, datorită faptului că focalizarea a fost redirecționată spre utilizarea atentă a culorilor și a formelor geometrice de bază.

În cele din urmă, designerii au văzut potențialul pe care îl avea designul plat și au început să creeze noi icoane bazate pe forme clare, fără gradienți sau umbre, și au dezvoltat stilul în ceea ce este acum.

Icoane plate de Dominic Flask

Icoane materiale

Pe măsură ce lucrurile au început să se schimbe cu designul plat, în 2014 Google a decis să îmbrățișeze schimbarea și a adus-o la bord pe designerul Matias Duarte pentru a-și crea propria limbă vizuală, pe care a numit-o Material Design.

Acum, dacă skeuomorfismul se desfășura prea mult și designul plat era bine, prea plat, Google se poziționa undeva în mijloc, readucând evidențierile și umbrele, dar oferindu-le o prezență mai subtilă, creând un stil vizual în care obiectele sunt stivuite peste unu o alta. Au mers chiar mai departe și au pus împreună un ghid online destul de vast, în care vorbesc despre totul, de la proprietățile materialelor până la principiile de aspect și stilurile de culoare, ceea ce face foarte ușor să sară și să adopte stilul.

În opinia mea, icoanele materiale sunt un plus frumos pentru designul plat și, atâta timp cât Google are ceva de spus, ele vor continua să fie populare.

Material Icon de Jovie Brett Bardoles

Icoane dimensionale

Pentru stilul următor, este într-adevăr greu de pus o etichetă, deoarece se află undeva între limitele icoanelor de linie și cele izometrice, împrumutând elemente cheie din ambele.

Aproape că mi-am rupt creierul încercând să-l definească și în cele din urmă am ajuns la concluzia că cea mai bună potrivire ar fi dimensională, deoarece procesul se concentrează pe adăugarea dimensiunii sau adâncimii icoanei dintr-o perspectivă orizontală.

Modul în care se realizează este prezentarea atât a părții frontale, cât și a părții obiectului, folosind formele dreptunghiulare pentru tot ceea ce nu este de natură circulară sau curbată. Pentru obiectele care se încadrează în cea de-a doua categorie, acestea sunt reprezentate de obicei printr-o perspectivă, față, care creează un echilibru contrastat și în același timp coeziv între elementele de compoziție ale pictogramei.

Din punct de vedere al dificultății, stilul este oarecum ușor de înțeles și stăpânit atâta timp cât aveți o înțelegere de bază a perspectivei, astfel încât să puteți defini și poziționa corect detaliile necesare atât pentru secțiunea frontală, cât și pentru cea laterală.

Icoane dimensionale de Ryan Putnam

Icoane sculptate manual

Următorul este într-o categorie proprie, deoarece atrăgător de atrăgător este (nu uita doar la aceste mici frumusețe), nu este așa de frecvent folosit, de cele mai multe ori este considerat prea "jucăuș". Stilul a devenit mai popular după rebranding-ul Dropbox, care a arătat potențialul de a construi o identitate cu adevărat unică, folosind linii trase de mână, care au o natură șubredă.

În opinia mea, acest tip de pictogramă se poate dovedi a fi mai prietenos, deoarece relația dintre ele și utilizator devine mai caldă pentru că aveți de-a face cu simboluri care se simt ca și cum nu ar fi fost proiectate de un calculator, ci de un trai, de respirație uman.

În ceea ce privește complexitatea, stilul poate fi greu de manevrat, mai ales dacă nu sunteți obișnuit cu desenul și umbrirea, ceea ce face și greu să imități, deoarece nu creați doar formele făcând clic și tragând dreptunghiuri și cercuri.

Icoane realizate manual de Corrine Alexandra

Icoane animate

În cele din urmă, avem o varietate de icoane care este cu adevărat unică, deoarece natura ei dinamică vă imploră să faceți clic pe ele. În timp ce acestea ar putea arăta ca niște trucuri vizuale pure, pictogramele animate reprezintă viitorul interacțiunii, deoarece acestea dețin o putere incredibilă atunci când vine vorba de procesul de angajare între utilizator și interfață.

Indiferent de forma pe care o iau (plat, linia etc.), icoanele animate pot aduce ceva nou și proaspăt la masă, datorită celei de-a doua stări (atunci când se află în spate), dublând astfel informațiile disponibile pentru utilizator, de când plutiți, pot aduce date utile în câteva secunde.

Într-o lume în care VR (Realitatea Virtuală) și AR (Realitatea Augmented) sunt viitorul, se poate vedea potențialul de integrare a animațiilor în structura icoanelor.

Din punctul de vedere al complexității, stilul poate fi greu de stăpânit, deoarece nu numai că le proiectați, ci și le acordați timp pentru a le aduce pe viață, ceea ce poate fi greu dacă nu știi exact ce vrei să-ți exprimi prin ele.

Icoane animate de Dave Chenell

Câteva cuvinte finale

Înainte de a încheia lucrurile, chiar vreau să le mulțumesc fiecărui designer care a participat la studiu și, cel mai important, ToastyTech pentru furnizarea imaginilor sistemelor de operare.

Acestea fiind spuse, sper că v-ați bucurat să treceți prin istoria a ceea ce numim icoane și să descoperim ceva nou și captivant.

De asemenea, dacă doriți să aflați mai multe despre icoane, vă recomandăm cu insistență să treceți prin câteva dintre articolele următoare, deoarece sunt sigur că veți sfârși găsirea unor sfaturi proaspete și utile.

  • Cum să creați o opera de artă pixel-perfectă utilizând Adobe Illustrator

    Ca începător, crearea de ilustrații digitale destinate utilizării pe web poate deveni uneori frustrant, mai ales atunci când puneți o mulțime de timp într-o piesă (fie ea ...
    Andrei Ștefan
    Adobe Illustrator
  • Înțelegerea sistemului Grid al Adobe Illustrator

    Acest sfat rapid se concentrează pe explicarea a ceea ce este Gridul, cum funcționează și cum ar trebui să îl utilizați pentru a beneficia de procesul dvs. de proiectare.
    Andrei Ștefan
    Design grafic
  • Sfat rapid: Exportarea de pictograme utilizând felii în Adobe Illustrator

    Astăzi vom examina modurile diferite de a exporta icoane folosind un instrument care se tem de multe ori, dar va duce productivitatea la un alt nivel ...
    Andrei Ștefan
    Icon Design
  • Cum să scalați corect pictogramele în Adobe Illustrator

    În ultimul timp, am fost mult mai tehnic și am început să explorez soluții la diferitele provocări pe care le-ați putea întâlni de-a lungul creației dvs. ...
    Andrei Ștefan
    Icon Design
  • Compararea celor două metode pentru crearea de pictograme de linie: Traiectorii offset vs. Strokes

    Acest mic sfat rapid este dedicat unui subiect care este aproape de inima mea, dar in acelasi timp mi-a dat unele dureri de cap puternice in primele zile ale designului meu ...
    Andrei Ștefan
    Icon Design