Comment ils l'ont fait StarWars.com

Les icônes sont encore une fois une autre fonctionnalité conçue pour parler directement aux fans de Star Wars. Par exemple, pour l'icône "Films", au lieu de choisir une caméra ou une bande, le concepteur a choisi une icône représentant le texte défilant qui apparaît au début de chaque film Star Wars. Pour l'icône de la communauté, au lieu de montrer le contour de deux personnes, ils ont choisi de montrer un casque Storm Trooper. La pertinence de chaque élément de navigation est renforcée par ces décisions pour les fans de Star Wars, et l'expérience n'est pas diluée pour les nouveaux venus..

Une autre icône importante à signaler est le bouton "Rechercher". Bien que cela puisse sembler être une loupe (une icône de recherche courante), il s'agit également d'une version simplifiée à l'extrême d'une Death Star, l'un des éléments les plus importants du film.. 

Cela soulève un point très important à propos de toutes les icônes du site: en règle générale, le concepteur a choisi de conserver les informations et formes de base connues, telles qu'une loupe ou le contour d'une personne, mais d'ajouter des éléments à ces formes de base. qui ont une signification pour ceux qui les comprennent. Cela procure un sentiment d’amusement et un véritable sens de l’intégrité thématique sur l’ensemble du site..

Icône de menu sabre laser

Nous allons plonger un peu plus loin dans ce qui est devenu l’une des parties les plus parlées de ce site: la navigation au sabre laser..

Aux points d'arrêt inférieurs, la navigation est accessible via un bouton situé en haut à gauche de la fenêtre du navigateur. Au début, cela peut ressembler à un bouton de menu normal, mais une fois que vous avez cliqué dessus, les lignes se transforment en forme de X et ressemblent à deux sabres laser..

Tout cela est fait en utilisant des techniques CSS simples et un petit peu de JavaScript. Voici le balisage du menu:

Les travées avec le bar la classe deviennent les sabres laser. Voici une reconstitution du CSS utilisé pour accomplir les effets:

# nav-tiroir-toggle border-right: 1px solid # 333333; largeur: 60px; hauteur: 60px; curseur: pointeur; position: fixe; en haut: 0; à gauche: 50%; marge gauche: -30px;  .toggle-icon display: block; position: relative; en haut: 50%; largeur: 100%; marge: -22px auto 0 2px; -webkit-transition: marge 600ms; -moz-transition: marge 600ms; transition: marge 600ms;  .bar display: block; largeur: 38px; hauteur: 2px; marge: 9px; border-right: 28px solid #fff; border-left: 6px solid # d6d6d6; -webkit-box-dimensionnement: border-box; -moz-box-dimensionnement: border-box; taille de la boîte: boîte-frontière; -webkit-transition-property: -webkit-transform, margin, border-right-color, box-shadow; -moz-transition-property: -moz-transform, margin, border-right-color, box-shadow; propriété de transition: transform, margin, border-right-color, box-shadow; -webkit-transition-duration: 600ms; -moz-transition-duration: 600ms; durée de transition: 600ms;  .bar: nth-de-type (2n) -webkit-transform: rotation (-180deg); -moz-transform: rotation (-180deg); -ms-transform: rotation (-180deg); -o-transformer: rotation (-180deg); transformer: faire pivoter (-180deg);  / * Etats basculés * / .toggled .toggle-icon margin: -32px 0 0 7px;  .toggled .toggle-icon .bar: nth de type (3) margin-left: 5px; -webkit-transform: rotation (-42deg); -moz-transform: rotation (-42deg); -ms-transform: rotation (-42deg); -o-transformer: faire pivoter (-42deg); transformer: faire pivoter (-42deg);  .toggled .toggle-icon .bar: nth de type (2) margin-left: 14px; -webkit-transform: rotation (-137deg) translateY (-15px); -moz-transform: rotation (-137deg) translateY (-15px); -ms-transform: rotation (-137deg) translateY (-15px); -o-transformer: faire pivoter (-137deg) translateY (-15px); transformer: faire pivoter (-137deg) translateY (-15px);  .toggled .toggle-icon .bar: nième de type (1) opacité: 0;  / * Lightsaber glow * / # nav-tiroir-toggle.toggled: survol .bar: n-de-type (3) border-right-color: # ddf1da; boîte-ombre: 4px 0 6px 1px rgba (83,228,68,0,65);  # nav-tiroir-toggle.toggled: survol .bar: nième de type (2) border-right-color: # e9b8b9; boîte-ombre: 4px 0 6px 1px rgba (205,40,44,0,75); 

