Conception brutaliste

Le brutalisme est un style architectural qui a émergé au milieu des années 1920, même si son essor est venu un peu plus tard, dans les années 1950 et 1960. Il se caractérisait par un style simple et sincère. Dans le brutalisme, la forme suit la fonction .

Les bâtiments brutalistes sont généralement construits avec des éléments modulaires répétitifs formant des masses représentant des zones fonctionnelles spécifiques, distinctement articulées et regroupées en un tout unifié. Le béton est utilisé pour son honnêteté brute et sans prétention, contrastant ainsi radicalement avec les bâtiments très raffinés et ornés construits dans le style élite des Beaux-Arts.

Cool, non ? Mais vous vous demandez peut-être pourquoi nous parlons d'architecture si ce blog parle de technologie et de WordPress. Eh bien, la raison est simple : le brutalisme est une tendance design que nous pouvons également appliquer au monde du web…

L'origine du Web et son évolution graphique

Pour nos jeunes lecteurs, le Web semble quelque chose qui a toujours existé, mais rien de plus éloigné de la réalité. La première page web de l'histoire a été publiée "récemment", en 1991 ? et, comme vous pouvez le voir, c'était très simple :

Les premières pages Web étaient simplement des textes avec des hyperliens. Mais à mesure que la technologie progressait, le nombre de ressources que l'on pouvait ajouter augmentait et les possibilités d'innovation se développaient rapidement.

