La recherche

Après cette introduction, le cours de notre professeur, Monsieur Bourgaux, était lancé. C’était parti pour rechercher des sujets intéressants et utiles, avec comme consigne trouver des problématiques et non des solutions toutes faites ! Mon Google Doc ouvert, j’ai donc commencé par rechercher des sujets qui me touchaient et me parlaient personnellement autour de problèmes que j’aurai rencontrés ou pu observer. Malheureusement, je me suis vite retrouvé perdu et à court d’idées.

Au cours suivant, Monsieur Marchal mit en place une méthode afin de faciliter nos recherches pour trouver des sujets qui nous ressemblaient. A travers nos besoins, il nous a posé quelques interrogations comme « Je ne pourrai jamais vivre sans… », « Je me battrai pour… », « Quels sont les problèmes qui nous entourent personnellement ou autour de nous ? » et « Quels sont les thématiques qui nous touchent ? ». Grâce à ces 4 questions, j’ai pu avancer et trouver de nombreux sujets intéressants. Plus j’avançais dans mon travail et plus je trouvais d’autres idées qui me menaient vers d’autres.

Au fur et à mesure, mes recherches devenaient brouillons, j’ai donc tout résumé et repris mes coups de coeurs pour continuer à chercher d’autres sujets.

Une fois 10 propositions de sujet trouvées, chaque étudiant devait les renseigner dans un formulaire pour les montrer et les faire approuver aux professeurs. Voici mon top 10 :

1. Comment gérer sa procrastination et/ou sa précrastination ?

2. Comment gérer la migration humaine ?

3. Comment correspondre encore aujourd’hui ?

4. Comment gérer son empathie ?

5. Comment mieux s’organiser ?

6. Comment aider au bien être des enfants placés ?

7. Comment gérer sa fatigue ?

8. Comment trouver du tourisme proche de nous ?

9. Quels types de parents ou concept de familles d’aujourd’hui êtes-vous ?

10. Comment sensibiliser les gens sur les volatiles/oiseaux ?

Les professeurs ont ensuite choisi celles qu’ils préféraient et où ils voyaient un travail possible à réaliser. Pour qu’une proposition soit valide, il fallait que cette dernière soit validée par au moins quatre d’entre eux. De mon côté, voici les propositions qui en sont sorties :

1. Comment trouver du tourisme proche de nous ?

2. Comment correspondre encore aujourd’hui ?

3. Comment mieux s’organiser ?

À partir de là, chaque étudiant a commencé à chercher des présuppositions à ses propositions. Indécis, j’ai donc travaillé sur mes trois sujets en même temps vu qu’ils me plaisaient tous les trois, mais j’ai vite remarqué que j’avais beaucoup plus d’idées et de présuppositions pour la correspondance d’aujourd’hui.

Un problème de face à face

Mi-mars 2020, le fameux virus « COVID-19 » débarqua dans nos vies, ce qui chamboula nos méthodes de travail.

Malheureusement avec le confinement, il était difficile d’interviewer beaucoup de gens, c’est donc pour cela que nos professeurs nous ont conseillé d’envoyer un formulaire en ligne à la place. J’ai donc opté pour l’utilisation d’un Google Forms et rassemblé toutes mes questions pour les présuppositions dedans.

À travers les réponses qui en sont sorties, j’ai appris que pour :

• Les écritures manuscrites

  La plupart des gens n’écrivent plus beaucoup par papier. Ils n’écrivent plus que pour envoyer une lettre, une carte ou dans le cadre professionnel.

• La correspondance

  Les gens ont majoritairement répondu qu’ils avaient correspondu avec quelqu’un, mais dans quelques cas, c’était dans un cadre obligatoire pour l’école ou le boulot, ce qui n’était vraiment pas motivant. Aujourd’hui, la majorité d’entre eux ne correspondent plus avec la personne en question.

• Les messages insolites

  Les gens sont intéressés par des moyens insolites d’envoi de messages (Pigeons voyageurs, ballons montés, drones, bouteilles à la mer, réseaux pneumatiques). Les cartes moches/insolites/kitch sont également perçues comme intéressantes.

