Comment Apple a influencé la conception Web au fil des ans

Apple est l'une des plus grandes marques au monde et avec cette popularité, une grande influence? Peut-être plus que toute autre société dans le monde, Apple a joué un rôle déterminant dans la conception des produits, des applications et des sites Web. Dans cet article, nous discuterons du style de conception général d’Apple et de son influence sur de nombreux autres.

Une grande partie de la campagne de marketing d’Apple provient de son site Web très populaire sur Apple.com. Alexa classe ce site au 32ème rang en popularité, ce qui le place devant des sites tels que la BBC, Craigslist et PayPal, ce qui n'est pas mal pour un site qui est essentiellement une vitrine en ligne pour une seule marque..

Le site d’Apple est réputé pour son identité de marque attrayante et ses mises en page propres. Grâce à cette réputation, de nombreux autres sites ont suivi. Le style de conception d'Apple va du design et de l'emballage de produit à la manière dont les widgets de la barre latérale sur leur site sont des conceptions.?


Apple.com Voyage dans le temps

Cet article se concentrera principalement sur les itérations les plus récentes du site Web d’Apple? mais avant de creuser trop loin, visitons Apple.com au fil des ans (avec la permission de WaybackMachine). La chose importante à retenir ici est que Apple.com, tout comme le reste de l'internet, a débuté de façon plutôt moche par rapport aux normes actuelles. Cliquez sur chaque image pour voir la capture réelle de wayback?

1996


Ouais? je connais?

1999

2000


L’année 2000 a été marquée par l’introduction des fameux onglets "à bulles"? qui resterait pendant longtemps.

2001

2004

2006


En 2006, de nombreux styles associés à l'esthétique moderne "Apple" ont commencé à prendre forme sur leur site..

2008

Bon, maintenant que nous avons parcouru le site Apple au cours des 15 dernières années, voyons ce qui l'a rendu incroyablement influent dans les versions les plus récentes de leur site..


Moins est plus

La plus grande caractéristique de la conception web influente d'Apple est son minimalisme. Apple reste simple en utilisant de grandes zones de blanc et de grandes marges pour se concentrer sur des zones uniques de contenu.

La page d’accueil d’Apple propose normalement un produit de grande taille avec un seul slogan et quelques autres pages liées sous le pli. Par exemple, au moment de la rédaction de cet article, Apple présente une grande image de l'iPad de deuxième génération d'Apple avec un titre et un sous-titre volumineux..

L’idée supposée derrière ce choix de conception est que Apple ne veut pas tout vous imposer à la fois. Au lieu de cela, ils veulent que vous cliquez sur la page du produit individuel où ils peuvent montrer plus d'informations. Adoptez cette approche par opposition à la page d’accueil de Microsoft. Microsoft propose également une grande image mais la page est encombrée de multiples annonces et les points saillants en bas sont encore plus difficiles à lire..


Informations organisées

Certains sites du site Apple doivent transmettre de nombreuses informations à la fois. Ce serait dérogatoire à la convivialité si elle était scindée. Cependant, ces zones semblent toujours très propres et bien organisées car tout est confiné à une grille.

Le site iPod actuel d'Apple présente une image de héros glissante, trois plus petites étant positionnées en dessous. Ce trio se décompose ensuite en six autres éléments créant un sens hiérarchique. Apple présente son produit le plus important (et par coïncidence, coûteux) en haut et affiche les produits de moindre qualité ci-dessous (tels que les mises à jour de logiciels et les accessoires).

Cet effet pyramidal est évident sur tout le site d'Apple.


Marque cohérente

