Tous les concepteurs de sites Web traversent des phases aux prises avec des idées créatives. Cela fait naturellement partie du cycle de création, mais cela peut devenir frustrant si vous êtes bloqué sur un projet de site Web pendant plusieurs jours. Il n'y a pas de solution unique. Mais nous pouvons prendre un moment pour analyser le processus de conception pour de meilleures solutions.
L’objectif principal de tout site Web est de guider les visiteurs à travers vos pages. Ceci est accompli via une navigation d'un type, le plus souvent des liens. Vous pouvez créer des barres d'onglets, des bannières, des éléments de bloc ou même faire flotter un menu de navigation sur le côté.
Suivez le guide ci-dessous pour découvrir les tendances courantes en matière de conception de menus de navigation Web. Les concepteurs et les développeurs ont mis au point des astuces pour accélérer le processus de création de sites Web. Et nous espérons faire la même chose en offrant des astuces uniques pour la navigation de l'interface utilisateur.
Planifier un aperçu de page Web
Avant de commencer le processus de conception, prenez un moment pour examiner les nombreux styles de navigation dynamique à votre disposition. Vous pouvez faire apparaître des sous-menus déroulants ou déroulants à partir d'une barre de navigation ou d'un bloc fixe, mais vous pouvez également faire glisser les sous-liens, les ouvrir en fondu ou peut-être même ne pas avoir besoin de sous-navigation. Ce sont toutes des idées importantes à travailler avant de plonger dans Photoshop.
Avec l'exemple ci-dessus, Fork CMS utilise une navigation par le haut qui convient très bien. Rien ne semble déroutant ou difficile à trouver et vous avez accès à tous les important Informations sur le site.
Votre situation peut fortement varier en fonction du nombre de pages importantes de votre propre site Web. C'est pourquoi je suggère de dessiner un diagramme pour construire une idée plus solide du fonctionnement de la navigation. Cela peut prendre la forme d'un organigramme, dans lequel vous tracez des flèches pour pointer vers la page suivante d'un segment.
Joindre des sous-menus
À titre d'exemple, le magazine de design populaire Speckyboy propose un menu déroulant de sous-navigation dans chaque catégorie. WordPress peut le configurer par défaut, mais vous devez toujours utiliser une forme de jQuery. Pendant ce temps, le site de jeu de niche Destiny Islands utilise jQuery pour un sous-menu déroulant de chaque jeu situé dans la barre latérale.
Vous pouvez également remarquer que la navigation dans l'en-tête est associée à des images de remplacement au passage de la souris. Ce petit effet est pratique si votre mise en page fonctionne correctement avec des boutons de liaison de largeur fixe. jQuery est une option mais les transitions CSS3 peuvent sembler être une meilleure alternative. CSS3 et JavaScript offrent tous deux un support floconneux dans les systèmes d’exploitation mobiles, mais pour les anciens navigateurs, vous obtiendrez probablement plus de succès avec une méthode basée sur jQuery.
Et un sous-menu ne doit pas non plus rester dans les formats standard. Je pense que la dernière refonte de Smashing Magazine le dit mieux avec son petit nuage de tags. Survolez l'icône située à côté du logo de leur site et un menu de catégories et de tags de blog apparaît. Gardez ces petites idées raffinées à l'esprit pour vos propres menus déroulants.
Ajax Tabs
Pour contenir un grand nombre de liens dans une zone plus petite, certains contenus doivent être masqués par défaut. Les menus déroulants cachés sont à sens unique, mais un conteneur avec des onglets est une autre option. Et avec Ajax, vous pouvez extraire de manière asynchrone des données de votre base de données ou d'une autre page Web avec chaque onglet différent du div.
Les blogs WordPress sont connus pour ce type de fonctionnalités. La capture d'écran ci-dessus de Webdesigner Depot se concentre sur un widget de barre latérale pour extraire les articles les plus populaires et les plus récents. Si vous pensez que cette méthode conviendra à votre mise en page, c'est une façon de contenir des liens dans un espace très réduit.
Si vous allez gros, allez fantaisie!
Ceux d'entre vous qui fréquentent les galeries de design ont probablement déjà trébuché sur la page de Coda. Ils utilisent à la fois une zone de contenu à onglets pour le chargement d'informations dynamiques et une zone d'en-tête avec 3 liens: Télécharger, Acheter, et Aidez-moi.
Ceci est juste un exemple parfait de passer votre navigation Web au niveau suivant. Les caractères gras et audacieux attirent souvent l’attention s’ils sont conçus correctement. Et les effets de survol ajoutés à chaque virement de bord sur la magique sentiment de l'ensemble de la mise en page. Tout cela sans mentionner les délicieuses icônes fou de pixels figurant à côté de chaque gros bloc.
Ceci est un affichage très flashy des effets de site Web et ne sera pas toujours réaliste dans le cadre de chaque projet. Mais pour les liens de navigation peu numérotés, il est presque préférable d’augmenter un peu la taille. Si vous n’avez que 3 ou 4 pages, celles-ci doivent être faciles à trouver et à traiter de manière exquise. En ce qui concerne les icônes, il y a tellement de ressources à vérifier qu'il est fort probable que vous tombiez sur quelque chose de cool!
Décision relative aux normes HTML5
Le Web a beaucoup progressé depuis 2001. Au cours des 10 dernières années, nous avons assisté à de formidables avancées en matière d’innovation entre les techniciens du monde entier. Et maintenant, HTML5 a balayé le monde du design en proposant une déclaration sonore et stable, même pour certains éléments de page alambiqués.
Un tel exemple est le
balise qui reprend peu à peu les formats de liste non ordonnée (ou même couplant les deux). Voici une excellente question de Stack Overflow sur le HTML sémantique et l'utilisation correcte de l'élément nav. Comme cité de la page de spécifications?l'élément de navigation représente une section d'une page liens vers d'autres pages ou à des parties de la page?. 
Un article favori personnel publié plus tôt cette année est intitulé «Comment HTML5 modifie-t-il notre façon de voir la navigation» et exprime-t-il de nombreux avantages pour le passage au codage? La confusion fondamentale découle du nombre de développeurs qui se sont habitués aux normes XHTML et HTML 4.01.
Conclusion
Ce guide s'est davantage penché sur la sémantique et le balisage de la création d'un menu de navigation dynamique. Entre les nouveaux effets d'animation CSS3 et la bibliothèque de l'interface utilisateur jQuery, vous pouvez créer une multitude de personnalisations. Le développement Web frontal n'a jamais été aussi amusant! Et il est facile de trouver d'excellentes communautés de soutien pour les développeurs débutants qui viennent tout juste de prendre le relais.
Avez-vous construit des systèmes de menus dynamiques sur votre propre site web? Ou peut-être avez-vous déjà rencontré quelques effets vraiment intéressants sur d'autres sites Web. Faites-nous savoir vos pensées et vos idées dans la zone de discussion ci-dessous.