À ces débuts d'Internet, personne ne savait exactement ce qu'était un "bon design" (malgré tout le bagage que nous avions du monde de l'impression), et les premiers webmasters ont fait "ce qu'ils pouvaient" pour créer des mises en page efficaces pour mettre en valeur le contenu. Vous vous souvenez des designs du début des années 90, tous basés sur des tables ?

Bien sûr, ces conceptions ont plus ou moins "fonctionné" au niveau visuel, mais ont été un désastre absolu en interne. La structure HTML se concentrait uniquement sur l'aspect final de la page et ignorait complètement le contenu lui-même, de sorte que le résultat n'était pas du tout accessible. Mais nous apprenions tous à « construire le Web… »

Palettes de couleurs, icônes plates ou réalistes, animations… tous les détails les plus fins qui, une fois combinés, deviennent une « tendance design » vont et viennent. Mais il y a une tendance qui semble être une constante aujourd'hui : la simplicité, dont Ruth a parlé il y a quelques jours lorsqu'elle a examiné Apple et ses principes de conception.

Mais la réalité est plus complexe que tout cela. Tous les sites Web ne suivent pas les mêmes tendances. Il y a des gens qui s'éloignent des tendances mondiales et explorent d'autres voies. Ils cassent le moule. Peut-être même créent-ils la prochaine tendance…

Brutalisme sur le Web

Le terme brutalisme vient du français "Beton brut" ou "béton brut". Donc, si on parle de brutalisme sur le web, il est clair qu'on ne parle pas de « concret », mais de « crudité ». L'architecture brutaliste veut être fidèle aux matériaux qu'elle utilise comme blocs de construction, et c'est ce que nous, en tant que développeurs Web, devrions également rechercher. Du moins, si nous voulons créer des sites Web brutalistes.

Cela soulève la question suivante : quels sont les « matériaux » que nous utilisons pour créer un site Web ? Vous pensez peut-être qu'il s'agit de HTML et de CSS, mais notez que HTML et CSS sont au Web ce qu'une bétonnière ou une grue est à la construction : ce sont les outils que nous utilisons pour « construire » notre projet. Par conséquent, la « matière première » avec laquelle nous travaillons sur le Web est le contenu . Et cela ne devrait pas vous surprendre, car nous en avons longuement parlé sur ce site Web à chaque fois que nous avons mentionné que le contenu est roi.

Le brutalisme est fidèle à ses matériaux, donc en tant que développeurs et concepteurs Web, nous devons également être honnêtes avec notre travail et savoir ce qu'est un site Web et ce qu'il n'est pas. Les sites Web ne sont pas des magazines. Ce ne sont pas des applications. Ce ne sont pas des panneaux publicitaires. Alors, pourquoi devraient-ils ressembler à l'un d'entre eux ?

Principes de conception brutalistes sur le Web

Voici quelques principes de base que vous devez garder à l'esprit lors de la conception d'un site Web brutaliste :

1 – Le contenu doit fonctionner partout

Si vous créez une page Web sans aucun style CSS et que vous vous efforcez de la structurer correctement en utilisant uniquement des balises HTML, vous savez que ce site Web fonctionnera parfaitement dans tous les navigateurs du monde. Ce ne sera pas le plus beau site Web, mais il fonctionnera. Cela fonctionnera même dans les navigateurs sans écran (oui, je parle d'accessibilité). Et, si le contenu est roi, c'est génial !

Le contenu doit fonctionner et avoir un sens dans un monde sans CSS. Styliser une page Web peut certainement vous aider à avoir votre propre image de marque, mais cela peut aussi la casser et vous éloigner des principes brutalistes.

2 – Les interactions des utilisateurs avec le Web sont limitées et bien définies par HTML

Avec CSS et JavaScript, nous pouvons créer des sites Web qui ressemblent à des applications natives, avec des interactions qui semblaient auparavant impossibles, des animations exceptionnelles et des transitions à couper le souffle. Mais tout cela n'a absolument rien à voir avec le contenu… Alors comment concevoir des interfaces utiles sur un site brutaliste ?

Par défaut, les utilisateurs ne peuvent interagir avec votre site Web que via des boutons, des liens et des formulaires. Et seuls les liens et les boutons peuvent être "cliqués". C'est pourquoi il est important de les montrer bruts :

Depuis le début du Web, les hyperliens ont suivi un schéma clair. Ils ressemblent à du texte normal, mais leur couleur est bleue et leur style est souligné. Lorsque l'hyperlien a été visité, sa couleur passe au violet afin que le visiteur sache qu'il l'a déjà visité. Faut-il vraiment s'éloigner de cette pureté ?

Les boutons , quant à eux, représentent un élément qui existe dans la vie réelle : un bouton. Un bouton est quelque chose que nous pouvons appuyer à la fois dans la vie réelle et sur le Web, et nous nous attendons donc à ce qu'ils se comportent de la même manière. Assurez-vous que vos boutons ressemblent à des boutons et que leur apparence change lorsque nous interagissons avec eux. Utilisez-les également lorsque vous en avez besoin : à côté d'un formulaire, par exemple, ils promettent à l'utilisateur que les informations qu'il a saisies seront envoyées au serveur, puis ils seront redirigés vers une autre page avec une réponse.

3 – Les sites Web existent dans les navigateurs Web, alors laissez vos utilisateurs « parcourir » votre site Web

Saviez-vous que les navigateurs ont des boutons pour avancer et reculer ? Je sais que vous le faites, car nous sommes tous habitués à ce modèle…. et pourtant, certains sites Web brisent ce schéma aujourd'hui ! Les applications à page unique (SPA) utilisent JS pour charger le contenu de manière dynamique, et certaines d'entre elles le font en ignorant qu'il existe une option dans le navigateur pour revenir à une étape précédente. Un design brutaliste reste fidèle au Web et ne rompt jamais les modèles et les règles auxquels un utilisateur est habitué.

4 – Les utilisateurs peuvent faire défiler le contenu verticalement

Un site Web n'est pas un magazine ou un livre, il n'est donc pas nécessaire (en principe) de paginer le contenu. La seule raison pour laquelle de nombreux sites Web le font est d'augmenter artificiellement les visites, car pour lire un article, le lecteur est obligé de visiter plusieurs pages. Ne faites pas ça !

Dans un site Web brutaliste, le contenu est présenté en une seule fois et le lecteur est autorisé à le consommer à son rythme, en le faisant défiler à sa guise. Inutile de perturber l'utilisateur avec des interactions inutiles pour visualiser et utiliser ce qui compte vraiment : le contenu.

Qu'est-ce que tu penses?

J'aime les principes brutalistes. Si vous n'êtes pas un designer, appliquer ces principes est assez simple : laissez simplement les choses telles qu'elles sont par défaut (ou modifiez-les légèrement). Mais que pensez-vous? Aimez-vous? Vous pensez que c'est moche et démodé ? Faites-nous savoir dans la section commentaire ci-dessous!

Image sélectionnée par berenice melis sur Unsplash.