Quand et comment utiliser le minimalisme dans la conception de sites Web

Éliminons d’abord une idée fausse sur le minimalisme. Ce n’est pas parce qu’il y a moins à voir que c’est plus facile. En fait, c’est tout le contraire. Moins vous en avez, plus vous avez besoin de temps pour vous assurer que chaque élément dont vous disposez est juste pour l’argent.

Après tout, si vous avez une interface encombrée, si quelque chose est aligné légèrement à gauche du centre, ou une police qui n’est pas tout à fait optimale pour ce que vous utilisez, elle ne sera probablement même pas remarquée parmi les autres détails.

Ce ne sera pas vrai si vous utilisez une conception Web minimaliste, cependant, car il n’y a rien pour votre erreur ou votre mauvais choix derrière lequel se cacher. Ils se démarqueront par leurs détails éclatants, comme une enseigne au néon sur une maison japonaise. Cela signifie que si vous essayez simplement de créer une page ensemble, le minimalisme n’est pas la voie à suivre. Le minimalisme est pour les perfectionnistes, les obsessionnels compulsifs, les concepteurs de sites Web concentrés sur le laser, jusqu’à trois heures du matin pour obtenir ce titre. Si ce n’est pas vous, alors ce n’est pas pour vous.

Si c’est alors lisez la suite, lisez la suite! Dans le terrier du lapin, nous allons.

Espace négatif

Commençons par regarder ce qu’un site Web minimaliste aura le plus – l’espace négatif, même si vous le connaissez peut-être comme «l’arrière-plan». Sauf, bien sûr, que dans le design minimaliste, ce n’est pas du tout « de retour ». Au lieu de cela, il est au premier plan, où il joue un rôle vital, en ce sens qu’il manipule le flux visuel de l’utilisateur.

La puissance de l’espace négatif est que plus vous en avez, plus tout ce que vous avez sur la page apparaîtra. C’est pourquoi les designers industriels utilisent souvent des mises en page minimalistes. De cette façon, leurs produits, au lieu de se fondre dans tout le reste, attireront l’attention qu’ils recherchent. Et comme c’est ce qu’ils essaient de vendre ou du moins d’afficher, cette approche est très attrayante pour eux et pour tous ceux qui ont des objets statiques à montrer, comme les décorateurs d’intérieur et les photographes.

L’espace négatif peut être un outil puissant pour créer une oasis de calme, ainsi que pour que les utilisateurs ne se sentent pas dépassés. C’est pourquoi les spas et centres de bien-être optent souvent pour ce type d’aménagement.

Notez qu’un espace négatif ne signifie pas qu’il n’y a rien. De toute évidence, l’espace doit être rempli de quelque chose et bien que le blanc soit un choix évident, il est loin d’être le seul. De plus, différentes couleurs ont des effets complètement différents sur les utilisateurs, alors assurez-vous de passer du temps à faire des recherches. Une chose que je voudrais souligner est que vous ne choisissez pas une couleur sursaturée. C’est une erreur fondamentale que commettent de nombreux concepteurs débutants. Le problème est que cela peut être assez pénible pour les utilisateurs, ce qui rend donc nul et non avenu l’un des gros avantages du minimalisme.

Photos

Si une seule couleur est trop bonne, il y a bien sûr la possibilité d’opter pour une photo quelconque. Bien sûr, si vous choisissez une image, assurez-vous qu’elle reste fidèle à l’esprit de minimalisme que vous recherchez. L’image ne doit pas être trop chargée.

Je veux dire cela de deux manières.

1. Évidemment, assurez-vous que la photo n’est pas trop encombrée d’objets ou de personnes, car cela irait à l’encontre de l’objectif de votre design minimaliste.
2. Cela ne suffit cependant pas, car l’implication d’un mouvement rapide ou d’un danger est tout aussi capable d’attirer le regard sur l’image et de l’éloigner de l’élément principal que vous essayez d’afficher. En fait, même l’affichage d’une émotion négative peut distraire les gens de ce sur quoi vous voulez vraiment qu’ils se concentrent.

Pour cette raison, lorsque vous naviguez sur des sites Web minimalistes, vous verrez beaucoup de photos avec des arrière-plans très neutres et statiques. Voici quelques excellents exemples.

Typographie

