L'evoluzione di Apple.com

Il team di progettazione Apple è considerato uno dei più talentuosi gruppi di designer del settore oggi. Le tendenze che impostano sono seguite non solo da tutte le altre importanti società tecnologiche, ma dai web designer in ogni possibile prodotto e nicchia di servizio.

Seguici mentre intraprendiamo un emozionante viaggio nel tempo e assistiamo all'evoluzione dello stile di design di Apple. Avrai diversi sbalorditivi scorci su Apple.com che risale al 1997, quando assistiamo all'aumento e al declino di alcune importanti tendenze del design.

Apple e Design

L'immagine qui sopra è un'istantanea del sito Web di Apple così com'è attualmente. È un'immagine perfetta di tutto ciò che amiamo del senso del design di Apple. È pulito e minimale con una forte enfasi sulla bellezza del prodotto.

Non ci sono un milione di banner diversi o mega menu a discesa da ordinare, solo un semplice schema di navigazione, un prodotto in primo piano e quattro caselle di contenuto distinte sul fondo che servono come un modo universale per evidenziare altri importanti prodotti e informazioni.

Notate anche la copia: breve e al punto con un tocco di iperbole (dove sarebbe Apple senza di essa?). Nonostante il fatto che l'iPhone 4S abbia centinaia di funzioni di cui vantarsi, l'ha ridotto a quattro punti elenco base, quel tanto che basta per catturare il tuo interesse e incoraggiarti a guardare oltre.

Era sempre così?

Apple è da tempo conosciuta per il loro senso dello stile e il design superiore. L'innovazione imbattibile è in prima linea nel successo, ma il successo è stato fortemente integrato con l'immagine del marchio che è irrevocabilmente radicata nei suoi prodotti, nelle pubblicità, nelle pagine Web e persino nei suoi negozi.

Visto che Apple.com è forse l'impulso più importante e frequentemente aggiornato per il marchio visivo di Apple, non posso fare a meno di chiedermi il viaggio. Come si è evoluto questo marchio? Come sono state le prime versioni di Apple.com? Erano simili? Condividevano la stessa estetica semplice o erano più inclini a riflettere gli stili occupati del web design di un decennio fa?

Apple in Print

Per avere un'idea dell'evoluzione del marchio di Apple, dovremmo considerare brevemente il tempo prima che Apple.com esistesse. Dalla genesi dell'azienda, Jobs ha sempre posto una forte enfasi sulla semplicità. Tuttavia, quel termine aveva allora una traduzione visiva molto diversa. Mac Mothership ha una deliziosa collezione di annunci vintage Apple che ci danno un'idea della marca del marchio Apple alla fine degli anni '70, come potete vedere, oggi è molto diverso da Apple.com.

Questi annunci sono pieni di piazzole di vendita e copia informativa. Questo può essere un male necessario per le nuove categorie di prodotti, ma va oltre. Persino i loghi mostrano un'evoluzione della definizione stessa di Apple. L'originale a sinistra è un'illustrazione molto complessa di Newton sotto un albero, la versione aggiornata a destra è un arcobaleno colorato che spara attraverso la pagina. Entrambi sono molto più complessi del semplice e onnipresente simbolo che vediamo oggi.

Per i prossimi venti anni Apple avrebbe flirtato con abbondanti quantità di spazio bianco, ma solo brevemente tra gli annunci che seguivano gli stessi approcci di copia di base che vediamo sopra.

Si potrebbe dire che il salto più importante verso la semplicità del marchio Apple che conosciamo oggi è arrivato da TBWA \ Chiat \ Day, l'agenzia dietro l'originale pubblicità Macintosh del 1984 e successivamente una delle più famose campagne pubblicitarie di tutti i tempi: Diverso.

Nel 1997 Apple aveva trovato la sua identità. In oltre un decennio, la campagna Think Different non invecchiava un giorno. Non sembra antiquato come gli annunci originali di Apple, è invece senza tempo e abbastanza potente da influenzare molte generazioni successive.

Ritorno al Web

Think Different ha cambiato tutto per Apple (questo incarico è stato naturalmente guidato dal ritorno di Jobs nel 1996-97). Ha fornito un'identità straordinaria non solo ad Apple, ma ai suoi clienti. Visivamente, ha scosso lo stile del marchio di Apple in quello che conosciamo oggi.

In nessun posto questo è più chiaro che su Apple.com. Utilizzando la meravigliosa macchina del tempo di Internet Archive, possiamo tornare ai primi giorni del sito Web di Apple. Pensate a un successo diverso nel 1997, quindi se la nostra premessa risulta vera, dovremmo considerare questo come un anno di cambiamenti per il sito. Ecco uno sguardo a Apple.com verso la metà del 1997:

Non è esattamente quello che ti aspetteresti da Apple? Come i primi annunci di stampa, qui vediamo il tipo e molto. Per essere onesti, rispetto allo stato generale del web design al momento, questo era in effetti un design abbastanza minimale. In effetti, tutto è ben strutturato, ma c'è un sacco di contenuti. In effetti, quello che non vedi nello screenshot è che quei paragrafi delle notizie vanno avanti per miglia (clicca qui per la versione live).

