Avant de maîtriser le design, vous devez d'abord maîtriser les fondamentaux.
La semaine dernière, l'un de mes lecteurs m'a posé une question : Comment devenir un meilleur concepteur visuel ?
Alors que je réfléchissais à la manière de répondre à cette question, mon esprit s'est penché sur mon expérience d'apprentissage du chinois mandarin. Récemment, j'ai décidé de m'apprendre le mandarin. Quand il s'agit d'apprendre une nouvelle langue, il faut d'abord commencer par les fondamentaux. Les noms, les pronoms et les verbes constituent la base pour transmettre des idées plus complexes.
Le langage est un moyen par lequel les gens se communiquent des concepts. Le design visuel est un langage visuel. Et apprendre la conception visuelle n'est pas différent de l'apprentissage d'une nouvelle langue.
Les bons designs visuels ne sont pas nés. Elles sont faites. La clé pour devenir un meilleur designer visuel est la rigueur. Vous ne vous améliorerez en tant que concepteur visuel que si vous faites un effort conscient.
Voici quelques principes fondamentaux que vous devez maîtriser pour pouvoir faire passer votre conception visuelle au niveau supérieur.
Fondamental n°1 : revenir à l'essentiel avec le type
Vous pouvez en dire beaucoup sur un designer en regardant sa typographie. C'est parce que le type est une base fondamentale pour la conception.
Vous pouvez créer des conceptions entières avec juste du type. Vous pouvez également baser les conceptions sur le type, en prenant des files d'attente subtiles à partir des polices que vous choisissez. Afin d'améliorer la typographie de vos créations, commencez d'abord par apprendre les bases.
Développer un vocabulaire pour décrire le type. Découvrez ce que signifient des termes tels que suivi, crénage et interligne. L'article Un glossaire magnifiquement illustré de termes typographiques à connaître est une excellente ressource visuelle pour apprendre ces termes.
Ensuite, si vous voulez une compréhension globale de la façon d'appliquer la typographie au Web, lisez Typographie Web : les éléments du style typographique appliqués au Web .
L'association de polices peut faire ou défaire un design
Enfin, apprenez à associer des polices. FontWolf et FontPair sont une excellente ressource pour cela . Pouvoir associer des polices changera radicalement la dynamique de votre conception.
Pour une exploration plus approfondie de la typographie, vous pouvez lire mon article : La typographie peut faire votre design… Ou le casser.
Fondamental #2 : Utiliser l'espace pour créer l'équilibre
L'espacement permet d'établir un mouvement vertical et horizontal dans vos conceptions. C'est essentiel pour créer une hiérarchie visuelle et former une association entre les éléments.
Créer un équilibre et une harmonie visuelle
Vous pouvez toujours consulter des sites comme Behance et Dribbble pour vous inspirer sur la façon d'espacer les éléments. Mais il est important de développer votre propre intuition pour utiliser l'espace pour créer un équilibre et une harmonie visuelle.
Lorsque vous étudiez la typographie, vous avez peut-être remarqué l'importance de l'espacement dans les caractères. Ajuster le crénage et l'interlignage des polices est un excellent exercice pour développer votre œil pour l'espacement. Pour cette raison, je vous recommande d'essayer KernType , un jeu où vous comparez votre solution de crénage à la solution d'un typographe.
Simplification de l'affiche primée par Craig Welsh
Un autre exercice qui vous aidera à développer votre œil est le suivant : prenez un dessin existant, dessinez un axe x et y, simplifiez le dessin en formes de base, analysez comment le dessin est équilibré, puis réorganisez les éléments. Portez une attention particulière à la façon dont l'espace négatif affecte l'équilibre des éléments.
Fondamental n°3 : Utiliser la taille pour établir une hiérarchie visuelle
Lorsqu'il s'agit de créer une hiérarchie visuelle, le dimensionnement est sans égal. En utilisant la taille pour transmettre les relations visuelles entre les éléments, vous pouvez établir un flux.
Le dimensionnement est l'une des raisons pour lesquelles les grilles sont utiles
Le dimensionnement est l'une des raisons pour lesquelles les grilles sont utiles. Vous pouvez utiliser des grilles pour vous aider à dimensionner les éléments en utilisant des ratios pour transmettre l'importance.
Une fois que vous avez déterminé la taille d'un élément, gardez-la la même dans toutes les instances de celui-ci. Dans la conception, la cohérence est reine.
Utiliser la taille pour établir une hiérarchie visuelle
Voici un exercice qui vous aidera à développer votre œil pour le dimensionnement:
La clé est de demander des commentaires.
Esquissez ou wireframe une page de destination. Ensuite, demandez à un ami de regarder votre conception. Faites-leur encercler les éléments qui ressortent le plus. Ensuite, demandez-leur de numéroter les éléments encerclés en fonction du poids visuel. Les résultats sont-ils ceux que vous attendiez ?
Lorsque vous faites cet exercice, gardez à l'esprit les questions suivantes :
Quel est l'objectif de conversion de la page de destination ? Comment optimiser pour atteindre votre objectif ?
Quelle est la relation entre les différents éléments ? Quels éléments voulez-vous souligner ?
Votre mise en page guide-t-elle avec succès l'œil d'un utilisateur à travers la page ?
Fondamental n°4 : Utiliser la couleur pour transmettre du sens
La couleur joue de nombreux rôles. Il transmet du sens, crée une résonance émotionnelle et apporte une unité aux conceptions.
La couleur aide à donner du sens à la conception
Pour une plongée profonde dans la couleur, vous pouvez lire mon article Concevoir en couleur . Voici quelques points clés de l'article.
Identifiez le but de votre conception avant de choisir une palette de couleurs. Un bon design aligne sa palette de couleurs sur son objectif.
Identifiez votre public. Les gens perçoivent les couleurs différemment. Les couleurs ont des effets différents sur les gens en fonction de leurs préférences personnelles, de leur éducation culturelle et de leurs expériences.
Lors du choix d'une palette de couleurs, la simplicité est la clé. Choisissez une couleur de fond neutre. Choisissez ensuite une couleur d'accent primaire et secondaire. Enfin, en fonction de vos autres couleurs, choisissez une couleur d'erreur et de réussite pour vos différents états d'interface utilisateur.
Une fois que vous avez une bonne compréhension des bases de la théorie des couleurs, la couleur se résume à l'expérimentation et à l'itération. Essayez activement de sortir de votre zone de confort et essayez de nouvelles palettes de couleurs.
Les films et les émissions sont une excellente source d'inspiration pour les couleurs.
Voici un exercice qui vous aidera à développer votre œil pour la couleur.
Passez du temps à compiler des palettes de couleurs pour les choses qui vous entourent comme des photographies, des magazines et vos émissions préférées. Ensuite, prenez un design existant et appliquez-lui de nouvelles palettes de couleurs.
Prenez note de la façon dont cela change l'ambiance et le ton du design. Cela change-t-il aussi le sens ?
Traitez votre travail comme un métier, dans la mesure où il y a toujours quelque chose que vous pouvez améliorer. Comptez sur vous-même pour être la motivation pour devenir un meilleur designer.
Quelles sont vos stratégies pour vous améliorer en tant que designer ? Laissez-moi une note ou envoyez-moi un tweet sur Twitter.
Si vous avez apprécié cet article, vous pourriez également profiter de CSS en Javascript avec Aphrodite, une bibliothèque de Khan Academy .
CSS en Javascript : l'avenir du style basé sur les composants Cette semaine, je souhaite vous présenter le concept de CSS en Javascript avec Aphrodite par Khan Academy. Aphrodite laisse… medium.com
Vous pouvez me retrouver sur Medium où je publie chaque semaine. Ou vous pouvez me suivre sur Twitter , où je poste des divagations absurdes sur la conception, le développement front-end et la réalité virtuelle.
PS Si vous avez apprécié cet article, cela signifierait beaucoup si vous cliquez sur le ? et partager avec des amis.
Write by: Jonathan Z Blanc