Design minimaliste : à faire et à ne pas faire

Voici le truc avec le design minimaliste : quand vous le faites bien, c'est absolument magnifique. Quand vous le faites mal, c'est hideux pour exactement les mêmes raisons. Bien faire les choses est un exercice d'équilibre, vraiment, d'une poignée d'éléments de conception.

Comme beaucoup d'œuvres d'art et de design, il faut un œil assez perçant pour faire la différence entre quelque chose qui fonctionnera et quelque chose qui ne fonctionnera pas .

Et ce sont ces choses qui ne fonctionnent tout simplement pas que vous voulez éviter dans votre conception de sites Web. Si vous travaillez vers le minimalisme et que vous voulez que votre site suscite un ooh des visiteurs au lieu d'un eww , je vous ai couvert tout ce que vous devriez faire (et tout ce que vous ne devriez pas faire) .

À faire : utilisez la couleur !

Les gens ont tendance à penser que le design minimaliste est monochrome, ou pire encore, en noir et blanc et/ou en niveaux de gris.

Non non Non. Non.

Le design minimaliste ne consiste pas, presque paradoxalement, à avoir très peu ; il s'agit de maximiser très peu. Votre intention devrait être de tirer le meilleur parti du peu que vous avez.

Cela signifie qu'en ce qui concerne les couleurs, vous devriez… utiliser la couleur. Jetez un œil à cet exemple d'Epoch Design :

L'utilisation de la couleur ici est minime, mais le concepteur a maximisé son utilisation pour s'assurer que vous la voyiez.

Et ici, de Boorbool :

L'arrière-plan bicolore est frappant et mémorable, mais ne vous gifle pas.

À ne pas faire : utilisez TOUTES les couleurs !

De l'autre côté de ces designs délicieux, les minimalistes nourrissent de nombreuses impulsions sombres pour utiliser toutes les couleurs, ne remplaçant que la propreté de leurs designs par à peu près toutes les nuances du spectre.

D'accord, alors ce n'est peut-être pas si mal, mais l'abus de couleur avec d'autres esthétiques minimalistes peut être incroyablement distrayant et voué à l'échec.

Comme Rogue + Co. Ils essaient d'utiliser les lignes épurées du minimalisme et les tailles de cartes asymétriques pour attirer l'attention de l'utilisateur. Mais ils ont ajouté des couleurs superflues à tout, puis l'ont animé sans raison. Il éloigne l'utilisateur du contenu, plutôt que de l'attirer.

Le contraire du design minimaliste, c'est-à-dire.

Et puis il y a Bolden, qui comprend parfaitement le minimalisme. Sauf pour la couleur. Trop de couleurs et essayer d'être trop intelligent les ont obligés à ajouter une animation superflue. Vous devez passer la souris sur les coins de l'écran pour voir le texte.

Ce n'est tout simplement pas minime, n'est-ce pas ?

À faire : utiliser l'animation

Vous voyez, ces animations ci-dessus… elles n'ont pas d'importance. Ils n'ajoutent rien au site Web. Mais les graphiques de cinéma comme Rogue & Co peuvent fonctionner ; ils ont juste besoin d'améliorer le site, pas de l'encombrer.

Pour la plupart, les micro-interactions fonctionneront : un survol sur un bouton ou un accent mis en évidence sur une carte. Même le chargement, le défilement ou les animations en arrière-plan qui ne sont pas gênantes peuvent améliorer le design minimaliste que vous recherchez.

Le plus gros obstacle est de s'assurer que l'animation correspond à votre conception. Ne vous contentez pas de les ajouter là où ils n'appartiennent pas. Voyez comment le pied de page se développant sur notre page Divi attire votre attention lorsque vous faites défiler, mais n'enlève rien à la façon dont vous utilisez la page.

Sans surprise, Divi a une fonctionnalité intégrée pour accomplir ce genre de micro-interactions.

À faire : utiliser des espaces

Comme les touches de couleur, les espaces blancs (ou espaces négatifs) peuvent être l'une des armes les plus utiles de votre arsenal. Par exemple, le médium absurdement populaire est presque entièrement composé d'espaces blancs, et cela fonctionne.

Et voyez comment la seule couleur est utilisée pour attirer votre attention sur les boutons et les liens dont vous avez absolument besoin ?

