20 anni di apple.com e web design

Storia ed evoluzione del sito Apple

La storia di una delle aziende più note, discusse e influenti del mondo comincia nel 1975, quando due giovani informatici assemblano nel garage sotto casa il prototipo di un nuovo modello di computer. Dotato di tastiera, unità di memorizzazione, microprocessore e ROM, l’Apple I si distingueva da ogni altro dispositivo in circolazione all’epoca. Era venduto completamente funzionante e pronto all’uso, in un’epoca in cui i computer dovevano essere assemblati dall’utente. Due anni più tardi Steve Wozniak e Steve Jobs inaugurano l’era del personal computer presentando l’Apple II durante il primo West Coast Computer Faire.

Negli anni ‘90, entra in gioco il World Wide Web: costruire e curare la propria presenza online diventa parte fondamentale della strategia di marketing.

apple.com viene lanciato ufficialmente nel gennaio 1996. Nel 2016 il sito della Apple ha dunque compiuto vent’anni. Grazie all’Internet Archive, che custodisce demo e screenshot storici dei siti più disparati, possiamo fare un viaggio nel tempo e ricostruirne la storia, per scoprire che apple.com, a dispetto della diffusa concezione del web come luogo mutevole, soggetto a mode, in continua evoluzione grafica e di contenuto, dagli anni ’90 ad oggi non è cambiato molto. Anzi, ha anticipato soluzioni che sarebbero state adottate dalla grande maggioranza dei siti solo anni più tardi.

apple.com: il lancio del sito

apple.com va online nel 1996. La prima versione del portale è molto scarna, più simile ad una colonna di giornale che al punto di riferimento digitale di un’azienda di tecnologia in ascesa.
Nei primi anni ’90 le pagine web sono così: tutto testo. Anche i link che puntano alle landing page di prodotto sono testuali.

screenshot sito Apple 1996

Gli elementi grafici sono ridotti alla scelta di un font senza grazie e al logo dell’azienda che, unica immagine presente, campeggia in cima alla pagina.

Già da diversi anni Apple aveva un nuovo logo. La prima versione, disegnata da Ronald Wayne con stile barocco, era in bianco e nero. Raffigurava Newton seduto sotto un albero a leggere in attesa della fatidica mela. Venne sostituita dall’ormai iconica mela morsicata, prima multicolore e poi bianca o nera per un effetto sempre più minimale. Il disegno è di Rom Janoff, uno dei più creativi disegnatori di quegli anni, autore anche dei loghi di IMB, FedEx e Volkswagen.

evoluzione logo apple

L’anno successivo apple.com si fa più accogliente. Nel 1997 si arricchisce di una barra laterale con sfondo rosso in cui trova posto il menù di navigazione.

screenshot sito apple nel 1997

Come nella versione precedente, gli hyperlink (di colore blu, come usava nei primi anni del web) sono costituiti da solo testo che orienta l’utente senza l’aggiunta di icone o altri elementi grafici.
L’ampia area centrale è dedicata a prodotti e servizi del momento. Lo sfondo è bianco per una migliore leggibilità.
Il testo continua ad essere predominante, tanto che la sensazione è quella di essere capitati su una pagina di news, più che sul portale di un’azienda che commercializza computer. Anche l’abbinamento di colori è piuttosto anonimo.
La grafica di apple.com è ancora lontana dal rispecchiare l’identità del marchio.

apple.com diventa brand

Nel 1998 Apple stravolge il sito ufficiale con un restyling che rafforza l’identità del brand.
Il nuovo layout si articola in fasce orizzontali, anticipando la consuetudine (chiamiamola pure moda) dei template a struttura orizzontale oggi tanto diffusi.

screenshot sito apple nel 1998

La sezione principale è dedicata al nome dell’azienda; sotto si collocano i box dei prodotti divisi per target d’utenza. Aumentano gli spazi bianchi in modo da “far respirare” i contenuti.

Le immagini sono l’elemento preponderante: assumono una rilevanza che prima non avevano mai avuto. Si tratta di rendering dei prodotti Apple di punta che, circondati da un ampio spazio bianco e da un menù di navigazione dai toni neutri, balzano all’occhio con vivacità. È questa la funzione degli ampi spazi bianchi: concentrare l’attenzione dell’utente.

Si parla di web identity riferendosi alla necessità che ogni sito ha di distinguersi e farsi riconoscere tra un mare di contenuti online. Focalizzandosi sui prodotti, i web designer di Apple hanno consolidato la presenza online del brand attraverso le immagini. Dal ’98 in poi ad apple.com non servirà più nemmeno il logo in primo piano: Mac, iPod e iPhone sono sufficienti perché l’utente capisca dove si trova.

Gli anni 2000: un graphic design di piccoli aggiornamenti

