Pour ceux d’entre nous qui ne sont pas designer (ou designer sans expérience dans le web), le webdesign peut paraître à la fois extrêmement facile ou complexe. Certains se diront : “facile, j’aligne un bloc par ci, un menu par là, et c’est bon”, d’autres se diront : “sans formation, impossible”. Le design d’un site web ne s’improvise pas, mais avec un peu de méthode, que l’on soit débutant ou confirmé, tout devient possible. Nous allons d’abord démystifier ce terme de webdesign, avant d’en apprendre la méthode.

Beaucoup pensent que le webdesign est facile dans la mesure où – comparé à la création publicitaire par exemple – il n’y a pas ou peu d’effets visuels complexes. Par conséquent, une moins bonne maîtrise des logiciels de PAO n’est pas handicapante… et on peut même tout à fait faire sans, avec des schémas, des croquis et des wireframes.

Qu’est-ce que le design ?

La définition est la première étape, car de nombreuses incompréhensions à l’égard du webdesign proviennent d’une mauvaise acception du mot design. En français, lorsque l’on entend design, le mot résonne dans nos esprits comme un synonyme de dessin, peut-être en plus poussé, plus réfléchi, mais on pense immédiatement à Starck. Parfois, un adjectif vient préciser le terme : “design industriel”, “design algorithmique”, et l’on comprend déjà mieux en quoi consiste le design.

Le design est donc bien plus que le simple rendu esthétique, Steve Jobs disait ainsi :

La plupart des gens font l’erreur de croire que le design c’est l’apparence. Les gens pensent que c’est le vernis – qu’on confie une boite aux designers et qu’on leur dit “rendez-la jolie !”. Ce n’est pas ça. Le design n’est pas seulement l’apparence et le style, c’est comment ça fonctionne.

Steve Jobs

Dans le webdesign, vous comprenez donc que le design ne consiste pas seulement à définir l’apparence de l’interface, mais aussi comment elle fonctionne, les interactions entre les éléments et les différentes pages, le chemin de l’utilisateur etc. Il faut penser à énormément de choses, c’est pour cela que le webdesign ne consiste pas seulement à ouvrir Photoshop mais nécessite une réelle réflexion en amont.

Alors oui, il y a moins de production graphique à proprement parler que lorsque l’on designe une affiche publicitaire, mais la phase de conception est très large car elle comprend de nombreux éléments.

À la lumière de cette seule explication, il paraît en effet plus facile de designer pour le web. C’est sans compter l’interaction, les états, les animations et le responsive design.

Une page web, contrairement à une image, n’est pas statique : les éléments peuvent changer d’apparence au survol de la souris, de nouveaux éléments peuvent apparaître ou changer de comportement selon certaines actions et elle est destinée à s’afficher sur une multitude d’écrans de tailles variable.

C’est pour cela que l’on parle souvent d’UX design. Ce terme très à la mode tend à exprimer qu’au delà d’une interface, le designer créé une expérience utilisateur. Bien que le terme d’UX soit utilisé à toutes les sauces parce qu’il est à la mode, il regroupe en réalité de nombreuses disciplines.

Arrêtons-nous là pour les définitions et passons à la pratique.

Évaluer le contenu

Avant toute chose, un site internet contient des éléments : principalement du texte et des images. Dans la mesure du possible, il est préférable d’avoir le contenu réel du site que l’on va concevoir. On est souvent tenté d’utiliser du contenu de substitution comme le Lorem Ipsum, mais on n’obtient pas avec ça le même rendu et notre travail se trouve donc moins précis. Si vous travaillez sur le projet d’un client, insistez auprès de ce dernier en lui expliquant pourquoi il est important qu’il vous fournisse le contenu.

Dans le cas d’un site à fort contenu textuel, comme c’est par exemple le cas d’un blog, d’un journal ou d’un magazine, on adoptera même une démarche de design pour l’expérience de lecture dans laquelle les éléments textuels (citations, listes, niveaux de titres, gras, italique etc.) auront une place prépondérante.

Si nous avons beaucoup de contenu, il faudra peut-être en faire le tri. On est parfois tenté de penser – à force d’entendre le discours sur le référencement – que plus on a de contenu, mieux c’est. Cependant, il faut garder à l’esprit que le site et son contenu doivent être plaisant pour l’utilisateur, qu’ils doivent répondre à ses attentes. Cela inclut donc une information claire et non une surabondance d’information.