Il y a un équilibre à utiliser efficacement les espaces blancs. Vous voulez équilibrer la lisibilité et l'utilité avec l'attrait esthétique. Lorsqu'ils sont utilisés efficacement, les espaces blancs sont incroyablement puissants pour rendre votre design minimaliste mémorable. toux Google toux toux

À ne pas faire : utiliser UNIQUEMENT des espaces blancs

À l'opposé du spectre, l'utilisation excessive d'espaces blancs rend l'utilisation de votre site presque inutilisable pour les visiteurs. Vous voyez, l'utilisation des espaces blancs par Google met en évidence la façon dont ils souhaitent que vous utilisiez le site : tapez quelque chose dans la case.

Si, toutefois, votre utilisation des espaces blancs ne dirige pas l'utilisateur vers l'objectif de votre site ou ne lui permet pas d'avoir une meilleure expérience sur votre site, vous aurez peut-être besoin d'éléments plus explicites pour les diriger.

Par exemple, Thru You Too est un projet génial. Mais il m'a fallu beaucoup de temps pour comprendre comment l'utiliser (vous devez survoler le gros texte au centre, ce que je n'ai pas fait car j'étais attiré par le coin supérieur droit). Bien que la navigation soit simple lorsque vous l'obtenez, l'espace blanc ne m'y a pas dirigé.

À faire : utilisez des polices appropriées et impressionnantes

Une chose sur laquelle repose à peu près tout le design minimaliste est l'utilisation efficace des polices. Choisir la bonne police de caractères pour votre site est la façon dont vous montrez votre personnalité et celle de votre produit ou de votre entreprise.

Vous voulez donc une police qui dégage votre identité de marque dès que les gens la voient. Des lignes épurées avec un lettrage élégant. Bords rugueux et peut-être quelques coups de pinceau. Élégant et classe. Quoi que vous recherchiez, assurez-vous de choisir une police qui correspond.

Regardez Squarespace par exemple. Vous savez exactement à quoi vous attendre de leur entreprise en regardant simplement le formulaire d'inscription et les polices utilisées. Propre, simple et clair. Il respire l'élégance qu'ils annoncent, principalement à travers la police qu'ils ont choisie. (Parce que c'est vraiment le seul élément de conception que vous pouvez voir ici.)

Et les gens de Folks recherchent une sensation folklorique, alors ils ont définitivement trouvé une police qui leur va bien. Leur public est évident, tout comme leur point de vue sur leurs produits. Et ce n'est pas explicitement indiqué.

N'utilisez pas de polices impressionnantes de manière inappropriée

À l'opposé de ce spectre, choisir une police trop audacieuse peut entraîner le mauvais type de coup de poing. Tout le monde veut que son site soit unique et se démarque. Mais vous ne voulez pas qu'il se démarque pour de mauvaises raisons.

Imaginez que vous cherchiez une ligne de crise pour aider un membre de votre famille dans le besoin et que vous trouviez un site qui ressemblait à ceci :

Qu'en est-il d'un médecin qui voulait s'assurer que vous saviez qu'elle était le meilleur choix pour vous sauver la vie ?

Ou si vous cherchiez un concepteur de sites Web fantastique et contemporain et que tout ce que vous avez vu était ceci :

D'accord, alors je n'ai pas pu résister à une fouille Comic Sans. Me poursuivre en justice. Mais vous comprenez ce que je veux dire : le choix de la police est important. Surtout lorsque vous utilisez un design minimaliste, car le choix de la police de caractères peut constituer la partie la plus importante du design.

Allez de l'avant et minimisez !

Et minify, aussi, mais c'est un article totalement différent. #iamadelight

Blague à part, rappelez-vous que la couleur, les polices de caractères et l'espace négatif sont en quelque sorte des éléments fondamentaux de la conception. Il suffit de pratiquer la discrétion pour les utiliser correctement. Tant que vous faites ce que je dis, pas ce que je ne fais pas en matière de design minimaliste, vous ne devriez pas avoir à vous soucier de quoi que ce soit.

Quelles sont vos lignes directrices lorsque vous concevez des sites minimalistes ?

Vignette de l'article par Boo-Tique / shutterstock.com