À propos

Design Tools est un site qui regroupe plusieurs outils qu’on aurait besoin comme designers, avec une interface simple et facile à comprendre.

L’objectif de ce projet est de faire un side-project de notre choix qui permet de montrer nos compétences en web. C’est un projet personnel intéressant en vue d’obtenir un stage l’année prochaine et permettant d’être créatif.

Ce projet scolaire a été réalisé dans le cadre de mes études à la Haute École Albert Jacquard, option Design Web & Mobile.

Design Tools

Challenge

Challenge
Problème d'organisation d'outils (enregistrement dans un document word uniquement)

Dès la première présentation de l’atelier TFA, mes pistes de réflexion étaient redirigées vers les besoins radicaux et les problèmes que je rencontre souvent comme étudiant en design web & mobile, dans le but de créer quelques choses utiles pour moi, pour collègues, pour les futurs étudiants en cette option, pour tout le monde…

Beaucoup d’idées me traversent l’esprit mais à la suite d’une profonde méditation je voulais mettre fin à un probleme que je rencontre depuis longtemps c’est l’organisation des outils que j’utilise lors de la création des projets graphiques.

De cette idée a débuté un travail de recherches d’inspirations et le choix des meilleurs outils existant dans « la toile d’araignée mondiale » .

Recherches

Au cours de la phase de recherche, j’ai recolleté de nombreuses informations grâce à des entretiens avec des utilisateurs potontiels ; des Users journey ; top task & tiny task…

recherches

User Research

Le fond du projet commence alors à se dessiner plus clairement, et de là la partie User Research à commencée. Continuer à faire des entretien directement avec des gens était une tache impossible à cause de la crise sanitaire mondiale Covid-19, c’est pour cela j’ai crée un questionnaire sur en ligne pour recevoir des réponses à mes questions en restant à la maison.

 La recherche utilisateur est à distinguer du test utilisateur en ce sens qu’il s’agit d’une recherche ethnographique, qui porte sur l’étude des moeurs et des coutumes. Nous souhaitons apprendre à connaître nos utilisateurs comme des êtres humains évoluant dans un contexte culturel. Nous voulons comprendre comment et pourquoi ils se comportent comme ils le font. 

— Erika Hall, Brave New World

Toptask & Tinytask

Top task & Tiny task

Le fond du projet commence alors à se dessiner plus clairement, et de là la partie User Research à commencée. Continuer à faire des entretien directement avec des gens était une tache impossible à cause de la crise sanitaire mondiale Covid-19, c’est pour cela j’ai crée un questionnaire sur en ligne pour recevoir des réponses à mes questions en restant à la maison.

Prototypes papier & User journey

La meilleure méthode pour ressembler tous ces idées et avoir une réflexion sur l'identité visuel de mon projet était de réaliser des prototypes sur Balsamiques Wireframes, un outil très simple et facile à utiliser.

Grâce aux résultats des deux formulaires (User Research ;  Toptask), j'ai constaté que les utilisateurs potentiels de mon outil s'y attendent à une interface simple, facile à comprendre. Mon site est considéré comme une boîte à outils, donc il sera utiliser fréquemment.

Pour faire simple j'ai regoupé les outils sous neuf catégories et j'ai ajouter trois boutons sur la gauche qui servent à naviguer entre les différentes pages (outils ; favoris ; contribuer…). Pour savoir si tout ça est efficace ou pas j'ai entamé la partie User Journey.

Prototypes papier
Protorypes papier du projet

Couleurs principales

Palette de couleurs

La premiere impression que l’utilisateur aura sur mon application aura une grande influance dans sa décision de rester ou de fermer la page.

J’ai choisi donc des couleurs simples qui donnent un meilleur contraste et une meilleure lisibilité qui sont :

  • Le noir : qui s’associe facilement avec n’importe quelle couleur vive;
  • Le blanc : qui est la lumière pure et forme un contraste frappant avec le noir;
  • Les nuances de gris : cette teinte a cependant le mérite d'être douce, plutôt apaisante et calme;
  • Le bleu : comme couleur d'action et d'ambiance j'ai choisi le bleu qui s'associe bien avec toutes les couleurs choisies ci-dessus, et aussi car le bleu est symbole de vérité, comme l'eau limpide qui ne peut rien cacher.
Fonts utilisées pour le site sont Montserrat et Lora

Design

J'ai commencé à mettre au clair mon design sur Figma, j'ai consacré beaucoup de temps à cette étape et j'ai fait de mon mieux pour rendre l'expérience utilisateur plus agréable dans le but de rendre mon outil utiliser par le maximum de gens possible et de manière fréquente. Mon site est 100 % responsive, disponible donc pour toutes les tailles d'écrans.

Pour la version mobile, j'ai opté à utilisation d'un burger menu au lieu de la navigation en bas de la page, car avec cette dernière mon outil ressemblait plutôt à une application android. Le burger menu m'a permis de regrouper tous les boutons pour naviguer entre les pages, pour changer la langue…

La version desktop est plus confortable à l'utilisateur, on pourra facilement naviguer entre les pages, ouvrir le formulaire de contribution…

Design
Design réalisé sur Figma

Codes

Design
Fichier JSON qui regroupe tous les outils

À présent, le plus gros du travail restait à venir, coder. j’etais curieux d’utiliser Bulma qui est un framework gratuit, open source et modulaire. J’ai appris au fur et à mesure comment personnalisé les éléments pour le résultat final répond à mes attentes.

J’ai entamé ensuite la partie JavaScript et la réalisation des modules techniques (localStorage ; Json ; formulaire de contribution…). Malgré quelques problemes recontrer, c’était amusant de les résoudre de petit en petit et voir mon projet prendre la forme.

J'ai privilégié l'utilisation d'un fichier JSON pour la faciliter de la tâche de mise à jour des outils, si je voudrais ajouter un outil il suffit d'ajouter quelques lignes dans le fichier JSON et l'outil sera automatiquement charger dans le site sous sa catégorie.

Taches principales

Découvrir les outils

Une séléction des meilleurs outils de création graphiques regroupés sous 9 catégories.

Ajout aux favoris

Ajouter les outils que vous aimez le plus dans une liste de favoris et retrouvez les facilement.

Contribution

Aider les autres utilisateurs à connaitre un outil s'il n'est pas présent dans le site.

RÉSULTAT

Résultat
Résultat final du projet

Le projet touche à sa fin, 100 % responsive et disponible pour toutes les tailles d'écrans, il vous reste plus qu'à le tester en cliquant sur le bouton ci-dessosu. Et avant de finir je souhaite remercier tous mes profs qui sont toujours là pour nous aider à améliorer nos travaux et nous apprendre beaucoup de nouvelles choses.

Mes prochaines tâches seront d'ajouter plus d'outils et peut-être encore d'autres catégories ainsi que des animations CSS.

VIDÉO

Envoyer un Feed-back

Je serai ravis de connaître votre opinion sur ce travail

Envoyer