Le minimalisme est une tendance qui ne mourra jamais. Peu importe combien de fois nous sommes impressionnés par des designs incroyablement complexes, il y aura toujours quelque chose de simple qui nous laissera capturé
Aujourd'hui, nous allons examiner certains des aspects clés du minimalisme dans la conception Web ainsi que quelques exemples de concepteurs qui ont bien compris.
Ce que ce n'est pas
C'est presque toujours une bonne idée d'explorer ce qui ne fait pas partie de la discussion. Examiner les contraires nous donne un contraste de points et aide à façonner la définition. Le minimalisme est fondamentalement un départ du superflu visuellement. Les palettes de couleurs richement diversifiées et les éléments complexes sont abandonnés au profit de simples couleurs unies et de lignes de base.
Considérez les deux exemples ci-dessous. Ces sites représentent une alternative claire à l’esprit minimaliste. Ils sont visuellement très occupés et peuvent prendre une minute à explorer avant de sentir que vous avez une bonne compréhension de ce qui se passe dans la page.
Est-ce que cela les rend mauvais? Absolument pas. Bien que de nombreux concepteurs privilégient clairement des styles spécifiques, l'attribution d'énoncés de valeur à une méthode donnée est aussi utile que d'affirmer que le bleu est meilleur que le vert ou que le gauche est meilleur que le droit; Il n’ya tout simplement aucune vérité dans ces déclarations et rien n’est gagné dans la discussion de telles possibilités.
Si vous êtes un designer professionnel, vous devriez pouvoir utiliser n'importe quel style pour plaire à la volonté et à la personnalité de votre client. La réponse à la question de savoir ce que le minimalisme n’est pas, c’est que ce n’est pas une meilleure approche en soi pour concevoir des sites Web. La clé consiste alors non plus à décider si vous préférez un style de conception occupé, minimaliste ou tout autre type de conception, mais à apprendre à mettre en œuvre chaque méthode efficacement. Examinons quelques domaines sur lesquels se concentrer lorsque vous créez un design minimaliste.
Typographie
Votre choix de typographie joue un rôle déterminant dans l'efficacité de votre design minimaliste. Choisissez des polices propres et simples avec un haut niveau de lisibilité. Les polices minces sont souvent utilisées pour exprimer souvent le minimalisme, mais ne vous limitez pas à cette idée, car une police épaisse est un excellent moyen de mettre en valeur un élément important tel qu'un titre.
De même, vous pouvez même obtenir un design minimaliste solide avec une police de script compliquée. Essayez de garder votre page et votre typographie aussi simple que possible tout en utilisant un script pour attirer l'attention sur un seul secteur de la page.
Ressources supplémentaires
40 polices gratuites de haute qualité et minimalistes
70 exemples de typographie minimaliste
Alignements de grille forts
Mon implémentation préférée du minimalisme est quand il est fait pour atteindre le but d'augmenter la convivialité. Une bonne conception Web minimaliste consiste souvent à réduire au minimum le nombre de sections et d’éléments séparés de la page, de sorte que la navigation dans le contenu est pratiquement dépourvue de toute courbe d’apprentissage ou de confusion visuelle.
Cela aboutit très souvent à des alignements facilement apparents basés sur une grille. Nos yeux sont très familiers avec ce modèle de contenu et n’ont généralement aucune difficulté à le trier rapidement. De plus, il y a quelque chose dans votre cerveau qui veut simplement que les articles soient alignés correctement et de manière prévisible. Il est agréable de voir une page avec un fort alignement vertical et horizontal. En revanche, il existe une sorte de dissonance visuelle et psychologique lorsque nous ne pouvons pas identifier immédiatement un motif clair dans la disposition des éléments sur une page.
Ressources supplémentaires
La grille CSS de 1 Ko
ZURB CSS Grid Builder
Contraste
Si vous avez un design minimaliste dans les travaux et qu'il semble juste qu'il manque quelque chose, les chances d'ajouter un peu de contraste vont améliorer le design de façon spectaculaire. Lorsqu'il est manipulé par une main expérimentée, le contraste est la clé de toute bonne conception (je défendrai cette déclaration générale jusqu'à la mort). Dans un design Web minimaliste, les pages sont tellement réduites qu'il n'y a guère d'autre choix que de faire apparaître un contraste habile.
Le contraste est un concept que nous comprenons tous de manière inhérente, mais vous en rendre compte peut considérablement améliorer vos conceptions. Découvrez la conception simple ci-dessous:
Il n’ya vraiment pas grand chose à faire ici en matière de couleurs et de jolies images. Cependant, la conception est très attrayante en raison de la forte utilisation de contraste. L'en-tête et la zone de contenu sont clairement séparés et immédiatement reconnaissables pour ce qu'ils sont (le pied de page utilise la même astuce). La taille de la copie sur la page et son audace varient pour attirer votre attention sur les parties du message que le concepteur a jugées importantes.
La page ci-dessus utilise des nuances de gris pour la différenciation, mais vous pouvez tout aussi bien utiliser différentes couleurs pour accomplir la même chose.
Rappelez-vous qu’il existe une énorme différence entre les couleurs contrastantes et les couleurs en conflit. Le fait que deux couleurs soient très différentes ne signifie pas que vos yeux percevront la différence comme étant agréable. Assurez-vous que votre théorie des couleurs est au point avant de prendre des décisions drastiques.
La principale chose à retenir avec le contraste est ce que dit le mieux l'auteur du design Robin Williams: "Ne soyez pas un abruti!". Ce qu'elle voulait dire par là, c'est qu'un peu de contraste ne va pas très loin. Si vous voulez faire quelque chose de plus grand pour qu'il se démarque, rendez-le beaucoup plus grand. Si vous voulez le rendre plus audacieux, rendez-le vraiment audacieux! Vous devriez être capable de dire en un instant si le contraste est là. Nous le voyons souvent lorsque le texte est en gras. Parfois, la différence entre le texte en gras et le texte normal est si faible que vous devez vraiment regarder pour voir la différence! Dans ce cas, le texte en gras ne sert à rien et doit simplement être identique au reste pour éviter toute confusion visuelle.
Espace blanc
Repensez aux exemples chargés au début de cet article. Ces concepteurs ont choisi de remplir presque chaque centimètre de l'écran avec quelque chose d'intéressant visuellement. Le minimalisme adopte à nouveau l'approche inverse.Il donne aux composants principaux de la page une marge de manœuvre suffisante pour les différencier.
Les espaces permettent au spectateur de se sentir à l'aise et moins claustrophobe. Cela vous permet également au concepteur d’avoir le contrôle sur l’affichage souhaité. Certains concepteurs insistent pour que les téléspectateurs lisent chaque page de gauche à droite en suivant un motif z. Ce n'est tout simplement pas vrai dans tous les cas. Remarquez comment le concepteur ci-dessus a utilisé des espaces et une image lumineuse pour attirer votre regard sur l'image de l'écran de l'ordinateur. Vos yeux commencent au centre même de l'image, pas en haut à gauche!
Ceci a tout à voir avec le contraste, comme mentionné ci-dessus, et le volume d'espace occupé par un objet donné par rapport aux espaces blancs qui l'entourent. Pour avoir une idée de la bonne quantité d’espace à utiliser lors de la mise en page initiale, je convertis souvent les objets que je placerai sur la page en formes extrêmement élémentaires dans Illustrator. Ensuite, je peux rapidement mélanger et redimensionner les objets sans être distrait par leur contenu. Faire la mise en page de cette façon vous oblige à réfléchir à l'équilibre de votre page avant même d'approcher des éléments esthétiques plus complexes.
Comme vous pouvez le constater, la présentation de Jolicloud est assez équilibrée et attrayante si on la regarde de cette manière. La seule chose qui me dérange, c'est que les liens de navigation ne s'alignent pas avec le côté droit du contenu. Je l'ai un peu exagéré dans la version simplifiée pour que cela soit plus facile à voir, mais c'est également le cas dans l'image d'origine. Nous voyons à nouveau l’avantage de réduire la page aux formes de base, car il devient immédiatement évident que les liens de navigation sont mal positionnés (ni alignés au centre ni à droite mais quelque part entre les deux).
Plus d'articles sur le minimalisme
Vous ne pouvez pas obtenir assez de minimalisme? Découvrez les excellents articles et sites ci-dessous:
- 21 ressources spécialement pour les amoureux du minimalisme: Vandelay Design
- Vitrine de dessins épurés et minimalistes: Smashing Magazine
- Minimalisme sur le Web: Inspiration de conception et thèmes WP: Didacticiel 9
- 20 beaux thèmes WordPress minimalistes: six révisions
- 25 magnifiques designs de site Web minimalistes: Vandelay Design
Conclusion
Cela termine notre discussion sur le minimalisme dans la conception Web. Faites-nous savoir ce que vous pensez de cette tendance dans les commentaires ci-dessous. Veillez également à inclure tous les liens vers vos sites préférés qui illustrent le minimalisme dans la conception Web.