Design web & mobile

Nature Simple | TFA | Alexiane Dapsens d’Yvoir

L’histoire d’un Side Project…

Mes recherches, mes objectifs, mes problématiques et les méthodes de conception, d’illustration et de développement de mon projet, de près et en détail.

C’est un Side Project que j’ai créé en tant qu’étudiante en design Web en mettant en valeur mes compétences en design d’interface utilisateur et en développement.

Un sujet et un contenu

Sujet

En parcourant les différents documents à ma disposition, je me suis décidée à traiter un sujet bien précis : les bienfaits des huiles essentielles sur le côté psycho émotionnel. Cela paraît peut-être un peu abstrait, mais de très nombreuses observations ont été faites pour affirmer que les huiles essentielles peuvent agir sur notre système nerveux et nous aider à gérer nos émotions.

But de mon projet: rendre les informations relatives aux huiles essentielles accessibles aux personnes souhaitant se soigner naturellement, mais n’y connaissant rien.Me voilà avec une idée !

Un site explicatif donnant des informations cruciales à l’utilisation des huiles essentielles. Mon but étant, en plus de donner des informations générales sur les huiles essentielles agissant sur l’émotionnel, d’en donner des exemples. Ces derniers seront accompagnés des indications d’utilisation, les précautions à prendre et les bienfaits.

Contenu

En parcourant le cours d’aromathérapie qui a été mis à ma disposition, j’ai sélectionné les informations correspondant au projet que je voulais mener. Après une grande période de tri d’informations, organisation et remaniement, me voilà avec un contenu prêt à être mis en page.

J’ai tenté de mettre en place un structure aussi cohérente que possible. Je parle d’abord du stress : établir de quoi on parle quand on parle de stress, les différents stress existants et leurs différences.

Ensuite, j’aborde les réactions de l’organisme à ce stress. Pour ensuite, rentrer dans le vif du sujet et faire le lien entre le stress et les huiles essentielles, expliquer d’où elles viennent et en quoi elles peuvent aider. Je termine avec un index des huiles essentielles les plus utilisées.

Un aspect graphique

Moodboard

Tout commence avec un moodboard qui définit l’univers que je veux explorer avec ce projet.

Illustrations

Je me suis principalement concentrée sur les illustrations de huiles essentielles, car, c’est quand même le sujet principal de mon projet. Malgré tout, j’ai quand même passé pas mal de temps sur les trois autres illustrations des trois autres sections (stress, réaction de l’organisme et les bénéfices des huiles essentielles).

Design visuel

J’ai voulu lui donner un aspect graphique simple et aéré, parce que ma vision de la nature est légère mais affirmée. Après plusieurs essais de logos, je me suis décidée sur le logo correspondant à la vision que j’avais de l’interface que j’allais créer.

Pour les couleurs, mon choix a été assez vite fait, étant donné que j’avais une idée assez précise de l’interface que je voulais faire. Je me suis donc tournée vers des couleurs relativement neutres, avec une couleur plus « pep’s », le jaune, pour mettre en avant les illustrations.

Trouver des typographies sympas est une chose, mais, trouver un association correcte en est une autre. Après avoir fait une dizaine d’essais de combinaison, je me suis arrêtée sur deux typographies: la Varela et la Catamaran. Pourquoi ces deux typographies ? Elles sont toutes les deux arrondies et ont un contraste régulier.

Après de quelques recherches de wireframes, je créé un premier design, qui évoluera au fur et à mesure des suivis par les professeurs, des autres étudiants, et des modifications personnelles.

Un Design System

J’ai fait le choix de faire un Design System regroupant tous les éléments de mon design, ce qui me servira lorsque je créerai mon design visuel.

Des remises en question

Après avoir établit un premier design visuel, et des premières idée d’animations, j’ai essayé de récolter le plus d’avis extérieurs possibles pour améliorer mon travail. Évidemment, sur l’ensemble des pistes d’améliorations qui m’ont été proposées, toutes n’ont pas été appliquées.

Ces sont des choix que j’ai fait, de prendre en compte ou non la remarque, pour produire un travail le plus qualitatif possible.

Après les différents feedback que j’ai pu recevoir et les modifications appliquées, mon design visuel reste dans le même univers mais avec quelques améliorations, et surtout plus dynamique.

Du code

J’ai commencé à coder mon projet en mobile first.

L’un de mes défauts, est que je suis têtue. Mais c’est aussi une qualité ! Je savais exactement ce que je voulais faire, mais je savais aussi que mes connaissances en javascript n’étaient pas très grandes. Après des heures de recherches, de tests, d’abandons et de reprises, j’y suis arrivée ! J’ai réussi à mettre en place l’animation de ma navigation, ainsi que la progression de la page visible grâce à la navigation.

Étant donné que mon projet est assez riche en informations, et donc assez long, une barre de progression me semblait intéressante pour indiquer à l’utilisateur où il en était dans sa lecture. Cela m’a également permis d’apprendre un nouvel élément de javascript.

J’ai appris beaucoup de choses en javascript, et cela me motive à en apprendre plus.

L’animation SVG

Cela fait un moment que je voulais apprendre l’animation svg, mais n’en avait pas encore eu l’occasion jusqu’ici. J’ai donc entreprit de faire l’animation de l’illustration d’introduction. Ce fut aussi beaucoup de recherches (et de tris de code), mais le résultat correspond exactement à ce que je voulais.

Les tests

Après avoir fait tout ça, et vérifié que mon code était correct tant au niveau de la méthode BEM que de l’indentation, j’ai mis mon site une première fois en ligne. J’ai ensuite réquisitionné tous les téléphones, tablettes, et ordinateurs que j’ai pu, pour tester mon site et vérifier que tout était correct.

Évidemment, sur certains appareils, il y avait des problèmes de responsive que j’ai pu réglé assez facilement.

 

Conclusion

Je retiens de ces dernières semaines que c’est grâce aux tests et aux feedbacks des autres, que ce soit professeurs ou étudiants, qu’on peut arriver à quelque chose de bien. La remise en question est essentielle à l’amélioration.

Le TFA est certainement l’un des projet qui m’a demandé le plus d’efforts au niveau des illustrations et du contenu, parce que je partais d’une source plus que complète et riche en informations. Mais aussi celui sur lequel j’ai eu le plus envie de travailler, puisque le sujet m’intéressait particulièrement. Le projet correspond à la manière dont je voulais présenter ces informations.

     Projet au hasard