Ah, je me souviens bien des jours ... quand tout était en dégradé brillant, avec au moins 6 images clipart et une photo de stock de 5 employés de bureau. Nous avons adoré les images de claviers avec des boutons absurdes et des personnes en 3D avec des symboles brillants.

Et après, que s'est-il passé? iOS 7 est arrivé. L'outil de dégradé de nos boutiques de photos a commencé à recueillir de la poussière et nous avons supprimé notre énorme bibliothèque de photos.

Design plat a pris le relais en 2013 . Tout devait être brillant, caricatural et bien sûr plat. De la même manière que le design plat était une réaction au skeuomorphisme, nous commençons à voir les choses autrement.

Alors, quelle est la nouvelle saveur de l'année? Je suis ravi que vous ayez posé la question suivante: Sites qui ressemblent à la page de téléchargement d’une société de logiciels à code source ouvert qui a fermé ses portes à la fin des années 90.

Cela a été documenté par Sites Web brutalistes , qui a pris de la traction et marqué une couverture sur Washington Post et Fast Co nommer un couple. Mais ces sites ne sont-ils que des agences de design prétentieuses et des artistes expérimentaux? Dans les vitrines des sites Web des Brutalistes, c’est surtout vrai, mais nous commençons à voir cette esthétique atteindre le grand public. Agréable! Nous ne pouvons pas regarder le design plat élégant pour le reste de nos jours, pouvons-nous?

Personnellement, j'adore cette tendance. Je ne suis pas le concepteur Web le plus pointu du marché, et je ne veux pas non plus utiliser un framework rebattu - tout ce que je peux combiner est ce que je peux faire de mieux.

J'avais l'habitude de passer du temps à parcourir Internet pour trouver des sites web désuets, et je me réjouissais des cadres maladroits de Times New Roman et des cadres maladroits. Probablement parce que cela me rappelait un temps plus simple, où les gens s’appelaient webmasters et où tout était en permanence «en construction».

Mais, cherchant à apprendre le design web à partir de zéro au lieu d'adopter un thème WP ou CSS, j'ai toujours eu trop honte pour créer le site Web simple et laid de mes rêves. "Quel serait le but?", J'ai pensé. Le montrer me ferait paraître ridicule. Je ne peux pas l'utiliser comme portefeuille pour quelque chose sans ressembler à un désordre.

Le fait de voir des sites Web CSS-light sans JavaScript en vue m'a donné la confiance dont j'ai besoin pour arrêter de travailler sur les sites d'autres personnes et créer mon propre site.

En regardant la sélection de nouveaux sites minimalistes, j'ai remarqué plusieurs thèmes clés qui semblent élever leur belle tête laide.

Monochrome

La conception monochrome fait exactement ce qu’un bon design doit faire: attirer l’attention sur le contenu.

001

Pas de fantaisie CSS

Rappelez-vous le bon vieux temps? Quand tout le monde possédait un site Web et avait quelque chose à prouver? L'approche No (ou peu) de CSS ramène ces jours-là et, personnellement, je suis extrêmement nostalgique des temps plus simples où un site Web pourrait être une courte biographie et une collection de liens.

002

Texte incliné / superposé

Le texte incliné renvoie l'utilisateur un peu, et non d'une manière étonnante . Au lieu de cela, il est quelque chose que l'utilisateur n'est pas habitué à voir, il fait une impression puissante.

Découvrez le placement de texte expérimental que Loïc utilise sur son site internet . Le mépris total pour la lisibilité donne aux visiteurs le sentiment d'un magasin de haute couture qui n'a pas d'étiquette de prix. Il est si peu informatif (et dans ce cas, distant) que c'est chic.

004

Peu de considération pour la balance ou le rembourrage

Bloomberg obtenir assez expérimental ces jours-ci, et je l'aime. Imaginez les épreuves et les tribulations que le concepteur a dû surmonter pour faire approuver cela avec le grand patron.

La raison pour laquelle c'est génial est que c'est tellement différent. Les règles de conception strictes ne sont guère prises en compte: laisser suffisamment d'espace entre les éléments, garder les choses à une échelle similaire et même s'assurer que tout est lisible de manière appropriée sur tous les appareils.

005

Références à la technologie héritée

