Comment maîtriser la conception de la mise en page

Un guide complet pour apprendre les bases de la conception visuelle.

La question à un million de dollars : quel est le secret d'une bonne conception ?

On peut philosopher sur ce sujet, mais en général, le "secret" proverbial d'une bonne conception réside dans la manière dont vous organisez vos éléments visuels, par rapport à votre canevas et entre eux. En gros, nous venons de décrire la conception de la mise en page. Qui, quand on y pense, est partout où l'on regarde.

Prenons par exemple la mise en page d'un magazine, qui suit un système de grille classique (nous allons tout apprendre sur les grilles dans une minute). Tout est généralement aligné à gauche, à droite et en bas. Les colonnes ont surtout un alignement justifié distinct qui rend la page non seulement attrayante sur le plan visuel, mais aussi facile à lire et faisant autorité. Les grands titres attirent l'attention de l'observateur.Le sous-titre, quant à lui, contraste par sa taille afin de créer une hiérarchie visuelle de l'information.

Linda Gaom, Behance

Toutes ces qualités rendent la conception de la page propre, structurée et facile à lire, et elles sont en accord avec les conseils dont nous allons parler maintenant. Mais tout d'abord, comprenons mieux la conception de la mise en page elle-même.

Qu'est-ce que la mise en page ?

La mise en page concerne la disposition des éléments graphiques afin d'attirer l'attention du lecteur et de transmettre un message particulier d'une manière visuellement attrayante.

Nous ne parlons donc pas ici de la conception de logos, mais de la conception de documents imprimés, comme les journaux, les magazines, les affiches, et de leurs équivalents numériques, ainsi que de la conception de sites web, d'applications ou d'UX/UI.

Le mot "mise en page" nous donne beaucoup d'indications : il s'agit d'une disposition d'éléments prédéterminés sur une page.

Lorsqu'une mise en page est efficace, elle est agréable à regarder et elle aide le spectateur à comprendre le message que la conception essaie de transmettre. Comprendre la mise en page est donc essentiel pour créer des compositions attrayantes, efficaces, conviviales et agréables.

Si une mise en page ne transmet pas bien son message au public, ou en d'autres termes, si elle ne se lit pas bien, la conception sera inefficace, même si elle est à la mode. Dans le domaine de la conception de la mise en page, le contenu l'emporte sur les tendances et les gadgets.

L'objectif de la conception de la mise en page

Transmettre un message rapidement

La mise en page établit la relation entre les éléments graphiques afin d'assurer une circulation fluide de l'œil pour un maximum d'efficacité et d'impact.

Créer un équilibre

L'utilisation des principes de la mise en page est le moyen le plus simple de créer un sens de l'équilibre et de la symétrie dans vos projets de conception sans devenir ennuyeux.

Créer une cohésion

La mise en page vous aide à organiser les nombreux éléments de votre dessin ou modèle d'une manière digeste, cohérente et logique.

Créer de la beauté

L'équilibre et la structure créent naturellement de la beauté. Si votre mise en page est réalisée correctement, elle deviendra automatiquement visuellement attrayante pour le spectateur. Moins le spectateur doit faire d'efforts pour comprendre un message, plus votre mise en page semblera attrayante.

Dessin de Frank Philippin pour son livre "I Used to Be a Design Student : Then - Now" Source : DesignBoom

Les éléments de la mise en page

Texte

Le choix de la typographie, de la couleur et de la taille aura des effets différents sur la manière dont votre mise en page sera perçue par votre public.

Image

Les types d'images les plus courants sont les photographies, les illustrations ou les infographies.

Formes

Les formes peuvent être géométriques, très anguleuses, ou organiques, imitant le monde naturel. Elles peuvent également être abstraites. Les formes abstraites sont très à la mode depuis l'année dernière, les concepteurs de sites web les ayant incorporées dans des compositions complexes et tentaculaires.

Les formes peuvent remplacer une image ou être utilisées pour ajouter des éléments graphiques à une page, mettre en évidence du texte ou délimiter l'espace entre d'autres éléments visuels.

Espace blanc

