Webdesign : ce qu’il faut savoir

Le potentiel de séduction

L’aspect graphique d’un site internet est primordial dans les processus de conquête et de fidélisation des internautes. Le site doit pouvoir se distinguer de ses concurrents et apporter une image moderne et novatrice en phase avec son positionnement. Votre design est étroitement lié à votre domaine d’activité et il doit permettre de l’identifier clairement.

Lors de la création des sites internet, il est important de savoir conjuguer graphisme et simplicité d’utilisation. Ergonomie et webdesign se confondent, là où l’image n’a pas moins d’importance que le fonctionnel.

Maquette et intégration

Il est indispensable de distinguer les 2 phases de la conception :

  • La conception ergonomique sur la base d’une maquette que l’on peut améliorer par un débat d’idées et de commentaires ;
  • La phase d’intégration de la maquette. Une fois l’intégration faite, il n’est plus possible de revenir en arrière.

La comparaison avec la couture prend ici toute sa pertinence : pour créer un vêtement, les couturiers passent d’abord par la création d’un patron adapté et aux mesures du client avant de travailler sur le tissu et le rendu final.

Le Wireframing

Le Wireframing (Maquettage) est une étape importante dans tout processus de conception d’interface. Il permet principalement de définir la hiérarchie de l’information de votre design afin d’élaborer plus simplement la mise en page selon le fil conducteur suivi par l’utilisateur. Le découpage de l’information fait aussi partie de l’ergonomie. La règle de base est d’aller du simple au plus complexe. Pour permettre à l’internaute de choisir ce qui l’intéresse, vous devez parfois fournir une accroche avec un lien plutôt qu’un long texte .

L’interaction

Une maquette est aussi très utile pour savoir comment un utilisateur va interagir avec l’interface. Par exemple, les maquettes peuvent contenir les différentes significations des boutons ou les comportements des menus. Le maquettage est important car il permet au designer de planifier la mise en page et les interactions d’une interface sans être distrait par les choix de couleurs, de polices ou même de contenus.

Zoning

La phase de conception de l’organisation des différentes éléments en page-type s’appelle le zoning. Le zoning permet de découper la page en autant de zones que nécessaire. Cela permet de positionner les zones de navigation, les contenus, le logo, le pied de page, le moteur de recherche, le fil d’Ariane…

Mieux vaut commencer par le zoning général, là ou les différentes zones apparaîtront de manière identique sur les pages. Réalisez ensuite le zoning des pages les plus importantes dont les différences sont sensibles. Le zoning web n’est pas à faire pour toutes les pages dès l’instant où tous les scénarios de pages ont été réalisés.

Conjointement à ces zones, il faut également spécifier des indications de hiérarchie visuelles pour que le graphiste puisse en tenir compte dans la maquette.

Le travail du designer consiste à fusionner ces modèles d’organisation zoning et Wireframing avec les éléments de votre identité graphique pour créer un design qui vous ressemble.

Template graphique ou sur mesure

Il existe différents moyens de réaliser une charte graphique pour votre site internet. Il est possible de faire appel à un webdesign ou à un webmaster freelance qui créeront ou adapteront votre identité visuelle pour le web ou bien d’utiliser des designs graphiques déjà prêts. En ce qui concerne les projets avec des budgets plus restreints, il est possible d’acquérir des modèles de design pour des coûts modérés entre 10 et 100€ sur des portails tels que Themeforest ou Template Monster, designs qui seront simplement personnalisés avec vos couleurs.

Cet article est mis a disposition selon les termes de la licence Creative Commons Attribution 3.0 non transposé.

Partagez sur les réseaux sociaux
Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *