En tant que développeur ou bien utilisateur, il est très probable que vous soyez déjà tombé sur un site web possédant un design plus atypique que les autres, un design ayant pris toute votre attention et vous faisant véhiculer certaines émotions…

Et, au moment où vous lisez ces lignes, vous êtes probablement en train de vous remémorer une de vos expériences de ce type.

Vous l’aurez compris au titre de cet article, aujourd’hui je vous propose de faire un tour sur ce qui est possible de faire en tant que développeur front-end et pourquoi, selon moi, cette branche du développement web représente un pilier important de la créativité numérique.

Le développement Front-End, quésaco ? 🤔

Le développement web est aujourd’hui majoritairement composé de deux branches : le ‘Front-End’ et le ‘Back-End’.

La toute première représente tout ce qui touche aux éléments visibles par les utilisateurs du site ou application. C’est dans cette branche où l’on conçoit les éléments d’interface, les interactions, les animations, etc.

Le second, quant à lui, représente ce qui n’est pas visible par les utilisateurs. Elle regroupe toute la logique s’effectuant côté serveur, création et manipulation de bases de données, etc. permettant de rendre des pages dynamiques.

Les développeurs Back-End aiment assimiler le développement Front-End à du coloriage 🎨. Ce qui je dois l’avouer n’est pas faux dans certains cas, mais la majorité du temps cela est bien plus complexe que ce qu’il n’y parait. Cette assimilation est en grande partie due à l’outil indispensable pour tout bon développeur de cette branche : le CSS.

L’outil incompris aux possibilités infinies : Le CSS ✨

Le CSS pour Cascading Style Sheet (ou Feuille de Style en Cascade en français) est un outil permettant d’écrire des règles de styles qui viendront toutes se compléter entre-elles pour former notre design final.

Cet outil est, je le pense, le plus incompris par l’ensemble des développeurs web. Jugé trop complexe, étrange ou même incohérent, peu de développeurs ne prennent la peine d’approfondir les différentes notions avancées, et se contentent des bases.

Vous avez sûrement déjà vu passer les blagues sur le fait de centrer une div en CSS :

Ces mêmes, illustrent bien le fait que le CSS est un outil incompris, et cela est vraiment dommage au vu des choses que l’on peut faire avec.

CSS au service du design de composants 📦

Les sites / applications d’aujourd’hui utilisent ce que l’on appelle des composants. Pour illustrer ce que c’est, imaginez une brique de Lego 🧱, dans lequel on vient lui apporter un design et des options qui lui sont propres. Une fois cette brique créée, on pourra venir l’implémenter où on le souhaite sur notre application.

Pour réaliser ces composants, nous pouvons utiliser CSS, avec celui-ci on viendra écrire des règles de style afin que nos composants s’adaptent selon différentes situations.

Mais cela peut vite devenir très long, surtout si on a beaucoup de composants… C’est pour cela que les Frameworks CSS ont été créés ! Concrètement, en utilisant cette approche, on utilise des règles de styles écrits par d’autres développeurs pour nous faciliter la tâche (cette approche est souvent privilégiée par les développeurs Back-End).

Et il y en a pour tous les goûts ! 😄

Il y’a des frameworks tels que Bootstrap, TailwindCSS ou bien Bulma qui ont été créés pour réaliser des interfaces moderne et relativement classique.

Mais il y’a également des frameworks un peu plus atypiques comme PaperCSS ou bien NesCSS.

Le premier permet de concevoir une interface ressemblant à une feuille de papier, la police d’écriture est remplacée par une police manuscrite, les boutons et autres éléments interactifs ont un côté ‘croquis’ que je trouve assez sympa.

Le second permet de concevoir une interface rétro se rapprochant du style de la NES d’où son nom. On peut y retrouver des boites de dialogue, des menus de sélections ou bien des icônes. Ce style peut vraiment bien s’accorder à un projet de jeu vidéo par exemple.

La réalisation de projet créatif se voit simplifiée avec ce type de frameworks atypique, et il y’en a beaucoup sur la toile. Voyez ça comme une sorte de boite à Lego dans lequel vous pouvez venir choisir ce que vous souhaitez pour concevoir vos projets.

Le CSS Art : quand les artistes passent du pinceau au code 🖌

