Accueil » Charte graphique de site web » Web design : ce qu’il faut savoir

Web design : ce qu’il faut savoir

web design

Le web design d’un site internet est primordial dans les processus de conquête et de fidélisation des internautes. Il cherche à se distinguer de ses concurrents et apporter une image moderne et novatrice en phase avec son positionnement. Il doit être unique et est étroitement lié à votre domaine d’activité et permettre de vous identifier clairement.

site web zoning

Le potentiel de séduction

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 compréhension et incite à l’action et l’interactivité permet d’offrir des scénarios diversifiés qui préservent 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 tout en faisant passer des messages.

Mais pour arriver à ce résultat et optimiser votre potentiel de séduction, nous allons détailler le travail préalable du webdesigner avant l’intégration.

Maquette et intégration

Il est indispensable de distinguer les 2 phases de la conception d’un site web:

  • 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.

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’un site web sans être distrait par les choix de couleurs, de polices ou même de contenus.

zoning site internet

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 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 en décrivant le fonctionnement de la page et en expliquant le type de contenus qui composent chaque grande zone. Un wireframe découpe votre page web en différents blocs et doit définir ce qu’ils contiennent : lesquels seront des images, des liens vers les réseaux sociaux, des call to action, des pictogrammes. La règle de base est d’aller du simple au plus complexe. Il est beaucoup plus facile de modifier un wireframe qu’une maquette ou un site déjà construit, ce qui permet bien des économies. Le wireframe indique aussi quels types d’informations seront repris sur chaque page.

zoning site web

Zoning de site web

La phase de conception de l’organisation des différents éléments en page type s’appelle le zoning. Le zoning d’un site web 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… Invision , un logiciel gratuit vous permettra de réaliser votre maquette tout en débriefant avec votre entourage.

Mieux vaut commencer par le zoning général, là ou les différentes zones apparaîtront de manière identique sur les pages. Un croquis voire des croquis qui découpe l’interface en différentes zones lisibles est un préalable à un confort d’utilisation et une lecture évidente et aisée. Réalisez ensuite le zoning des pages web les plus importantes dont les différences sont sensibles. Le zoning d’un site web n’est pas à faire pour toutes les pages dès l’instant où tous les scénarios 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 à chacun de vos articles, de vos catégories, etc…. De même la gestion des publicités doit être paramétrée en fonction de vos contenus.

zoning web

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.

zoning et wireframing

exemple de wire framing

Le travail du designer consiste à fusionner ces modèles d’organisation zoning et Wireframing avec les éléments de votre identité visuelle pour créer un design qui vous ressemble. Une maquette résumera l’ensemble de ce qu’il faudrait dans une charte graphique web.

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 templates graphiques tout prêts en ce qui concerne WordPress. Pour les projets aux budgets restreints, il est possible d’acquérir des thèmes 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 un tarif préférentiel. Voyez notre page prix d’un webmaster 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.

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.

zoning de site web

L’interaction web : le mockup

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 provoque 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.

Le mockup permettra aussi de créer des “tunnels” de ventes où les différents scénarios sont pensés pour orienter  votre prospect vers une page de vente spécifique. Le scénario joue un grand rôle dans le taux de conversion qui devient alors l’indicateur clé.

Le mockup scénarise décrit le cheminement des internautes afin d’optimiser les performances du site web. La scénarisation interactive idéale est une tâche relativement complexe mais elle permet d’optimiser la conversion de prospects en client.

Le mockup esquisse les objectifs de votre site web sous forme graphique.

Conclusion :

L’erreur classique consiste à se jeter sur un template graphique tout fait sans attacher suffisamment d’importance à son ergonomie. Pourtant les étapes de zoning, de wireframe sont indispensables au web design. La phase d’enrichissement viendra par la suite avec le contenu iconographique. Le processus de création d’un site Internet doit pouvoir présenter correctement vos informations et remplir les objectifs que vous vous étiez fixé.

 

S'il vous plaît suivez-moi et partagez !

BESOIN DE CONSEILS ?

Si vous voulez discuter de votre projet web, n’hésitez pas à en parler avec Webmaster freelance !

Laisser un commentaire

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