Conception d'interface graphique pour site internet

Nous ne parlerons pas ici d’adapter un environnement graphique déjà préconçu sur la base d’un CMS mais de démarrer un projet à partir des objectifs du client, c’est à dire d’une feuille blanche.

C’est d’accord, mais avec un CMS et un environnement graphique déjà réalisé, c’est plus rapide. C’est vrai, et cela peut-être pertinent dans certains cas, mais le client souhaite rarement avoir le même site internet que son concurrent. Alors nous allons réaliser un graphisme original.

Pour aboutir un projet graphique, il faut d’abord de bons outils de travail. Un PC ou un Mac puissant, capable de faire tourner plusieurs applications en même temps sans latence. Inutile d’imaginer travailler sur un ordinateur portable. Ensuite, idéalement il faut plusieurs écrans, avec une calibration obligatoire par sonde. Écrans compatibles avec un large environnement de couleurs de type Adobe RVB. L’environnement de couleur P3 est plus adapté à la vidéo qu’à la conception graphique. Ensuite comment dessiner avec une souris ? À vrai dire, une tablette graphique avec un stylet sera plus pertinent et plus sensible.

Si vous n’avez pas d’écran et que vous souhaitez vous en procurer un, voici quelques conseils à prendre en compte avant d’acheter. Si vous travaillez à la conception graphique, il est préférable d’avoir du bon matériel, c’est particulièrement vrai pour l’écran. En effet, si vous passez vos journées face à celui-ci, il vaut mieux investir sur un écran qui vous donnera entière satisfaction. Il faut d’abord pouvoir le positionner à la bonne hauteur avec un pied réglable. C’est indispensable et encore plus important si vous travaillez avec plusieurs écrans. Ensuite, il faut que votre écran puisse avoir les bonnes connexions pour ne pas avoir à acheter des adaptateurs qui feront peut-être baisser la qualité. Il faut aussi que l’écran possède une bonne alimentation car celui-ci doit durer dans le temps.

Pour la dalle, il est préférable que celle-ci soit mat plutôt que brillante afin de ne pas être perturbé par des lumières parasites ou des reflets. Il n'est pas nécessaire d'avoir un très haut niveau de luminosité. Mais la dalle doit avoir un traitement satiné afin de ne pas voir les pixels ou de ne pas avoir d’effet de halo. Le rendu de l’écran ne doit pas faire apparaître de différence, celui-ci doit être homogène. Les dégradés doivent s’afficher dans la continuité. Si vous travaillez sur Mac, il est préférable d’avoir une plus forte densité de pixels pour éviter un effet de flou particulièrement visible sur les polices de caractère. Pour les couleurs, maintenant que les navigateurs proposent des options pour afficher de plus larges gammes que le SRVB on vous conseille de choisir un écran proposant un gamut large comme Adobe RVB qui vous permet de voir et travailler sur la gamme de couleur bleue et la gamme de couleur verte.

Une fois équipé du bon matériel faisons un point sur les applications. Principalement, c’est Photoshop. Vous pouvez tester d’autres applications pour déterminer vos choix mais Adobe Photoshop est l’application idéale pour travailler la création d’une interface graphique. Autre application presque obligatoire : Adobe Illustrator. Est-ce bien utile d’avoir Illustrator ?  Avec la venue des écrans à haute densité de pixels et si vous souhaitez que vos pictogrammes soient bien nets, il vous faudra exporter votre travail au format SVG, format basé sur des vecteurs et pas sur des pixels. Pour avoir un rendu bien net et professionnel, il vous faudra Illustrator. :)

Reprenons notre feuille blanche et commençons à dessiner une interface graphique. Comme ça…, directement… c’est pas aussi facile, pour cela, il est préférable de passer par une étape de prototypage. En effet, le prototype qui s’apparente à une maquette en PAO va faciliter le travail du graphiste car tous les éléments du site internet seront déjà disposés sur la page. Oui, mais alors, le graphiste ne peut pas dessiner ce qu’il souhaite ? Si bien sûr, mais il s’agit de répondre à des objectifs qui doivent pouvoir être réalisables ensuite lors du développement, le graphiste doit pouvoir imaginer l’environnement graphique mais dans un canevas déjà établi et réfléchi en amont. 