Enfin, un peu de JavaScript qui bascule l’état de navigation:

(function () $ ("# nav-tiroir-toggle"). on ("clic", fonction () $ (this) .toggleClass ("toggled");); ());

Remarque: une partie du code ci-dessus a été prise directement sur StarWars.com, tandis que d'autres ont été recréées pour obtenir le même effet.

Jetez un coup d'oeil à la démo finale.

Bien qu’il s’agisse d’une technique apparemment simple, elle s'adresse au public de manière beaucoup plus nuancée et plus riche qu’un simple «X» ou un hamburger..

La page 404

Les concepteurs de StarWars.com ont réfléchi à de nombreux détails apparemment mineurs dans leur processus de conception. Je voudrais souligner dans cet article la page 404.

En tant que développeurs ou concepteurs Web, nous avons souvent oublié les 404 pages, car nous pouvons facilement les considérer comme des "cas extrêmes". Nous semblons les oublier car ils ne sont pas ce qui est censé arriver, Nous ne concevons donc pas beaucoup pour eux. Cependant, 404 pages méritent beaucoup plus d'attention qu'on pourrait le penser. Les utilisateurs atteignent 404 pages lorsqu'ils tentent d'accéder à du contenu qui n'est plus disponible, ou qui est peut-être lié ou mal saisi. Ce moment de l'expérience utilisateur devrait être exploré beaucoup plus intentionnellement.

Lorsqu'un utilisateur n'arrive pas à une page qu'il tente d'atteindre, cela peut être très frustrant et amener l'utilisateur à quitter immédiatement. Toutefois, si le design de la page 404 est tel qu'il aide l'utilisateur et le ravit dans une certaine mesure, son attention peut être retenue. Dans le cas de StarWars.com, lorsqu'un utilisateur visite une mauvaise adresse (telle que http://www.starwars.com/nowhere), il est présenté avec un "404" graphique, avec une étoile de la mort incomplète se tenant à la place de le zéro et le message "Cette page n'est pas complètement armée et opérationnelle. Essayez autre chose?"

Cette page est efficace pour deux raisons. Premièrement, il parle directement aux fans de Star Wars; pour la majeure partie de la série de films, l’Étoile noire ressemble à celle de la page 404 et est en cours de construction. Quand il est enfin terminé dans la finale des six films, l’empereur dit à Luke: 

Maintenant, observez la puissance de feu de cette armé et opérationnel poste de combat!

C'est un point central de la série de films. Les concepteurs de StarWars.com savaient que tout fan venant sur le site et atteignant la page 404 se souviendrait probablement de ce moment dans le film, et au lieu de se concentrer sur la frustration de ne pas atteindre ce qu'ils cherchaient, ils pourraient être ravis ou distraits. par la mémoire du film.

Bien que cela semble être une occasion manquée d'utiliser la fameuse citation "Ce ne sont pas les droïdes que vous cherchez", l'omniprésence de Star Wars a conduit à de nombreuses pages 404 qui utilisent déjà ce thème, y compris des sites populaires tels que GitHub..

Conclusion

Cela met fin à notre enquête sur le nouveau StarWars.com. Y a-t-il des morceaux intéressants du site que vous avez découverts? Peut-être êtes-vous intéressé à lire un article "Comment ils l'ont fait" sur un autre site? Dites le nous dans les commentaires!