Conception Web brutaliste, conception Web minimaliste et l'avenir du Web UX

Publié: 2022-03-11

Les sites Web deviennent-ils de plus en plus chaotiques, encombrés et grossiers ? Les règles d'un bon design sont-elles enfreintes ? Le web devient-il moche ? Est-ce une nouvelle tendance ?

Si vous êtes comme la plupart des designers et que vous portez une attention particulière à ce qui se passe, vous avez entendu le mot brutalisme être lancé depuis un moment. Les sites Web brutalistes s'éloignent des interfaces conviviales qui ont longtemps été la meilleure pratique de l'industrie et se concentrent plutôt sur des sites HTML imparfaits et codés à la main. Il semble que les concepteurs suppriment les règles de l'UX telles que nous les connaissons, laissant tout se sentir un peu chaotique.

Les principes du design épuré et contemporain sont si courants que nous les considérons à peine comme un choix stylistique. Une « bonne » conception de sites Web signifie généralement celle qui obéit aux règles du minimalisme. Des interfaces propres, simples et épurées, mais cela n'a pas toujours été le cas. Remontons l'horloge quelques décennies en arrière.

La naissance du Web

La conception Web a parcouru un long chemin depuis 1991, date à laquelle le tout premier site Web a été publié. La révolution Internet a commencé avec ses premiers sites Web exclusivement textuels utilisant la première génération de HTML.

Premier site du World Wide Web en 1991
Le tout premier « design » de site Web mis en ligne le 6 août 1991.

Puis vint Flash avec tous ces sites animés fous dont tout le monde se souvient sûrement. Le développement de CSS (Cascading Style Sheets) est arrivé, offrant aux concepteurs Web encore plus de contrôle sur les améliorations telles que la couleur d'arrière-plan, la taille du texte et les styles de texte dans le code. JavaScript nous a donné des menus déroulants, une navigation avancée et des formulaires Web avec vérification des erreurs.

Au début, personne ne savait ce que signifiait vraiment la « conception Web », et les pionniers du Web ont établi des modèles de conception par essais et erreurs. La première ère de la conception Web utilisait des mises en page qui accordaient peu d'attention à la sémantique formelle et à l'accessibilité, optant plutôt pour l'esthétique plutôt que pour la structure.

Site Web de Google depuis 1998
Site Web de Google, 1998.

Afin de créer et de structurer leurs conceptions, les concepteurs se sont fortement appuyés sur des éléments HTML tels que des tableaux, des tableaux imbriqués et des fichiers d'espacement invisibles de 1 pixel, ce qui leur a permis de créer des mises en page à plusieurs colonnes plus complexes. Cela a créé des interfaces assez ternes.

Site Web CNN.com de 2000
Site Web de CNN, 2000.


Site Web d'Enron de 2004
Site Web d'Enron, 2004.

Au milieu des années 2000, les sites Web sont nés avec une réflexion plus approfondie derrière leur structure. La navigation était en haut de votre navigateur et les catégories étaient placées sur une barre de gauche. Les pages Web étaient courtes et étroites, avec un contenu réparti sur de nombreuses pages afin de ne pas forcer les utilisateurs à faire défiler. Les concepteurs ont appris ce qui fonctionnait et ont commencé à créer de meilleurs sites, en établissant des normes et des meilleures pratiques en cours de route.

Avec de plus en plus d'options de mise en page, un mélange d'interfaces utilisateur bruyantes remplies d'images et de texte partout. Certains designers disciplinés ont cependant toujours opté pour le minimalisme.

L'esthétique minimaliste

Les tendances du design vont et viennent ; cependant, le minimalisme est un langage de conception qui a été présent à travers le temps. C'est une philosophie de conception qui se concentre sur la simplification de la forme, obtenue en utilisant les éléments les plus simples et les plus essentiels d'une conception.

Le minimalisme n'est pas exclusif à la conception Web. Pensez à tous les éléments autour de vous qui englobent cet idéal de conception ; il est facile de connecter des designs minimalistes avec Nest, Apple, Herman Miller et bien d'autres qui ont inspiré de nombreux designers minimalistes.

Appareils domestiques Nest au design minimaliste
Nest affiche une conception de produit sobre et simple.


Herman Miller Eames Rosewood 670/671 Lounge Chair et ottoman design minimaliste
La chaise longue intemporelle et irremplaçable de Eames, un classique du bureau.


MacBook Pro d'Apple au design minimaliste
Un style épuré et minimaliste est la carte de visite d'Apple.