apple.com è rimasto sostanzialmente immutato dal restyling del 1998. Pare un’esagerazione, ma una carrellata di screenshot dell’home page mostra come negli anni 2000 siano state apportate solo piccole correzioni ed aggiustamenti ad una struttura ormai consolidata: sempre orizzontale e sempre con immagini in primo piano.

2001

screenshot sito apple 2001

Il 2001 introduce l’ultima modifica grafica significativa. Il menù di navigazione, prima concentrato a fondo pagina in una barra nera divisa in sezioni, è spostato nella parte alta della pagina, dove resta ancora oggi. Le sezioni in cui è suddiviso, una per ogni voce del menù, riproducono l’aspetto delle cartelle d’archivio adoperate in molti uffici prima dell’avvento dei file digitali.

Questa modifica potrebbe riecheggiare l’implementazione della menù bar e del menù a tendina sui MacBook, studiati per un’interazione più articolata dell’interfaccia utente con il mouse progettato da Steve Jobs sul modello di quello della Xerox.

Con il nuovo secolo, il linguaggio CSS entra a far parte della rete, consentendo una personalizzazione del web design senza limiti e indipendente dal codice HTML. Apple rimane fedele alla bicromia adottata nel ‘98, ma usa un effetto metallizzato con differenti toni di grigio per definire le forme del menù.

Il design non riguarda solo l’aspetto del prodotto o l’effetto che fa tenerlo in mano. Il design è come funziona.

Uniformandosi alla massima di Steve Jobs, i web designer hanno costruito apple.com con quell’eleganza minimale che ha sempre caratterizzato i prodotti Apple sotto la supervisione di Jobs, senza però trascurarne l’usabilità. L’utente arriva ad un sito spinto da interessi e necessità più o meno chiari e vuole trovare ciò che cerca con facilità. La menù bar gli consente di farlo. Posizionarla in alto permette poi di bilanciare gli equilibri della pagina, con un’ampia area centrale e tre box più piccoli che fanno da contraltare alla barra di navigazione.

L’icona della mela morsicata nel 2001 abbandona il multicolore e diventa azzurra. Negli anni seguenti sarà alternativamente bianca o nera, ma sempre monocromatica.

screenshot sito apple

 

screenshot sito apple

 

2007

Oltre all’evidente sostituzione del tipico sfondo bianco con uno nero in pendant con il prodotto dell’anno, il 2007 porta una menù bar unitaria, liscia e monocromatica. Abbandonata la suddivisione in etichette, apple.come ne guadagna in eleganza.
Il template rimane sempre quello: menù bar, ampia fascia centrale e box con link di approfondimento. Star della home page è l’iPhone.

screenshot sito apple nel 2007

Dal 2007 in poi la fascia centrale del layout si amplia stabilmente per lasciare spazio a immagini sempre più accattivanti che si susseguono l’una all’altra in slideshow.
In occasioni particolari trovano spazio sulla home anche volti noti riproposti in fotografie minimali, in bianco e nero su sfondo bianco. Nel 2010 è la volta dei Beatles, per celebrare l’approdo dei loro album su iTunes. Il 2011 è l’anno di Steve Jobs, commemorato dopo la morte prematura.

screenshot homepage sito apple con beatles

 

homepage sito apple commemorativa di steve jobs

 

2013

L’avvento dell’iPhone color porta una nota di colore anche su apple.com.

homepage sito apple con iPhone color

 

2014, 2016

Il layout orizzontale adottato nel 2001 arriva al suo massimo compimento: menù, slideshow e link non sono più divisi da linee, griglie e box, ma si affiancano con fluidità.

homepage sito apple nel 2014

 

homepage sito apple 2016

È una grafica che funziona sia da desktop che da mobile. Apple stessa ha generato la necessità di siti responsivi creando l’iPhone nel 2007. Proprio per questa necessità oggi proliferano i siti a fasce orizzontali, perché più semplici da adattare. Così la scelta di layout operata da apple.com nel 1998 si è rivelata vincente.

Poche parole, in font senza grazie. I testi esistono per ragioni pratiche di usabilità (per il menù, ad esempio) o sono simili a didascalie. Le immagini, eleganti, colorate, accattivanti, vincono.

E la concorrenza?

Mentre apple.com si appropriava già nel 2001 di una grafica pressoché definitiva, in grado di reggere il passare del tempo e l’avvento del mobile, i siti di altri grandi nomi della tecnologia hanno avuto storie più travagliate.
microsoft.com e dell.com, per esempio hanno vissuto un cambiamento radicale tra il 2000 e il 2012.

Microsoft

Aprile 1994, la home page di Microsoft evidenziava l’iniziale titubanza ad entrare nel World Wide Web. L’HTML è molto spartano. Un’unica immagine domina lo schermo, tra parole e link testuali: la risoluzione è bassa e oggi fa sorridere la possibilità che i browser dell’epoca potessero non supportarla.

homepage sito microsoft nel 1994