J’ai également découvert d’autres moyens de correspondre, comme par exemple la correspondance avec une maison de repos ou la possibilité d’envoyer une image ou un message à un enfant handicapé. Ce qui ressortait beaucoup aussi, c’est que les gens trouvent que la correspondance devrait être proposée aux enfants dès la primaire pour les obliger à écrire sur papier et ainsi peut-être les aider dans l’apprentissage de l’orthographe ou d’une langue. Malheureusement, beaucoup se demandait pour qui était destinée la correspondance à travers toutes mes questions ? La famille, un ami, une connaissance ou un correspondant d’un pays lointain ? Moi-même n’ayant aucune réponse et trouvant que mon sujet était encore trop global et pas assez précis sur un petit projet utile, ce qui était normal vu que je n’y avais pas encore vraiment réfléchi… Je me suis donc décidé à utiliser toutes ces réponses et ces avis différents pour trouver un projet beaucoup plus centré !

Si vous souhaitez consulter plus précisément toutes les réponses à ce formulaire, vous pouvez consulter ce Google Sheet.

Une confirmation et des tâches

Afin de confirmer mon projet, celui-ci devait répondre à la méthode des 5W ou QQOCP (Méthode qui permet de se poser un ensemble de questions relatives à une problématique (quelle qu'elle soit) dans l'optique de la résolution de celle-ci.) :

Une personne souhaitant correspondre (Qui ? & Quoi ?) avec une autre personne proche d'elle ou à l’autre bout du monde (Où ?) dans le but d’envoyer un quelconque message papier, virtuel ou caché (Pourquoi ?) afin d’espérer recevoir un jour une réponse à ce message (Quand ?).

Puis, je l’ai soumis à mes différents professeurs afin de récupérer de nouvelles idées mais aussi et surtout leurs avis. Ceux-ci étaient positifs et me donnèrent une nouvelle idée à intégrer : la création d’un système de localisation des bouteilles.

Ensuite, pour avancer dans mon projet, il me fallait identifier toutes les tâches de mon site et celles que je devrai mettre en avant ! Pour se faire, j’ai résumé toutes mes idées de tâches qui devraient y avoir sur le site :

• Envoyer une bouteille;

• Choisir une préférence entre une lettre ou un fichier vidéo/audio/texte via une clé USB à inclure dans la bouteille;

• Rédiger une lettre via le site;

• Envoyer une bouteille et la lettre via le site;

• Commander soi-même le kit pour rédiger la lettre et envoyer la bouteille à la mer;

• Suivre un tuto sur comment écrire une lettre avec de l’encre invisible;

• Suivre un tuto sur comment préparer sa bouteille à la mer.

Une fois ceci fait, je les ai regroupées dans un nouveau formulaire afin d’avoir de nouveau l’avis des gens. À travers les réponses qui en sont sorties, j’ai appris que pour :

• La bouteille en verre

  Les gens préféraient réutiliser leurs bouteilles en verre plutôt que d’en acheter une via un kit.

• Le papier ou la clé USB

  Les gens sont intéressés soit par le papier ou soit les deux, beaucoup moins uniquement pour la clé USB. Pour le papier, ils continuaient d’écrire au bic mais seraient tenter d’utiliser l’encre invisible également. Par rapport à cette dernière, ils ne savent pas comment elle fonctionne et sont intéressés par un tuto. Pour la clé USB, ils sont intéressés par la mise en place de 3 fonctionnalités maximum, j’ai donc choisi d’en faire une pour laisser un message vocal, une pour faire un message vidéo et une pour laisser une image. Ils sont mitigés sur le souhait d’avoir une limite de temps ou de caractère pour leur message.

• Le kit

  Les gens sont intéressés de prendre uniquement ce qui leur manque et ce dont ils ont besoin. Ils préfèrent concevoir leurs bouteilles et leurs messages eux-mêmes avec un tuto.

• L’envoi

  Les gens sont intéressés d’envoyer leurs bouteilles à la mer (Destination inconnue), par colis (Destination connue) et par point relais (Destination inconnue). Ils aimeraient avoir la possibilité de suivre ou localiser une bouteille.

Si vous souhaitez consulter plus précisément toutes les réponses à ce formulaire, vous pouvez consulter ce Google Sheet.

Après avoir analysé les réponses, j’ai pu identifier tout ce que je devais mettre dans mon site et dans quel ordre, en avant ou non.

Mes tops tasks :

• Envoyer une bouteille;

• Choisir une préférence entre une lettre ou un fichier vidéo/audio/texte via une clé USB à inclure dans la bouteille;

• Localiser une bouteille.

Mes tiny tasks :

• Choisir de faire ça soi-même ou via le site;

• Rédiger sa lettre de façon normal;

• Rédiger sa lettre à l’encre invisible;

• Faire une vidéo;

• Faire un message audio;

• Faire une photo;

• Rédiger un fichier texte;

• Acheter les matériaux nécessaires sous forme de kit;

• Parler des moyens de récupération des matériaux;

• Suivre un tuto sur comment écrire une lettre avec de l’encre invisible;

• Suivre un tuto sur comment préparer sa bouteille à la mer;

• Montrer où envoyer/déposer sa bouteille;

• Suivre/Localiser une bouteille.

Des modules techniques

Dans la production de notre PPU, trois modules techniques ou un ensemble complet nous étaient demandés. D’après moi, il était plus prudent d’en réaliser trois et au vu de la conception que j’avais de mon site avec mes tops tasks, cela correspondait parfaitement avec mes idées. Pour moi, mon site devait être diviser en plusieurs pages bien distinctes :

• Une page de présentation;

• Une page pour la création du message;

• Une page pour le kit;

• Une page pour la localisation;

• Une page “À propos”.

Parmis ces pages, trois idées de modules techniques se démarquaient donc :

1. La création du message papier (normal ou à l’encre invisible) ou virtuel (vocale / audio / texte / visuelle) à l’aide d’une clé USB;

2. La composition du kit personnalisable avec les éléments dont pourrait avoir besoin l’utilisateur (Système d’ajout (+1) ou diminution (-1) pour chaque élément);

3. La localisation des bouteilles et points relais.

Après validation auprès de mon professeur, Monsieur Thérasse, tel était donc mes trois modules techniques.

Par la suite avec le choix du nom de mon projet, j’ai eu l’idée de rajouter un petit bonus, un Konami code, où ce dernier, une fois activé, lancerai la musique « Message In A Bottle » de The Police en référence avec mon projet. Mes modules techniques en tête, il était temps de les dessiner un peu mieux et de commencer par ailleurs la production d’un prototype papier.

Des lettres, des mots et des phrases

Probablement un des morceaux les plus importants de mon site, la création de son contenu, est la tâche qui m’a demandée le plus de temps et d’attention. Choisir les bons mots, les bonnes formulations de phrases n’est pas une chose facile. Relecture après relecture, les phrases se formaient mais se ressemblaient parfois, c’est pour ça que j’ai passé également beaucoup de temps sur des sites pour trouver des synonymes à certains mots. Après plusieurs versions et plusieurs corrections de mes professeurs ou de ma famille, mon site prenait un peu plus forme.

Grâce à la rédaction de ce contenu, je me suis rendu compte que certaines choses n’étaient pas toujours très claires dans mon projet. Par exemple, la création d’un système de point relais pour les bouteilles, mon idée était assez vague. Puis un jour j’ai repensé à cette boîte aux livres qui se trouve dans mon village, et c’est ainsi que j’ai pensé que des boîtes à bouteilles pouvaient être intéressantes, afin que des inconnus déposent et récupèrent les bouteilles d’autres inconnus pour faire connaissance.

Une fois, mon contenu rédigé, je l’ai transformé en Markdown (Langage de balisage permettant de formater du texte brut de manière simple et hiérarchisé pour un rendu en HTML ou dans un autre format) afin d’observer et vérifier ma hiérarchie, mais également pour avoir déjà une base d’HTML.

Brand Identity

Ne sachant pas trop vers où aller dans la recherche d’un logo pour mon site, il me fallait d’abord un nom de projet. J’ai d’abord pisté des mots clés importants autour de mon thème comme bouteille, message, papier, correspondance. Je les ai ensuite traduits en anglais : bottle, message, paper, match. J’ai essayé de les imbriquer et les associer ensemble mais je ne trouvais rien de concluant…

Ensuite, j’ai repensé à une musique de The Police que je voulais intégrer dans mon projet sous forme de konami code. Message in a bottle, c’était intéressant comme nom mais beaucoup trop long. C’est là que m’est venu l’idée de reprendre les premières lettres de chaque mot, ce qui donnait donc MIAB pour le titre de cette musique. Malheureusement, en tapant MIAB sur Internet, l’idée était déjà prise…

Je me suis alors dit que j’allais tester en français, et je suis tombé sur deux traductions : message dans une bouteille (MDUB) et bouteille à la mer (BALM). J’ai choisi BALM car il sonnait mieux et aucun site n’avait repris l’idée pour une thématique comme la mienne.

Une fois mon nom trouvé, j’ai ouvert Adobe Illustrator et j’ai commencé à vectoriser mes quelques idées, ainsi que tester mes trois petits croquis griffonnés pendant mes recherches.

Après avoir réaliser ces quelques tests, j’ai pu aboutir sur quelque chose. Je trouvais intéressant de travailler sur la forme d’une bouteille et j’ai donc repris ses contours. Ensuite, je l’ai divisé comme pour dire qu’il manquait quelque chose… Comme par exemple quelque chose qu’il fallait introduire dedans. Cela me faisait également penser aux bouteilles qui flottent sur l’eau où nous n’en voyons que la moitié.

Puis, j’ai ajouté cette forme dans un carré. L’idée était bien mais rendait le futur logo sérieux et un peu agressif. Alors je l’ai mis dans un cercle. Mais en regardant ce logo, j’avais l’impression qu’il manquait quelques chose. Donc j’ai tracé trois petites barres pour représenter le message à l’intérieur, ainsi cela lui donnait également une espèce de mouvement.

Pour finir, j’ai arrondi tous les bords et contours du message et de la bouteille pour garder cette aspect non agressif et insolite.

Du côté des couleurs, j’ai repris mes mots clés et quelques idées autour de mon thème afin de rechercher les couleurs idéales. J’ai donc pris :

• Du bleu foncé pour le coté océan, mer, mais aussi pour représenter le calme, la sérénité et la sensibilité. Que j’utiliserai pour mon texte;

• Du blanc crème pour le côté feuille de papier et l’innocence. Que j’utiliserai pour mon background.

Au début, j’avais choisi un bleu un peu trop foncé et en discutant avec un de mes professeurs, j’ai décidé de l’éclaircir un peu.

Bon j’avais ces deux couleurs et j’étais satisfait, mais j’avais quand même l’impression qu’il manquait quelques chose. Alors en discutant avec les copains Auréliane, Tom, Camille, Mélih, Nathan, William, Jérôme, Elie et les autres, ils m’ont conseillé de mettre une couleur pour donner du contraste. Pour cela, je me suis rendu sur Adobe Color et j’ai recherché une couleur complémentaire à mon bleu et je suis tombé sur une couleur orange-brun.

Après avoir trouvé ces trois couleurs, j’ai également pris un bleu et un gris clair que j’utiliserai plus tard si j’en ressens le besoin.

Afin de confirmer ces couleurs, je me suis rendu sur le site Colorable afin de vérifier que la couleur de mon texte irait avec mon fond. Si le résultat avait au moins AA, c’était bon.

Voice & Tones

À travers des adjectifs, j’ai réussi à trouver la personnalité de mon PPU :

• Avenant;

• Communicant;

• Sympathique.

C’est grâce à cette dernière que j’ai réussi à trouver la façon de formuler les mots dans mon contenu. Mais il fallait également que je trouve un ton à ces formulations de mots et phrases, comme :

• Gentil;

• Informatif/précis lorsqu’on demande une action.

Avec mon ton et ces formulations, je pouvais savoir comment communiquer. Gentil et avenant dans mon texte mais une fois qu’une action se présente devenir plus précis et informatif.

Code Style Guide

Pour avoir un code propre, j’ai utilisé la méthode BEM pour éviter de reprendre plusieurs fois des éléments dans mon CSS, j’ai également veillé à ce que mon indentation soit parfait pour avoir un code lisible.

De nouveaux prototypes

Il me fallait également avancer sur la production de mon site et avoir un visuel à montrer à tous mes professeurs afin d’avoir leurs avis. Pour se faire, j’ai repris mon rythme verticale sur InVision Studio et mon prototype papier pour créer un premier prototype InVision Studio de mes 5 pages. (Prototype 1 : Mobile / Desktop).

Petit problème avec ce prototype, je n’avais pas encore mis de couleurs. Cela aurait pu fonctionner mais pour mon projet, je voulais un peu de couleur et de vie dans tout cela. J’ai alors repris mon bleu foncé que j’ai mis sur mon texte et mon blanc crème que j’ai mis en fond. (Prototype 2 : Mobile / Desktop).

En discutant avec mes amis cités ci-dessus, j’ai ajouté la couleur de contraste sur tous les éléments interactifs (Liens, boutons, logo, formulaire et etc), ce qui a donné un troisième prototype. (Prototype 3 : Mobile / Desktop).

Ensuite, j’ai essayé d'insérer des pictogrammes sur certains éléments de ma page d’accueil comme c’était prévu de base dans mon prototype papier mais j’ai abandonné l’idée ne trouvant pas cela intéressant. (Prototype 4 : Mobile / Desktop).

En discutant avec mon professeur Monsieur Thronte, celui-ci me conseilla d’adoucir mon bleu foncé, d’éviter de mettre ma couleur de contraste partout et de peut-être aligner les éléments de mon kit sur deux lignes verticales plutôt qu’une car cela rendait la page énorme. (Prototype 5 : Mobile / Desktop).

Pour finir, j’ai montré ce cinquième prototype à d’autres professeurs qui m’ont conseillé de faire quelques ajustements comme les espacements de certaines éléments, la taille d’autres éléments, mettre une ligne sous les liens, changer la couleur de mon logo et etc… Ce qui a donné mon prototype final ! (Prototype 6 : Mobile / Desktop).

Le final codé

La phase finale ! Coder mon site pour finaliser ce projet et TFA.

Premièrement, j’ai commencé par coder mes modules techniques. Probablement la chose qui m’effrayait le plus, Monsieur Thérasse pouvait en témoigner lors de la validation de ces modules. Mon problème, c’est que je ne suis pas encore à l’aise avec le Javascript. Heureusement depuis le début de l’année, nous avons fait du parcours et vu de nombreuses choses durant le cours de JS. Comme je garde une trace de toutes ces réalisations, je m’en suis un peu servi dans certains de mes modules. Bien sûr Internet était également présent pour m’aider à trouver des tutos pour réaliser certaines choses ou à solutionner certains problèmes. Evidemment, je ne me suis pas approprié ces créations et j’ai mis des copyrights dans mes fichiers JS afin de montrer d’où provenait ces aides. Pas à pas, j’ai commencé à réaliser ces modules techniques…

Quand cela bloquait, je mettais cela de côté et travaillais sur autre chose en attendant. Après, je prenais rendez-vous avec Monsieur Thérasse ou Monsieur Terranova (encore merci à lui de s’être mis à notre disposition même si nous n’avions plus cours avec lui). Dès que cela fonctionnait, dès que j’avançais un peu plus dans la réalisation de mes idées, j’étais heureux. C’est surement la chose que je préfère le plus dans le code et dans le travail du Web: la joie que l’on ressent quand quelques chose fonctionne ! Cela nous montre que nous pouvons réussir à réaliser ces choses. Et c’est ainsi que j’ai finalisé ces modules.

Deuxièmement, j’ai repris mon contenu en Markdown et je l’ai converti en HTML pour me faire gagner du temps.

Puis j’ai inséré le code de mes modules techniques. Une fois ceci fait, j’ai ajouté des classes à tous mes titres, paragraphes, boutons… afin d’utiliser la méthode BEM et débuter sereinement le CSS. Pour finir, commencer à mettre du style. C’est toujours agréable d’avoir son prototype à côté de soi et mettre du style pour voir son projet à l’identique et le finaliser pour le présenter plus tard. Bienvenue sur mon site et mes slides !