Beaucoup d'entre nous garderont de bons souvenirs de Windows 98 ou des premiers systèmes d'exploitation Mac. Certains sites Web suscitent un sentiment de nostalgie - et peut-être même d'humour - en faisant référence à de vieux logiciels. Après tout, beaucoup de design web brutaliste vient des vieux jours.

Découvrez cet exemple à partir de Post HTML (ces dossiers contiennent chacun de l'art expérimental).

006

Qu'est-ce que cela signifie pour les concepteurs

Nous avons pensé que ce plat = simplicité, mais évidemment, il fallait encore une tonne de travail de conception pour bien faire les choses.

Avec l'esthétique brutaliste au premier plan, les concepteurs devront compter de moins en moins sur les frameworks CSS traditionnels et les sites de code.

Cependant, il ne semble pas que les entreprises utilisent cette tendance sur leurs sites. Le design brutaliste, mis à part Bloomberg et d'autres grands noms, se limite actuellement aux agences de design, aux sites expérimentaux et aux blogs personnels.

Si vous voulez créer votre propre site web brutaliste, voici quelques conseils ...

Supprimer le CSS de votre site actuel

Alors que certains sites s'appuient fortement sur le CSS pour le positionnement horizontal, il est possible d'extraire tous les styles de certains sites et de les afficher correctement. Voici un exemple:

Si votre site repose sur des animations flashy, JavaScript ou des CSS sophistiqués, il faudra probablement le refaire si vous souhaitez adopter ce style. En fait, la raison pour laquelle j'ai abandonné WordPress était que je ne pouvais pas trouver un thème adapté à ma vision. Au final, j'ai fini par apprendre le HTML / CSS en éditant un ancien modèle du début des années 2000. Après cela, je me suis senti en confiance pour aller de l'avant et recommencer, en gribouillant mon propre CSS désordonné et en faisant le plus de choses possible sur un site «moderne».

Couper en monochrome

Parfois, le design brutaliste signifie un design simple. Et c'est toujours génial pour l'expérience utilisateur. En réduisant votre palette de couleurs actuelle à 2 couleurs (noir et blanc), vous pouvez réduire la surcharge des utilisateurs et leur donner une orientation plus claire. Après tout, vous ne voyez pas les sites avec une tonne de couleurs différentes dans la zone de texte, car il est difficile de se concentrer.

Faites preuve de créativité avec le positionnement de texte

Qui a dit que tout devait être bien aligné? Le site Web de Loïc Dupasquier ci-dessus, par exemple, est une déclaration audacieuse qui parle du concepteur. Regarder exactement la même chose que tout autre employé potentiel n’est pas une bonne idée.

À moins que vous ne soyez le créateur le plus célèbre dans ce domaine, vous serez toujours au deuxième rang. En évitant les «règles» traditionnelles en matière de typographie, vous vous démarquez de la foule.

Re-apprendre les bases et les anciennes façons

Pour moi, il ne s’agissait pas d’adapter un design ou une compétence à une nouvelle mentalité. J'ai appris les rudiments de la conception de sites Web lorsque les sites ressemblaient à ceux que je vous ai montrés. Il ne me restait donc plus qu'à faire un bref rappel et à me mettre au travail.

Je recommande de vérifier le code source sur les anciens sites et ceux figurant sur les sites Web brutalistes, anciens tutoriels HTML , ou cette mine d'or qui comprend une liste des premiers sites Web encore en vie.

Où ce style fonctionne bien (et où il ne fonctionne pas)

En fin de compte, un site Web est toujours un équilibre entre l'expression de soi et la création de la meilleure expérience pour vos utilisateurs.

Sur un blog, il est sans doute préférable de se concentrer sur la simplification du corps du texte. Vous remarquerez que si l'article de Bloomberg sur Yahoo est assez étrange, le corps du texte est facile à lire.

Ainsi, lorsque vous construisez un blog, il est préférable de respecter les conventions pour le corps de l'article. Par exemple, FILÉ Le design est assez distinctif mais quand il s'agit des articles eux-mêmes, ils utilisent une police agréable et la gardent lisible.

Pour un concepteur qui travaille principalement avec des sociétés étouffantes, un portefeuille expérimental pourrait dissuader le client au moment le plus important du contact.

En fin de compte, cela revient à connaître votre public et à savoir si vous pouvez ignorer totalement les conventions.

Allez-y et faites quelque chose d'éclatant.