50 idées pour vos menus de navigation

L’article du jour devrait servir à pas mal de webdesigners : Vendelay Design propose une sélection de 50 menus de navigation pour l’inspiration. Plus ou moins originaux, les exemples mis en avant ont l’avantage d’être assez variés et on peut aisemment trouver quelques idées sympas à exploiter, que l’on travaille sur un site institutionnel ou un site « artistique ».

Je vous laisse vous servir, ça se trouve par ici : 50 gorgeous navigation menus.

design navigation

Dossier #1 – (3) Le design du site.

Le but de cet article n’est pas de vous donner une méthodologie pour vous apprendre à « designer ». Il s’agit surtout de montrer les éléments importants à ne pas « zapper » pour que votre site soit un minimum efficace.

1. Les éléments basiques d’un site : header, menu, contenu, footer.

La plupart des sites à succès ont en commun une structure assez similaire qui se décline ainsi :
– Le Header : contient généralement le logo, la baseline, ce qui marque l’identité visuelle du site.
– Le Menu : parfois au sein même du header, on peut le retrouver au dessus ou en dessous de ce dernier, verticalement ou horizontalement. Il n’y a pas vraiment de « meilleure place » pour un menu, tout dépend de l’ergonomie générale du site, et de la façon de le mettre en avant.
– Le Corps de la page : le « plat principal » du site; on y retrouve les informations qui font du site ce qu’il est, l’information principale ainsi que les formations qui poussent les gens à revenir !
– Le Footer : contient généralement les informations relatives au copyright, des liens vers les rubriques principales du site, et/ou des liens vers des sites partenaires.

2. Logo et représentation.

Avoir un logo unique et facile à retenir vous permettra d’être plus facilement reconnaissable sur la toile. Si les gens se souviennent de vous en ne voyant ne serait-ce que votre favicon, vous avez tout gagné ! Un exemple : si je vous montre ce logo méthodologie logo , à quoi pensez vous ? 😉

3. Un design attractif.

Pourquoi prendre soin du design de son site ? Comme on dit, « l’habit ne fait pas le moine » … Cependant, sur le net, le dicton est loin d’être vérifié… en effet, les utilisateurs sont sensibles au design d’un site, et  fondent majoritairement leur premier jugement sur la forme, et non le fond. Pire encore, d’un simple coup d’oeil, on jugera votre activité comme « non professionnelle », relevant de l’amateurisme, et ça ne pardonne pas… Prenez donc le temps et/ou dépensez l’argent nécessaire à la création du design de votre site ; faites appel à des professionnels de la communication, spécialisés dans l’ergonomie et le design web.

4. Eviter le trop-plein d’informations

Une des raisons pour lesquelles le site ne pourrait pas marcher peut provenir du fait qu’il y ait trop d’éléments sur une seule page ; ce problème risque de semer la confusion chez vos utilisateurs et leur empêcher d’accéder à l’information principale du site. Le mieux à faire est d’épurer les contenus, et de les organiser soigneusement en « rangeant » le site selon les priorités du contenu ( ne mettez pas vos partenaires plus en avant que vos produits/services !).

Pour bien faire passer l’info, le mieux à faire est de créer une « zone attractive », qui attire l’oeil, et qui permet de délivrer l’information sans avoir à la chercher ; pour être efficace, cette zone doit  respecter certains paramètres :

– Elle prend généralement le plus de place sur la page
– Se distingue souvent par l’utilisation de la couleur, la taille de la police, ou une autre technique de mise en page
– Doit se situer à un endroit qui capte l’ attention du visiteur

5. Utiliser des couleurs harmonisées

Il existe de nombreux outils sur internet pour vous aider à trouver votre palette de couleurs ; quelques liens vers les plus efficaces : Kuler, ColorShemer, Color Sheme Generator, Pourpre, Color Wizard.

6. Faire attention à la taille de vos polices d’écriture

Pour que vos textes soient lisibles, il est recommandé d’utiliser une police d’une taille supérieure à 11px; de nos jours, de plus en plus de sites utilisent une police de 13px ;