On peut envisager l’utilisation d’un code de couleur pour le tri de l’information. On parcourt celle-ci, puis on attribue le vert aux informations à garder, le rouge pour celles inutiles, et le orange pour les informations dont la conservation peut-être intéressante mais reste à définir. Certaines informations, non-essentielles mais ayant une certaine pertinence, ne trouveront pas naturellement leur place dans l’ensemble des rubriques (c’est là par exemple que les infos en orange sauteront).

Architecture de l’information

On peut aussi appeler cette étape la hiérarchisation du contenu. La hiérarchie, au sens large, se définit comme un système ou une organisation dans laquelle les gens ou les groupes sont ordonnés les uns au dessus des autres. Appliquée à notre contenu, cela consiste à savoir comment on va scinder ce dernier en sections, pages etc. Y-a-t-il différents schémas qui ressortent ?

Il est important de réfléchir en amont à la hiérarchie du contenu ainsi qu’aux relations des différents éléments. C’est à ce moment que l’on réfléchit à la manière de présenter le contenu pour qu’il soit assimilé le plus facilement possible. On doit veiller à utiliser intelligemment les niveaux de titres, la séparation en paragraphes, les citations, images et tous les éléments graphiques et typographiques qui s’offrent à nous (attention, à ce stade nous parlons uniquement du contenu, pas des éléments de mise en page ou décoratifs).

À ce moment on peut créer un sitemap pour visualiser la hiérarchie de l’info et voir comment tout cela va s’articuler au niveau du site (pages et parties de pages).

Faire de la recherche

Dans sa forme la plus basique, cette recherche doit permettre de s’informer de :

• la concurrence,
• l’industrie du client,
• la cible (qui seront les visiteurs ?),
• le type de design pertinent.

Cette recherche est de deux types. Premièrement, il faut poser (ou se poser) le maximum de questions sur le projet afin de le cerner au mieux. Vous êtes libres des questions à poser (elles peuvent aller de données assez tangibles et concrètes à “Si votre site était un personnage célèbre, qui serait-il ?”).

Il est essentiel, surtout si votre client est une entreprise de taille importante, d’essayer de voir avec les départements concernés la manière dont ils envisagent le site. Votre interlocuteur sera peut-être le département de communication, lequel se fait une idée différente du site que la direction générale. Pourtant, en fin de compte, c’est aussi la direction générale (et/ou autres) qui valideront votre travail. Essayez de les faire se rencontrer, et si possible s’exprimer sur leurs attentes et leur vision du site. C’est à ce moment là que certains désaccords entre eux pourront apparaître. Il est donc bien d’en discuter et de trouver des compromis qui sauront satisfaire les différents objectifs et départements.

Le deuxième type de recherche concerne la veille, la création ne se fait pas ex-nihilo, c’est un processus qui nécessite de s’inspirer de l’existant. Parcourez donc le web, regardez ce qui se fait ailleurs, retenez les bonnes choses, les tendances du secteur, mais notez aussi les erreurs à éviter. De nombreux sites sont dédiés au partage d’interface et d’éléments graphique, tels que designmeltdown.com et dribble.com, utilisez-les !

Vos outils : papier et crayon

Avant d’ouvrir tout logiciel, revenez aux choses simples. Rien ne vaut du papier et des crayons pour laisser libre cours à son imagination. Avant même d’attaquer les croquis, notez les idées qui vous passent par la tête, toutes les idées dans l’esprit d’un brainstorming.

Puis faites des schémas, des croquis. Cela permet d’explorer diverses pistes avant de se lancer et d’avoir une idée rapide de ce que cela peut donner, comment les choses s’imbriquent et s’agencent. Ça nous permet d’identifier certains problèmes le plus tôt possible.

On peut ainsi trier ses idées et les classer immédiatement dans trois catégories :

• les bonnes idées,
• les idées qui peuvent être bonnes moyennant un peu de travail,
• les idées de merde.

Wireframes

Une wireframe n’est pas une première ébauche de design, ça sert à définir le layout, la position des éléments. Il n’y a pas encore de vernis graphique. Il ne faut donc pas trop en mettre, la wireframe consiste donc uniquement à présenter la manière dont le contenu est agencé. On doit garder à l’esprit qu’une bonne wireframe est celle qui n’existe que pour le contenu : il est la chose la plus importante.

