Aujourd'hui, nous allons examiner l'un des éléments de conception les plus simples possibles: une ligne. Nous allons apprendre à manier correctement les lignes et ce qu’il faut éviter lors de leur mise en œuvre.
L'ajout de quelques lignes simples à un dessin peut apporter une structure et une touche graphique à un dessin par ailleurs ennuyeux. C'est un truc simple qui, utilisé efficacement, a pour effet d'ajouter une couche de finition à votre dessin.
# 1: Utilisez un soulignement
Nous allons commencer par l’astuce la plus élémentaire du manuel de la typographie: le soulignement. Un titre souligné semble plus lourd et offre une séparation plus nette entre la tête et le corps. Gardez à l'esprit que ce sont des attributs nécessairement positifs ou négatifs, mais sont plus neutres; vous devez décider quand leur présence est bonne ou mauvaise en fonction du regard que vous allez avoir.
Notez que la ligne ne sert pas seulement de séparateur entre les deux éléments, mais qu’elle contribue également à définir la largeur de la colonne.
Le soulignement visuel créé lorsque vous avez des lettres contenant un descendeur qui se bloque dans la ligne est une chose qui me dérange avec le soulignement. Il n'y a pas de règle officielle contre cela, mais je trouve juste que c'est un peu trop distrayant et guide l'intérêt du spectateur vers les mauvais endroits.
Alors, comment traitons-nous ce problème? La solution la plus simple est évidemment d’éviter d’utiliser des descendeurs et des soulignements en même temps, mais c’est un peu trop contraignant à mon goût. Au lieu de cela, ce que je fais habituellement est de créer le soulignement manuellement en traçant une ligne (au lieu de simplement cliquer sur le bouton soulignement), puis de masquer les parties de la ligne qui se plantent dans mes descendeurs.
Comme vous pouvez le constater dans l'exemple ci-dessus, cela est beaucoup plus agréable que l'exemple précédent et contient beaucoup moins de complexité visuelle. Si vous n'aimez pas ce petit bout de ligne bloqué après le dernier? G? vous pouvez simplement arrêter le soulignement au dernier descendant (applicable uniquement lorsque la dernière lettre contient un descendant).
Étendre
Gardez à l'esprit qu'un soulignement ne doit pas nécessairement correspondre à la largeur du texte. Parfois, il est intéressant de prolonger le soulignement sur toute la largeur de la page, voire même de la souligner.
Si vous prolongez le soulignement, réfléchissez à des façons de vous amuser avec les lignes dans l’espace négatif. Vous pouvez lui donner un peu de turbulence, le plier dans n'importe quelle forme!
Le concepteur ci-dessous a terminé le soulignement prolongé par un point. Cela permet de se sentir connecté à tout contenu à droite et ajoute un intérêt intéressant mais subtil à la ligne.
# 2: Casser la ligne
Ne tombez pas dans le piège de toujours tracer une ligne continue. Vous pouvez utiliser des tirets, des points, des triangles, des étoiles et tout ce que vous pouvez imaginer pour créer la ligne de votre choix, mais le même objectif est atteint.
Découvrez comment ce designer a utilisé un lin en pointillé aligné sur le centre d'un titre pour créer une section claire. Bien que le texte soit centré ici, le motif semble justifié, car les lignes prolongent fonctionnellement les limites visuelles du titre sur les bords gauche et droit de la colonne.
# 3: Flan le type
Si vous optez pour un thème formel, répéter le soulignement en haut de votre titre peut créer une impression de style ancien. Je pense toujours à un en-tête de journal quand je vois ce style.
Si vous souhaitez réduire le sentiment de formalité, décalez les lignes de différentes manières afin qu'elles aient l'air moins structurées. C'est aussi un effet pratique pour créer une sensation de mouvement sur une page statique.
# 4: aller verticalement
Jusqu'ici, nous nous sommes concentrés sur les lignes horizontales, mais les lignes verticales peuvent être utilisées pour insérer un intérêt graphique vraiment créatif dans un dessin. Le concepteur ci-dessous a exagéré les lignes verticales de la police de caractères sans aucune raison autre que le fait que celle-ci ait l'air plutôt cool et crée un joli thème cohérent sur lequel s'appuyer sur le reste de la page.
De toute évidence, une utilisation un peu plus traditionnelle d’une ligne verticale consisterait simplement à séparer deux colonnes de contenu. Cela peut être utilisé en conjonction avec le type ou les images et vous permet de laisser beaucoup d'espace entre vos colonnes sans créer de faille gênante.
# 5: Allez en diagonale
Si vous voulez vraiment que votre page paraisse folle, inclinez votre contenu en diagonale. Cela donne généralement l'impression d'un design jeune et excitant qui enfreint les règles et repousse les limites.
L'inclinaison de votre contenu peut sembler un peu aléatoire, mais le fait de prolonger les lignes de l'illustration lui donne un aspect intentionnel et renforce réellement l'effet. Ne soyez pas timide, lancez réellement la rotation et étirez ces lignes assez loin pour faire une déclaration.
L'effet diagonal est particulièrement intéressant pour les designs d'inspiration rétro comme celui ci-dessus.
# 6: Go Nuts
C'est là que je devrais vous dire de vous calmer. Une ou deux lignes simples peuvent ajouter beaucoup à votre conception et aller trop loin avec cet effet peut tuer votre attrait esthétique. Cependant, dans les bonnes mains, une combinaison des conseils ci-dessus peut donner un produit final vraiment tranchant.
La conception ci-dessous de David Fooks utilise une tonne de travail au trait. Il combine des lignes en pointillés, des lignes continues, des lignes droites, des lignes courbes, des bordures et même des lignes avec un diamant au bout, le tout dans cette petite zone. L'effet global n'est pas encombré ou laid, mais est plutôt élégant et beau!
Mon conseil est simplement de faire preuve de prudence. Comme tout élément de design, les lignes peuvent être utilisées pour le bien ou pour le mal. Faites preuve de retenue lorsque cela est nécessaire et examinez toujours votre conception avec et sans les lignes ajoutées pour vous assurer que vous ajoutez réellement de la valeur à la conception.
Inspiration
Jetez un coup d'œil à ces utilisations remarquables des dessins au trait dans la conception Web pour obtenir des idées sur la façon d'intégrer certaines de celles-ci dans votre conception suivante.
CarbonAds
Pour le compte rendu
Evan Eckard
Cool et le guide
Le voleur d'ananas
DesignSwap
Caravane
Conclusion
Le but de cette discussion était de vous encourager à jeter un second regard sur notre ancienne amie la ligne et à examiner avec soin où vous pouvez utiliser des lignes pour renforcer vos conceptions, que ce soit esthétiquement, structurellement ou les deux.
Si votre design utilise beaucoup de lignes simples, laissez un commentaire ci-dessous avec un lien afin que nous puissions le vérifier! Dites-nous également ce que vous pensez des exemples ci-dessus.