Qu'est-ce qui fait que le design d'Herman Miller est toujours aussi génial aujourd'hui ? Ce sont tout simplement des objets bien conçus au look intemporel. Ses créations s'intègrent très bien dans les maisons et les intérieurs contemporains - elles se sentent toujours fraîches et modernes aujourd'hui. Beaucoup de ses pièces sont conçues avec un look minimaliste et ne peuvent pas vraiment être liées à une mode spécifique. Ils résistent encore à l'épreuve du temps.

Les créations minimalistes de l'un des graphistes les plus renommés de son époque, Josef Muller-Brockmann, ressemblent beaucoup à celles d'Herman Miller : intemporelles . Muller-Brockmann a embrassé et maîtrisé le minimalisme dans les années 1940 et 1950 sous la forme du style de design suisse.

Toute décoration superflue ou superflue a été dépouillée de sa conception graphique; chaque élément de ses mises en page avait un but. La conception derrière cette approche est ce qui fait que les conceptions numériques minimalistes fonctionnent très bien aujourd'hui.

Affiches de Josef Müller Brockmann
Typographie propre et moderne et conception d'affiches par Josef Muller Brockmann.

Comment le minimalisme s'est imposé à l'ère numérique

L'histoire trouve toujours un moyen de nous rattraper. Comme il l'a fait dans la conception d'impression, le minimalisme et la philosophie sous-jacente ont rattrapé la conception Web et d'autres artefacts numériques. Pensez à la façon dont les sites Web ressemblaient il y a quelques années à peine avec leurs boutons brillants, leurs lignes et leurs paragraphes de texte, tout criant pour attirer l'attention.

Puis vint la tendance skeuomorphique où les concepteurs ont conçu des éléments qui imitaient des objets réels dans l'espace numérique. Vous souvenez-vous du rembourrage en cuir de l'iCal d'Apple ?

Les conceptions minimales sont en fait intentionnelles. C'est une approche de conception qui supprime tout ce qui est inutile et se concentre sur les éléments censés attirer le maximum d'attention, en mettant l'accent sur le contenu.

Écran d'accueil de conception Web minimaliste
Se concentrer sur la force principale d'une agence numérique en utilisant trois mots simples. (Convoi)


Site Web de l'écran d'accueil de Chylak
Cette conception de commerce électronique minimaliste met l'accent sur le vêtement, supprimant toutes les distractions inutiles. (Vêtements Chylak)


Conception d'application iOS minimaliste
Sans encombrement supplémentaire, les utilisateurs sont amenés à se concentrer sur les éléments clés de l'interface utilisateur avec la conception d'application minimaliste d'Invstr.

Les avantages du design minimaliste

L'approche de conception minimaliste s'est imposée pour bien d'autres raisons que simplement son apparence. Notre meilleure compréhension des comportements des utilisateurs, des processus de réflexion sur la conception et l'essor des processus de conception axés sur le contenu ont contribué à faire avancer cette réflexion. La récente croissance massive des utilisateurs mobiles a été un fort point d'accélération vers le minimalisme, avec une plus grande concentration sur l'expérience utilisateur et la convivialité.

Les utilisateurs accédant désormais à Internet en déplacement à tout moment, les concepteurs de produits doivent se concentrer sur l'essentiel dans le contexte du moment : les bonnes choses, de la bonne manière et au bon moment, où le design est simplifié pour ses caractéristiques les plus fondamentales.

L'utilisation du mobile représente désormais plus de la moitié de toutes les visites sur le Web, et ce taux ne fera qu'augmenter. Le design réactif a changé la donne et a forcé les concepteurs à « penser différemment ». Aujourd'hui plus que jamais, le design réactif ou adaptatif est une nécessité dans le monde mobile où une approche de conception minimaliste est d'une importance cruciale.

Pour l'utilisateur moyen, le minimalisme semble probablement être la chose la plus facile à concevoir. Atteindre un équilibre parfait en utilisant le moins de contenu visuel et en se concentrant uniquement sur les éléments fondamentaux avec la plus grande élégance est en réalité très, très difficile.

L'avenir du minimalisme

Nous devrions penser au minimalisme comme un concept intemporel, rayonnant d'élégance et de sophistication, plutôt qu'une tendance actuelle ou une simple phase passagère. Bien qu'intemporel et classique, il va évoluer et s'améliorer, comme nous l'avons déjà vu depuis sa mise en place au début du 20ème siècle.

Par exemple, le Material Design de Google a été l'une des premières évolutions majeures de l'approche de conception "plate" inspirée du minimalisme. Les concepteurs de Google ont gardé les choses simples et minimalistes, mais ont amélioré leur langage de conception en utilisant des effets d'ombre et les concepts de mouvement et de profondeur. Le matériau adopte un design plat avec une touche spécifique : imitant les matériaux du monde réel.

Site Web des directives de conception de matériel de Google
Site Web des directives de Google Material Design.

