Modifications apportées à Apple.Com Design
Apple.com a subi quelques ajustements à sa conception au cours de la semaine écoulée, cela change que si vous ne payiez pas suffisamment d’attention, vous n’avez peut-être même pas remarqué.
Bien que de nombreux rapports se réfèrent à cela en tant que "refonte", je pense qu'il est difficile de le classer en tant que tel. Il y a certainement des changements importants, mais les changements ne sont pas tout à fait une refonte complète comme ce fut le cas pour CNN.com fin 2009.
Néanmoins, les changements sont importants pour les concepteurs de sites Web. Je vais donc les examiner brièvement ici. S'il y a quelque chose à propos des changements que j'ai négligé de mentionner, n'hésitez pas à commenter.
Une barre de navigation repensée
Le changement le plus significatif (même s'il reste assez subtil) est l'aspect de la barre de navigation. Apple a une de ces barres de navigation que, du point de vue du design, tout le monde aime et envie. Il semble impossible que cela puisse être amélioré. Eh bien, ils étaient en mesure de trouver des moyens de le rendre encore plus beau et plus intuitif.
Voici l'ancienne barre de navigation:
Voici le nouveau:
Les changements incluent:
- C'est plus sombre
- Le dégradé a été remplacé par un aspect brillant plus audacieux
- L'apparence du logo est simplifiée
- Le champ de recherche est plus petit (plus de détails ci-dessous)
Je pense qu'il faut vraiment une grande équipe de concepteurs pour apporter des changements vraiment significatifs à l'aspect d'un élément d'interface utilisateur très important, tout en donnant l'impression que rien n'a changé. Cela montre simplement que les détails visuels ne sont souvent pas aussi importants que la sensation globale du design.
Le champ de recherche flexible (WebKit uniquement)
Étant évidemment biaisée par WebKit, l’équipe de conception d’Apple a inclus certaines améliorations de WebKit, dont l’une est associée au champ de recherche.
Dans la plupart des navigateurs, cliquer dans la zone de recherche éclaircira son arrière-plan pour obtenir un blanc plus lisible. Dans Chrome ou Safari, le champ de recherche utilise les transitions CSS3 pour devenir plus large et sans doute un peu plus utilisable. La capture d'écran ci-dessous montre le champ de recherche dans Chrome après qu'il a été animé pour devenir plus large:
Pour s'adapter à la taille de la zone de recherche, les autres éléments de navigation et le logo se redimensionnent.
J'aime cette fonctionnalité; cela ajoute un sentiment d'intuitivité. Mais il a, à mon avis, un petit défaut: il ne retourne pas à son état initial après avoir supprimé le focus. Bien sûr, si quelque chose a été tapé dans la zone de recherche, vous ne voudriez pas que la taille change, mais je pense qu'elle devrait revenir à son état normal si elle perd le focus et reste vide.
Bien sûr, comme il est extrêmement improbable que quelqu'un clique sur la zone de recherche et ne tape rien, je suppose que c'est une omission négligeable.
Entrée animée de la barre de navigation (WebKit uniquement)
Une autre petite fonctionnalité WebKit-only est l'entrée animée de la barre de navigation. Je ne me souviens pas avoir vu cet effet sur leur site auparavant, donc je suppose que c'est une autre nouvelle fonctionnalité. L'entrée animée ne se produit que sur la page d'accueil et une seule fois par session de navigateur. C'est une bonne pratique et une bonne leçon pour les développeurs qui ajoutent des effets animés à leurs interfaces.
Comme visualisé dans la capture d'écran ci-dessus, la barre de navigation entre hors écran, probablement en utilisant l'animation d'images clés CSS3, avec JavaScript pour contrôler le moment où l'animation devrait ou ne devrait pas se produire.
Les navigateurs de produits animés (WebKit uniquement)
Un autre ajout récent est l'utilisation de l'animation sur certaines pages du produit. Des animations basées sur CSS3 sont utilisées sur le Mac et iPod les navigateurs de produits, dont l'un est illustré ci-dessous:
Les produits s'animent lorsque vous arrivez sur la page pour la première fois, et si vous passez d'une sous-catégorie à une autre, les produits visibles disparaissent et de nouveaux sautent à leur place. Cela se fait via le code CSS3 basé sur les images clés, dont certaines est montré ci-dessous:
Sur les navigateurs autres que WebKit, l'animation du navigateur de produit passe à un fondu simple basé sur JavaScript. Bien que ce genre de chose ne soit pas idéal en toutes circonstances (puisqu'il s’agit essentiellement de «falsification de code»), c’est une option réaliste pour les développeurs et les concepteurs d’aujourd’hui qui veulent coder les meilleurs navigateurs possibles et offrir des fonctionnalités moins améliorées pour le reste. .
Boîte de recherche Suggestion automatique
[MISE À JOUR] Comme le soulignent un certain nombre de personnes dans les commentaires, la suggestion automatique n’est pas une nouvelle fonctionnalité. Notre inclusion en tant que "nouvelle fonctionnalité" était basée sur un autre article indiquant que la suggestion automatique était nouvelle. Néanmoins, nous conserverons cette section car il s’agit d’une bonne fonctionnalité qui peut potentiellement rendre un site Web un peu plus utilisable, et constitue un bon exemple à suivre pour les autres développeurs et concepteurs, si cela correspond à leur projet.
La liste déroulante de suggestion automatique basée sur Ajax apparaît lorsque vous tapez une requête de recherche:
Comme indiqué dans la capture d'écran ci-dessus, non seulement la liste déroulante affiche les résultats de recherche correspondant aux caractères saisis, mais les résultats sont accompagnés de photos et de descriptions de produits. Je pense que les photos ont plus de valeur à cet endroit que les descriptions, mais dans l'ensemble, cela peut rationaliser la recherche de produits et les conversions.
Rien d'autre?
Cela semble couvrir les principaux changements intervenus dans le récent réoutillage du design Apple.com. Y a-t-il d'autres modifications importantes à la conception ou au code que je n'ai pas mentionnées ici?
Cet article a été écrit exclusivement pour Webdesigner Depot par Louis Lazaris, rédacteur indépendant et développeur web. Louis court Web impressionnant où il publie des articles et des tutoriels sur la conception de sites Web. Vous pouvez suivez Louis sur Twitter ou contactez-le via son site web.
Que pensez-vous des modifications apportées au design Apple.com? Y a-t-il des changements que nous n'avons pas mentionnés ici?