La navigation de page est sans doute l’aspect le plus important de tout site Web correctement construit. La facilité avec laquelle vos visiteurs peuvent voyager de page en page aura une incidence sur l’émotion globale et l’interface utilisateur de votre site Web.
Les grands concepteurs de sites Web gardent toujours une surprise à chaque coin de rue, et les menus de navigation peuvent présenter ce grand moment. De la page entière au coin des liens, j'ai partagé quelques excellents exemples de navigation inhabituelle sur un site Web. Espérons que ces idées peuvent susciter un barrage de créativité en vous et dans vos projets futurs.
Quelques animations fantaisistes
À l'époque où Adobe (Macromedia) Flash avait décidé sur le Web, il n'était pas rare de voir d'étranges animations de navigation. Celles-ci ont toutefois été reléguées au second plan lorsque les normes HTML / XHTML ont commencé à se développer au cours des dernières années 2000. Depuis lors, nous avons constaté une augmentation considérable de la prise en charge des effets HTML5 et CSS3, ainsi que de la prise en charge intégrale du navigateur pour JavaScript et, plus important encore, jQuery.
Les gars de jQuery ont fait de l’animation web personnalisée un jeu d’enfant. Toute personne qui comprend les bases du scripting peut modéliser un excellent site web bibliothèque jQuery et sortez avec des commentaires extrêmement positifs. Ci-dessous, j'ai inclus une capture d'écran de Cooper Design, qui offre une surprise brillante pour leur navigation.
Au fur et à mesure que vous cliquez sur les liens du haut, vous serez envoyé voler horizontalement sur la page via l'effet jQuery. Sinon, cela ouvrira un sous-menu avec des catégories basées sur votre page de titre. Lorsque vous choisissez entre ces options, vous remarquerez également le défilement vertical des effets de page!
Leur site est un tableau d'animations fournissant une démonstration étonnante du pouvoir de la conception Web aujourd'hui. Alternativement, vous pouvez faire défiler verticalement comme d'habitude et faire la transition entre les pages gauche / droite en cliquant sur les colonnes côte à côte.
Un autre site, Janette D. Council, propose une navigation unique qui réorganise les éléments de son portefeuille en fonction des données de la requête. Par défaut, vous visualisez tous les projets, mais vous pouvez cibler les travaux d'impression, de logo et d'illustration individuellement.
De plus, ses images et informations sur le site s'ouvrent toutes sur la même page. Cela signifie que si vous utilisez une prise en charge complète de JavaScript, vous n'avez jamais besoin de recharger votre navigateur! Une inspection plus approfondie de son code montre qu’il n’existe aucune autre page à explorer pour Google. Ce n'est pas totalement une mauvaise chose, car toutes les informations de page sont strictement conservées dans un seul fichier!
Prise de pleine page
Lorsque vous pensez à une navigation de page inhabituelle, ces exemples suivants doivent rapporter le trophée. heartshapedwork est apparemment un portefeuille complet fonctionnant via WordPress. En entrant dans leur page d'accueil, vous remarquerez de grandes barres horizontales en cascade sur la page. Tous ces éléments affichent d'excellents effets de survol et mènent à des articles externes et à des photos de portefeuille.
Vous remarquerez que chaque barre a le titre du projet en caractères gras avec un sous-texte contenant le type de travail développé. Cela inclut les sites Web, les illustrations, les appareils mobiles, etc. Leur portfolio est exhaustif et très amusant à parcourir.
Le site Work Work Balance Balance Centre est un autre bon exemple. Le centre a été fondé en 1991 et a vu quelques mises à jour de son site Web à cette époque. En cours d’exécution sur Flash, l’ensemble de leurs fonctions de navigation est agrandi en agrandissant l’objet de navigation actuellement activé.
Ainsi, au fur et à mesure de votre navigation, vous remarquerez de grandes barres se concentrant sur des pages individuelles et des sous-pages avec des liens inclus. Ces liens ne vont nulle part en particulier, il suffit de vous faire glisser à travers la mise en page Flash. Fait intéressant, cet effet a été vu précédemment sur le site Web de Cooper, tous construits avec jQuery.
Grip Limited est peut-être un autre exemple de navigation en page plein écran. Lors du chargement du site, vous remarquerez des barres se déroulant pour afficher de nouvelles informations et des liens de page. Vous pouvez cliquer sur les en-têtes situés au-dessus de chaque barre pour réduire le contenu et afficher davantage d'espace à l'écran.
Peut-être pas la meilleure utilisation de la navigation, même si elle est absolument unique. Tout en haut se trouve un bar intitulé Ouvrir le menu qui laisse tomber encore plus de liens devant votre visage. Celles-ci incluent les pages principales de la société et des liens d’études de cas.
Dessins obscurs
Lorsque vous commencez vraiment à examiner le Web, de nombreux portefeuilles se présentent comme tout simplement obscurs. Yuna Kim a un portefeuille personnel qui prend véritablement une vie propre. Elle a construit toute la navigation à travers le positionnement jQuery et CSS.
Pour chaque élément du portefeuille, elle a désigné un symbole représentant le travail du projet. Carré pour le travail numérique, Triangle pour la marque et Circle pour l’impression. En faisant défiler la page, vous remarquerez que chaque lien de projet est une forme colorée marquant son travail.
De plus, sa navigation dans les rubriques diminue au fur et à mesure que vous vous déplacez dans les liens principaux. Les trois options Bonjour, Tweets, et Contacts affichera un contenu différent en fonction de l'endroit où vous vous trouvez. Pour être plus précis, les tweets et les contacts laisseront tomber les mêmes informations: sa dernière mise à jour sur Twitter ainsi que des contacts par courrier électronique et par téléphone. Bonjour fera une brève introduction à Yuna Kim et à son site Web. Des trucs plutôt cool!
Big Kid est un blog utilisant WordPress qui affiche des blocs de contenu individuels. Vous pouvez consulter leur site par vous-même pour voir ce que je veux dire. La navigation n’est pas si rare, bien qu’elle soit assez inhabituelle pour un blog. Une grande partie de tous les articles sont des mises à jour de portefeuille que vous pouvez trier.
Ce que j’aime vraiment, c’est l’individualité inhérente à leur mise en page. C'est presque l'utilisation la plus unique des motifs de blocs que j'ai jamais vue sur le Web. Du point de vue de l'expérience utilisateur, il est très facile de faire défiler tout et de classer les projets en fonction de leurs intérêts personnels. C'est aussi un site très léger, facile à charger dans la plupart des navigateurs que j'ai essayés (y compris Internet Explorer et Safari pour Windows).
Galerie de site
Puisqu'il y a tellement de styles de navigation étranges et inhabituels à couvrir, j'ai créé une petite galerie de mes favoris personnels.Ces sites Web présentent des styles étranges que je n'ai jamais rencontrés ailleurs sur le Web.
La popularité de la conception de sites Web maladroits a considérablement augmenté ces dernières années. Des mises en page étranges et inhabituelles, associées à une interface utilisateur appropriée, ont suscité de grands projets. Si vous connaissez des modèles similaires, veuillez proposer vos idées dans la section de discussion ci-dessous.
Amore
Amore possède un fond coloré. Rapide à charger, la navigation dans les pages est en fait présentée directement à l’alignement en bas au centre. Au fur et à mesure que vous vous déplacez d'un bloc à l'autre, la zone s'agrandit pour inclure un texte informatif sur la page. Toutes leurs informations s’ouvrent dans une fenêtre lightbox, ce qui évite de recharger chaque affichage de page.
Grille organique
Michael McDonald est le créateur de Organic Grid, tous construits sur Flash. L’application prend un certain temps à charger sur des connexions plus lentes mais je pense que vous apprécierez vraiment son style de design. Chaque zone de navigation apparaît sous forme de barre horizontale qui vous amène à un affichage de portefeuille pleine page. Il y a beaucoup de travail à faire ici et les visuels améliorés attirent avec brio la conception UX.
TinyTeam
Ce que j'aime le plus chez TinyTeam, c'est leur créativité dans la construction du site. Il n'y a pas de graphiques supplémentaires ni d'illustrations flashy, et leur toile de fond bleue est merveilleuse pour limiter les distractions. Un autre site construit sur Flash qui montre à quel point un menu de page peut être unique. En cliquant sur la zone centrale, un nouvel ensemble d'options s'ouvrira pour parcourir le portefeuille de l'entreprise.
LoveBento
Au début, LoveBento n'est pas facile à regarder. Il y a beaucoup de contenu à consommer et pas de navigation directe. En haut à droite, vous trouverez des panneaux déroulants, mais les objets réels se trouvent sur le côté gauche. Sous le logo de la société, vous trouverez un affichage unique d'images utilisées pour représenter les survols de liens. De plus, des liens numérotés en bas à droite vous permettent de naviguer entre les pages.
Lucuma
Nous avons trouvé ici un autre usage prospère du défilement horizontal. Leurs effets sont construits sous la bibliothèque jQuery. Lucuma a également des liens sous leur domaine de contenu principal offrant des validations XHTML et CSS. Lors de la conception de portefeuilles pour le Web, ils représentent vraiment une entreprise!
Andreas Smetana
La vitrine d’Andreas Photography met vraiment le mot inhabituel à l’avant-plan. Une fois la page entièrement chargée, vous recevrez une notification vous expliquant comment parcourir leur galerie de vignettes. En utilisant la molette de la souris ou les touches fléchées, vous pouvez naviguer entre les nombreuses catégories de photographies. Dans le coin inférieur gauche se trouve un autre ensemble de liens de menu qui s’ouvrent sur le côté de la page où vous vous trouvez. Génial!
Studio de conception cypher13
Nous arrivons ici à un autre studio de design avec un portefeuille correspondant défini dans un thème noir et blanc. La mise en page est construite avec HTML / CSS et utilise des effets d’animation jQuery pour la transition entre les éléments du portefeuille. La grande chose ici est à quel point chaque mouvement devient élégant. Vous vous sentez gracieusement offert un guide pendant que vous parcourez leur portfolio. Il est possible de trier les éléments en fonction du client et de la catégorie, ou de tirer parti de la barre de recherche qui affiche les résultats en temps réel.
Sortie studio
Studio Output apporte une nouvelle fonctionnalité à l'affichage de son portefeuille. La page d'accueil présente un magnifique collage d'images de projet sur lesquelles vous pouvez cliquer pour afficher plus d'informations dans un effet lightbox. Ils offrent beaucoup d’exemples d’images et affichent même des projets connexes lorsque cela est possible. Ici, j'ai coupé un morceau de leur portfolio d'illustrations et de graphiques Spongebob.
Duane King
Le portefeuille de Duane King est un autre excellent exemple de prise en charge du clavier. Une fois chargé sur la page d'accueil, vous pouvez faire défiler les segments à gauche et à droite avec les touches fléchées. Vous pouvez cliquer sur un projet pour agrandir l'image et afficher un peu plus d'informations. Ceci est également un autre exemple où les éléments de portefeuille ne se chargent pas sur une nouvelle page, tirant vraiment parti de la bibliothèque jQuery et des plugins en vedette.
Sideshow Press
Ce que j’aime vraiment chez Sideshow Press, c’est l’utilisation d’un signe dièse (#) entre les pages. Cela indique aux moteurs de recherche que tout nouveau contenu n'est pas chargé sur une nouvelle page, mais contrôlé dynamiquement via JavaScript. Dans ce cas, nous examinons une application Flash, mais c’est la raison pour laquelle cette technique fonctionne si bien. La navigation dans les pages offre des effets d’animation colorés sur l’état de survol. Chaque transition de page affiche également un effet de glissement, hautement unique et parfaitement composé.
Conclusion
J'espère que vous avez apprécié ces exemples de techniques de navigation inhabituelles et qu'ils vous ont inspiré pour créer vos propres expériences.
Si vous connaissez des menus de navigation loufoques que nous avons manqués, laissez un commentaire avec un lien ci-dessous afin que nous puissions le vérifier!