L'envers du minimalisme

Comme pour les autres éléments de la vie, nous devons toujours regarder le pour et le contre. Beaucoup soutiennent que les sites Web d'aujourd'hui manquent de saveur et sont pour la plupart tous pareils. Vous savez, une grande image de héros ou une vidéo avec du texte superposé, une rangée d'icônes avec du texte, etc. N'importe qui peut prendre quelques minutes de son temps et proposer 10 sites qui se ressemblent beaucoup. Est-ce le reflet de notre comportement et de nos préférences en ligne en constante évolution ?

La cohérence de la conception et la conception d'un comportement utilisateur commun sont extrêmement importantes dans chaque conception, mais nous ne pouvons pas oublier la valeur d'être unique. Sommes-nous devenus paresseux ou est-ce que nous avons déplacé nos pensées de l'unicité vers une stratégie d'expérience utilisateur plus efficace ?

Pages de destination au design minimaliste
Bien joué mais manque d'originalité. Grande image de héros du produit, du texte et des vignettes avec du texte.

Brutalisme dans la conception Web

Dans sa robustesse et son manque de souci d'avoir l'air confortable ou facile, le brutalisme peut être considéré comme une réaction d'une jeune génération à la légèreté, à l'optimisme et à la frivolité de la conception Web minimaliste omniprésente d'aujourd'hui.

Certains l'adorent, d'autres le détestent et beaucoup d'autres ne comprennent tout simplement pas : les sites Web brutalistes.

Prenez Craigslist comme exemple. Craigslist doit être considéré comme le "grand-père" des sites Web brutalistes. Ce n'est pas esthétique et ne serait jamais présenté sur www.awwwards.com. Texte noir, liens bleus, fond blanc. Ce n'est pas joli. Ce n'est pas nécessaire parce que ça marche – et ça marche vraiment bien. Vous trouvez ce dont vous avez besoin pour acheter ou vendre sans tracas ni tracas, et sans aucune pièce mobile superflue.

Conception Web de style brutaliste du site Web Craigslist
Craigslist est une masse de liens bleus. Une interface utilisateur simple et fonctionnelle.

Depuis sa fondation en 1996, Craigslist a maintenu sa popularité malgré - ou peut-être à cause de - sa conception extrêmement utilitaire. La conception n'a pas changé de manière significative au cours des 20 dernières années.

Peut-être inspiré par l'exemple de Craigslist, le style brutaliste fait son grand retour. Voici d'excellents exemples de conceptions bien exécutées utilisant le style brutaliste.

Acheter un site Web de type brutaliste Design School
Purchase Design School présente une galerie de travaux sous la forme d'une pile de cartes encombrées sur un fond granuleux et dégradé.


Exemple de conception de site Web brutaliste
Konsept83 s'est inspiré des débuts d'Internet.


Exemple de conception de site Web brutaliste
Creative Show-off Utrecht utilise des couleurs vives avec un style de design brutaliste.


Exemple de site Web de conception de site Web brutaliste
Disposition de conception non conventionnelle et brutaliste sur le site Web de Slugz.

Ces sites Web brutalistes se propagent de manière considérable. Pourquoi ces sites Web sont-ils soudainement si populaires ? Est-ce parce que certains designers en ont assez de l'homogénéisation du web ?

À une époque où la conception UX est primordiale, où le comportement des utilisateurs et une approche axée sur le contenu sont rois, l'UX sur ces sites est mauvaise (intentionnellement). Contrairement aux principes du minimalisme, ces conceptions sont dans votre visage avec des collages de texte et d'images où la mise en page est partout (encore une fois, intentionnellement).

Une brève histoire du brutalisme

Le style de conception brutaliste n'est pas nouveau. Une recherche rapide sur Wikipédia vous dira que le style provient en fait de l'architecture brutaliste des années 1950 au milieu des années 1970. C'est drôle que le brutalisme ait été suivi par le mouvement architectural moderniste où le minimalisme était la clé.

Le Corbusier fut l'un des plus grands pionniers de ce mouvement. Sa carrière a duré cinq décennies avec des bâtiments conçus en Europe, au Japon, en Inde et en Amérique du Nord et du Sud.

Le terme provient du mot français « brut » pour « brut », comme Le Corbusier a décrit son choix de matériau « béton brut », béton brut. Le design hyper-fonctionnaliste semblait conçu uniquement pour fournir de l'utilité - pas pour plaire - comme s'il donnait le doigt sur le modernisme.

Le brutalisme tente de faire face à une société de production de masse, et tire une poésie brute des forces confuses et puissantes qui sont à l'œuvre. Jusqu'à présent, le brutalisme a été discuté stylistiquement, alors que son essence est éthique. –Alison & Peter Smithson, Le nouveau brutalisme, conception architecturale (avril 1957)