Vous pouvez supprimer beaucoup de choses de votre page minimaliste, comme une barre de menus, des boutons de médias sociaux et des publicités, mais une chose dont vous ne pouvez pas vous passer, ce sont les mots. Finalement, vous allez en avoir besoin. Mais comment les présentez-vous? Vous devez réfléchir très attentivement à la police que vous décidez d’utiliser (et si vous décidez de créer la vôtre), d’autant plus que différentes polices évoqueront différentes émotions et différents états d’esprit.

Par exemple, les polices avec empattement (c’est-à-dire celles où les morceaux ondulés dépassent en dessous et au-dessus de la ligne) sont lues plus facilement que les polices sans empattement et sont donc considérées comme plus faciles à comprendre. De même, comme les instructions sont écrites dans des polices plus propres et plus lisibles (comme Ariel par exemple) sont considérées comme plus compréhensibles que celles écrites dans des choix de polices plus déroutants et plus occupés, ce qui signifie que ces instructions sont considérées comme plus faciles à exécuter.

Mais bien sûr, la lisibilité n’est pas la seule chose à prendre en compte, vous devez également penser aux émotions que les polices provoquent. Oui, c’est vrai, différentes polices affectent les gens différemment, avec des types de police comme Times New Roman plus souvent associés à des émotions comme « drôle » et « en colère » qu’Ariel.

Je vous avais prévenu que le minimalisme n’était pas pour les âmes sensibles !

Une autre chose à considérer est les types de polices que vous utilisez, car vous n’êtes évidemment pas obligé d’utiliser la même police partout. Et comme il n’y a rien d’autre pour distraire votre public, si vous utilisez différents styles de police et typographies, votre utilisateur sera beaucoup plus susceptible de les remarquer.

Cela peut donc être une stratégie très efficace pour amener votre public à prêter attention à des domaines spécifiques. Par exemple, envisagez d’écrire le texte que vous voulez que les utilisateurs lisent d’abord dans des styles gras, avec des traits épais, tandis que les parties qui sont censées être remarquées plus tard sont écrites dans des polices plus neutres. L’œil de l’utilisateur sera immédiatement attiré par le texte plus gras tandis que l’autre texte sera consommé plus tard.

Contraste et positionnement

L’un des outils les plus puissants à la disposition d’un concepteur Web minimaliste est le contraste. Si vous souhaitez utiliser le contraste à son meilleur effet, vous devrez opter pour des arrière-plans de couleur claire – le blanc étant le choix prédominant, car cela permet le meilleur effet. C’est pourquoi les pages minimalistes utilisent souvent du noir sur fond blanc, car ces lignes nettes sont extrêmement attrayantes visuellement. Voici un bon exemple. De plus, la moindre touche de couleur, comme une touche de jaune, peut alors être très efficace. Pensez au manteau de la fille dans la Liste de Schindler.

Un concepteur peut créer un contrat avec de nombreux éléments différents, notamment la couleur, la forme, l’emplacement, l’échelle et la taille. S’il est utilisé correctement, il peut être extrêmement utile pour diriger votre utilisateur vers les parties auxquelles il doit prêter attention en premier (un peu comme je l’ai expliqué en termes de typographie ci-dessus, lorsque j’ai discuté des textes en gras par rapport aux textes plus neutres). Ce n’est pas facile, cependant, et pour l’utiliser au mieux, il est nécessaire d’avoir une compréhension de base de la façon dont les utilisateurs consomment les pages Internet.

Des études sur les mouvements oculaires nous ont donné un bon aperçu de l’endroit où les gens regardent en premier, en commençant généralement en haut à gauche, puis, selon qu’il y a beaucoup de texte ou non, en scannant la page avec un « F » ou un motif en ‘Z’ respectivement.

Comme votre page minimaliste ne sera pas lourde de texte, vous voudrez donc organiser les aspects les plus importants de votre page dans un modèle de type Z, avec les choses que vos utilisateurs devraient remarquer en premier (vous êtes vos options de menu) en prenant généralement une position plus vers le haut à gauche de votre page, tandis que les choses qui devraient être remarquées plus tard (par exemple vos revendications de droits d’auteur) descendent plus bas et plus à droite. De cette façon, vous rendrez la consommation de votre page plus fluide et plus naturelle.

Le bouton Hamburger et autres mises en page

La seule chose qu’il est important de retenir avec le design minimaliste est que ce n’est pas parce qu’il n’y a pas grand-chose à voir par page qu’il n’y a pas beaucoup de contenu dans l’ensemble ; la plupart du temps, toutes ces informations sont simplement cachées dans des sous-menus et des pages secondaires. Une manière populaire (bien que controversée) d’y parvenir consiste à utiliser ce que l’on appelle «le bouton hamburger », ou les trois lignes que vous voyez maintenant partout, comme en chrome en haut à droite ainsi que sur l’iPhone. Et oui, si vous avez bu quelques verres, cela ressemble un peu à un hamburger (je n’ai pas inventé le nom).

