• Aller au contenu
  • Aller à la barre latérale principale
  • Aller au pied de page

Lotin Corp. Portfolio

Portfolio du studio graphique

  • Portfolio
  • Blog
  • Ressources
    • Packs de services
    • E-books
    • Livres
    • Guides
  • A propos
  • Contact

Design pour founders : Théorie de la mise en pages

24 mai 2018 par Henri Lotin Laisser un commentaire

5 minutes

La mise en pages ou la composition est le processus de placement et d’organisation du contenu sur un plan de travail – il peut s’agir d’un site web, d’une interface d’application ou d’une page dans un journal. Une bonne composition est non seulement agréable à regarder mais transmet aussi efficacement le message du texte et des graphiques au public. Il s’agit sans doute de l’ensemble de principes le plus difficile à maîtriser en matière de design graphique, mais absolument essentiel pour les interfaces conviviales et les sites web lisibles.

Dans cet article, nous examinerons les principes les plus importants qui vous aideront à créer vos mises en pages.

Hiérarchie

Une hiérarchie visuelle aide les lecteurs à analyser un texte, à savoir où entrer et sortir et comment choisir parmi ses offres.

Nous sommes très influencés par la façon dont les choses sont organisées – que ce soit sur un site Web, un livre ou sur les tablettes des magasins. Les produits placés à la hauteur des yeux se vendent beaucoup plus que ceux placés sur l’étagère inférieure. Les journaux présentent des dernières nouvelles sur la première page en gros titres épais. Les nouvelles de moindre importance reçoivent moins d’importance visuelle et ne seront lues qu’après l’histoire principale.

A LIRE
Design pour founders : Les forces invisibles du design

Si nous n’appliquions pas les principes de la hiérarchie dans les communications, beaucoup d’informations importantes finiraient par être non transmises ou mal comprises. Un bon exemple de ceci sont les produits « en vedette » dans les boutiques en ligne. Les tests A/B prouvent que le fait de marquer l’un des produits dans la sélection comme « recommandé », « mis en vedette » ou « populaire » (et donc de l’augmenter hiérarchiquement parmi les autres options) augmente les conversions de chiffre d’affaires.

C’est pourquoi il est important de guider les yeux de nos clients avec la hiérarchie. Nous pouvons le faire avec l’échelle ou le contraste. Vous rappelez-vous quand nous avons parlé de contraste de couleur ? De même, le contraste des tailles de police et de l’épaisseur peut affecter la manière dont les éléments d’une page sont expérimentés.

Par règle, l’élément le plus différent du reste d’une composition se démarquera le plus.

Spotify donne un accent visuel supplémentaire sur son plan payant.

Si le titre est relativement grand par rapport au texte de l’article, nos yeux se poseront d’abord sur le titre.

Espace vierge

Une mise en pages peut être facilement ruinée si elle n’a pas assez d’espace pour « respirer ». Dans une certaine mesure, comprendre la hiérarchie et l’appliquer de la bonne manière vous aidera à éviter l’encombrement, mais il y a plus à savoir sur l’espacement.

A LIRE
Design pour founder : Pourquoi le design de logo est-il si cher ?

La première distinction à comprendre c’est entre les espaces vierges micro et macro. Nous avons parlé de hauteur de ligne (ou d’interlignage) dans le chapitre précédent – il s’agit d’un espace vierge. Les espaces macro séparent les éléments à plus grande échelle.

Smashing Magazine utilise une bonne quantité de macro espaces (à gauche) et de micro espaces (à droite).

L’espace vierge est un outil puissant pour introduire un effet visuel spécifique dans les designs.

Les designers utilisent les espaces vierges pour créer un sentiment de sophistication et d’élégance pour les marques haut de gamme. Couplé à une utilisation sensible de la typographie et de la photographie, les espaces généreux sont visibles sur les marchés du luxe.

Observez les deux bannières ci-dessus. Les éléments sur les deux bannières restent les mêmes. Pourtant, l’utilisation des espaces dans le premier dit « trash » et dans le second « premium » fait toute la différence.

Proximité, espacement et regroupement

La proximité entre les éléments donne un autre ensemble d’informations non écrites au lecteur.

Les éléments qui sont regroupés en étant proches les uns des autres (séparés par un espace vierge) et éloignés du reste (séparés par des espaces macro) créent une seule unité. Une unité aide les observateurs ou les lecteurs à trouver rapidement ce qu’ils recherchent.

A LIRE
Quel logiciel devrais-je utiliser pour la création de livre ?

Un exemple concret de ce principe sont les outils d’édition dans les interfaces :

Vous pourriez regrouper des éléments en les entourant simplement d’une ligne, mais ce serait un moyen de regroupement beaucoup moins efficace et qui pourrait ne pas correspondre à la marque. Même la science le dit :

La couleur, l’arrière-plan partagé et la co-localisation sont des indices de regroupement plus forts que des contours.

Le groupement peut également donner des informations supplémentaires sur les éléments (comme leur fonction).

Équilibre

