Case Study - IOLCE

“IOLCE”. C’est l’acronyme des mots « Input Output Lire et Communiquer sur Écran ». Comme chaque nouveau mot qu'on apprend, une soif de savoir s'ensuit. Que définit cette expression? Heureusement, plus simple fut la consigne qui suivait: retranscrire une conférence en une interface web. Pour ça, il a fallu procéder en plusieurs étapes. Lesquelles je vais vous décrire dans cette étude de cas.

Analyse de la conférence

Dans le cadre de nos études en Design Web & Mobile, nos professeurs nous ont demander de faire, par groupe de quatre, un résumé d'une conférence, choisie parmi une liste, et d'en faire un résumé, puis un site web.

On a commencé par une mise en commun de ce que nous avons retiré de cette conférence. Cette conférence de Jon Tan se focalise sur la notion de design pour tous, ainsi qu'une brève histoire sur le design. Il soulève le problème de l'entropie, et comment cette dernière affecte le Web.

De cette mise en commun résulte une synthèse, et chacun d'entre nous devait approfondir une notion - j'ai choisi l'entropie, un mot qui a piqué ma curiosité de par la rareté de sa présence dans ma vie quotidienne.

Jon Tan - An Event Apart

Les recherches sur l'entropie

Mes recherches mirent longtemps à porter leur fruits. La définition de l'entropie, dont la plus commune est "Manque d'information", ne semble pas correspondre à celle que décrit Jon Tan. En fait, il est difficile de définir l'entropie sans en démontrer un exemple. En synthétisant mes recherches, j'en suis arrivé à produire ma propre définition.

L'entropie nait du fait qu'il y ait plusieurs sources pour la même information.

Une fois le tout mis en commun, il a été envoyé sur MarkDown pour nous aider à trouver les niveaux hiérarchiques. Cela à posé un problème au niveau des listes, qui ont pour un moment faussé le nombre final de niveaux hiérarchiques. Il a fallu refaire les listes manuellement.

Ceci fait, on a discuté des style de titres. En tant que tentative de démarque, on s'est donné l'idée de faire des titres aguicheurs, style vidéaste YouTube en demande d'attention. Cela nous permis de travailler dans la bonne humeur.

Définition de l'entropie selon Wikipédia

Réalisation du site Web

Le menu pose un problème.

Avec le MarkDown prêt a être transcrit en HTML pour nos futures pages Web, il est temps de coder le design. Une tâche qui m'a effrayé lors de son annonce, mais fort heureusement, entre le premier jour et quatre mois plus tard, nous avons une large gamme de connaissances pour nous aider à styliser la page web.

Cela dit, autant on travaillait avec notre groupe auparavent, maintenant il faut se séparer. Ainsi va la vie.

Le plus gros problème est le menu en haut de l'écran, le header. Créer le header, c'est une chose simple, surtout que l'on sortait d'un cours qui nous a fait un petit récapitulatif dessus. Par contre, faire en sorte que le header reste en haut de la page même quand on la descend a demandé un peu de recherche de ma part. Un menu de ce type est nommé "sticky menu" et demande l'usage de l'attribut CSS position: fixed; et des espacements nécessaire pour palier au fait qu'avoir une bande en haut constamment peut cacher un partie du site.

Un problème qui se règle en abaissant le main d'autant de pixels que la largueur du menu. Le reste du CSS n'a pas posé autant de problème que l'adaptation de ce header en menu.

Différenciation viewports

En voilà un problème moderne. Avec le soutien de mon professeur de design grilles, j'ai réussi à mettre en forme mon site...

S'ensuit le fait que ce qui est facile à lire sur mobile l'est moins sur tablette ou PC. Points bonus pour les Mac, qui ont une résolution d'au moins 2000 pixels.

Après avoir passé tout ce temps à faire un layout adapté mobile, j'ai dû refaire de même selon la longueur d'écran. Diviser les groupes en deux avec l'attribut flex et flex-direction selon la largueur d'écran permet d'alterner entre ligne et colonne.

Différences de tailles entre différents appareils

En noir: Mac 27 pouces, en bleu: écran de 1500x1000px, en vert: tablette, en rouge: Smartphone

Conclusion

Réaliser un site Web sur comment faire un bon design a été une expérience intéressante. Les conflits d'idées lors de la mise en commun permet d'avoir des points de vue que l'on aurait pas envisagé auparavent, et c'est toujours intéressant de faire des recherches sur les notions que l'on ne connait pas. Ce fut, en tout, une expérience très enrichissante qui combine travail de groupe et travail personnel.