Parlez fort.
Le secret de tout bon design réside dans la manière dont ses éléments visuels sont organisés et positionnés les uns par rapport aux autres. C'est exactement l’objectif du design de la mise en page.
La mise en page donne un sens à votre design et le rend visuellement attrayant. Cette approche aide à maintenir l'équilibre d'une page à l'autre ou d'une diapositive à l'autre.
Les grilles sont un élément important du design de la mise en page. Les grilles sont le point principal de toutes les mises en page, infographies et présentations. Lorsque vous créez sur un éditeur en ligne comme Visme, vous utilisez des grilles sans même le savoir. Nos designers utilisent des grilles pour créer les modèles que vous aimez.
Le design de la configuration implique l'utilisation d'une grille ou d'un groupe de grilles, en fonction de ce qui doit être réalisé. Croyez-le ou non, des grilles existent aussi pour vous aider à enfreindre les règles.
Examinons tous les types de grilles qui existent dans la boîte à outils de design de mise en page, en commençant par l'anatomie des grilles afin que vous puissiez mieux les comprendre.
L'anatomie d'une grille est composée de plusieurs parties. Toutes les parties ne sont pas présentes dans chaque grille, cela dépend du type de grille sélectionné. Ici, nous allons examiner les parties les plus importantes d'une grille.
Vous reconnaîtrez peut-être bon nombre de ces termes dans des programmes de création de documents tels que Microsoft Word, Google Docs ou Pages. L'apparence de votre document est définie par les sections d'une grille, y compris les marges, l'en-tête, le pied de page et les numéros de page.
Le format est la zone complète où le design final sera disposé. Dans le design imprimé, le format est la page. Dans le design Web, le format est la fenêtre du navigateur.
Les marges sont les espaces vides entre les bords du format et le contenu. La taille des marges est ce qui donne au contenu une forme générale, généralement un rectangle.
Les lignes de flux sont des lignes horizontales qui séparent les différentes sections d'une grille en bandes parallèles. Ils aident le lecteur à suivre le contenu de la mise en page. Les lignes de flux créent également des points d'arrêt ou des bords sur lesquels les éléments doivent être placés.
Certaines lignes de flux sont appelées lignes de suspension et d'autres sont appelées lignes de base.
Les modules sont les blocs de construction de toute grille. Ce sont les espaces créés entre les lignes de flux et les lignes verticales. Des groupes verticaux de modules créent ensemble des colonnes. Les groupes horizontaux créent des rangées.
Des groupes de modules adjacents dans des zones verticales et horizontales créent des zones ou des régions spatiales. Une région verticale peut contenir un bloc de texte, une région horizontale peut contenir une vidéo. Les régions peuvent être organisées proportionnellement ou utilisées pour créer des zones superposées.
Les colonnes sont des zones ou des régions spatiales verticales qui s'adaptent entièrement de la marge supérieure à la marge inférieure.
Les lignes sont des zones spatiales horizontales qui s'adaptent entièrement de la marge de gauche à droite.
Les espaces entre les lignes et les colonnes sont appelés gouttières. Ceux-ci doivent toujours être égaux entre les colonnes ou les lignes afin de maintenir un équilibre visuel.
Les marqueurs sont des zones à l'intérieur de l'en-tête ou du pied de page qui marquent l'endroit exact où les informations répétées sont placées d'une page à l'autre.
Les grilles de mise en page sont utilisées pour les projets de design qui ont une ou des centaines pages. Ce sont les grilles qui organisent les éléments à l'intérieur d'un espace. Les documents Word, par exemple, ont une grille, ils ne sont tout simplement pas toujours visibles. Les grilles de mise en page aident les designers à positionner le texte et les images de manière cohérente et facile à suivre.
La plupart des éditeurs de mise en page, en ligne ou non, disposent d'un outil appelé "aligner sur la grille". Ce sont des lignes bleues ou rouges qui apparaissent lorsque des éléments sont déplacés à l'intérieur du design. Ces repères graphiques permettent aux designers de savoir quand les bords s'alignent selon la grille ou quand elle est centrée. Les éditeurs de mise en page plus complexes afficheront la distance entre les éléments afin qu'ils puissent être positionnés proportionnellement.
Toutes les grilles de mise en page peuvent être conçues de deux manières : symétrique ou asymétrique. Les grilles symétriques suivent une ligne médiane. Les marges verticales sont égales entre elles, tout comme les marges horizontales. Les colonnes d'une disposition symétrique ont également la même largeur. Dans une disposition asymétrique, les marges et les colonnes peuvent être différentes les unes des autres. Il est important de toujours rechercher l'équilibre lors de l'utilisation d'une disposition asymétrique.
S'inscrire. C'est gratuit.Créez des mises en page parfaites avec la fonction d'accrochage à la grille de Visme !
Un document Word ou un modèle de présentation aura toujours une grille manuscrite. Parfois, ces grilles sont invisibles, bien qu'elles puissent être activées pour apparaître sur les éditeurs de documents comme Word. Les grilles manuscrites dans un document texte séparent l'en-tête, le pied de page et l'espace sur les bords (marges). La mise en page du manuscrit crée un rectangle à l'intérieur de la page (format), comme une boîte pour le texte.
La grille de manuscrits est la base de tous les magazines, journaux, ebooks et de toutes les designs textuelles. Le design de la mise en page de la grille du manuscrit est configurée sur la première page. Le reste des pages suivra les mêmes mesures. C'est une bonne pratique de garder la grille du manuscrit cohérente dans le design d'un document. Même s'il y a des éléments qui dépassent du bord, comme une forme ou une photographie, la grille sera toujours là pour aider à maintenir un bon équilibre pour l'ensemble du design.
Les grilles de colonnes sont utilisées pour organiser les éléments en colonnes. Quelques magazines utilisent des grilles de colonnes pour placer le texte dans des sections faciles à lire. Certains manuels académiques les utilisent également. Les grilles de colonnes sont également utilisées dans les sites internet, comme dans les journaux ou les blogs en ligne.
Les grilles de colonnes peuvent avoir aussi peu que deux colonnes ou jusqu'à six ou plus, mais ce n'est pas très courant.
Le texte et les images d'une grille de colonnes sont placés en suivant les lignes verticales et les lignes de flux qui composent les colonnes. Les images peuvent être placées dans une colonne, ou sur deux ou plus pour créer une mise en page visuelle différente. L'espace entre les colonnes (gouttières) doit être proportionnel et cohérent dans tout le document.
Une grille de colonnes symétrique a toutes les colonnes de la même largeur, tandis qu'une grille asymétrique aura certaines colonnes proportionnellement plus fines ou plus larges que d'autres.
Les journaux imprimés utilisent généralement une grille de colonnes symétriques pour organiser leurs articles.
Un bon exemple de grille de colonnes asymétrique est la disposition générale d'un article de blog (sous l'en-tête). Si vous regardez un exemple d'article de blog ci-dessous, vous pouvez facilement voir qu'il est composé de deux colonnes de largeurs différentes : le contenu de l'article de blog et la barre latérale.
L'exemple de magazine ci-dessous utilise une grille à trois colonnes avec des largeurs proportionnelles. Le titre et le sous-titre occupent l'espace des trois colonnes tandis que certains textes en surbrillance occupent l'espace de deux colonnes.
Une grille modulaire est similaire à une grille de colonnes vu qu'elle comporte des colonnes, mais elle a également des lignes. Ce type de grille est utilisé lorsqu'il y a plus d'éléments à organiser et qu'une grille de colonnes ne suffit pas. Les journaux utilisent des colonnes et des grilles modulaires pour organiser les histoires et permettre une lecture facile. Les grilles modulaires ont des modules de taille égale. Il est ainsi plus facile d'« enfreindre les règles » et d'utiliser les zones spatiales de différentes manières.
Les grilles modulaires sont également idéales pour la mise en page de formulaires, de graphiques et d'horaires. Ils sont également très utilisés sur les sites de e-commerce. La page d'accueil de votre téléphone, qui affiche toutes les applications, dispose d'une grille modulaire. Instagram utilise également une grille modulaire pour afficher votre flux.
Une ligne de base est la ligne où se trouve le texte. L'interlignage est l'espacement entre les lignes de base. Une grille de base peut être appliquée à tout type de grille mentionné ci-dessus. L'utilisation d'une grille de base donne un rythme fluide au texte. Cela permet également d’ajouter aux titres et sous-titres un espace proportionnel par rapport au corps du texte, ce qui les rendra plus agréables pour le lecteur.
Il y a une grille de base dans quelque chose que vous avez beaucoup utilisé à l'école et que vous utilisez peut-être encore maintenant. Les cahiers lignés ont une grille de base. Il n'est pas étonnant que les enseignants aient toujours voulu que nous écrivions sur du papier de cahier plutôt que sur du papier blanc. Il permet un bon rythme dans les devoirs écrits. À moins bien sûr que notre écriture soit vraiment minuscule ou vraiment énorme.
Si vous regardez attentivement ce morceau de papier de cahier écrit, vous verrez qu'il a également une grille de document qui crée des marges. Les grilles sont à peu près partout où le texte et les images sont disposés. Pourquoi ne pas vous mettre au défi de les trouver ?
Les grilles hiérarchiques sont principalement utilisées dans le design Web. Le but d’un design de grille hiérarchique est d'organiser les éléments par ordre d'importance. Cela s'appelle une grille parce que les modules sont toujours mis en place à l'intérieur d'une grille manuscrite mesurée.
Une grille hiérarchique peut être mise en place librement, ou avec une grille modulaire comme guide. Avoir les connaissances nécessaires pour mettre en place une grille hiérarchique équilibrée sans grille modulaire directrice demande des années de pratique.
C'est pourquoi les designers créent des modèles de sites internet pour que les débutants y placent simplement leurs informations. Même les designers professionnels utilisent des modèles déjà créés pour gagner du temps et aller plus vite.
Dans leur transition vers les plateformes numériques, les journaux adoptent des grilles de colonnes symétriques habituelles ou des grilles hiérarchiques avec des colonnes à l'intérieur des zones spatiales.
Avant l'ère des ordinateurs, les grilles de mise en page étaient dessinées sur des maquettes avec un stylo bleu. Chaque ligne de la grille devait être mesurée et dessinée à la main avec des règles en T. Si les designers souhaitaient utiliser une grille standard, ils pouvaient utiliser des modèles de grille imprimés à l'encre bleue placés sous du papier calque épais.
Le designer a ensuite mis en place leur mise en page sur le dessus. Les images ont été dessinées sous forme de rectangles ou de carrés avec deux lignes entrecroisées d'un coin à l'autre. Les éditeurs de mise en page informatisés reflètent les pratiques de design de grille de mise en page d'il y a des années. L'encre bleue a été utilisée car elle n'apparaissait pas sur les films pré-imprimés.
La hiérarchie est une condition dans laquelle les éléments sont mis en place par ordre d'importance. Le mot vient du concept de royauté : le roi et la reine, puis le prince et la princesse, puis les ducs et ainsi de suite. Les designers Web utilisent la hiérarchie pour s'assurer que les informations les plus importantes sont vues en premier. Les appels à l'action et les avis spéciaux sont les premiers à se démarquer.
S'inscrire. C'est gratuit.Créez de superbes visuels pour votre site avec cet outil !
Cela dépend du type de site internet qui est conçu. Par exemple, un magazine ou un blog en ligne peut utiliser un design hiérarchique sur sa page d'accueil, présentant des articles de différentes tailles. Utilisez également des titres dans différentes tailles de police. Les sites e-commerce utilisent des pages de destination qui comportent un ou deux appels à l’action. Ici, ils doivent être les plus visibles.
Les grilles hiérarchiques sont les plus inaperçues de toutes les grilles. Leur but est d'attirer l'attention sur des éléments spécifiques et ils le font sans que le visiteur sache que cela a été fait exprès. Une bonne disposition hiérarchique peut vous permettre d'obtenir de meilleures conversions !
Il s'agit d'une grille de composition qui sépare n'importe quel espace en une grille de neuf espaces égaux. Ce système de grille peut être vertical ou horizontal, mais les neuf espaces doivent toujours avoir exactement la même taille. Les éléments du design sont positionnés de deux manières. Les éléments sont placés en fonction de l'endroit où les lignes se croisent en haut à gauche, en haut à droite, en bas à gauche puis en bas à droite. D'autres éléments importants, généralement le corps du texte, sont placés à l'intérieur des espaces créés par les lignes qui se croisent.
La règle des tiers est censée créer une composition agréable pour les visiteurs. En suivant la grille de la règle des tiers, vous vous assurez que votre design est équilibrée et proportionnelle. Il est utilisé dans le design graphique et aussi dans la photographie.
Le nombre d'or est aussi appelé la spirale d'or ou la moyenne d'or. C'est un phénomène de composition que l'on retrouve dans la nature et qui s'applique également au design. De nombreux logos célèbres ont été créés à l'aide du nombre d'or et il est également très couramment utilisé en photographie.
Le nombre d'or est étroitement lié à la suite de Fibonacci. Cette équation mathématique régit la mesure du rectangle d'or, une forme parfaitement équilibrée. L'utilisation du nombre d'or ou d'un groupe de rectangles d'or dans vos créations suivra l'ancienne composition de la nature.
Lorsque les designers utilisent des grilles, ils ne s'en tiennent pas toujours aux bases. Mélanger les grilles est un moyen courant de rendre le design de la mise en page plus créative et attrayante. Un document de plusieurs pages suivra les mêmes mesures de la grille du manuscrit mais aura des grilles différentes pour différentes parties des formats.
Regardez à quoi ressemble une mise en page de magazine lorsque les pages sont ouvertes et mises en place côte à côte. Remarquez les espaces qui ont la même proportion d'une page à l'autre et les autres qui sont différents sur chaque page. L'utilisation de grilles composites de manière créative rendra vos designs plus agréables. Cette maîtrise demande beaucoup de pratique !
Cet exemple de mise en page page par page d'un modèle de magazine entier de Graphic River est un excellent exemple de grille composite. Chaque page est différente mais chaque page conserve une grille de base. Vous pouvez le remarquer dans le pied de page et le numéro de page et le centrage des colonnes et des éléments.
Le choix de la meilleure grille dépendra du type de design sur lequel vous travaillez. Les designs avec beaucoup de texte nécessitent des grilles de mise en page. Les designs avec beaucoup de compositions abstraites de couleurs et de formes fonctionnent mieux avec la règle des tiers ou le juste milieu. Si vous engagez un designer, faites lui confiance!
Des modèles existent pour vous faire gagner (ainsi qu'à votre designer) un temps précieux de création de grille. Vous pouvez être sûr que la plupart des modèles de l'éditeur Visme ont été créés sur une grille. Ceux qui ne l'étaient pas ont été créés par des designers qui ont des grilles ancrées dans leur vision après des années de pratique. Vous pouvez activer l'option "aligner sur la grille" dans les options d'affichage de l'éditeur Visme.
Développez votre identité visuelle et votre image de marque, que vous soyez un graphiste expérimenté ou bien un débutant.
Testez Visme gratuitement