Les conceptions brutalistes rejettent carrément l'apparence, optant pour la fonction plutôt que pour la forme. Les designers brutalistes sont fiers d'exécuter des designs avec un minimum d'effort et les matériaux les moins chers disponibles, pour obtenir un résultat plus honnête et anti-bourgeois.

Complexe domiciliaire Habitat 67 à Montréal construit dans un style brutaliste
Le 27 avril 1967, le complexe de logements urbains de Safdie, baptisé Habitat 67, est dévoilé à l'Expo 67, l'exposition universelle qui se déroule à Montréal.

Le brutalisme à l'ère numérique

Bloomberg a adopté le style à sa manière pour son site d'information. Le design est presque criard et se concentre clairement sur la fonctionnalité brute.

Site Web brutaliste de Bloomberg
La page d'accueil de Bloomberg.

Le brutalisme revient en force. Laides, brutes, se libérant du design conventionnel, les effets de survol fous et les ornements superficiels sont partout. De nombreux puristes considèrent cette tendance comme dure, rugueuse, robuste, inconfortable, conflictuelle et cynique. Il est. Exprès.

The Outline - conception de site Web brutaliste
The Outline, un magazine en ligne, opte pour un style brutaliste clair et criard qui dément son style éditorial avant-gardiste.

Le brutalisme a une approche plus primitive de la conception et remet l'accent sur le cœur même de la conception Web : son code. Le brutalisme est souvent décrit comme une tendance de design "laide", mais nous devons regarder au-delà. La philosophie derrière le mouvement brutaliste n'est pas de rendre les choses "laides", mais brutes et sans fioritures.

On pourrait dire que les sites brutalistes d'aujourd'hui sont basés sur le web DIY des années 90, se concentrant sur une approche de l'intérieur vers l'extérieur au lieu de cacher la fonctionnalité derrière une belle façade.

La conception de l'interface utilisateur du site de partage social populaire Reddit est sans vergogne brute et carrée, remplie de typographie Web de la fin des années 90, de contrôles lourds non raffinés et de presque aucune marge de manœuvre verticale.

Reddit
Reddit opte pour la fonctionnalité, embrassant les liens bleu vif du premier Web.

Le designer Pierre Buttin a poussé le brutalisme à un nouvel extrême avec une série d'applications mobiles repensées. Dans son dernier projet, intitulé Brutalist redesigns, Buttin rend Facebook, Instagram, Twitter et d'autres applications populaires dans un style brutaliste, avec des mises en page riches en texte et des conceptions aplaties.

Exemple de conception d'application de style brutaliste de Facebook
L'application mobile de Facebook repensée en <a href="https://www.theverge.com/2017/5/31/15717534/brutalist-web-design-app-facebook-google-pierre-buttin


Exemple de conception d'application de style brutaliste de Twitter
Le style de design épuré et léger de Twitter, une cure de jouvence brutaliste.

Brutalisme contre minimalisme

Le brutalisme et le minimalisme ne doivent pas être vus de manière comparative, mais comme une nouvelle façon de voir les choses et une autre approche du design. Le brutalisme est une poussée contre l'homogénéisation des sites et des applications d'aujourd'hui, mais avant même que les concepteurs puissent commencer à concevoir un site Web en utilisant l'approche brutaliste, ils doivent d'abord savoir quelles règles ils vont enfreindre.

Le design conventionnel et minimaliste ne sera pas remplacé par le brutalisme. Nous devons considérer le brutalisme comme une culture du design qui remet en question le statu quo - une culture qui en a assez de se faire dire ce qui est « le mieux ».

Il n'y a pas de bon ou de mauvais choix entre ces styles pour votre prochain projet. Néanmoins, avant de vous lancer et de concevoir votre prochain site Web ou application dans un style de conception brutaliste, assurez-vous de connaître votre public. Prenez le risque si vous pensez que l'entreprise et votre public l'apprécieront.

La conception Web brutaliste attire l'attention et la notoriété de la marque se développe extrêmement rapidement. Les règles sont faites pour être enfreintes. Osez laisser le Web être le Web. Osez vous démarquer et soyez un peu audacieux, même si un peu bizarre.


Dites-nous ce que vous en pensez! S'il vous plaît laissez vos pensées, commentaires et commentaires ci-dessous.

• • •

Pour en savoir plus sur le blog Toptal Design :

  • Les principes de conception et leur importance
  • Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
  • Explorer les principes de conception de la Gestalt
  • Adobe XD vs Sketch - Quel outil UX vous convient le mieux ?
  • Les 10 livrables UX utilisés par les meilleurs designers