7. Une page d’accueil percutante

Le but d’une page d’accueil est de montrer clairement ce que contient le site ; si vous n’arrivez pas à capter l’attention de votre visiteur dès la première page, alors celui-ci risque fort de rebondir et de passer à un autre site web !

Quelques éléments pour une bonne page d’accueil :

– Donner de l’info « efficace » à vos visiteurs (n’y mettre que des élément intéressants)

– Etre synthétique et agréable ( Utiliser des listes à puces, utiliser une mise en pages en colonnes – pas plus de 3, ça risque de faire trop après – faire des paragraphes courts, et de façon générale organiser la page de manière à bien distinguer chaque partie de la page)

– Indiquer à vos visiteurs où aller sur le site (moteur de recherche, navigation accessible, un « plan du site » dans le footer…)

– Gagner la confiance de vos visiteurs ( mettez vos coordonnées en avant – telephone, e-mail, adresse… – , présentez-vous ou présentez votre société, …  )

– Ne faire aucune faute d’orthographe sur toute la page, ne laissez trainer aucun bug relatif au développement, bref, soyez clean de chez clean !

Quelques liens pour illustrer l’article sur le design du site :

Une collection de sites avec des designs qui fonctionnent

Dans le même esprit : beautifully webdesign

De la crème de webdesign

The designed Tree

Un petit générateur de logo web 2.0

Et de façon plus générale, la bible  ultime du webdesigner (attention, nombreux liens inside^^)

Ressources pour webmasters : les incontournables (graphisme & webdesign, 1)

Ce soir j’ai envie de partager ma trop longue liste de « marques pages » ( « favoris » pour les adeptes de ie ), avec un petit récapitulatif de ce que vous pourrez découvrir en cliquant sur les liens cités.

Voici donc une première série de quelques sites sur lesquels je traîne (il y’ en aura d’autre plus tard, évidemment) pour dénicher des scripts, des brushes, des tutos, bref une autre petite « boîte à outils » pour webmasters comme il en existe beaucoup d’autres sur le net :

Commençons donc par une première liste de sites proposant des ressources graphiques :

www.sxc.hu : un des sites que j’utilise le plus souvent pour trouver une photo; tapez n’importe quoi dans le moteur de recherche (en anglais de préférence), il vous dénichera une photo de très bonne qualité ( donc bien lourde ) et exploitable. Seule condition préalable pour pouvoir télécharger une image : s’inscrire sur le site. Une version « payante » propose plus de photos (et surtout des plus belles), mais généralement on trouve son bonheur sans avoir à débourser le moindre pesetas.

photogen.com : dans le même esprit que sxc.hu, un site qui propose une large gamme de photos gratuites et utilisables à outrance.

www.webchantier.com : qui ne le connait pas ? Ce site propose une foultitude d’images (vectorielles, s’il vous plaît) et la quasi totalité des logos des grandes marques du monde. Pictos, symboles, drapeaux, typos, et même publicités anciennes, vous devriez trouver votre bonheur dans ce beau bordel ( et on ne se moque pas du design du site ! J’suis sûr que ça va revenir à la mode un jour ! ).

fawnt.com et dafont.com : deux pour le prix d’un, et vous avez toutes les typos que vous désirez ! De très grosses ressources pour « écrire beau ».

deviantart.com/brushes , brusheezy et psbrushes : Pas mal de ressources plus ou moins sympathiques pour se procurer des brushes pour photoshop. Faites bien attention sur deviant, le moteur de recherche est pas évident, mais il est super utile… Une recherche par thème et vous trouverez votre bonheur.

Kuler et colorontheweb quant à eux proposent des palettes de couleurs qui s’accordent : Kuler de son côté possède plusieurs palettes préconfigurées et notées par les utilisateurs du site, Colorontheweb relie entre elles les couleurs qui vont le mieux avec celle que vous lui donnez en premier.

Bon, c’est déjà pas mal pour une première série de liens, je vous laisse découvrir (ou redécouvrir) ces sites ô combien utiles pour travailler un site …