Toute mise en page comporte une certaine quantité d'espace blanc qui permet à vos éléments de respirer et de se démarquer.

Les principes d'or de la mise en page

Vous remarquerez que les principes de la conception de la mise en page suivent un grand nombre des principes fondamentaux de la conception, tels que l'utilisation des couleurs d'une certaine manière, la typographie, la répétition, le contraste, la hiérarchie et l'équilibre.

Principe n° 1 : utiliser des grilles

Les grilles aident les concepteurs à positionner les différents éléments de conception, tels que le texte et les images, d'une manière cohérente et facile à suivre.

Elles donnent une impression d'ordre, empêchent les éléments de se surcharger les uns les autres et, surtout, les grilles corrigent également l'alignement, ce qui donne à votre travail un aspect plus propre et plus professionnel.

Source : hgmlegal.com

L'anatomie des grilles

On pourrait penser qu'il s'agit simplement de lignes verticales et horizontales, mais une grille est composée de plusieurs éléments. Voici la terminologie la plus importante que vous devez connaître pour une grille de base :

• Format Ainsi, si vous concevez quelque chose pour l'impression, le format est la page, et si vous êtes un concepteur de sites web, le format est la page web ou la fenêtre du navigateur.
• Marges sont les espaces vides intentionnels entre le format et le design.
• Lignes d'écoulement Les lignes d'écoulement sont les lignes horizontales qui séparent votre mise en page en sections parallèles. Les lignes d'écoulement contribuent à la lisibilité de votre mise en page et guident le lecteur pour qu'il suive correctement le contenu.
• Modules sont les blocs formés par les lignes horizontales et les lignes verticales de toute grille. Si vous y réfléchissez bien, ce sont les éléments constitutifs de toute grille. Tous vos modules verticaux créent vos colonnes, tandis que toutes vos grilles horizontales créent vos lignes.
• Régions sont des groupes de modules connectés, verticaux ou horizontaux. Il n'y a pas de règles quant à la manière dont vous décidez de les organiser.

Source : Radversity

Types de grilles

Les grilles de mise en page ont d'abord été utilisées pour organiser l'écriture manuscrite sur le papier.

Voir également: Qu'est-ce qu'un descendeur ?

Elles remontent au 13e siècle, lorsque l'artiste français Villard De a fusionné le système de grille avec le nombre d'or pour produire des mises en page imprimées avec des marges. Ce système de grille est encore visible aujourd'hui, comme le prouve la majorité des mises en page de livres et de magazines imprimés. Les éditeurs, les rédacteurs et les concepteurs préfèrent utiliser des grilles standard non seulement parce qu'elles sont esthétiques, mais aussi parce que les lecteurs se sont habitués à les utiliser pour leurs propres besoins.s'attendre à ce que certains éléments de conception se trouvent à un endroit particulier.

Les grilles peuvent être conçues de deux manières : symétrique ou asymétrique. Grilles symétriques suivent une ligne centrale, où les régions verticales et horizontales sont égales entre elles ; les colonnes ont la même largeur.

Dans un grille asymétrique Comme son nom l'indique, les marges et les colonnes ne sont pas toutes identiques.

Sur la base de cette classification, il existe cinq types principaux de grilles de mise en page utilisées dans le monde entier et sur lesquelles vous pouvez compter :

Grilles de manuscrits Elle sépare l'en-tête, le pied de page et les marges, et crée un rectangle à l'intérieur du format (ou de la page) qui délimite votre texte. C'est la base des magazines, des journaux et des livres. C'est donc probablement la mise en page qui vous est la plus familière.

Source : UXplanet

Source : Radversity

Grilles à colonnes Les grilles à colonnes sont également très populaires dans l'édition de magazines. La mise en page typique d'un magazine utilise les grilles à colonnes pour séparer le texte en sections faciles à lire. Mais elles sont également très populaires pour les sites Web. Vous pouvez utiliser de deux à six grilles. Il est possible d'en utiliser davantage, mais ce n'est pas courant. Une chose très importante à propos des grilles à colonnes est que l'espacement entre les colonnes, ou les gouttières, est à égale distance les unes des autres.autres.