Utiliser des blocks : ce n’est pas un dessin réaliste. Il faut positionner les éléments en utilisants des figures géométriques. Cependant, si on possède certains éléments, on peut déjà les mettre à ce stade (logo…).

On va fortement se reposer sur le travail fait au préalable sur le contenu, transposer dans la wireframe ce qui a été définit en amont (listes, paragraphes, titres, images…) et regarder comment le contenu s’accorde visuellement avec les différents éléments du site, jusqu’à ce que l’on obtienne une bonne représentation de ce que devrait être une page.

Nous veillerons à considérer le flux : le contenu s’étend sur toute la hauteur d’une page. Il faut donc prendre en considération le contenu dans son ensemble, pas simplement ce qui est au dessus de la ligne de flottaison. Observer comment les paragraphes s’enchainent, les espacements, les citations etc. Cela doit s’enchainer de manière fluide afin que le regard suive un parcourt naturel et logique.

Pour les outils, chacun a ses préférences, certains utilisent PowerPoint, d’autres les font à la main, il existe cependant de nombreuses solutions, dédiées ou non. La page Wikipedia sur les wireframes en liste quelques-unes.

Les couleurs

le choix des couleurs constitue une phase très importante du design. Les couleurs véhiculent des significations bien définies et elles ne conviennent pas toutes pour n’importe quel usage. En outre, on ne peut associer n’importe quelle couleur avec n’importe quelle autre. De nombreux outils nous aident dans notre choix des couleurs.

Il y a beaucoup à savoir sur les couleurs. On utilise en général pour travailler une roue colorimétrique ou cercle chromatique (6 ou 12 couleurs la plus souvent). Cette roue est un diagramme qui représente les différentes couleurs de l’arc-en-ciel avec des variantes de saturation.

On choisit en général plusieurs couleurs dominantes pour un design. Il y a plusieurs manières de définir ces palettes :

Monochromatique

Une seule couleur plus ou moins saturée.

Analogue

On choisit des couleurs voisines sur le cercle chromatique. ici on choisit une couleur principale puis les deux autres comme des couleurs de mis en avant.

Complémentaire

Deux couleurs qui sont opposées sur la roue chromatique (offre bop de contraste et un fort impact).

Complémentaire divisé

On crée cette palette en prenant une couleur puis en sélectionnant les deux voisines de la couleur complémentaire. Dans l'ensemble, l'impact est le même que le complémentaire mais en un peu atténué, parfois plus équilibré et calme.

Triadique

Trois couleurs également espacées sur la roue.

Tetradic

Fonctionne en joignant deux paires de couleurs complémentaires. L'avantage est que l'on a une bonne variété de couleurs. Dans l'ensemble, il convient quand même de choisir une couleurs comme couleur dominante et de conserver les autres comme couleurs de mise en évidence.

La plupart du temps, les marques n’utilisent que deux couleurs principales dans le thème colorimétrique. Cependant, il n’y a pas de règle en la matière. Néanmoins, lorsque l’on débute, il est sage de ne pas utiliser trop de couleurs différentes car le risque d’avoir un résultat peu cohérent augmente.

De nombreux outils en ligne fournissent une aide formidable dans nos choix de couleurs. Paletton et Adobe Color fournissent une roue chromatique interractive et permettent de choisir entre les différentes combinaisons (analogue, triadique etc.).

J’aime beaucoup Coolors qui permet de générer des palettes automatiquement, mais aussi de trouver des couleurs complémentaires à une ou plusieurs couleurs que vous définissez. Enfin, Colord permet quant à lui de créer des couleurs ou des palettes manuellement ou de les extraire à partir d’images et de partager vos trouvailles avec la communauté. Il constitue de fait un petit réseau social sur lequel on peut flâner à la recherche d’inspirations colorimétriques.

Typographie

La typographie a une place importante dans le design. C’est elle qui représente le contenu. Une police désigne l’ensemble des déclinaisons d’une même famille. Ainsi l’Helvetica est une police (ou typographie). La fonte est l’ensemble de caractères d’une même police, de même style, corps et graisse (Helvetica 10pt italique). Je vous invite à lire Une histoire de police pour une compréhension plus étendue de l’impact des choix typographiques.

