Blog >Branding
>
Toutes les évolutions du Webdesign d'Apple.com depuis 1996
Branding

Toutes les évolutions du Webdesign d'Apple.com depuis 1996

Regardez comment l'un des site les plus célèbres au monde a évolué au fil des années
photo de profil axel sani
Axel Sani
19.08.2022
10
min

Voyons ensemble comment les interfaces d'un des sites les plus connus au monde s'est métamorphosé en 26 années. Apple est bien connu dans le milieu du webdesign. C'est un véritable modèle qui sert d'inspiration à de nombreux designers. Pourtant si on penche sur les premières versions du site, on se rend compte que les tendances en matière de webdesign ont bien évolué au fil des années. 

La marque Apple : une stratégie de branding unique

En effet, ce que vous voyez aujourd'hui sur le site d'Apple ne vient pas de nul part. Le webdesign est en parfaite cohérence avec toute la stratégie d'image de marque élaborée depuis la création de la société. Qu'il s'agisse de ce goût pour l'innovation et la R&D ou bien même de cette simplicité et ce design minimaliste qui caractérise la marque. 

Sa baseline "think different" reflète également le souhait de se démarquer par rapport à ses concurrents en offrant une expérience inédite. C'est en tout cas ce que le site internet d'Apple souhaite faire transparaître.

Les premières interfaces d'Apple.com

un premier prototype à la naissance d'internet

1994

Les toutes premières interfaces d'Apple sont bien loin du site actuel. A cette époque, les navigateurs n'était pas aussi développés et le web ne s'était pas encore réellement démocratisé. C'est pourquoi nous retrouvons un design classique, qui s'inspire du design des applications de l'époque (et notamment des jeux vidéos de l'époque).

La démocratisation de l'internet, l'apparition du CSS

1996

Il faudra attendre 1997, année de démocratisation d'internet, pour pouvoir voir ce que beaucoup considèrent "la 1ere interface web de l'histoire d'Apple". Ici encore le design n'était pas transcendant, sachez que cela représentait beaucoup pour l'époque : une navigation sur le côté, des lignes pour séparer les différents blocs, un CSS (style) simple mais présent, beaucoup d'ombres sur les éléments et textes (qui disparaîtront au fil des années).

1998

Steve Jobs va même aller jusqu'à miser sur l'image, en donnant un aperçu XXL du produit du moment (et cela dès la home page). Idée révolutionnaire qu'Apple gardera jusqu'à aujourd'hui. On notera que les polices et typographies utilisées à cette époque ont bien évolué, il n'est plus question aujourd'hui d'utiliser des polices avec du serif pour du texte simple.

L'arrivée à l'ère 2000 : de nouvelle tendances

L'arrivée de nouveaux produits signés Apple

Site apple.com 2000

C'est également à cette période que de grands produits comme l'Iphone ou l'Imac voient le jour. Et il faut dire que le site internet marchand de la firme était à la hauteur ! On notera plus d'impact avec des textes exagérés, un copywriting plus juste, parfois de la couleur et surtout ... Une nouvelle navigation à deux étages discrète, épuré, très bien dessiné.

Site internet apple.com 2006

Même s'il y a encore beaucoup d'ombres, de traits, de détails superflus, la société Apple a fait un grand bond en avant.  Tous ces éléments s'effaceront petit à petit pour laisser place en 2007 (moment de sortie de l'Iphone) à une interface plus sobre, qui suscite l'émotion du spectateur, mettant encore plus en avant l'image.

Sortie de l'Iphone en 2007

A partir de 2010 : un style plus sobre

Plus d'images, plus de photographie, pour encore plus d'effet wahou.

Site apple.com 2011

En effet, les visuels d'Iphone, d'Ipad sont de plus en plus originaux et prennent toujours plus de place sur le site d'Apple. Cela a pour but de renforcer les émotions du spectateur. C'est également à cette période qu'Apple utilisera son slogan "shot on iphone 6" pour mettre en avant la qualité de l'appareil photo de leurs produits. Ce slogan marketing sera conservé jusqu'à nos jours.

Encore plus de simplicité