Voici quelques exemples de prototypes réalisés pour la page d’accueil du site internet Voisins Nachbarn

Voilà, les prototypes sont terminés, c’est maintenant que la conception graphique peut enfin démarrer. Pas tout à fait, pour faciliter l’approche graphique qui va prendre du temps, il peut être judicieux de créer des concepts. Il s’agit de déterminer plus précisément le choix typographique, les couleurs, les pictogrammes, le style graphique, etc. Pour cela le graphiste à toute la liberté d’imaginer deux ou trois planches graphiques pour guider le client à prendre la bonne décision pour l’aspect graphique de son site internet. Il convient aussi, parfois, en fonction du type de projet de créer un cahier des charges graphique. Celui-ci aura pour but de guider avec plus de précision le graphiste, là où il peut aller, ce qu’il doit respecter en termes de typographie, couleurs, proportion, etc. Dans certain cas, l’entreprise à déjà réalisé ce type de document qu’il conviendra de respecter scrupuleusement. 

Voici deux exemples de concepts

Avant de lancer la partie graphique, il convient de faire un petit détour pour parler du responsive design. En effet, il ne s’agit pas seulement de dessiner une interface graphique mais plusieurs en fonction des différentes largeurs d’écrans. Une simple recherche dans un moteur de recherche avec les mots « statistique résolution d’écran » vous donne immédiatement des données sur les résolutions les plus utilisées. Il n'est pas possible de toutes les prendre en compte. Mais il faudra tout de même en déterminer plusieurs. Pour cela, nous avons établi une grille avec la liste des résolutions qui nous paraissent les plus pertinentes pour un site Internet.

Les résolutions pertinentes pour nous

• Ordinateur de bureau : 1920px de largeur par 1080px de hauteur
• Ordinateur portable : 1366px de largeur par 900px de hauteur
• Tablette : 1024px de largeur par 768px de hauteur
• Téléphone 360px de largeur

Il faut ajouter à cette liste d'autres résolutions intermédiaires qui seront prises en compte lors du développement du site Internet. Cette partie sera traitée dans une autre page. Notez qu’il n’est pas nécessaire de procéder à la déclinaison de toutes les pages du site mais seulement de la page d’accueil.

Pas tout à fait, nous allons d'emblée éliminer la version ordinateur de bureau. Celle-ci sera simplement étendue sur la base de la résolution des ordinateurs portables. Nous allons donc travailler à partir de la résolution des ordinateurs portables. Puis ensuite procéder à une déclinaison du graphisme pour la résolution tablette et décliner aussi pour la résolution téléphone. Si vous avez bien suivi les étapes, notre feuille blanche avant la création des prototypes sera donc de 1920 pixels de largeur avec des repères pour limiter le graphisme à 1440 pixels de largeur. Parfait mais et la résolution d’écran alors ? Pour la résolution de l’écran, celle-ci est de 72 pixels par pouce par défaut et cela est un bon choix. Mais si vous souhaitez que votre travail corresponde exactement à la taille réelle comme pour des applications mobiles, il faudra adapter la résolution en fonction de la densité des pixels de votre écran.

Voici un exemple concret avec la déclinaison du haut de page du projet Voisins Nachbarn

Pour la version en ligne, votre navigateur favori dispose d’un mode d’affichage « développeur ». Ce mode permet de tester les différentes résolutions d’écrans directement et de travailler le responsive design correctement.

C’est maintenant le jour J, le graphiste va pouvoir enfin travailler à la création de l’interface graphique. Depuis son application, il va reprendre un des prototypes (les autres ensuite) comme base de travail, puis au fur et à mesure, reprendre chaque élément du prototype, pour ensuite recréer les éléments et imaginer un style graphique propre à servir les objectifs du client. Après avoir terminé la page d’accueil sous le contrôle du développeur, celui-ci sera validé par le client. Le graphiste pourra ensuite avancer sur les déclinaisons et sur les autres modèles de pages. 

Voici un exemple de conception graphique pour le site internet Voisins Nachbarn. Cette interface graphique se compose du prototype à gauche et l’interface graphique à droite.

Voici un exemple en gros plan du travail réalisé pour le site internet Voisins Nachbarn qui concerne la partie haute. 

Voici un exemple de bas de page pour le site internet Voisins Nachbarn