6 lois de design

Cet article est incomplet.

Il est jugé trop incomplet dans son développement ou dans l'expression des concepts et des idées. Son contenu est donc à considérer avec précaution.

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Introduction

Le design visuel, qu’il s’agisse d’une mise en page imprimée, d’une interface web, d’un document pédagogique ou d’une application, ne se réduit pas à une question d’esthétique ou de goût : il constitue avant tout un outil de communication visant à transmettre un message clair, structuré et mémorisable. Dans cette perspective, la manière dont le contenu est organisé tels que choix de disposition, relations entre les blocs, articulation texte–image, jouent un rôle central dans la perception visuelle, la lisibilité et la compréhension. La recherche en ergonomie cognitive montre notamment que la structuration visuelle influence directement la charge cognitive, la capacité d’anticipation et la navigation dans un contenu (principe bien établi par les travaux sur la perception et l’organisation de l’information).

Cette page consacrée aux « 6 lois de design » basé sur le modèle « CRAP » (Contraste, Répétition, Alignement, Proximité), fournit des repères pertinents pour organiser visuellement un document ou une interface. Toutefois, comme le soulignent les travaux en communication visuelle et en UX/UI, ces principes ne couvrent qu’une partie des enjeux liés à la lisibilité, à l’accessibilité, à la hiérarchie informationnelle et à la qualité de l’expérience de lecture et d’interaction.

Les recherches en psychologie de la perception et en ergonomie cognitive montrent que l’utilisateur ne traite pas l’information visuelle de manière linéaire, mais construit rapidement une représentation globale à partir de groupements, d’alignements et de contrastes perceptifs. Les travaux issus de la Gestalt ainsi que les modèles contemporains de l’attention (Wickens & McCarley) soulignent que cette organisation initiale conditionne la compréhension et l’efficacité de la navigation. Une structure visuelle claire réduit l’effort cognitif nécessaire à l’interprétation, alors qu’une disposition incohérente ou peu hiérarchisée augmente la charge cognitive extrinsèque, ce qui pénalise la lecture et l’usage.

Dans le domaine du multimédia éducatif, Mayer a démontré que la proximité entre texte et image, la hiérarchie visuelle et la cohérence graphique améliorent la compréhension et la mémorisation, en évitant les recherches visuelles inutiles. Ces résultats rejoignent les heuristiques d’utilisabilité de Nielsen & Molich, qui rappellent que la hiérarchie, l’alignement, la cohérence et la clarté visuelle sont des conditions essentielles pour guider l’attention et limiter les erreurs de navigation.

Ainsi, si les principes du modèle CRAP constituent une base utile pour aborder la mise en page, la littérature en design visuel et en UX montre qu’ils ne suffisent pas à eux seuls pour couvrir les enjeux liés à la perception, à l’accessibilité, à la charge cognitive ou encore à l'interprétation du contenu. Une approche plus large intégrant les apports de la psychologie cognitive, de la typographie numérique et des principes perceptifs permet de mieux comprendre comment le design visuel soutient véritablement la compréhension et l’expérience utilisateur.

---

Structure

Il s'agit simplement de bien structurer sa page, c'est-à-dire de respecter au maximum la règle du nombre d'or. Autrement dit, il s'agit de ne pas créer deux zones de contenu de même taille sur votre page. Il faut essayer de reproduire cette spirale caractéristique du nombre d'or.

Typographie

Il existe un nombre de polices très élevé. Il s'agit ici de ne pas choisir la police la plus "cool" mais de choisir une police qui colle avec votre contenu. Si votre page présente du contenu historique par exemple, on utilisera plutôt une police serif car les polices serifs évoquent un contexte plus classique. N'utilisez pas plus de 3 polices sur la même page car au-dessus de ce nombre cela surcharge inutilement votre page. Si vous décidez d'utiliser différentes polices, choisissez des polices cohérentes. Vous pouvez utiliser google font ou dafont (entre autre) pour trouver de nouvelles polices.

Couleurs

Il est important de bien choisir les couleurs que l'on utilise. Les couleurs sont souvent associées à différentes émotions ou aspects (à venir: une liste de lien sur la psychologie des couleurs et comment choisir les couleurs pour son site en fonction du site et des utilisateurs) et il est important de choisir des couleurs en accord avec ce que l'on veut faire passer comme message avec sa page. La combinaison des couleurs est également importante, pas toutes les couleurs ne vont ensemble. (à ajouter : les différents outils comme adobe kuler pour la combinaison de couleur).

CRAP

CRAP = Contraste, Répétition, Alignement, Proximité

Simplicité

Un conseil simple : "Keep it simple"

Icônes

Les icônes sont des éléments permettant de remplacer un pavé de texte et de simplifier votre page. Il faut par contre être attentif à choisir des icônes adaptées.