L'équipe de conception d'Apple est largement considérée comme l'un des groupes de concepteurs les plus talentueux du secteur. Les tendances qu’ils ont définies sont suivies non seulement par toutes les autres grandes entreprises de technologie, mais également par les concepteurs Web de tous les créneaux de produits et de services imaginables.
Suivez-nous et embarquez pour un voyage passionnant à travers le temps et assistez à l'évolution du style de design d'Apple. Vous aurez plusieurs aperçus incroyables sur Apple.com, remontant à 1997, alors que nous assistons à la montée et à la chute de plusieurs tendances de conception importantes.
Apple et Design
L'image ci-dessus est un instantané du site Web d'Apple dans sa version actuelle. C'est une image parfaite de tout ce que nous aimons du sens du design d'Apple. C'est propre et minimal avec un fort accent sur la beauté du produit.
Il n'y a pas un million de bannières différentes ou de méga menus déroulants à classer, il suffit d'un schéma de navigation simple, d'un produit vedette et de quatre zones de contenu distinctes situées au bas de l'écran, qui permettent de mettre en valeur d'autres produits et informations importants.
Remarquez également la copie: brève et précise avec une pointe d'hyperbole (où serait Apple sans elle?). Malgré le fait que l'iPhone 4S propose des centaines de fonctionnalités, il l'a réduit à quatre points essentiels, suffisamment pour attirer votre attention et vous encourager à chercher plus loin.
Était-ce toujours ainsi?
Apple est connu depuis longtemps pour son sens du style et son design supérieur. Une innovation imbattable est à la base de leur succès, mais ce succès a été conforté par une image de marque étroitement intégrée, irrévocablement ancrée dans ses produits, ses publicités, ses pages Web et même ses magasins.
Alors que nous considérons Apple.com comme le pouls le plus important et le plus fréquemment mis à jour de la marque visuelle Apple, je ne peux m'empêcher de m'interroger sur le parcours. Comment cette marque a-t-elle évolué? À quoi ressemblaient les premières versions de Apple.com? Étaient-ils semblables? Partagent-ils la même esthétique simple ou sont-ils plus enclins à refléter les styles de conception de sites Web très sollicités d'il y a dix ans?
Apple à imprimer
Pour avoir une idée de l'évolution de la marque Apple, considérons brièvement le temps avant qu'Apple.com n'existe. Depuis la genèse de l'entreprise, Jobs a toujours mis l'accent sur la simplicité. Cependant, ce terme avait une traduction visuelle très différente à l'époque. Mac Mothership propose une délicieuse collection d’annonces Apple vintages qui nous donnent un aperçu de l’image de marque d’Apple à la fin des années 70, comme vous pouvez le constater; c’est loin de Apple.com aujourd’hui.
Ces annonces sont remplies avec des argumentaires de vente et une copie informative. Cela peut être un mal nécessaire pour les nouvelles catégories de produits, mais cela va au-delà. Même les logos montrent une évolution de la définition d’Apple par Apple. L'original à gauche est une illustration très complexe de Newton sous un arbre, la version mise à jour à droite est un arc-en-ciel coloré sur toute la page. Les deux sont beaucoup plus complexes que le symbole simple et omniprésent que nous voyons aujourd'hui.
Pendant les vingt prochaines années, Apple flirterait avec des quantités généreuses d'espaces, mais seulement brièvement entre les annonces qui suivaient la même approche de copie lourde que celle décrite ci-dessus.
On peut dire que le saut le plus important vers la simplicité de la marque Apple que nous connaissons aujourd’hui est venu de TBWA \ Chiat \ Day, l’agence derrière la publicité originale de 1984 pour Macintosh, puis l’une des campagnes publicitaires les plus célèbres de tous les temps: Think Différent.
En 1997, Apple avait retrouvé son identité. En plus de dix ans, la campagne Think Different n'a pas vieilli. Elle ne se sent pas démodée comme les publicités Apple d'origine, elle est plutôt intemporelle et suffisamment puissante pour avoir un impact sur de nombreuses générations.
Retour sur le Web
Think Different a tout changé pour Apple (cette accusation a bien sûr été motivée par le retour de Jobs en 1996-97). Il a fourni une identité étonnante non seulement à Apple, mais également à ses clients. Visuellement, le style de la marque Apple est devenu ce que nous connaissons aujourd'hui.
Nulle part est-ce plus clair que sur Apple.com. En utilisant la merveilleuse machine à remonter le temps de The Internet Archive, nous pouvons revenir aux débuts du site Web d’Apple. Pensez Différent succès en 1997 donc si notre prémisse se vérifie, nous devrions voir cela comme une année de changement pour le site. Voici un aperçu de Apple.com vers le milieu de 1997:
Pas tout à fait ce que vous attendez d'Apple, c'est ça? Comme dans les premières annonces imprimées, nous voyons ici du texte, et beaucoup d’entre elles. Pour être juste, comparé à l'état général de la conception Web à l'époque, il s'agissait en fait d'un design plutôt minimal. En effet, tout est bien présenté, mais il y a une tonne de contenu. En fait, ce que vous ne voyez pas dans la capture d'écran, c'est que ces paragraphes d'actualités s'étendent sur des kilomètres (cliquez ici pour la version en direct).
Gardez à l'esprit que cette conception est pré-Think-Different. Les précédents modèles Apple.com partageaient cette esthétique. Passons maintenant à mai 1998, le premier site Apple post-penser-différent que j'ai pu trouver.
La différence entre les deux esthétiques est incroyable, ils ne semblent même pas appartenir à la même société (avouons-le, ils ne le sont pas vraiment). Là où nous avions l'habitude de trouver du fouillis et une surabondance d'informations, nous trouvons maintenant des espaces; des tonnes et des tonnes d'espace blanc. Là où nous avions l'habitude de trouver une page qui défilait sur des kilomètres, nous trouvons maintenant la brièveté.
Le titre simple dit simplement? Apple ,? la photo du produit a fait son apparition dans le héros et une animation impressionnante de l'iMac se met en place via l'émerveillement du GIF animé.
Pense pareil
La partie la plus étonnante du design de 1998 à mes yeux est à quel point c'est similaire à ce que Apple utilise actuellement pour 2012! La typographie, le logo et les éclaboussures de couleur constituent une leçon de conception importante en ce qui concerne le type d’éléments que vous pouvez espérer vieillir avec le temps, mais la présentation fondamentale ici est étonnamment proche de celle que nous voyons aujourd’hui sur Apple.com.
La partie supérieure du site est réservée à la fonctionnalité principale du produit (dans ce cas, l'iMac d'origine), et la partie inférieure est divisée en quelques rectangles horizontaux présentant d'autres produits importants.
Différences Clés
Comme je l'ai mentionné, la typographie est un élément essentiel de cette évolution. Il y a une raison pour laquelle nous appelons les polices sans empattement «moderne». vous pouvez clairement voir comment la police actuelle d’Apple fait progresser leurs dessins dans le temps par rapport au serif classique de 1998.
L'un des changements les plus importants que je vois ici est la navigation, notez à quel point il est loin dans la page. De nos jours, nous sommes tellement habitués à la navigation de dessus que cette conception jetterait certainement beaucoup d'utilisateurs pour une boucle (peut-être même une infinie). Apple a bien évidemment appris que le fait de vous aider à atteindre votre objectif sur le site est une priorité absolue.
Un élément très important de la mise en page que vous ne trouvez pas dans la capture d'écran rognée ci-dessus est que le contenu à largeur fixe se trouve sur le côté gauche de votre écran. De nos jours, les sites modernes centrent généralement leurs dispositions de manière à ce que l'origine soit au centre de la fenêtre du navigateur.
Il convient également de mentionner le fil d'actualité Apple, qui est resté un aliment de base sur le site pendant des années et qui n'a été supprimé qu'au début de cette année.
Aller de l'avant: 1999
En octobre 1999, Apple utilisait toujours le même design. Les produits évoluent, mais la conception de la page est presque identique à celle de l’année précédente. Remarquez la légende de Toy Story 2 de Pixar sur Apple.com, pouvez-vous dire que Steve est à la barre des deux sociétés?
Notez également un grand changement dans le logo, à ce jour Apple a tué l'arc-en-ciel en faveur d'une pomme blanche solide. Apple se révélerait être un leader puissant dans un mouvement de simplification du logo qui se poursuit encore de nos jours. Vous pouvez en savoir plus à ce sujet dans notre article, Pepsi vs Coke: Le pouvoir d'une marque.
2000
En mai 2000, nous constatons quelques grands changements. Pour commencer, toute la mise en page est maintenant centrée dans le navigateur. De plus, la navigation a finalement été déplacée vers le haut et ressemble beaucoup à l'interface de style aqua que Apple a rendu célèbre avec OS X. Notez la complexité de la navigation avec les deux couches de liens.
Les boutons et les onglets brillants constituaient un énorme mouvement dans la conception Web et étaient la norme? Cool? pour plusieurs années. L'obsession actuelle des concepteurs de sites Web avec des boutons simples et minimaux avec des couleurs plates ou des dégradés subtils est une réponse directe à ce style plus orné.
2001
Avance rapide jusqu'en novembre 2001 et nous observons quelques sauts plus importants. Le style aqua a fait son chemin jusqu'à l'actualité, le type sans-serif commence à s'imposer (remarquez le sous-titre) et les zones de contenu ont considérablement évolué. Nous avons fait le saut à quatre au lieu de trois et les cases sont maintenant des formes complètement distinctes avec des coins arrondis comme ceux que nous voyons dans les onglets en haut. Ils sont toujours arrondis aujourd'hui, mais Apple a considérablement diminué sur le rayon de la frontière.
Bien qu'Adobe occupe le devant de la scène dans cette capture d'écran, 2001 a été une année monumentale pour Apple en raison de la sortie d'iTunes et de l'iPod. Cela marque leur première incursion dans une génération de dispositifs non traditionnels qui redéfiniraient entièrement la société. C'est également l'année où ils ont fait le saut sous OS X, une avancée décisive vers un système beaucoup plus convivial et intuitif, qui s'avérerait utile pour convaincre les utilisateurs de Windows attirés par le Mac par leur amour pour l'iPod.
2004
Vers la fin de 2004, Apple avait commencé à expérimenter la mise en évidence de sa zone de contenu principale avec une boîte à coins arrondis de couleur unie. Plus généralement, vous voyez cette boîte en noir qui offre un beau contraste avec le fond blanc, mais la publicité colorée de l'iPod a été l'occasion de donner de la vie à la page.
Un autre aspect très important du design de 2004: ils ont fait le saut dans tous les types sans-serif. C'est une étape majeure dans l'avancement des tendances en matière de conception.
2005
Flirter avec le noir en 2004 a conduit à une expérience majeure pour la sortie de Tiger en 2005. Nous voyons ici la plus grande partie de la page d'accueil Apple.com inondée de noir. Une tendance qui a porté à de nombreuses pages de produits.
En 2005, les réflexions sur les produits, également visibles au bas de cette page avec les iPod, ont également constitué un gros problème. Je me souviens parfaitement de les avoir vues et de les avoir immédiatement volées pour les projets sur lesquels je travaillais à l'époque.
2007
Les tendances Apple sont restées relativement statiques au cours des prochaines années. Ce n’est qu’à la fin de 2007 qu’elles ont finalement fait un saut énorme et très bienvenu vers le site que nous connaissons aujourd’hui.
La page d'accueil du site a été complètement remaniée. Ils ont considérablement élargi le contenu et détruit l'ancien système de navigation aquatique. Ils ont été remplacés par une version grandement simplifiée qui utilise les dégradés lisses que j'ai déjà mentionnés suivrait la tendance de l'aqua pour la plupart des concepteurs. La largeur de contenu étendue peut certainement être attribuée aux écrans larges qui étaient maintenant présents sur la plupart des ordinateurs de bureau et des ordinateurs portables. Il est très important de rester au courant des évolutions matérielles qui peuvent et doivent influer sur les tendances de conception de l'interface utilisateur.
Notez également que la barre de recherche est enfin en haut de la page. C’était une réflexion après coup qui avait été faite trop longtemps au fond des lieux, et c’était génial de le voir enfin attirer l’attention et la notoriété qu’il méritait.
2011
Apple a trouvé son rythme avec le design précédent et est resté pratiquement inchangé jusqu'en janvier 2011, une performance impressionnante à tous points de vue!
Au début de cette année, nous avons vu Apple prendre du recul et redonner à la navigation un aspect brillant, bien qu’une finition sombre mise à jour. Ils ont également commencé à expérimenter avec une texture de bruit de fond subtile, un geste douloureux qui a donné l’impression à leur équipe de conception généralement leader de sauter sur des tendances populaires définies par d’innombrables autres avant eux. Cliquez sur l'image ci-dessous pour voir la texture de près.
Et après?
Il est difficile de prédire où la page d'accueil d'Apple ira ensuite, mais nous voyons des expériences intéressantes se dérouler plus loin dans le site. Bien que la texture de la page d'accueil ait perdu de sa texture, la page actuelle de l'iPhone a introduit une implémentation beaucoup plus lourde d'un fond texturé, avec une zone de produit en médaillon.
Il y a aussi des animations vraiment impressionnantes de l'iPhone volant à l'intérieur et à l'extérieur.Celles-ci remplacent les GIF animés de 1998 par les technologies Web modernes, mais le cœur de l’idée est sans aucun doute le même.
Allons-nous maintenant voir Apple revenir à de vieilles astuces comme les produits animés et les boutons brillants? Et vont-ils s'embarrasser dans leur implémentation d'arrière-plans texturés, en introduisant peut-être davantage de textures que nous voyons dans iOS? Votre proposition est aussi bonne que la mienne!
Conclusion
Cette étude de l'évolution de Apple.com est bien plus qu'un simple aperçu des caprices d'une seule entreprise. Elle constitue une leçon importante sur plusieurs grandes tendances en matière de conception de sites Web pour toutes les entreprises au cours de la dernière décennie. Nous avons assisté à la simplification des mises en page et à la réduction du texte, à la montée en puissance du type sans empattement et à une histoire d'amour de plusieurs années avec gloss à laquelle nous sommes toujours confrontés malgré la renaissance du minimalisme qui en a résulté.
Nous pouvons facilement repérer d'autres tendances, telles que l'augmentation de l'importance des barres de recherche, la prise de conscience que la navigation doit être importante et facile à trouver et la richesse que les nouvelles technologies Web apportent à la conception Web dans une ère post-Flash. Apple a été responsable de pousser HTMl5 et CSS3 peut-être plus ouvertement que n'importe quelle grande entreprise de technologie dans un assaut direct contre le règne d'Adobe.
Nous remercions chaleureusement les gens d’Internet Archive d’avoir préservé ceux-ci et d’autres pièces importantes de l’histoire du design. Je suis impatient de voir si Apple servira de leader ou de suiveur des tendances en matière de conception Web dans les années à venir.