Tieni presente che questo design è pre-Think-Different. I precedenti progetti Apple.com condividevano questa estetica. Ora saltiamo a maggio del 1998, il primo sito Apple post-Think-Different che potrei trovare.

La differenza tra le due estetiche è incredibile, non sembrano nemmeno provenire dalla stessa azienda (ammettiamolo, in realtà non lo sono). Dove eravamo soliti trovare confusione e un'abbondanza di informazioni, ora troviamo spazi bianchi; tonnellate e tonnellate di spazio bianco. Dove cercavamo una pagina che scorreva per miglia, ora troviamo la brevità.

Il semplice titolo dice solo "Apple"? il colpo prodotto ha fatto la sua comparsa all'eroe e c'è persino un'animazione impressionante di iMac che gira sul posto attraverso la meraviglia della GIF animata.

Pensa lo stesso

La parte più sorprendente del design del 1998 per me è quanto sia simile a ciò che Apple sta attualmente utilizzando nel 2012! La tipografia, il logo e gli schizzi di colore sono una lezione importante di design sul tipo di elementi che puoi aspettarti di invecchiare nel tempo nel tuo design, ma il layout fondamentale qui è incredibilmente vicino a quello che vediamo oggi su Apple.com.

La parte superiore del sito è riservata alla funzione principale del prodotto (in questo caso l'iMac originale) e la parte inferiore è suddivisa in alcuni rettangoli orizzontali che presentano altri prodotti importanti.

Differenze chiave

Come ho detto, la tipografia è un elemento principale che si distingue in questa evoluzione. C'è un motivo per cui ci riferiamo ai caratteri tipografici sans-serif come "moderni"? puoi vedere chiaramente come i font attuali di Apple portano avanti i loro progetti in tempo rispetto ai classici serif vecchio stile del 1998.

Uno dei cambiamenti più importanti che vedo qui è la navigazione, nota fino a che punto è la pagina. Al giorno d'oggi siamo così abituati a navigare in alto che questo design potrebbe certamente generare molti utenti per un loop (forse anche uno infinito). Ovviamente Apple ha imparato che aiutarvi ad arrivare dove volete andare sul sito è letteralmente una priorità assoluta.

Un componente molto importante del layout che non si ottiene dallo screenshot ritagliato sopra è che il contenuto a larghezza fissa si trova sul lato sinistro dello schermo. In questi giorni i siti moderni di solito centrano i loro layout in modo che l'origine sia al centro della finestra del browser.

Degno di menzione è anche il feed di notizie di Apple, che è rimasto un punto fermo sul sito per anni e che è stato rimosso solo all'inizio di quest'anno.

Andando avanti: 1999

Nell'ottobre del 1999, Apple stava ancora usando lo stesso design. I prodotti si stanno evolvendo, ma il design della pagina è quasi identico a quello dell'anno precedente. Notare l'urlo di Pixar su Toy Story 2 direttamente su Apple.com, puoi dire che Steve è al timone di entrambe le società?

Notate anche un grande cambiamento nel logo, ormai Apple ha ucciso l'arcobaleno a favore di una solida mela bianca. Apple si dimostrerebbe un leader forte in un movimento di semplificazione del logo che è ancora in corso oggi. Puoi leggere ulteriori informazioni al riguardo nel nostro articolo, Pepsi vs Coca-Cola: The Power of a Brand.

2000

Quando arriviamo a maggio 2000, vediamo alcuni grandi cambiamenti. Per i principianti, l'intero layout è ora centrato nel browser. Inoltre, la navigazione è stata finalmente spostata verso l'alto e assomiglia da vicino all'interfaccia in stile aqua che Apple ha reso famoso con OS X. Si noti quanto sia complicata la navigazione con i due livelli di collegamenti.

I pulsanti e le schede lucidi sono stati un enorme movimento nel web design e sono stati lo standard? Cool? per molti anni. L'attuale ossessione del web designer con i pulsanti semplici e minimali con colori piatti o sfumature sottili è una risposta diretta a questo stile più ricercato

2001

Avanti veloce a novembre 2001 e vediamo alcuni salti più importanti. Lo stile aqua è arrivato fino al news feed, il tipo sans-serif sta iniziando a prendere piede (si noti il ​​sottotitolo) e le caselle dei contenuti si sono evolute in modo drammatico. Abbiamo fatto il salto a quattro invece di tre e le caselle ora sono forme completamente distinte con angoli arrotondati come quelli che vediamo nelle schede in alto. Sono ancora arrotondati oggi, ma Apple ha tirato indietro drammaticamente sul raggio di confine.

Sebbene Adobe sia al centro dell'attenzione in questo screenshot, il 2001 è stato un anno monumentale per Apple grazie al rilascio di iTunes e iPod. Questo segna la loro prima incursione in una generazione di dispositivi non tradizionali che ridefinirebbero completamente l'azienda. Questo è stato anche l'anno in cui hanno fatto il salto su OS X, una mossa decisiva verso un sistema molto più amichevole e intuitivo che si sarebbe rivelato utile per conquistare gli utenti Windows attratti dal Mac dal loro amore per l'iPod.

2004

Verso la fine del 2004, Apple aveva iniziato a sperimentare con l'evidenziazione della sua area di contenuto principale con una scatola angolare tinta unita. Più in genere, si vedrebbe questa scatola in nero, che creava un bellissimo contrasto con lo sfondo bianco, ma la pubblicità colorata dell'iPod ha rappresentato un'occasione per portare un po 'di vita alla pagina.

Un altro aspetto molto importante del design del 2004: hanno fatto il salto a tutti i tipi di sans-serif. Questa è una pietra miliare nel progresso delle tendenze del design.

2005

Flirtare con il nero nel 2004 ha portato a un importante esperimento per l'uscita di Tiger nel 2005. Qui vediamo la maggior parte della homepage di Apple.com inondata di nero. Una tendenza che ha portato a molte delle pagine dei prodotti.

Anche un grosso problema per il 2005 sono stati i riflessi sui prodotti, visibili nella parte inferiore di questa pagina con gli iPod. Ricordo pienamente di averli visti e di averli immediatamente strappati per i progetti a cui stavo lavorando in quel momento.

2007

Le tendenze di Apple sono rimaste abbastanza statiche per i prossimi anni, non è stato fino alla fine del 2007 che alla fine hanno fatto un enorme salto di benvenuto verso il sito che conosciamo oggi.

La homepage del sito è stata completamente revisionata. Hanno ampliato considerevolmente il contenuto e ucciso la vecchia navigazione aqua, sostituendolo con una versione notevolmente semplificata che utilizza le sfumature uniformi che ho già menzionato per seguire la tendenza aqua per la maggior parte dei progettisti. La larghezza del contenuto espanso può essere sicuramente attribuita agli schermi widescreen che erano ora presenti sulla maggior parte dei desktop e dei notebook. È molto importante essere consapevoli dell'evoluzione dell'hardware che può e dovrebbe influenzare le tendenze di progettazione dell'interfaccia utente.

Si noti inoltre che la barra di ricerca è finalmente nella parte superiore della pagina. Questo è stato ripensato in fondo per troppo tempo ed è stato bello vederlo finalmente ottenere l'attenzione e il risalto che meritava.

2011

Apple ha trovato il suo passo con il design precedente e rimase in gran parte invariata fino a gennaio del 2011, una corsa impressionante da qualsiasi standard!

All'inizio di quest'anno, abbiamo visto Apple fare un passo indietro e riportare la navigazione a un aspetto lucido, anche se una finitura scura aggiornata. Hanno anche iniziato a sperimentare con una sottile trama di rumore di sottofondo, una mossa dolorosa secondo la mia opinione che ha fatto sembrare che il loro tipico team di progettazione stia saltando sulle tendenze popolari stabilite da innumerevoli altri prima di loro. Clicca l'immagine qui sotto per vedere la trama da vicino.

Qual'è il prossimo?

È difficile prevedere dove sarà la prossima home page di Apple, ma vediamo alcuni esperimenti interessanti che si svolgono ulteriormente nel sito. Nonostante il fatto che la home page abbia lasciato cadere la trama del rumore, l'attuale pagina dell'iPhone ha introdotto un'implementazione molto più pesante di uno sfondo con texture, con un'area di prodotto inserita.

Ci sono anche alcune animazioni davvero impressionanti dell'iPhone che volano dentro e fuori dalla vista.Sostituiscono le GIF animate del 1998 con le moderne tecnologie web, ma il cuore dell'idea è sicuramente lo stesso.

Andando avanti, vedremo Apple tornare a vecchi trucchi come prodotti animati e pulsanti lucidi? E si trascineranno nella loro implementazione di sfondi testurizzati, forse introducendo più trame che vediamo in iOS? La tua ipotesi è buona come la mia!

Conclusione

Questo studio sull'evoluzione di Apple.com è molto più di uno sguardo ai capricci di una singola azienda, è una lezione importante su diversi importanti trend del web design per tutte le aziende nell'ultimo decennio. Abbiamo assistito alla semplificazione dei layout e alla riduzione del testo, all'innalzamento del tipo sans-serif e alla storia d'amore di diversi anni con il gloss, di cui stiamo ancora giocando oggi nonostante la conseguente rinascita del minimalismo.

Possiamo facilmente individuare anche altre tendenze come l'aumento dell'importanza delle barre di ricerca, la consapevolezza che la navigazione deve essere di primo piano e facile da trovare e la ricchezza che le nuove tecnologie web stanno portando al web design in un'era post-Flash. Apple è stata responsabile di aver spinto HTMl5 e CSS3 forse più apertamente di qualsiasi altra azienda tecnologica in un attacco diretto contro il regno di Adobe.

Un grande ringraziamento è dovuto alla gente di Internet Archive per aver preservato questi e innumerevoli altri pezzi importanti della storia del design. Non vedo l'ora di vedere se Apple servirà come leader o follower nelle tendenze del web design negli anni a venire.