On distingue les polices avec et sans serif. Les polices serifs possèdent un empattement que les sans serifs n’ont pas. Les polices sans serifs sont plus modernes (Helvetica, Arial, Futura etc.) que celles à empattement. Certaines polices, telles que les polices de type “écriture à la main” ou gothique, sont peu lisibles, on les réserve donc pour de courts textes : titres, menu etc.

Une fois que vous avez déterminé la ou les différentes polices que vous souhaitez utiliser, il faut travailler les tailles, les espacements, les couleurs et les contrastes.

Nous le répétons, mais le contenu est fait pour être lu. Il doit être accessible. Quelle est la cible ? Quelle est la typologie du site ? Le site est-il centré sur la typographie ou y-a-t-il d’autres éléments à mettre en avant ?

S’il y a beaucoup de rédactionnel – un blog par exemple – la police doit être suffisamment grande et aérée pour faciliter la lecture de longs paragraphes. Si la cible est âgée, il faut une police de grande taille pour une lisibilité accrue.

Le contraste joue énormément sur la lisibilité. Deux choses à garder à l’esprit :

• S’assurer que le contraste entre le background et le texte est suffisamment important pour que le texte soit lisible. Pour tester le contraste de texte sur un fond, on peut utiliser l’outil de Léa Verou.
• Il faut prêter une attention particulière à la police choisie. Certaines polices possèdent une graisse très faible, elles sont très légères et peuvent ne pas bien s’afficher à certaines tailles. Elles conviennent bien pour des titres ou des mises en avant à des tailles élevées mais deviennent peu lisibles pour de grands paragraphes.

Il faut veiller à ce qu’une police possède un bon support des navigateurs et systèmes d’exploitations. Une police peut avoir un très bon rendu sur un OS et devenir vraiment horrible sur un autre.

On doit laisser assez d’espace au contenu pour qu’il respire, comme pour toute autre partie du design. De plus, le contenu est central, n’hésitez pas à ce qu’il soit prépondérant et prenne le dessus sur le reste du design.

La hiérarchie du contenu définie en amont doit se ressentir ici : elle passe par des tailles différentes entre les titres, les sous-titres, les chapeau, les citations etc. La hiérarchie s’établit en faisant varier la taille du texte, la couleur, la taille, la graisse, italique, le contraste…

Le but est bien de rendre la lecture la plus aisée possible et la découverte du contenu rapide et sans accroc.

Rythme vertical

Maintenant que vous avez quelques notions de typographie, le plus dur est de créer un rythme vertical.

Génériquement, le rythme est un phénomène qui se répète périodiquement et qui possède une structure dans sa répétition.

Appliqué au contenu, cela veut dire que l’on cherche à obtenir quelque chose de cohérent, qui s’enchaine de manière fluide, avec une expérience visuellement naturelle et relaxante, qui évoque quelque chose de familier aux utilisateurs, qui abolit les barrières visuelles et rend le contenu plus lisible. Le but est de créer un ensemble harmonieux entre les contenus (même les images).

De quoi à l’air l’espacement entre les paragraphes ? Est-ce facile à lire ? La taille du texte doit être en relation avec celle des titres et de l’interligne.

Le dénominateur commun est la baseline, ou ligne de base. C’est l’espace qu’occupent les lettres, indépendamment du jambage (trait vertical qui descend sous la ligne de base des lettres “p, q et j” par exemple) et la hampe (trait vertical montant des lettres “l, d et f” par exemple). On peut se référer à la lettre x minuscule pour obtenir la taille de la baseline.

La base du design correspondra à la hauteur de ligne de l’élément le plus courant : le corps de texte. Pour un site avec peu de contenu textuel – comme une webapp – il faut déterminer l’élément qui servira de référence. Si le contenu fait 16px, la hauteur de ligne fait entre 22 et 26px puisqu’elle est comprise entre 140 et 160% de la taille du texte.

En ce qui concerne les titres, si l’on applique seulement une marge vers le bas, on se retrouve avec un espace qui est plus important en dessous du titre qu’au dessus de ce dernier. On peut donc appliquer une marge réduite vers le bas pour les titres, par exemple de 0.5 à 1em et une marge vers le haut légèrement plus petite que ce que l’on applique aux paragraphes en marge du bas.

p {
    margin-bottom: 1.5em;
}
h1, h2, h3, h4 {
    margin: 1.414em 0 1em;
}

