Branding
9
min
Auteur :
Axel Sani

5 raisons du succès du site d'Apple

Car oui, le site d'Apple est un des plus puissants au monde. Et on ne parle pas que d'arborescence et de temps de chargement de site. Vous imaginez bien que ces recommandations ne suffisent plus tant les ambitions de la firme américaine sont élevées. Aujourd'hui la société Apple a développé un produit unique, que l'on peut parfaitement analyser sur leur site. Reconnaissable entre 1000, le site Apple.com sert aujourd'hui d'inspirations à des milliers de designers. Il est intéressant de voir comment certains éléments ont influencé les tendances de l'écosystème web.

Pré-requis : le design ne fait pas tout

Car le site d'Apple n'est pas qu'une histoire de design. C'est en tout cas ce que nous répondons à toutes les personnes venant nous voir en disant "J'aimerai avoir le même site qu'Apple".

Prenez le temps de trouver votre positionnement

Il ne faut pas oublier que cette marque existe depuis presque 50 ans. Steve Jobs avait à cette époque choisi d'axer son positionnement sur un design produit unique. Il est d'ailleurs connu qu'Apple possède le recrutement de product designer le plus exigeant au monde ! A contrario de grandes entreprises comme Sony ou Microsoft qui préfèrent engager une armée de designer.

Evolution du logo d'Apple

Développer le Why, How, What de votre marque

L'image de marque d'Apple est parfaitement rodée, et permet à l'auditeur d'y associer des émotions sans même voir quelconque produit. Cela ne se fait pas en un jour. Le storytelling d'Apple a lui aussi pu être longtemps travaillé, et illustre parfaitement ses produits en cohérence avec leur slogan "think different".

N'oubliez pas votre produit

Enfin il ne faut pas oublier le produit mis en avant par Apple. C'est aussi ce qui fait la différence sur un site (et qui ne dépend pas du webdesigner). Des produits uniques, visuellement sophistiqués, à la pointe de la technologie, laissant la possibilité à plusieurs intégrations (l'écran des tablettes, ordinateurs, smartphones, permet de personnaliser les photos à l'infini grâce au système de mock-up).

Keynote Apple

Notre conclusion si vous voulez avoir le même site qu'Apple

Gardez donc bien en tête que l'effet que votre site provoquera ne dépendra pas uniquement du travail du webdesigner. Il faut prendre des aspects internes à votre activité : pourquoi faites vous cela, quelles sont vos valeurs, comment vos spectateurs voient vos produits, quel est votre storytelling, qu'avez vous d'unique ?

Nous conseillons toujours à nos clients de créer leur propre identité (lié à leur vraie personnalité), plutôt que d'essayer de s'associer à une marque forte qui existe déjà (principe de marketing : différenciez vous). Pour vous aider le Studio Elias a listé les 6 tendances de branding à appliquer en 2022.

Secret n° 1  : des images à couper le souffle

C'est une chose qu'on ne prend souvent pas en compte lorsque l'on crée d'un site internet : le shooting photo.

Des photographies uniques, signées Apple