Tout est dans le titre, le CSS Art consiste à créer ou reproduire des œuvres en CSS. La plupart du temps, cette pratique n’a juste pour but d’être beau visuellement et les créations ne sont généralement pas conçues pour être intégrées sur de vrais sites.

Une de ces œuvres appelée ‘Pure CSS Francine’ avait fait beaucoup de bruit sur Twitter. Conçu par Diana Smith intégralement en CSS (avec le préprocesseur SASS).

Voici le résultat obtenu :

Vous pouvez la retrouver juste ici : PureCSS-Francine

Il y’a également un projet qui m’avait tapé dans l’œil quand je l’ai aperçu, nommé ‘Animal Crossing: Isabelle’s Day Off’, conçu par Cybercountess, est une intégration du monde provenant du jeu Animal Crossing sur une Nintendo Switch. Voici le résultat :

See the Pen Animal Crossing: Isabelle's Day Off ☀️(Pure CSS) by Tee (@acupoftee) on CodePen.

Une vidéo timelapse sur la création de ce projet est disponible sur sa chaine YouTube dans lequel on peut y apercevoir les différents procédés utilisés :

Certains développeurs essayent de rendre le CSS Art utile, c’est de cas de Aaron Iker qui s’est fait connaitre sur Twitter grâce à ces boutons aux effets atypiques :

See the Pen Order confirm animation by Aaron Iker (@aaroniker) on CodePen.

See the Pen Confirm confetti button by Aaron Iker (@aaroniker) on CodePen.

See the Pen Continue Application Hover by Aaron Iker (@aaroniker) on CodePen.

Quand Javascript vient ajouter de l’interactivité 🚀

Comme dit précédemment, CSS nous permet de rédiger des règles de styles. Mais lorsque l’on souhaite rendre tout ça interactif, on fait appel à Javascript.

Javascript est un langage de programmation Front-End compris par les navigateurs, c’est avec ce dernier que l’on vient ajouter toutes nos interactions et notre logique sur nos différents composants.

Pour donner un exemple concret, tournons-nous vers Martin Gauer développeur Front-End.

Ce développeur, fan de la gameboy de Nintendo, a décidé de la reproduire intégralement en CSS :

Vous pouvez retrouver le repo Github juste ici : CSS Gameboy

Après l’avoir réalisé, il s’est demandé si c’était possible de faire en sorte qu’elle fonctionne. Il a donc ajouté du Javascript, créé un petit jeu vidéo représentant son portfolio et l’a ajouté sur son site web personnel :

Je ne vous dévoile pas tout, si vous souhaitez voir la suite, vous pouvez vous rendre sur le portfolio de Martin Gauer juste ici : martingauer.com

Ajoutons de la 3D 🤩

Oui c’est possible !

Grâce au moteur WebGL et/ou avec la librairie ThreeJS il est possible de faire des rendus 3D sur nos sites web.

On commence de plus en plus à voir fleurir ce type de site sur toile, c’est le cas de Bruno Simon et de son portfolio sous forme de jeu vidéo :

Retrouvez le portfolio de Bruno Simon juste ici : bruno-simon.com

Nous avons également, des projets plus techniques comme InfiniTown, qui, comme son nom l’indique, est une ville infinie :

Retrouvez le projet InfiniTown juste ici : demos.littleworkshop.fr

Pour finir, nous avons CoastalWorld, un projet de plus grande envergure qui consiste à laisser le visiteur dans un monde ouvert en 3D afin qu’il réalise diverses missions :

Retrouvez le projet CoastalWorld juste ici : coastalworld.com
En savoir plus sur le projet : awwwards.com

Conclusion

Les projets ci-dessus ne représentent qu’une petite partie de tout ce qui est possible de faire, le but de cet article était avant tout de vous montrer que la seule limite était notre imagination dans ce genre de projet.

Ces derniers poussent les développeurs à redoubler de créativité et d’innovation. Même si pour la plupart, ce ne sont que des essais ou démonstrations techniques, d’autres sont là pour innover la consommation de contenus sur le web. Et qui sait, certaines innovations de ce style pourraient devenir les nouveaux standards du web de demain. 😉

Si vous souhaitez découvrir de nouveaux projets très tendance en termes de design, vous pouvez vous rendre sur le site Awwwards.com qui attribue diverses nominations chaque jour sur des sites actuels.