Les grilles à colonnes symétriques sont utilisées par les journaux, par exemple, tandis que les grilles à colonnes asymétriques sont préférées pour la conception de sites web.

Source : UX Planet

Source : Radversity

Grilles modulaires Ce type de grille est nécessaire lorsque vous devez organiser divers éléments dans votre mise en page et que les grilles à colonnes ne suffisent pas.

Les grilles modulaires sont composées de modules de taille égale, ce qui facilite la visualisation de vos zones spatiales de différentes manières.

Source : UX Planet

Source : Radversity

Grilles de référence La ligne de base est la ligne sur laquelle le texte repose lorsque vous tapez, et l'interligne est l'espacement entre deux lignes de base. Vous vous demandez quelle doit être la taille de votre titre ou de vos sous-titres ?

Les grilles de lignes de base sont là pour donner à votre texte un rythme fluide.

Source : UX Planet

Source : Fragaria

Grilles hiérarchiques Les grilles hiérarchiques ressemblent moins à une grille que tous leurs homologues. Néanmoins, elles sont très utiles pour organiser les éléments de conception par ordre d'importance. Les grilles hiérarchiques peuvent être basées sur des grilles modulaires, ou vous pouvez même créer vos propres grilles. Les sites Web utilisent beaucoup cette grille, en particulier les magazines numériques et les journaux ont tendance à s'appuyer davantage sur les grilles hiérarchiques que sur les grilles à colonnes dans leur transition vers le statut d'entreprise de service public.numérique.

Source : UX Plane

Principe n°2 : utiliser l'espace négatif

Nous pensons souvent que le vide, le silence ou l'absence de couleur est une mauvaise chose, mais nous ne tenons pas compte du fait qu'ils constituent la base solide du contraste.

Également appelé espace blanc, l'espace négatif est la zone de votre conception qui ne comporte aucun élément réel. C'est la zone laissée vide. Elle ne se contente pas d'entourer vos éléments, elle crée également les liens nécessaires entre eux. Pour cette raison, l'espace négatif est un élément de conception légitime et a un impact massif sur l'efficacité de votre conception de la mise en page.

Espace négatif bon ou mauvais

Il contribue à la hiérarchie visuelle et à l'équilibre visuel ; il permet à l'utilisateur de se concentrer sur les éléments essentiels ; il réduit le niveau de distraction ; et enfin, il ajoute du style et de l'élégance à votre conception.

Les concepteurs inexpérimentés peuvent avoir tendance à remplir le plus possible leur toile, en augmentant la taille du texte ou en agrandissant un logo ou une image. Mais en donnant de l'espace à vos éléments, vous permettez à l'observateur de saisir plus rapidement et plus confortablement certains indices d'information.

Si tout réclame l'attention de l'observateur, rien n'est entendu.

