Conoscere le tue icone Parte 1 - Una breve storia di icone del computer

Come per le grandi opere d'arte, devi guardare al passato per apprezzare il futuro. Con radici che risalgono agli anni '70, l'icona umile ha fatto molta strada. Di seguito è una raccolta di icone se la storia. Anche se ci sono stati molti altri sistemi operativi nel periodo tra il 1981 e il 2010, ho scelto quelli più importanti per il design di icone moderne. Questi disegni mostrano solo una piccola parte delle icone nelle numerose e varie interfacce utente nel corso degli anni. Per saperne di più sulla storia di User Interface Design è possibile trovare un articolo completo sull'argomento su Wikipedia.

Questo post è il 7 ° giorno della nostra sessione di design dell'interfaccia. Sessioni creative "Session Day 6Session Day 8"

1981 Xerox 8010 Star: il primo computer GUI consumer

Nel 1973, Xerox Alto era il primo sistema di calcolo basato su GUI (Graphical User Interface) al mondo. Progettato attorno a una metafora "dell'ufficio" (anche una prima), l'Alto è stato costruito come computer di ricerca e quindi non era disponibile per il rilascio commerciale. Con 2.000 macchine in tutto il mondo, Xerox Alto è stato così significativo, è stato una fonte di ispirazione per Apple Lisa (1983). Nel 1981 fu lanciato il marchio Xerox Star, che incorporava molte delle caratteristiche del design dell'Alto. Le icone Xerox dimostrano una considerazione per l'interazione umana. Come puoi vedere, Calcolatrice, Documento, Cartella e Cestino non sono cambiati da quasi 30 anni.

1981 - Xerox 8010 Star

1983 Apple Lisa: ha reso popolare la GUI

Lo sviluppo della Apple Lisa iniziò nel 1978 e fu pesantemente influenzato dai primi computer Xerox. Sperando di ritagliarsi una nicchia nel mercato del personal computing, Apple ha adottato la metafora dell'ufficio per rendere la navigazione più semplice per i nuovi utenti. Lisa era una GUI avanzata per il tempo in quanto aveva mobili "Accessori da scrivania" (primi widget), menu a discesa e directory basate su cartelle. Puoi vedere che le icone non sono molto diverse da Xerox, tranne che per le dimensioni e i contorni dei pixel singoli e l'uso del computer come icona delle preferenze (è ormai comune usare gli ingranaggi).

1983 - Lisa Office System 1

1984 Apple Macintosh 1.0 - Icone disegnate da artisti

Un anno dopo Lisa è stato rilasciato Apple Macintosh 1.0. Ora vediamo trascinare la copia dei file, le finestre mobili e le fantastiche nuove icone! Le icone Macintosh sono state progettate dall'ormai leggendaria Susan Kare. Susan Kare deve essere il padrone di tutti i tempi del design di Icon ed è stato responsabile di molte icone tra cui l'interfaccia MacPaint (fig 2). La filosofia di Kare sul design di icone è semplice: "Credo che le icone migliori siano più simili ai segnali stradali piuttosto che alle illustrazioni e idealmente dovrebbero presentare un'idea in modo chiaro, conciso e memorabile." Cerco di ottimizzare per chiarezza e semplicità anche quando le opzioni di tavolozza e risoluzione sono aumentate. " Questa filosofia è al centro del successo commerciale iniziale di Apple.

1984 - Sistema Macintosh 1.0 (fig 1)

1984 - Sistema Macintosh 1.0 (fig 2)

1985 Atari TOS - Icone isometriche

È importante notare - per quelli un po 'più giovani di noi vecchi utenti di computer sentimentali - che la GUI non era solo per i sistemi Apple. L'Atari ST aveva un sistema operativo chiamato TOS che aveva un'interfaccia minima anche usando la metafora della scrivania, che a quel punto era diventata uno standard del computer. È interessante notare che il TOS ha icone Isometric Disk (file drawers).

1985 - Atari TOS versione 1.0

1985 Amiga Workbench - Quattro icone a colori

L'Amiga Workbench è stato realizzato per il personal computer Amiga 1000. Nonostante le icone progettate in modo grossolano, Workbench era in anticipo sui tempi. Include funzionalità quali cursori del mouse personalizzabili, quattro colori grafici e icone multi-stato. Nell'esempio seguente puoi vedere i due stati dell'icona "Workbench". Amiga ha rotto con la convenzione desktop e ha scelto di utilizzare un banco di lavoro con i cassetti anziché i file.

1985 - Amiga Workbench 1.0

1985 Windows 1.0x - Il primo SO della GUI di Microsoft

