Why Design
Systems fail?

IOLCE, c'est quoi ?

IOLCE de l'abréviation Input/Output, Lire et Communiquer sur Écran, est un projet dont le but est de réaliser un site web d'après une conférence en anglais.

Introduction

Iolce est un travail en groupe de 4 à 3 personnes, puis personnel pour la finalisation. Nous avons en premier lieu, par groupe de 3, choisit une des conférences proposées. Notre choix s’est porté sur la conférence traitant le sujet du “Design System” par Una Kravets alors totalement inconnu pour l’ensemble du groupe.

Image de plusieurs personnes qui travaillent ensemble

Compréhension

Ce choix qui nous réjouissait tous au départ, nous a rapidement fait regretter. La conférence étant déjà difficile à comprendre de base, rajouté au fait que celle-ci était entièrement en anglais, j'ai donc eu beaucoup de mal à tout comprendre. Heureusement, mes compagnons de travail ont pu m'éclaircir sur les quelques sujets encore obscur à mes yeux.

L’étape suivante était de résumé la conférence de plus d’1h que nous venions de regarder. Nous nous sommes mis au travail sans tarder, et malgré nos efforts, nous avons dû réécrire le texte un bon nombre de fois avant d'arriver à ce résultat. Et pour cause, de nombreux arguments utilisé par Una Kravets dans sa conférence sont des mots précis et pas toujours facile ou possible à traduire en français.

Marktdown

Maintenant que nous avions notre texte, il était question d’en faire un markdown, afin de connaître nos différents niveaux hiérarchiques et pour faciliter par la suite, la création du site web. Lorsque que j’ai vu ce qu’était cette étape, j’ai pris un peu peur, ca semblait réellement compliqué, mais fort heureusement, ce n’était pas le cas. Au final cette étape fut assez rapide, et très utile pour la suite.

Screenshoot du marktdown du site

La lumière au bout du tunnel

L’étape final est la création du site qui va permettre d’y implémenter le résumé. Cette partie, a l’inverse de la rédaction du texte, se fait seul. Je trouve que c’est une bonne idée que de lier travail de groupe et travail personnel, cela permet de se retrouver en situation professionnel. J’ai pris plusieurs jours pour trouver un design innovant, mais mes capacitées techniques en code me limite encore beaucoup trop, et malheureusement, beaucoup de mes idées tombent alors à l’eau. Je fini par trouver un design que j’apprécie, n’étant pas trop compliqué mais comportant néanmoins quelques subtilitées dont je n’ai jamais eu l'occasion d’essayer. Je pense que c’est une bonne chose que de se lancer des défis et de sortir de sa zone de confort.

Image d'une lumière au fond d'un tunnel

Le burger-menu, une histoire d'amour

Le burger menu est ce que je pensais être le plus difficile et le plus long à réaliser, mais au contraire a été pour moi au final l'une des choses les plus faciles à réaliser. Il ne m'a fallu que quelques essais pour rapidement avoir un burger menu fonctionnel, animé et plutôt joli malgré tout. La seule véritable difficulté était la superposition du menu qui apparaissait et le reste du site, j'ai donc fait quelques recherches et j'ai trouver la solution qui consistait à utiliser un z-index négatif ou supérieur.

Finalisation, enfin !

C'est le moment de vérifier qu'aucun n'oubli n'a été fait. Je relis soignement mes lignes de codes, mes phrases, je regarde si mes images ont correctement été compressées pour garantir un maximum de fluiditée du site. Et c'est pendant cette étape que je réalise avoir oublier une chose terriblement importante, quelques lignes de codes dont je n'ai absolument pas le droit d'oublier en CSS, le line-heigth! Je suis totalement passer à côté de cette étape ! Je corrige cette grossière erreur et me voilà prêt.

Merci aux personnes ayant contribuer à la réalisation du résumé