Quelques conseils pour la conception graphique de site web

La conception graphique de site web est devenue, avec les nouveaux supports, un travail complexe qui demande souvent plus de rigueur qu’il n’y parait. Ce petit article a pour objectif de lancer quelques pistes qui peuvent favoriser la collaboration entre le graphiste et l’intégrateur.

L’idée ici n’est pas de brider votre créativité, juste de faire en sorte que l’intégrateur et le graphiste ne se maudissent pas jusqu’à la fin des temps.

Définir une grille

La grille est devenue un élément quasi obligatoire avec l’évolution des supports. Il convient de définir cette structure invisible sur laquelle le graphiste et l’intégrateur pourront s’appuyer pour agencer le contenu des pages.

Vous pourrez trouver divers exemples sur le site de 960 Grid System mais il existe un grand nombre de systèmes de grille en ligne. Google est votre ami.

À moins de proposer une grille d’images, ne vous tentez pas à une grille de blocs à hauteur fixe. Si celles-ci contiennent du texte, c’est le plus souvent peine perdue.

Calculez vos tailles d’image

Tout comme il est important de définir une grille, il convient aussi de définir les dimensions de vos images et de veiller à suivre le ratio dans le cas d’un changement(s) de taille.

Si l’on prend l’exemple de WordPress, il m’arrive souvent de recevoir des maquettes avec un article à la une qui dispose d’une image de 600px sur 240px. Ce même article, présenté dans une liste, se retrouve avec une image de 300px sur 150px. Enfin, sur la page de l’article, on retrouve l’image en en-tête avec des dimensions de 1280px sur 440px.

Au final, rien de pertinent. L’intégrateur doit maltraiter l’image, la masquer en partie dans des cadres afin de respecter le visuel fourni. Le résultat n’est pas toujours optimal puisque l’image est présentée sous trois formes différentes avec des cadrages qui ne sont peut-être pas des plus élégants.

Ne cumulez pas les typos

Il est désormais possible d’intégrer tout type de police de caractère dans un site mais ce n’est pas pour cela qu’il faut essayer de toutes les mettre en même temps !

Il n’y a pas de règle clairement définie quant à la limite à ne pas dépasser. C’est plus une histoire de poids de page.

Personnellement, je joue souvent avec deux typos distinctes : l’une pour les titres et sous-titres et une autre pour les paragraphes. À cela, j’ajoute souvent une police de caractère qui intègre les icônes du site ( Font Awesome,Icomoon, Socicon ). Comme on dit, jamais deux sans trois.

Pensez responsive, restez zen

Même si vous définissez une grille de départ avec des colonnes en pixel, l’intégrateur envisagera certainement une version responsive de votre design.

Différentes options s’offrent à lui :

En général, l’intégrateur mixe ces trois méthodes au sein de chaque site. Dans ce genre de situation, des éléments devront peut-être disparaitre afin d’optimiser le confort (une diagonale, une courbe, un PNG pour une ombre de bloc, etc.). Même si votre graphisme est important, cela ne doit pas entraver le confort de lecture de l’internaute. Cela reste la priorité numéro un.

Ne présentez jamais un visuel sans l’avoir soumis à l’intégrateur

C’est certainement le conseil le plus important. Je ne pense pas qu’il soit vraiment nécessaire de discuter plus de ce sujet, tout est dans le titre.

Vous avez beaucoup à apprendre d’un intégrateur. Profitez toujours de ses connaissances.

On ne bride pas la créativité

Il est important de comprendre que le travail de l’intégrateur n’est pas de brider la créativité d’un graphiste mais bien de faire en sorte qu’une page web puisse être accessible partout et pour tout le monde.

C’est le visuel qui prime pour le graphiste et c’est le contenu qui prime pour l’intégrateur.

Une bonne collaboration entre les deux parties peut mener à de superbes projets et de magnifiques réalisations. Il suffit juste de mettre un peu d’eau dans son vin et de s’entendre.