Une fois cette hauteur de ligne définie, on s’assurera que toutes les marges soient des multiples de celle-ci. Pour établir une échelle personnalisée, il va falloir définir un ratio pour agrandir ou diminuer en partant de notre baseline. Ce ratio peut être n’importe quoi qui possède un sens ou relève d’une esthétique particulière. On peut par exemple se baser sur le nombre d’or, lequel est à la base de l’harmonie du monde et de la nature. Ce nombre porte notre ratio à environ 1:1,618. Cela donne ainsi une échelle comme suit : 16, 26, 42…

Vous conviendrez que cette échelle peut vite devenir extrême. Pour pallier les écarts, on peut la compléter en se basant sur un deuxième nombre révélateur dans notre design : par exemple la largeur des paragraphes… ou la hauteur de ligne. Typescale et Modularscale nous sont d’une aide précieuse dans cet exercice.

Modularscale peut paraître plus complet (et complexe), cependant Type-scale permet de visualiser immédiatement le rendu dans différentes polices et on peut s’inspirer des règles CSS qu’il propose.

Au niveau de l’intégration, on se simplifiera la vie en utilisant les marges que dans une seule direction – dans la mesure du possible. Ça permet de ne pas avoir des marges qui s’additionnent et d’éviter les difficultés si l’on souhaite supprimer les marges. De plus, le mieux est de définir les marges en REM dans le CSS. On s’affranchit ainsi d’une unité absolue (le pixel) tout en bénéficiant d’une mesure basée sur la racine et non sur le parent.

h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dd,
p, figure,
pre, table, fieldset, hr{
    margin-bottom: 1.5rem;
}

En poussant cette logique à l’ensemble des contenus, on peut faire en sorte que nos images possèdent toutes des hauteurs multiples de notre baseline.

Grille or not grille

Les grilles permettent d’obtenir un design cohérent avec des blocs et du contenu alignés. Cela permet de faire régner l’ordre et d’équilibrer les proportions des divers éléments dans votre design. C’est la clef d’un design professionnel, propre et soigné car une grille vous permet de donner une structure à l’ensemble. Alscacreéation consacre un article à ce sujet.

Sans cela, on obtient rapidement un menu pas tout à fait aligné, un widget décalé et on fini par avoir un ressenti brouillon. La grille, si elle peut sembler castratrice, permet en réalité d’éviter d’avoir à se soucier de certains détails et de se concentrer sur l’essentiel. De plus, comme toute règle, une fois bien maîtrisée, on peut l’enfreindre.

De nombreux framework CSS proposent leur propre grille. Le plus connu d’entre eux est évidemment Boostrap, mais il y en a bien d’autres.

De plus, aujourd’hui, avec les Grilles CSS et Flexbox, il est très aisé d’implémenter des grilles sans aucune ressource externe.

La composition

De manière très basique, il s’agit de rassembler les différents éléments de design sur lesquels on a travaillé afin d’en faire un ensemble. hérité de l’impression, il existe quatre grands types de compositions

Le visuel seul

Lorsqu’il y a un élément de design qui joue un rôle central et prépondérant et qui concentre toute l’attention.

La composition en Z

Cela suit le cheminement naturel du regard sur une page web, du haut gauche en bas à droite en faisant un Z. Cela est utile pour nous guider dans le placement des éléments importants de la page.

La règle des trois tiers

Comme en photographie, la page est divisée en neuf parties égales : trois horizontalement et trois verticalement. elle permet de donner un équilibre à notre design et à aboutir à un ensemble aux proportions harmonieuses.

Le ratio du nombre d’or

La répartition des espaces se fait alors selon la règle du nombre d’or, calculé à partir de ratios de 1,618. Par exemple si on a un espace utilisable de 960px et qu’on veut le diviser en deux, avec un espace principal et un espace pour une sidebar, on peut utiliser le nombre d’or pour réserver l’espace principal 960/1,618 = 593px et la sidebar recevra donc l’espace restant soit 367px. L’usage du nombre d’or, très présent dans la nature donnera un ressenti juste et naturel.

• les couleurs,
• les visuels (images, photos, icônes, photos),
• la typographie (taille, hiérarchie, position),
• taille (contenu, images, relations).

Il ne vous reste plus qu’à pratiquer ! En bonus, voici un outil vous permettant de rapidement mettre sur pied une ébauche design system.