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 doit être unique et est étroitement lié à votre domaine d’activité et il doit permettre de vous identifier clairement.

Lors de la création des sites internet, il est important de savoir conjuguer graphisme et simplicité d’utilisation. L’ ergonomie rend plus facile la comprehension et incite à l’action et l’interactivité permet d’offrir des scénarios diversifié qui préserve la liberté de l’internaute. Le web-design doit renforcer le confort de l’expérience utilisateur et l’image n’a pas moins d’importance que le fonctionnel. Elle sert, au contraire, votre contenu en attirant l’oeil et en donnant une impression d’équilibre.

Mais pour arriver à ce résultat et optimiser votre potentiel de séduction, nous allons détaillé le travail préalable  en matière de graphisme avant l’intégration.

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. Un simple croquis papier vous donne une bonne idée de ce qu’il faut mettre en avant. 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.

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, la side bar…

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. Mais il est recommandé de faire varier les encarts secondaires pour diversifier votre offre de navigation à l’intérieur de votre site internet. La side bar peut être spécifique à chaque page. De même la gestion des publicités peut être paramétrée en fonction de vos contenus.

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. La couleur des fonds de cellule peut permettre de mettre en avant certaines zones. La grosseur des titres influe aussi sur le comportement des internautes. La hauteur et la largeur des images ou du slider ont aussi leur importance.

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 webdesigner comme webmaster freelance qui créeront une identité visuelle pour le web unique qui apportera un haut degré de personnalisation ou bien d’utiliser des designs graphiques tout prêts en ce qui concerne WordPress. Pour les projets aux budgets 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 et votre logo. Mais Webmaster freelance va plus loin en vous permettant de développer votre propre thème pour un coût défiant toute concurrence. Votre charte graphique est unique et vous en êtes le seul propriétaire. Un plus pour votre image de marque. Webmaster freelance vous propose 3 idées pour la page daccueil et 5 pages personnalisées pour seulement 750€ !!!. Voyez notre page tarif pour plus de détail.

Vous n’êtes plus limité en matière de graphisme pour votre site internet avec Webmaster freelance et votre image de marque est personnalisée.

Faites confiance à Webmaster freelance pour un design personnalisé.

Du plus 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 . Ce qui permet de structurer l’information et de rajouter de l’interaction avec l’internaute. Un visuel, une image, un pictogramme structure votre page. Un titre et un petit paragraphe suivi d’un lien ou un call to action vers une page qui développe votre accroche et vous rallonger le temps de visite sur votre site internet ce qui profite à votre référencement.

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. Il permet aussi de définir des scénarios d’interaction entre l’utilisateur et le site internet ce qui sera utile au cahier des charges. Si l’action donne lieu à des messages d’erreurs ou bien si l’action réussie donne lieu à une gratification pour l’internaute. Le code couleur, les pictogrammes ou bien les images permettent d’augmenter la réalité et de délivrer un message clair en cas de réussite ou d’erreur. La notion d’ergonomie doit être centrale pour améliorer l’expérience utilisateur.

 

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