La dernière partie de la théorie de la mise en pages est l’équilibre. Cet ensemble de principes est là où des mises en page entières se rejoignent et est généralement assez difficile à comprendre pour les designers débutants. L’utilisation correcte du principe d’équilibre assurera que les informations présentées sur une page sont professionnelles et esthétiques.

L’équilibre ne signifie pas nécessairement qu’une mise en pages est symétrique, même s’il est beaucoup plus difficile de créer des motifs asymétriques. Voici deux exemples équilibrés :

L’alignement centré n’est pas le seul moyen d’atteindre l’équilibre dans une mise en pages.

Notez que les différents éléments n’ont pas toujours exactement le même poids visuel. Un bloc de texte peut sembler beaucoup plus léger qu’un gros titre épais, ce qui peut rendre l’ensemble déséquilibré. Par exemple, des polices plus épaisses et moins de micro-espacement entre les lignes rendront le texte plus foncé et plus lourd, ce qui devra être compensé par un grand nombre d’espaces ou d’éléments également « lourds » dans la mise en pages.

A LIRE
Recherche sur les utilisateurs

La clé pour équilibrer vos créations est l’utilisation correcte des espaces.

Lotin Corp. c'est aussi un centre de formation professionnelle, Lotin Corp. Academy. Vous voulez apprendre à monter des magazines et créer des logos ? Cela ne vous prendra que 03 mois !

Partager ou imprimer :

  • Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur LinkedIn(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur WhatsApp(ouvre dans une nouvelle fenêtre)
  • Cliquer pour imprimer(ouvre dans une nouvelle fenêtre)

Articles similaires

Catégorie(s) : Design pour founders Tags : créer de beaux designs, équilibre, espace vierge, espacement, fondamentaux, hiérarchie, mise en pages, proximité, regroupement, techniques

À propos de Henri Lotin

UX/UI Designer autodidacte vivant à Douala, au Cameroun, je suis le directeur de création, le responsable de la stratégie et du marketing digital, mais également le co-fondateur de Lotin Corp. (c'est beaucoup, je sais !?)

Je suis depuis Octobre 2014, le fondateur de Lotin Corp. Academy, où j’enseigne le marketing digital, l’introduction à la communication visuelle, le design web et interactif et les logiciels de PAO.

Article précédent « Archétypes de marque : donnez de la personnalité à vos marques
Prochain article Archétypes de marque : l’innocent [Infographie] »

Interactions du lecteur

Laisser un commentaire Annuler la réponse.

Barre latérale 1

Panier

Nombre d’articles dans le panier : 0

  • Votre panier est vide.
  • Total : 0,00€
  • Commande

Lotin Corp.

Nous sommes spécialisés en stratégie de marque, marketing digital ; design et développement web (WordPress), et en design d'identité visuelle.

A travers notre blog, nous souhaitons partager nos recherches et nos découvertes dans les domaines du design graphique, du design web, du marketing digital et de l'entrepreneuriat.

En savoir plus

Projet récent

Moi Entrepreneur Magazine

Il y a pratiquement un mois, nous avons été impressionnés par le contenu de Moi entrepreneur n°1, et avons ainsi décidé de contacter le promoteur de … [Découvrir]

Plus de projets

E-book gratuit

Finis les jours où vous avez seulement besoin de compétences Photoshop pour réussir en tant que designer. D'autres compétences, comme le marketing, sont importantes.

Téléchargez gratuitement

Tous les e-books gratuits

Nos articles récents

  • Design de proposition de valeur : Carte de valeur
  • Design de proposition de valeur : Profil client – Exercice et bonnes pratiques
  • Design de proposition de valeur : Profil client – Exemple
  • Design de proposition de valeur : Profil client
  • Le Value Proposition Design Canvas
Mes Tweets

Footer

Nos traductions pour Tuts+

En défenseur du design

Il est très souvent rare de partager les mêmes point de vue sur le design avec les non-designers, et particulièrement … [Lire la suite...] à proposEn défenseur du design

Plus d'articles de cette catégorie

Catégories

  • 15 Minutes avec
  • Chronique
  • Clients
  • Design graphique
  • Design pour founders
  • Design web
  • Etudes de cas
  • Freelance
  • Guide de l’indépendant
  • Guides
  • Livres
  • Marketing Digital
  • Méthode hypercréative
  • Nouvelles
  • Persuasion en business
  • Profession
  • Realisations
  • Stratégie
  • Traductions
  • UI Design
  • UX Design
  • Vidéo
  • WordPress

Pages & articles à la une

  • Stop à la propagation de l'erreur : la meute de loup sur Facebook et le leadership
  • Création de sites web et identités visuelles à Douala, Cameroun
  • Le briefing – partie 2 : Le briefing de création (copy-stratégie)
  • La différence entre le Marketing Opérationnel et le Marketing Direct
  • C'est quoi, le design web ?

Contactez-nous

403, Rue Drouot, Akwa
Douala
+237673418810
contact@lotincorp.biz
Ouvert du Lundi au Samedi de 09h à 19h

© Copyright 2010 - 2019 Lotin Corp. All Rights Reserved.

Powered by WordPress