Il est bon de noter que nous avons complètement oublié le serif, pour laisser place à des typographies plus sobres, modernes. A cette période, Apple se bat contre le "gros" le 'lourd", ils souhaitent créer des produits toujours plus léger, plus fin .. C'est ce qu'on observe dans leur site avec parfois des prises de vue de profils qui permettent de mettre en avant le minimalisme utilisé par leurs équipes design.

Apple crée la tendance design

Site apple.com 2014

C'est à cette période qu'Apple fait évoluer sa navigation, encore plus simple, sans aucun détail, parfois avec un léger flou en arrière plan qui sera repris par de nombreux designers. Apple créera aussi la fameuse tendance du mode sombre, en développant certaines pages sur un fond entièrement noir. Le logo quant a lui est monochrome, fini le dégradé ou la personnalisation, place à la simplicité absolue. Il lancera également l'idée d'une section sur un fond légèrement gris (qui ne sont plus délimité par des lignes grises) avec le lancement de leurs derniers Iphone.

Autant de tendances que nous retrouvons sur les sites internet de nos jours.

Depuis 2020 : place aux images

L'apparition du motion design

Car oui, les écrans Apple utilisaient déjà beaucoup de photographies. Cependant c'est à partir des années 2020 qu'Apple utilisent des fond abstract, mis en avant avec du motion design. Cette technique d'animation web permet de rendre l'expérience utilisateur encore plus immersive, en créant une scène de toute pièce avec laquelle l'utilisateur peut interagir.

Apple, obligé d'aller encore plus loin

Le copywriting a lui aussi évolué. Le développement de certaines marques étant devenu de plus en plus fort, Apple a été obligé de redoubler d'efforts en ajoutant plus de couleurs, plus d'effet whaou, des mots encore plus juste (voici quelques conseils pour obtenir l'effet wahou grâce à Webflow)

Capture apple.com 2022

Aujourd'hui Apple s'amuse à créer des univers pour ses différents produits. Parfois avec un dégradé, parfois en mettant en avant la photo .. Certains univers utilisent aussi d'autres éléments plus modernes comme de la 3D.

Tous les sites internet suivent ces évolutions

L'évolution du site internet de l'entreprise Apple a versé beaucoup d'encres ces dernières années. Il faut savoir que les nouveautés produites par la firme sont suivies par de nombreux product designer qui n'hésitent pas à s'inspirer de leur production. C'est ce qui fait la puissance de l'entreprise : être un modèle en la matière. L'équipe Elias a récemment enqueté en analysant les 5 raisons principales qui rendent ce site si extraordinaire

De cette manière, on peut observer l'évolution de nombreux autres sites comme Google, ou Netflix qui tendent vers ces mêmes règles :

  • Toujours plus simple, pour faciliter l'expérience utilisateur
  • Less is more, éviter les détails superflues
  • L'image et la photographie en avant pour susciter l'émotion
  • Un petit + comme du motion design ne fait pas de mal

Design Site Google.com

Bonus : la refonte de votre site internet

Car oui, comme le montre Apple, les tendances évoluent vite et il est important de toujours rester à jour. Heureusement, une refonte ne signifie pas jeter à la poubelle tout ce que vous avez déjà au sujet de votre marque. Il ne faut pas confondre "refonte" (le fait d'actualiser son site) avec "rebranding" (revoir en profondeur son positionnement et sa stratégie de marque) ce dernier peut par exemple nécessiter de changer les couleurs, votre nom ou bien même votre logo (regardez les plus gros exemples de rebranding de 2021).

Soyez rassuré, ce n'est pas le cas d'une refonte

Cela nécessitera seulement l'intervention d'un UX designer pour les contenus et la structure, d'un UI designer pour l'aspect visuel, d'un intégrateur web. Nous vous conseillons de passer par une agence pour ce type de projet (voici nos process de création d'un site)

En ce qui concerne la technologie, vous avez le choix. N'hésitez pas à utiliser Webflow si vous souhaitez créer un site vitrine aussi extraordinaire qu'Apple.com. Nous avons créé pour l'occasion un comparatif Webflow vs Wordpress.

Besoin de (re)lancer votre marque ?
Voyez grand. Très grand.