Le cas Iolce
Un projet web à L'HEAJ
Le projet a démarré le jeudi 28 octobre, nos professeurs nous ont lancé sur l’idée de réaliser un site web relatif à une conférence de notre choix. Nous avions accès à une liste d’une dizaine de conférences et après les avoir parcourues, mon choix s’est porté sur Take Back Your Web car je savais que ça parlait de l’impact des réseaux sociaux sur le web et que je suis personnellement intéressé par le sujet.
L'intro
Premier contact avec le contenu
Il nous a été demandé de réaliser une présentation des quelques minutes de ce qu’on avait retenu et appris de notre visionnage.
J’ai donc visionné la vidéo qui m’a agréablement surpris. Je ne m’attendais pas à grand-chose mais j’ai appris quand même pas mal d’éléments comme je vous l’ai expliqué dans le reste du site. J’ai ensuite réalisé quelques recherches sur qui était Tantek Çelik pour réaliser les slides que j’allais utiliser lors de ma présentation.
Le contenu
Ecriture des textes qui seront présents sur le site
L’équipe de professeurs nous a demandé de faire des groupes de 4 personnes autour d’une conférence commune. Nous devions réaliser un résumé commun pour l’introduction et un texte personnel de notre expérience. Pour le résumé commun nous nous sommes approprié le contenu pour ensuite nous séparer en deux sous groupes: un qui se chargerait de l’écriture et l’autre de la révision du texte.
Pour la rédaction personnelle, j’ai simplement expliqué ce que j’avais retenu du discours de Tantek avec mes propres mots.
Nous avons ensuite eu un suivi avec un de nos professeurs qui nous a bien entendu suggéré des modifications afin d'améliorer la compréhension et la lecture de notre contenu.
Le visuel
Premières réflexions sur le design
Tantek nous parle beaucoup de la pollution due aux réseaux sociaux, de l’assaut qu’on subit de ceux-ci sur notre attention voir même notre humeur.
Pour représenter ces idées, je voulais réaliser un site épuré et assez minimaliste sur lequel on ne se sent pas oppressé sur le contenu.
Heebo
Pour mon choix de typographie, en continuité avec l’idée du minimalisme, mon choix s'est porté sur une typographie sans-sérif assez moderne: Heebo. Je l’aime bien car elle est assez similaire à Roboto.
J’ai envie de jouer avec des titres assez important qui contraste bien avec le corps de texte, pour cela, cette typographie me convient également au niveau de son esthétisme.
Je compte utiliser qu’une seule police pour rester dans la simplicité et parce que personnellement j’ai envie de m’exercer au niveau de la maîtrise des graisse au sein d’une même typographie.
Ensuite, je suis passé presque directement au prototypage, j’ai choisi de ne pas utiliser de couleurs dans ce site, de rester sur des teintes de gris ainsi que du noir et blanc pour rester dans ma direction graphique. Sur ma version desktop, j’avais envie de jouer sur des grands espace blanc de façon à ce que mon contenu respire bien.
J’ai également décidé de jouer avec des lignes subtiles pour ajouter de la structure à tous ces textes. Cela permet de séparer les différentes sections tout en donnant une esthétique supplémentaire.
Pour mon logo, j’ai choisi de représenter les lettres Y et W avec des carrés de manières stylisée pour Your web pour exprimer à l’utilisateur vraiment les terme “VOTRE web” je trouvais ça sympa dans l’idée de reprendre conscience qu’on devrait avoir le contrôle sur le web que l’on consulte.
Au niveau des textes du site, j’ai choisi d’utiliser beaucoup de variations de tailles et de graisses pour le rythme, de façon à ce que ça reste plaisant à l'œil et à la lecture. Je n'hésite pas à décaler certains contenus pour les mettre en évidence avec la grille mise en place. On nous a demandé d’utiliser des grilles css dans le site et plus particulièrement une grille impair pour avoir une mise en page plus originale que ce qu’on a l’habitude de voir. J’en ai donc 7 sur ma version desktop et 5 sur ma version mobile.
La technique
Mise en place du site
Comme pour tous mes projets, je me concentre tout d’abord sur la page d’introduction. En commençant par la structure HTML de tout ce que je peux y mettre pour le moment. Ensuite je travaille mes blocs un à un en css, le header, la nav, le footer que je vais pouvoir copier et coller sur chaque page. Aucune grosse difficultées durant la partie code si ce n’est des problèmes de syntaxe de temps en temps (comme à chaque fois).
Généralement j’aime bien tout coder d’une traite, pendant un ou deux jours, j’ai assez peu de patience en général et revoir un projet durant plusieurs semaines peut m’être insupportable. Donc j’essaie toujours de finir ça au plus vite, en maintenant un certain niveau de qualité bien entendu.
La conclu-
sion
Si je devais en faire une
Je n’étais pas super motivé dans un premier temps sur ce projet mais un peu après la présentation de la conférence j’ai regagné une flamme qui m’a motivé à bien m'inspirer et à bien réfléchir à mon design. Je commence à trouver un bon workflow pour coder ça efficacement et correctement, du haut des mes connaissances actuelles du moins. J’aurais pu faire mieux, c’est ce que je me dis à chaque fois mais pour le rapport temps investi/résultat, je suis assez satisfait de ce que j’ai produit. J’espère que vous l’êtes tout autant.