Et pourtant il est important comme le montre la page de lancement de l'Iphone 11 d'Apple (2020). Toute la page est ponctuée d'images uniques, en excellente qualité. Parfois des portraits de personnes (pour renforcer le côté humain), souvent retouchées (pour renforcer le côté artiste de la marque). Par moment il s'agit de photographie de paysages, tous plus extraordinaire les uns que les autres (pour signifier cet esprit de grandeur, Apple utilise souvent des photographies de l'espace). Ils ont réussi un formidable coup marketing en associant ces clichés à leur produit avec le slogan "shot with an Iphone 11". Rassurez-vous, même si ces clichés sont pris avec un Iphone, ils sont largement retouchés par la suite.

Photographie © Apple

Photographie © Apple

Ce qui vous différencie d'autres acteurs

L'image peut donc faire la différence sur un site, c'est une chose que d'autres sociétés ne pourront pas recopier, ils n'appartiennent qu'à vous ! C'est un très bon moyen de susciter des émotions chez le spectateur.

Après tout, une image vaut mille mots !

Photographie © Apple

Secret n° 2 : un copywriting juste

"Why selfie when you can slofie ?"

Voici une chose à laquelle on ne pense pas assez souvent. Le copywriting se définit comme "l'art des mots", c'est la manière dont nous allons convaincre un spectateur en utiliser les bons mots. Cela sert également à développer le branding d'une marque, à parvenir à lui rendre ce côté humain. De la même manière qu'un humain aura un langage plus ou moins soutenu, le copywriting d'une marque peut être plus ou moins familière.

Le "ton of voice" d'Apple

Dans ses présentations de produits, la société Apple adopte une stratégie assez juste en utilisant un copywriting à mi-chemin entre fun et sérieux. Les phrases sont courtes mais originales, cela donne une autre dimension au site en lui donnant plus d'impact.

Another hour of battery would be great. Here's five.

C'est aussi en cohérence avec le fait de laisser beaucoup d'espaces vides dans le site : de cette manière le spectateur se concentre sur ce qui importe vraiment.

Secret n°3 : Un design épuré, minimaliste, qui respire

C'est aussi un des secrets d'Apple  : Less is more

Il est inutile de trop en faire, d'essayer d'ajouter des détails partout, d'essayer de combler des espaces vides etc..

Iphone 13 Landing Page

Laissez votre design respirer !

Apple l'a bien compris et joue d'ailleurs sur ce point en gardant des couleurs très sobres, pour faire ressortir les call to action en bleu. Il y a également très peu d'habillage sur leurs pages, seulement la place pour du texte et des images (qui sont parfois démesurées). On remarquera qu'Apple a tendance à épurer ses interfaces au fil des années. Lisez cette étude analysant les interfaces du site d'Apple depuis 1996.

Iphone 13 Landing Page

Résultat ? Votre user se concentre uniquement sur ce qui compte (et en bonus cela améliore la note écologique du site)

Secret n°4 : Un parcours UX (super) optimisé

Cela n'est pas un plus, mais plutôt une obligation pour un site de cette trempe. Toutes les recommandations citées précédemment n'aurait pas d'importance si la base n'était pas solide.

Définir une arborescence logique

A ce niveau Apple arrive également à se différencier en étant un niveau au dessus de ses concurrents. Toute la réflexion autour du site et le parcours utilisateur qui en découle sont extrêmement bien pensés.

Faciliter l'expérience de vos consommateurs à travers le site

Apple a beaucoup de produits, la navigation est un sujet important qui a beaucoup évolué au fil des années. Il y a quelques années Apple a eu la merveilleuse idée d'ajouter des icons à son sous-menu pour vous aider à mieux identifier les différentes catégories.

Navigation Mac Apple.com

Apple a aussi réussi à simplifier la structure de son site.

La règle est simple : chaque produit possède une page qui détaille ses spécificités et avantages. le call to action "buy" est identique quelque soit le produit et nous permet de passer à l'action en achetant le produit en quelques clics (pas si évident à réaliser quand on connait toutes les options de personnalisation d'un produit Apple).

Enfin, on notera que chaque page produit est particulièrement longue. Cela respecte parfaitement la règle du clic : il est plus facile pour un utilisateur de scroller plutôt que de de cliquer et d'attendre que la nouvelle page se charge. De plus, pas besoin de se perdre sur le site pour trouver une information, on sait tout de suite où la trouver.

Et si cela ne suffisait pas, il vous suffit de vous rendre en bas de chaque page pour pouvoir trouver votre bonheur dans un footer très complet (cela tend à devenir un réflexe pour les utilisateurs web). Tout cela fait partie des processus de création d'un site internet.

Secret n°5 : La nouvelle tendance web, du motion design

D‍ernier secret donnant un coup de pouce au site d'Apple : la création d'animation en motion design.

Même si cela tend à disparaître (il n'y en a plus dans la version 2022), cela a permis de mettre en lumière plusieurs produits de la firme Apple.

Le motion design consiste à animer une image, ce type d'animation va bien au delà de simple animation web car elle peut être déclenchée en fonction du scroll de l'utilisateur, du survol d'une section etc.. c'est un mélange entre de la video et une image statique.

Début de l'animation
Fin de l'animation

Il existe aujourd'hui 2 principaux outils pour en créer : Adobe After Effect (pour professionnel) et Jitter (niveau intermédiaire). Voici nos recommandations pour obtenir un effet wahou sur votre propre site grâce à Webflow.

Bonus : définissez votre propre webdesign

Vous pouvez suivre ces 5 recommandations pour la création de votre prototype. Elles fonctionnent bien (même si les tendances évoluent vite). Toutefois nous vous conseillons de créer un webdesign qui vous ressemble, en vous concentrons sur la personnalité de votre propre entreprise.

  • Pourquoi je fais ça ?
  • Quelles sont mes valeurs ?
  • Comment je me différencie de mes concurrents ?
  • Quel est mon produit ?

Nous vous conseillons même de réaliser ce webdesign en 2 étapes : commencez par vous poser la question "que dois-je dire sur mon site" en rassemblant tous vos contenus. Dans un deuxième temps posez vous la question "à quoi cela doit ressembler" et parcourez le web pour trouver la perle rare. Pour vous aider suivez notre guide sur les process de création d'un site web.

Et enfin si vous voulez connaître (tous) les secrets de la firme américaine, nous vous recommandons le film "Steve Jobs".

Steve Jobs, par Danny Boyle (2015)
plus
plus