- Aaron Walter, "Design for emotion" (conception pour l'émotion)

Un moyen facile de déterminer l'espace négatif est d'utiliser une grille modulaire. En la plaçant au-dessus de votre dessin, vous pouvez facilement visualiser les modules qui peuvent rester vides et ceux qui doivent être remplis.

Designer by Brunswicker, Source : Codesignmag.com

Principe n° 3 : Choisir un point focal unique

Un client vous a-t-il déjà demandé d'agrandir le logo, puis le titre ?

Vous ne pouvez pas tout mettre en valeur, ce qui irait à l'encontre de l'intérêt d'une bonne conception. Tout comme le temps, la focalisation est relative. Pour qu'un élément ressorte, un autre doit servir d'arrière-plan. Certains éléments doivent en dominer d'autres pour que votre conception présente une hiérarchie visuelle.

Le point focal d'une conception est l'élément qui a le plus de poids visuel. C'est l'élément qui attire l'œil en premier, plus que tout autre élément de votre mise en page.

Un point focal annonce à votre public le début de son parcours sur votre site. C'est donc le début de l'histoire que vous racontez.

Pour ce faire, il est généralement possible d'utiliser une grande image ou une grande source de typographie. Remarquez l'efficacité du point focal ci-dessous.

Conçu par Braulio Amado pour Bloomberg Businessweek, Source : C'est bien que l'on ne puisse pas se passer de l'information.

Mais si un point focal attire l'attention de votre public, la règle suivante permet de le guider.

Principe n°4 : penser à la proximité et au flux

Le principe de proximité est simple : il s'agit de faire en sorte que les éléments qui ont un rapport entre eux soient placés ensemble.

La proximité indique que les éléments visuels sont connectés et deviennent une unité visuelle qui aide à organiser la mise en page.

Par conséquent, ne regroupez que les éléments de conception qui ont une relation entre eux et utilisez les poches d'information de votre conception pour guider votre public vers l'élément de contenu pertinent qu'il doit consommer. Ce principe est également appelé principe de flux.

Source : Satori Graphics

Les points focaux attirent l'œil et deviennent le lieu de repos, tandis que d'autres éléments donnent une orientation.

Les graphiques sont clairement séparés du texte, de même que les appels à l'action, de sorte que l'attention de l'internaute navigue d'un ensemble d'informations à l'autre.

Principe n°5 : utiliser le contraste

Veillez à ce que votre design soit suffisamment contrasté.

Les contrastes permettent d'organiser votre design, d'établir une hiérarchie indispensable et de mettre l'accent sur ce qui est important.

En outre, une bonne utilisation des contrastes ajoute un intérêt visuel à l'ensemble de votre conception. Soyons réalistes : une présentation où tout est de la même taille, de la même forme ou de la même couleur sera ennuyeuse. Les contrastes donnent du piquant à l'ensemble.

La première chose qui vous vient à l'esprit est peut-être le contraste des couleurs, comme le chaud et le froid, le foncé et le clair, le bleu et l'orange. Mais si la couleur est un principe essentiel du contraste, il existe aussi des contrastes de type, d'alignement et de taille. Et n'oubliez pas que le contraste est aussi relatif. Il n'a de sens qu'en juxtaposition avec d'autres éléments.

Voici quelques exemples de mises en page qui utilisent cette règle de manière intelligente et esthétique. Remarquez le contraste dans la typographie, la couleur et même le contraste dans la taille entre les éléments.

Source : Plan d'action de l'IAG pour la réconciliation

Principe n° 6 : répétition, schéma, rythme

Lorsque nous pensons à la répétition, nous pensons au même élément, encore et encore.

Mais c'est différent en matière de design. Ce n'est certainement pas aussi ennuyeux que cela. Lorsqu'elle est utilisée correctement, la répétition peut en fait renforcer votre design.

Essayez d'identifier et de réutiliser un motif tout au long de votre mise en page afin que les différentes zones se sentent liées et fassent partie de la même composition. Cela permettra à votre conception d'avoir un thème. En répétant les éléments, non seulement vous répondez aux attentes de votre public, mais vous améliorez également l'expérience de l'utilisateur. Être cohérent permet aux utilisateurs de se sentir plus à l'aise.

Vous pouvez le faire en répétant des formes ou des symboles, ou même une palette de couleurs, une police de caractères et le même style en général.

Une bonne habitude à prendre est d'utiliser une police de caractères avec une grande famille. Limitez le nombre de motifs, de graisses/styles de lignes et de couleurs, et répétez-les partout. Essayez également de garder le même style d'images et de graphiques. Par exemple, utilisez des illustrations d'un même artiste.

Voir également: 11 graphistes et artistes célèbres à suivre en 2022

Source : Thepentool.co

Voilà les six principes qui vous aideront à organiser votre design et à obtenir une mise en page plus propre, plus professionnelle et plus équilibrée.

Mais votre voyage ne s'arrête pas là. Le graphisme n'est pas une science exacte et ne doit pas se limiter à des conseils et des principes. Comme dans tous les domaines de la création, il n'y a pas de règle absolue. Sortir de ces conseils de manière subtile ajoutera de la profondeur et de la variété à vos créations.

Néanmoins, ils constituent un excellent point de départ et nous vous encourageons à les essayer et à nous faire savoir comment ils ont fonctionné !

Télécharger Vectornator pour commencer

Faites passer vos créations au niveau supérieur.

Télécharger le fichier