Sono i primi passi e le prime positive sorprese del www che segnano la conversione di Bill Gates al web.
Where do you want to go today? Internet apre nuovi orizzonti e comincia a farsi strada la consapevolezza che, attraverso il web, si potrà andare dovunque. In attesa della rivoluzione, microsoft.com invita a curiosare tra la gamma di prodotti della stagione.

Passa un anno, Microsoft lancia Windows 95 e in agosto mette mano al sito. L’home page viene soprannominata Collage e si capisce perché.

homepage sito microsoft nel 1995

Il concept grafico si richiama al modello delle mappe mentali: la solita domanda, Dove vuoi andare oggi?, innesca un percorso tra i link in forma di bottone che rimandano alle diverse parti del sito.
L’attenzione per la grafica è ancora a livello primitivo, ma già tra novembre di quell’anno e giugno 1996 è evidente la rapida evoluzione verso un layout più ricco di piccoli elementi grafici (icone, pulsanti e banner). La home page prende il nome di Cartoon.

homepage sito microsoft 1996

Manca ancora quel gusto del particolare e dello stile caratteristico dell’approccio Apple, e la pagina, così riprogrammata, era rallentata dall’eccessiva presenza di elementi grafici e dai modem a 9600 bps (bit per secondo) utilizzati da molti internauti dell’epoca. I visitatori la bollarono come troppo lenta.

Il lancio di Internet Explorer, destinato nel tempo a destituire Mosaic (e poi Netscape Navigator) rappresenta l’inizio di una nuova era delle pagine Microsoft con diversi tentativi per standardizzare gli elementi. La home page Branded Yellow attivata nel 1996 lascia il posto alla Branded Blue nel 1997.

homepage microsoft branded yellow e blue

I layout di fine anni ’90 sono similari a quello adottato da apple.com negli stessi anni, con barra di navigazione a sinistra, poche immagini (per lo più loghi e icone) e colore dominante, a riprova del fatto che anche il web design vive di mode.

Sono pagine fitte di testi e link, davanti alle quali oggi ci sentiremmo sperduti e sopraffatti dalle troppe informazioni.

Ancora nel 2000 microsoft.com era online con una grafica molto simile a quella adottata da Apple nel 1997 e poi rapidamente dismessa. Proprio com’era per l’apple.com del ’97, nemmeno microsoft.com riesce a far emergere con chiarezza l’identità del brand: mancano le immagini.

Continuando a percorrere la storia di microsoft.com, anche saltando fino al 2003 non si evidenziano grandi novità grafiche, se non nell’utilizzo di immagini lievemente più elaborate. Dove prima c’erano icone, disegni, loghi, nel 2003 subentrano fotografie.

screenshot sito microsoft 2003

Il 2004 porta con se un utilizzo più moderno delle immagini. Questa volta sono di dimensioni medio-grandi e si impongono come elementi visivamente predominanti della pagina. Il template però rimane sempre lo stesso da dieci anni.

screenshot sito microsoft 2004

L’anno della svolta è il 2012. microsoft.com esordisce con una nuova veste grafica.
Finalmente emergono i prodotti (e con loro l’identità di brand) perché viene data più importanza alle immagini, racchiuse in slideshow centrale e dotate di link per la navigazione.

La barra laterale, adottata per molti anni, permane in forma semplificata, ma si inserisce per la prima volta in un sito dalla struttura interamente orizzontale, quella stessa struttura che, in modo ancora rudimentale, era stata implementata da apple.com già nel 1998.

homepage sito microsoft 2012

Negli anni successivi il processo di semplificazione grafica prosegue con piccoli ritocchi e aggiustamenti. Oggi il sito di Microsoft ha quest’aspetto:

screenshot sito microsoft 2017

 

Dell

Il percorso evolutivo di dell.com è analogo a quello di Microsoft, qualche passo indietro rispetto alla concorrente Apple. Il design del 2000 ha ancora un forte sapore anni ’90: poca comunicazione visuale e molto testo strutturato in verticale.

Il gettonatissimo layout orizzontale arriva nel 2012, proprio come per Microsoft.
Abbiamo visto come per Apple l’orizzontalità e la predominanza delle immagini abbiano progressivamente portato ad un’integrazione fluida dei vari elementi della pagina. Dell invece disegna l’home page con tre aree rigidamente strutturate, distinte da box e linee.

screenshot sito dell

dell.com oggi appare così, perfettamente in linea con le tendenze del web design che richiedono siti minimali, di maggior impatto visivo e pronti per il mobile.

homepage sito dell 2017

SalvaSalva

SalvaSalva

Sognatrice a tempo pieno, blogger part-time, geek nel tempo libero e cantante sotto la doccia.

Commenti (4)

  1. Beh! Tanta invidia per la capacità di analisi! Se continui così chiederò consulenze…

  2. XD Grazie Maury!!

  3. Thanks for sharing as it is an excellent post Webdesign Nürnberg

  4. Thank you! Glad you like it.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *