Accueil » Publications » 30 techniques pratiquées par les pros » Les maquettes graphiques
Facebooktwitterlinkedinmail

Les maquettes graphiques

Les maquettes graphiques mettent en musique les maquettes fonctionnelles. Elles apportent toute la finition et le sens du détail : couleurs, choix typographiques, arrondis, etc.

Rien ne matérialise mieux le projet web que la maquette graphique, qui rend compte de toute la sensation de l’interface, son ambiance visuelle, sa tonalité, son attrait, son contraste et sa lisibilité.

Le caractère concret de la maquette graphique ne doit pas nous faire oublier que les écrans ont des tailles et des rendus variables.

Cette étape constitue le dernier maillon de la conception avant de basculer en production.

Les maquettes graphiques sont réalisées :

  • soit à l’aide d’un logiciel d’édition graphique (comme Photoshop™) ;
  • soit directement en HTML/CSS (feuilles de style), avec l’avantage, dans ce cas, de s’adapter aux conditions variables d’affichage.

Notez qu’il n’est pas forcément nécessaire de réinventer la roue. Il existe des milliers de templates gratuits, personnalisables, qui conviendront à plus d’un. Tout dépend du contexte et des ambitions.

Exemple de template graphique gratuit

Exemple de template graphique gratuit
Source : WordPress Template

La création des maquettes graphiques prendra en compte les contraintes exprimées dans la charte graphique de l’entreprise (logo, palette de couleurs et autres conventions visuelles établies par l’entreprise).

Le graphisme des premières générations de sites web était souvent une adaptation de la charte graphique conçue pour les produits papier. Aujourd’hui, le rapport de force s’est inversé et bon nombre d’organismes profitent de la création de leur site web pour rafraîchir leur image.

Comme pour le prêt-à-porter, les tendances graphiques du Web évoluent. Sans tomber dans l’effet de mode volatile, il est vrai qu’au bout de quelques années, un site web aura pris de la poussière. Les sites web construits proprement, sur une base sémantique mise en musique par des feuilles de style, évolueront facilement dans une indépendance du fond et de la forme.


A lire aussi : 
La stratégie “Images” de votre site web