Pour la plupart des marques, l’importance de la vente au détail est un moyen de publicité essentiel. Les gens vont chercher votre produit sur une étagère et scanneront les informations sur l'emballage. L'expérience de vente au détail d'Apple est très différente et, puisque vous ne voyez pas le produit avant de l'acheter (à peu près n'importe où), il n'est pas nécessaire de remplir l'emballage avec du texte et des graphiques publicitaires..

Cependant, l’intéressant est que le site Web d’Apple est conçu de la même manière, minimaliste. Le style d’Apple s’observe dans toutes ses propriétés physiques et virtuelles. Vous pouvez donc identifier une boîte (ou même un produit) Apple comme une boîte Apple, comme vous le feriez pour un site Web..


Photos du produit

Comme nous l'avons mentionné précédemment, Apple utilise principalement de grandes photos uniques de ses produits au lieu de plusieurs plus petites. Lorsque vous visitez l'une de leurs rares pages produit, l'image est au centre des préoccupations avant que ne soient mentionnés les prix, les fonctionnalités ou la disponibilité. Cette technique particulière joue très bien dans la théorie générale de la hiérarchie visuelle en mettant le produit au premier plan..

Cette théorie est très simple mais très efficace pour donner une bonne image du produit en tant que première impression..


Animation et interactivité à partir des nouvelles normes Web

Comme vous le savez sûrement, Apple est un croisé des nouvelles normes Web telles que HTML5. Leur propre site reflète cela en proposant une sélection d'interactivité quelque peu novatrice grâce à l'utilisation de technologies Web non Flash..

Nous savons également de première main que Flash est la première cause de crash des Mac.

Ces petits domaines d’animation semblent également extrêmement fonctionnels par rapport à leurs homologues Flash. Le gang de dégoût de Flash grandit de jour en jour et mon utilisation de Chrome démontre régulièrement le crash du plugin populaire d’Adobe. Le fait est que les hauteurs offertes par Flash avant HTML5 sont en cours de réplication avec une meilleure compatibilité dans la cinquième révision de HTML..

Le boycott virtuel de Flash est quelque chose qu'Apple n'influence pas sur son site Web. Au lieu de cela, c'est une démonstration de ce qui peut être réalisé avec uniquement les technologies compatibles avec les appareils mobiles d'Apple.

Le site iPad 2 d'Apple présente une démonstration interactive de son accessoire Smart Cover dans lequel les utilisateurs peuvent modifier la couleur de l'iPad et de son étui, puis glisser ou faire glisser (selon l'appareil) pour plier l'étui. Et pas de flash!

Les icônes

Lorsque vous naviguez sur le site d’Apple, vous remarquerez que la plupart des points marketing sont associés à des images qui donnent une petite vision du dribble marketing par ailleurs ennuyeux. Par exemple, le site Mac OS X d’Apple (illustré ci-dessous) utilise une grande icône en regard de la section de son système d’exploitation 64 bits. Le reste des points d’Apple a également sa propre icône.

Au fur et à mesure que vous approfondissez votre recherche sur le site d’Apple, les icônes deviennent de plus en plus apparentes. Lorsque Apple essaie de démontrer que cette interaction de son logiciel est 40% plus rapide, ils utilisent une image pour la mettre en évidence. Cela divise le contenu et ajoute un peu de couleur supplémentaire au design Apple, si ordinaire..

Il y a une icône pour ça.

Influence de l'interface

Le site Web d’Apple est une chose qui exerce une grande influence sur le design, mais son logiciel a un effet similaire. iOS utilise une gamme d'éléments d'interface uniques qui sont devenus apparents sur les applications Web et les sites Web. Par exemple, le curseur de basculement d'iOS peut être vu dans une sélection d'applications Web utilisant le style pour activer ou désactiver une action..

Apple a inauguré une nouvelle ère de conception d'interface utilisateur, propre et simple à utiliser. L'influence de l'interface utilisateur d'Apple se traduit par une grande expérience des applications Web qui ont adopté l'idée d'une interface minimaliste et simpliste, les fonctions clés étant facilement identifiables grâce au type d'élément utilisé. Si vous voyez un interrupteur à bascule, vous savez qu'il a deux fonctions principales: le plus souvent en marche et en arrêt.

Alors que les éléments d'interface utilisateur génèrent leur propre influence sur les applications Web, le style épuré et minimaliste de l'UX peut également être perçu comme ayant un impact sur la conception. Tout, des icônes au dégradé en passant par les menus dans Mac OS X, est superbe. Les dégradés subtils illustrés dans l'image ci-dessous rendent le design moins plat et me rappellent beaucoup le dégradé net de Chrome pour Mac..


Exemples de designs inspirés par Apple

Les exemples suivants ne représentent qu'un très petit échantillon de la grande variété de sites directement influencés indirectement par l'approche d'Apple en matière de conception de sites Web..

MacRabbit

La page produit de MacRabbit s'inspire des styles de conception et d'interface Web propres et monochromes d'Apple. Notez également que les mêmes applications et logos de support sont utilisés ici que sur Mac OS X.

Tapbots

Remarquez que Tapbots utilise la même grande image de héros dominant la page, suivie de trois applications moins importantes décrites ci-dessous..

Pixelmator

Les icônes sont une autre grande caractéristique de la conception Web d’Apple. Il y a une tonne de belles icônes bien conçues sur Apple.com et le site de Pixelmator en montre quelques autres. Il y a quelques icônes Apple faites ici, mais la plupart sont originales et jouent bien avec l'ombrage du texte.

Symphonie

Symphony présente la même disposition en Z que celle utilisée sur les pages de produits individuels d’Apple, avec un logo à gauche, suivie de la navigation, suivie d’une grande image de héros..

Culte de Mac

En tant que blog Apple, Cult of Mac tire de nombreux indices de conception du grand A lui-même. Les mêmes dégradés subtils sont utilisés dans le jeu de publications en vedette et les plus sombres dans la barre de menus..

Gibson

Il suffit de regarder Gibson pour indiquer une sorte d’influence Apple. Tout, depuis le trio Apple-ish d’images présentées en bas jusqu’à son inclusion dans chaque rafle de "conceptions Web infligées par Apple" sur le net, crie Apple.

Check-out

Le site de promotion de l'application Checkout applique de nombreux principes de conception d'Apple, notamment des dégradés de gris, des photos de produits volumineux et même le ticker de style Hot News d'Apple..

Les versions

Versions est une conception Web sombre mais qui utilise bien la théorie des espaces blancs. Bien que l’espace lui-même ne soit pas blanc, il utilise de grandes quantités d’espace vide. Les icônes personnalisées sont également utilisées pour démontrer le contenu.