Nel 1985 Microsoft ha finalmente rilasciato la sua prima interfaccia grafica. Le icone sono altrettanto rozze come l'Amiga ma non includono il colore. È interessante notare che le prime icone di Windows Paint utilizzano simboli diversi per MacPaint, in particolare Spray Painter.

1985 - Windows 1.0x

1986 GEOS per Commodore 64 - Il sistema operativo alternativo

Ho incluso GEOS per Commodore 64 poiché, al momento, era la seconda interfaccia grafica più diffusa dietro Macintosh 1.0 (basata sulle unità vendute). Le icone hanno più carattere del sistema operativo Windows e condividono la filosofia Mac di metafore chiaramente espresse.

1986 - Commodore C64 GEOS

1991 Sistema Macintosh 7 - Il primo sistema operativo Mac con i colori

Con System 7 abbiamo visto l'introduzione del colore nelle icone. Potresti notare che le icone ora sono leggermente rialzate per apparire "cliccabili".

1991 - Sistema Macintosh 7

1992 Windows 3.1 - Nuove icone di Designer!

In Windows 3.0 (1990) Microsoft impiegava Susan Kare (che per prima cosa ha creato le icone per Macintosh 1.0) che ha migliorato notevolmente i progetti. In 3.1 Kare perfeziona ulteriormente i colori e i disegni per le icone. Windows 3.1 è stata la prima piattaforma Windows con tipi di carattere True Type preinstallati.

1990: Windows 3

1995 Windows 95: il pulsante Start

Windows 95 introduce più colori alle icone e alcuni altri disegni isometrici. Il design di Windows 95 è una ricostruzione completa e include elementi che fanno ancora parte dei progetti Windows fino ad oggi. Gli elementi includono, la barra delle applicazioni, il menu e il famoso pulsante Start di Microsoft.

1995 - Windows 95

1997 Macintosh OS 8 - Icone più luminose per Mac

In Mac OS 8 le icone ora stanno iniziando a sembrare più luminose e renderizzate per mostrare una forte fonte di luce. Macintosh inizia anche a implementare uno stile isometrico con una forte "ombra esterna".

1997 - Macintosh OS 8

2001 Mac OS X v10.0 - Jelly Mac

Mac OS X è stato rilasciato nel periodo in cui stavo studiando per la mia laurea in Multimedia. Amorevolmente chiamato "Jelly Mac" dalla maggior parte degli studenti. Non abbiamo potuto fare a meno di notare la finitura lucida e plastica-gelatinosa delle icone. Le icone di OS X sono anche un enorme balzo in avanti nel design del precedente OS 9, che è stato rilasciato appena due anni prima (OS 9 sembra quasi lo stesso di OS 8 sopra). Presumibilmente, a causa del Dock, le icone sono rese da un punto di vista diretto o leggermente al di sopra. Progettate attorno al nuovo tema Aqua, le icone mostrano riflessioni complesse, luci e trame. Senza il tema Aqua, dubito che il design delle icone sarebbe tanto desiderabile come lo è oggi.

2001 - Mac OS X v10.0

2001 Windows XP - Icone morbide e luminose

Nel 2001 Microsoft ha introdotto, ancora un altro, sistema operativo completamente nuovo. Adottando una tavolozza di colori saturi, le icone vengono renderizzate con un aspetto illustrativo morbido che utilizza un'unica fonte di luce e un'ombra esterna semitrasparente. Continuano a usare lo stile isometrico.

2001 - Windows XP

Mac OS X Leopard 2007 - Dock riflettente

Mac abbandona le strisce e adotta un documento 3D riflettente per le icone "sedersi". L'uso di cromo, vetro e riflessi è popolare come sempre. Le icone non cambiano molto dalla v10.0.

2007 - Mac OS X Leopard

2009 Windows 7: morbido e riflettente

Le icone di Windows 7 sono completamente diverse da Windows XP e simili a Windows Vista. La principale differenza tra Vista e 7 è la direzione in cui si trovano le icone. Non sono stato in grado di trovare alcuna documentazione ufficiale sul cambiamento, ma non sono l'unico a porre la domanda. Le icone di Windows 7 sono anche più morbide e più vetrose di quelle precedenti.

2009 - Windows 7

Risorse e ulteriore lettura

  • Windows-Icons.com - Storia delle icone di Windows
  • The Vintage Mac Museum - "Old Macs - SOLO display da 9 pollici / mono 68000"
  • Guida - Galleria grafica dell'interfaccia utente
  • Toastytech - Galleria GUI completa

Più a venire presto

Nella prossima puntata (Know Your Icons Part 2 - Modern Icon Design) esploreremo ulteriormente il mondo delle icone e esploreremo quali icone significano per noi oggi.


Questo post è il 7 ° giorno della nostra sessione di design dell'interfaccia. Sessioni creative "Session Day 6Session Day 8"