È passato un po 'di tempo da quando ho fatto questo tipo di articolo, ma oggi sono tornato, e penso davvero che ti piacerà questo. Metteremo in pausa i nostri succhi creativi e trascorriamo un po 'di tempo insieme a esplorare la storia e l'evoluzione di quelle piccole creaturine che amiamo chiamare "icone".
Quindi, se ti piacciono tanto il design delle icone quanto il pugno digitale mentre sorridi come un pazzo, fai una rapida sosta alla macchina per caffè espresso più vicina e prendi una tazza di quel magico liquore di fagioli, e poi salta dolcemente su torna sulla sedia e lascia che il viaggio abbia inizio.
Bene, immagino che molti di voi già conoscano la risposta, ma se la classe di scienze sociali "Metodi e tecniche di ricerca" mi ha insegnato qualcosa, è che per ogni singolo studio (che questo articolo è chiaramente), dovresti sempre partire dal livello di base del tuo concetto e poi gradualmente costruisci la tua strada usando più livelli di informazioni.
Quindi, "icona" è un sostantivo di origine greca (eikόn), ed è definito secondo il dizionario online Merriam Webster come "un'immagine religiosa convenzionale tipicamente dipinta su un piccolo pannello di legno e usata nella devozione dei cristiani orientali".
Ora, penso che tutti possiamo alzare un sopracciglio e concordare sul fatto che questo non è esattamente il tipo di "icona" a cui siamo interessati, dal momento che non ci occupiamo di dipingere le immagini di divinità che lodano il legno (o Immagino che molti di noi non lo siano), quindi proviamo ad avvicinarci al termine da una prospettiva più moderna e tecnologica.
Dal punto di vista digitale, una "icona" è un "simbolo grafico sullo schermo di un computer che rappresenta un oggetto (come un file) o una funzione (come il comando o l'eliminazione)".
Una spiegazione ancora più perspicace può essere trovata nella versione online del Dizionario di Cambridge dove viene definita come "una piccola immagine o simbolo sullo schermo di un computer a cui si punta e si fa clic (= premi) con un mouse per dare al computer un istruzioni.”
Ora, prima di andare avanti, vorrei sottolineare che sebbene le icone siano state inizialmente create con l'intento di essere utilizzate all'interno di interfacce grafiche (desktop), hanno rapidamente dimostrato la loro utilità, facendosi strada verso altri dispositivi compatibili con lo schermo che li hanno adottati per la loro facilità d'uso.
Il primo set di icone per computer è nato nel 1981, quando lo scienziato informatico David Canfield Smith e il designer Norman Lloyd Cox hanno unito le loro forze per portare la "metafora dell'ufficio" alla Xerox Star 8010, che era il primo computer da ufficio del suo tempo.
Xerox Star 8010 - immagine fornita da DigiBarn L'idea era di fare in modo che Norman progettasse una serie di articoli per ufficio come documenti, cartelle, schedari, ecc., Che dovevano definire il primo stile di icona (pixel art) su cui sarebbero basati tutti gli altri.
Il motivo per cui le icone sono diventate i computer sono avanzati fino a un punto in cui avevano bisogno di un simbolo visivo in grado di facilitare l'interazione tra l'interfaccia del loro software (la GUI o l'interfaccia grafica dell'utente) e le esigenze dell'utente.
Ciò significa che da una prospettiva simbolistica, ha sia a funzione e a senso, dal momento che deve trasmettere con attenzione e correttamente il oggetto o azione che era destinato a descrivere, usando segnali visivi che mirano a essere auto-esplicativi.
Puoi imparare di più sul processo di ricerca coinvolto nella creazione di questi tipi di metafore visive, leggendo il mio 10 Suggerimenti per la creazione di fantastiche icone, che risponderà alla maggior parte se non a tutte le tue domande.
Dato che l'articolo si concentra sulla presentazione e spiegazione dell'evoluzione delle icone da una prospettiva visiva, è naturale che ci prendiamo un paio di momenti per vedere esattamente quale "stile" è, dal momento che molte volte il termine viene frainteso.
Se torniamo al dizionario Merriam Webster, vedremo il nome definito come "un modo particolare o tecnica con cui qualcosa viene fatto, creato o eseguito".
Nella mia mente c'era una sola definizione, dal momento che descrive il termine come "un aspetto distintivo, tipicamente determinato dai principi in base ai quali qualcosa è stato progettato".
Mettiamole insieme e ci rendiamo presto conto che lo stile è fondamentalmente una forma di espressione (sia visiva che di altra natura) basata su un intricato rapporto tra i metodi ei principi scelti con cura e sviluppati da un creatore (l'artista), al fine di porta la sua visione in forma.
Ora, ad esempio, lo stile di un attore può essere facilmente ridotto al modo in cui la persona parla, cammina e guarda. I cantanti possono distinguersi adottando una serie specifica di vestiti e una voce più morbida o più profonda.
I designer, d'altra parte, si sforzano di realizzare un senso dello stile, infondendo diverse caratteristiche visive basate su metodi e tecniche che sono state sviluppate nel corso di un lungo processo di esplorazione e raffinatezza, rendendole proprie.
Ora qui è dove diventa un po 'complicato, dal momento che nel design, uno stile personale può essere rapidamente preso, imitato e iterato, trasformandolo in a stile collettivo, dove diversi designer seguono tecniche compositive simili se non identiche.
Detto questo, nessuno stile individuale è completamente puro, poiché tutto ciò che viene creato è fondamentalmente un'iterazione visiva e / o evoluzione basata sul lavoro precedente di qualcun altro.
A questo punto, siamo riusciti a capire quale sia lo "stile", ma prendiamo un paio di momenti e vediamo quali fattori possono influenzare il suo sviluppo e la sua evoluzione.
Come tutti sappiamo, per ogni forma d'arte ci sono una serie di strumenti e mezzi che finiscono per influenzare la sua crescita e popolarità, e il design di icone non fa eccezione a questa regola.
Come designer, trascorriamo le nostre giornate creando prodotti digitali destinati a vivere all'interno di un mezzo digitale, che è influenzato dallo stato e dall'evoluzione della tecnologia determinati dalla potenza di calcolo e dai progressi di visualizzazione resi disponibili nella vita di una persona. Questo è il motivo per cui il viaggio dalle icone di pixel art a quelle completamente skeuomorfe è stato molto lungo, poiché i computer non avevano il potere di visualizzare la quantità di pixel che abbiamo attualmente.
Per i progettisti, questo significa che devono sempre adattarsi e diventare completamente dipendenti dal mezzo, che a seconda del suo stato evolutivo può influenzare il loro stile aggiungendo o rimuovendo limitazioni creative.
Un perfetto esempio di questo è VR (Realtà Virtuale) in cui stiamo appena iniziando a fare progressi, comprendendo le possibilità e i limiti di questo nuovo ed entusiasmante mezzo.
All'inizio, ho promesso che lo studio si sarebbe concentrato sulla presentazione e sulla breve descrizione dei dieci stili che hanno modellato il design dell'icona nel suo stato attuale, quindi senza perdere altro tempo, prendi un altro sorso di quel caffè bollente e saltiamo dritto dentro.
Daremo il calcio d'inizio presentando la trinità da cui tutto è iniziato.
Come abbiamo visto pochi istanti fa, il primo stile iconico mai esistito è stato creato e plasmato dalla tecnologia del suo tempo, quando i computer erano lenti ei progettisti dovevano confrontarsi con display monocromatici.
La missione era quella di utilizzare le limitazioni esistenti e creare le icone utilizzando un processo elaborato per posizionare un numero specifico di pixel neri su una griglia quadrata, fino a quando il simbolo ha iniziato a prendere forma, da cui il nome dello stile deriva.
Lo stile stesso può essere descritto solo come grassetto, poiché utilizzava linee rigide, spesse e nere per i contorni e linee e dettagli più morbidi e sottili per le sezioni di composizione interne..
Per me personalmente, le icone basate su pixel sono davvero impressionanti dal momento che non solo sono state le prime ad aprire i personal computer al mercato consumer, ma sono anche riuscite a rimanere rilevanti grazie alla semplicità della loro natura, da oltre 36 anni di esistenza, non molto è cambiato, e forse questa è una buona cosa.
Sistema operativo Xerox 8010 Star GlobalView - immagine fornita da ToastyTechOggi, le icone di pixel art continuano a mantenere la loro popolarità, dal momento che sono un potente innesco della nostalgia, riportando la sensazione e l'aspetto dei primi anni dell'informatica, dove lo stile non riguardava il numero di dettagli che potevi racchiudere in uno spazio ridotto, ma come puoi catturare l'attenzione degli occhi usando il minor numero possibile di elementi visivi.
L'anno è il 1985 e ATARI ha appena debuttato TOS (The Operating System) con il lancio del suo computer Atari 520ST, che è la prima volta che vediamo un'evoluzione visiva dalle icone dei pixel. Se prima l'utente aveva a che fare con icone bidimensionali, ora l'esperienza cambia in meglio con l'introduzione di icone isometriche, basate sulla stessa "metafora dell'ufficio", che ha aggiunto l'illusione di profondità e dimensione alla sua GUI (Graphical User Interfaccia) usando il terzo asse.
In termini di stile, questa non è stata una partenza radicale. Consideralo più come un miglioramento visivo, poiché erano ancora basati su pixel, ma hanno apportato alcune modifiche sottili, come l'aggiunta di ombre dure proiettate e lo spessore uniforme della linea.
Per alcuni, la parola "isometrica" non sembra il modo migliore per etichettare lo stile, poiché con la sua definizione, una proiezione isometrica è un "metodo per rappresentare visivamente oggetti tridimensionali in due dimensioni" in cui "le tre coordinate gli assi appaiono ugualmente scorciati e l'angolo tra loro due è di 120 gradi ". Per me personalmente, potrebbero essere visti come i primi tentativi di portare una nuova prospettiva alla "metafora dell'ufficio" che alla fine ha portato a ciò che ora chiamiamo icone isometriche.
Atari TOS - immagine fornita da ToastyTechOggi lo stile ha visto un allontanamento radicale dalle sue origini monocromatiche basate sui pixel, che si appoggia pesantemente sull'uso di colori e forme per dare vita a oggetti tridimensionali.
In termini di complessità, lo stile è abbastanza difficile da padroneggiare, dal momento che richiede ai progettisti di reimpostare visivamente l'oggetto che vogliono ritrarre usando un cubo ruotato come oggetto di riferimento, che non è sempre facile, specialmente quando si ha a che fare in modo strano oggetti a forma di.
Avanziamo rapidamente di quattro anni e le cose stanno finalmente iniziando a rompere il modello con il lancio del computer workstation NeXT di Steve Jobs, fornito con NeXTSTEP OS.
Se fino a questo punto le icone venivano considerate simboli semplici per facilitare l'interazione tra uomo e macchina, Jobs la portò al livello successivo con l'introduzione delle prime icone skeuomorphic, progettate per imitare le loro controparti del mondo reale.
Dì addio a quei contorni spessi e pesanti e ciao a un livello di maestria mai visto prima in una GUI (Graphical User Interface), caratterizzata dall'uso di ombreggiature e illustrazioni altamente dettagliate tutte stipate all'interno dello stesso piccolo spazio.
NeXTSTEP OS 0.8 - immagine fornita da ToastyTechMan mano che i computer diventavano più potenti e la tecnologia dello schermo si evolveva, lo skeuomorphism diventava più una forma d'arte che un semplice simbolo, spingendo le tecniche e l'immaginazione dei suoi creatori a un punto in cui gli oggetti raffigurati offuscavano la linea tra pixel e realtà.
Da sfumature complesse a trame, luci e ombre realistiche, il processo può essere davvero difficile da padroneggiare se non hai avuto alcun addestramento artistico. Se sei interessato a questo stile, puoi iniziare a imparare ricreando un'icona stilizzata di fragole che ti mostrerà tutte le nozioni di base.
Lo stesso stile divenne molto popolare nel 2007 con il lancio dell'iPhone di Apple, e rimase tale fino all'anno 2012, quando passò dalle icone realistiche a quelle minimaliste.
Icona Skeuomorphic di Eddie LobanovskiyA questo punto, la nostra sequenza temporale diventerà un po 'sfocata qua e là, poiché per alcuni degli stili in arrivo non saremo in grado di individuare il momento esatto in cui sono apparsi e hanno guadagnato popolarità, motivo per cui ho deciso di raggruppali e ordinali in base agli attributi che condividono ed evolvono.
Le icone di linea sono un ramo evolutivo diretto delle icone di pixel art originali, essendo uno degli attuali stili popolari praticati, grazie alla loro capacità di ritrarre immagini potenti utilizzando forme e contorni semplici.
Per una filosofia di design, lo stesso stile usa lo stesso principio di separare le diverse sezioni di composizione dell'oggetto usando linee spesse e dure, ma lo fa usando tratti al contrario di singoli quadrati. Questo cambio di tecnica ha reso più semplice per il progettista la creazione e la regolazione, dal momento che ora si tratta di forme e percorsi anziché singoli pixel.
Oltre a ciò, lo stile è diventato più organico, poiché l'evoluzione dei display dei computer ha reso possibile l'uso di linee curve e angoli arrotondati, rispetto ai vecchi tempi in cui si doveva dare vita alle proprie idee utilizzando forme rettangolari estremamente nitide.
Personalmente adoro lo stile, dal momento che è facile avvicinarsi e divenire bravo subito dopo averlo praticato un paio di volte.
Da un punto di vista terminologico, il sostantivo "glifo" deriva dal francese "glyphe" che a sua volta ha origine dal greco "gluphē" e può essere definito come un "carattere o simbolo geroglifico". Dal punto di vista del design, un "glifo" è uno stile visivo, in cui gli oggetti sono rappresentati utilizzando forme monocromatiche che possono avere spazi vuoti sottili che separano le loro diverse sezioni di composizione.
Anche se semplice nella sua natura, lo stile può essere davvero efficace, specialmente se usato in dimensioni più piccole, dal momento che è possibile raffigurare l'oggetto utilizzando un risultato minimalista ma ancora comprensibile, motivo per cui può essere visto come il precursore del design piatto.
Icone glifo di Martin DavidLe icone piane come stile sono diventate popolari intorno all'anno 2012, con il lancio del nuovo linguaggio visivo di Microsoft che abbiamo conosciuto come Metro (ora Fluent), che è venuto come risposta diretta all'abuso di Apple dello skeuomorphism.
A livello visivo, c'è stato un enorme cambiamento nella filosofia del design, mirando ad un approccio chiaro e minimalista, rompendo l'oggetto fino al suo essenziale, rimuovendo quanti più dettagli possibili nel processo.
Ciò ha portato alla nascita di un nuovo tipo di icone che erano facili da capire e da usare, poiché il focus era stato reindirizzato sull'uso attento dei colori e delle forme geometriche di base.
Alla fine, i designer hanno visto il potenziale del design piatto e hanno iniziato a creare nuove icone basate su forme chiare, prive di sfumature o ombre esterne e hanno sviluppato lo stile in quello che è ora.
Icone piatte di Dominic FlaskQuando le cose hanno iniziato a cambiare con il design piatto, nel 2014 Google ha deciso di abbracciare il cambiamento e ha portato il designer Matias Duarte a bordo per aiutare a creare il proprio linguaggio visivo, che ha chiamato Material Design.
Ora, se il snouomorfismo avesse avuto troppe cose in corso e il design piatto fosse benissimo, troppo piatto, Google si è posizionato da qualche parte nel mezzo riportando le luci e le ombre ma dando loro una presenza più sottile, creando uno stile visivo in cui gli oggetti sono impilati su uno un altro. Sono andati ancora oltre e hanno messo insieme una guida online piuttosto ampia, in cui parlano di tutto, dalle proprietà dei materiali ai principi di layout e agli stili di colore, il che rende davvero facile entrare e adottare lo stile.
A mio parere, le icone dei materiali sono una bella aggiunta al design piatto, e finché Google avrà qualcosa da dire, continueranno ad essere popolari.
Icona materiale di Jovie Brett BardolesPer il prossimo stile, è davvero difficile mettere un'etichetta, dato che si trova da qualche parte tra i confini delle icone di linea e quelle isometriche, prendendo in prestito elementi chiave da entrambi.
Mi sono quasi rotto il cervello cercando di definirlo, e alla fine sono arrivato alla conclusione che la soluzione migliore sarebbe stata dimensionale, poiché il processo si concentra sull'aggiunta della dimensione o della profondità all'icona da una prospettiva orizzontale.
Il modo in cui è fatto è presentare sia il fronte sia uno dei lati dell'oggetto, usando forme rettangolari per tutto ciò che non è di natura circolare o curva. Per gli oggetti che rientrano nella seconda categoria, di solito vengono rappresentati usando una prospettiva, quella frontale, che crea un equilibrio contrastante e allo stesso tempo coesivo tra gli elementi compositivi dell'icona.
In termini di difficoltà, lo stile è in qualche modo facile da capire e padroneggiare a patto che tu abbia una comprensione di base della prospettiva, in modo che tu possa definire e posizionare correttamente i dettagli necessari per entrambe le sezioni frontale e laterale.
Icone dimensionali di Ryan PutnamIl prossimo è in una categoria a sé stante, dal momento che, per quanto visivamente attraente (guarda solo queste piccole bellezze), non è così frequentemente usato poiché la maggior parte delle volte è considerato troppo "giocherellone". Lo stile è diventato più popolare dopo il rebranding di Dropbox, che ha mostrato il potenziale per costruire un'identità davvero unica, usando linee disegnate a mano che hanno una natura traballante per loro.
Secondo me, questo tipo di icona può rivelarsi più amichevole, dal momento che la relazione tra loro e l'utente diventa più calda perché hai a che fare con simboli che sembrano non progettati da un computer, ma piuttosto da un respiro vivente umano.
In termini di complessità, lo stile può essere difficile da gestire, specialmente se non si è abituati a disegnare e ombreggiatura, il che rende anche difficile imitare, dal momento che non si creano solo le forme facendo clic e trascinando rettangoli e cerchi.
Icone disegnate a mano da Corrine AlexandraInfine, abbiamo una serie di icone che è davvero unica dal momento che la sua natura dinamica ti implora di cliccarci sopra. Anche se potrebbero sembrare trucchi visivi puri, le icone animate rappresentano il futuro dell'interazione, dal momento che mantengono un'incredibile potenza quando si tratta del processo coinvolgente tra l'utente e l'interfaccia.
Indipendentemente dalla forma che assumono (piatta, linea, ecc.), Le icone animate possono portare qualcosa di nuovo e fresco al tavolo, a causa del loro secondo stato (quando si posiziona sopra), e quindi raddoppiano le informazioni a disposizione dell'utente, da quando al di sopra, possono portare dati utili in pochi secondi.
In un mondo in cui VR (Realtà virtuale) e AR (Augmented Reality) sono il futuro, si può vedere il potenziale di integrare le animazioni all'interno del tessuto delle icone.
In termini di complessità, lo stile può essere difficile da padroneggiare, dal momento che non lo stai solo progettando ma anche prendendoti del tempo per darle vita pienamente, il che può essere difficile se non sai esattamente cosa vuoi esprimere attraverso di loro.
Icone animate di Dave ChenellPrima di concludere, voglio davvero ringraziare tutti i designer che hanno partecipato allo studio e, soprattutto, ToastyTech per aver fornito le immagini dei sistemi operativi.
Detto questo, spero che ti sia piaciuto passare attraverso la storia di ciò che chiamiamo icone e scoprire qualcosa di nuovo e accattivante.
Inoltre, se vuoi saperne di più sulle icone, ti consiglio vivamente di consultare alcuni dei seguenti articoli, poiché sono sicuro che finirai per trovare alcuni suggerimenti utili e utili.