Personnellement, je ne suis pas un grand fan car cela va à l’encontre de mes instincts minimalistes. A quoi bon créer une page épurée si vous allez ensuite créer un menu encombré pour surfer sur le reste de votre site? Pour moi, une bien meilleure stratégie consiste à subdiviser votre bouton hamburger en plusieurs choix de menu qui sont évidents et faciles à comprendre et qui engageront vos lecteurs, mais c’est finalement à vous de décider.

Un facteur important à prendre en compte lorsque vous envisagez de créer plusieurs éléments de menu ou d’utiliser un seul bouton est l’âge de votre public. Plus ils sont âgés, moins ils seront familiers avec ce design et donc plus ils ne trouveront pas vos sous-menus, ce qui peut rendre votre page inutile. Alors, votre page est-elle principalement destinée aux millenials ? Allez-y et utilisez-le. Vous êtes au service des retraités? Il est probablement sage de réfléchir à nouveau.

Style visuel

Et puis il y a la façon dont votre page est censée être mise en page. Lorsque vous décidez de choisir un style minimaliste, vous devez choisir un style de mise en page, puis vous y tenir. En effet, votre public commencera immédiatement à faire des hypothèses inconscientes sur la façon dont votre page Web s’intègre et si vous violez ensuite ces hypothèses, vos utilisateurs auront l’impression que votre page est « désordonnée » et « non organisée ». C’est le glas du minimalisme (et de la plupart des autres pages également, à vrai dire).

Pour cette raison, vous devez sélectionner une grille, c’est-à-dire les colonnes dans lesquelles vous avez divisé votre page, et vous y tenir. Combien de colonnes voulez-vous ? Comment seront-ils espacés? Combien d’espace négatif restera-t-il entre eux ? Ce sont toutes des questions importantes auxquelles vous devez répondre avant même de commencer à mettre en page la page.

L’idée ici n’est pas que les images ne peuvent pas dépasser les limites de ces lignes de grille. Souvent, les images s’étendent sur l’intégralité de votre page. Dans ce cas, le texte sur l’image présentée ci-dessous, il serait disposé en vous les colonnes que vous avez sélectionnées. De même, si vous avez plusieurs images sur votre page, elles doivent suivre la grille que vous avez créée afin que votre page soit globalement propre et professionnelle.

Le minimalisme en vaut-il la peine ?

Cela dépend honnêtement de ce que vous essayez de faire (et bien sûr du sujet de votre page). Si vous essayez de réduire votre travail, alors comme déjà dit, le minimalisme n’est pas pour vous. Si, d’un autre côté, ce type de mise en page vous plaît instinctivement et correspond au type de produit que vous proposez, alors c’est la voie à suivre.

Le fait est que le minimalisme fait appel à un ensemble de compétences différent de celui de la conception standard, en ce sens que vous ne pouvez pas simplement utiliser des pièces ordinaires et les assembler pour créer une page. Si vous essayez de faire cela, vous allez vous retrouver avec quelque chose qui n’est pas visuellement attrayant ou tout ce qui est informatif. Le pire, en d’autres termes, des deux mondes.

Au lieu de cela, vous allez devoir passer un peu de temps à apprendre à subvertir vos instincts de base que vous avez récupérés des conceptions de pages précédentes que vous avez faites. Ensuite, vous devrez vous asseoir et déterminer ce qui est essentiel pour votre page.

Et vous allez devoir vous familiariser avec les contrats, les types de polices et les photos comme vous ne l’avez jamais fait auparavant. C’est presque comme si vous appreniez un nouveau langage de conception. Cela peut être difficile.

L’avantage d’apprendre une nouvelle langue, cependant, c’est que cela vous fait réaliser des choses sur votre langue d’origine que vous n’aviez jamais remarquées auparavant. Et cela est également vrai avec l’apprentissage de la conception Web minimaliste. Le simple fait d’essayer d’apprendre à concevoir de cette manière vous fera réaliser des choses sur le design que vous n’aviez jamais connues auparavant.

Et cela pourrait bien valoir la peine de transpirer et de travailler dur.

Oubliant pour l’instant que les pages minimalistes sont simplement belles, bien sûr.