cl_site-web_maj-2020_couvertures-15

Dictionnaire franco-japonais

#Identité visuelle, #Design et graphisme web, Wordpress 5, #Dev, #Intégration


En cours de réalisation

 

Découvrez dans cet article la présentation du dictionnaire franco-japonais que je suis actuellement en train de réaliser pour mon usage personnel. En effet, dans le cadre de mon apprentissage du japonais (à la fois en ligne et en classe, depuis septembre 2018), j’ai rapidement éprouvé le besoin de pouvoir répertorier les mots vus pendant les cours afin de les assimiler plus facilement.


Contexte

Dans cette optique, j’ai commencé par me procurer un répertoire papier mais le manque de place pour certaines lettres s’est vite fait ressentir. Il fallait donc que je trouve quelque chose de plus évolutif et de facilement modifiable.

Après réflexion, je me suis naturellement tournée vers le format numérique. C’est donc en m’inspirant de l’application que j’utilise pour réviser tous les jours que mon dictionnaire a commencé à prendre forme.

Actuellement, je travaille sur ce projet dès que j’ai un peu de temps de disponible. En effet, outre l’aspect usuel de l’outil dans le cadre de mes cours de japonais, me lancer dans la réalisation de ce dictionnaire numérique me permet de faire appel à mes compétences en matière de création graphique, de design et de développement web et donc de progresser en la matière.


De quoi ai-je besoin ?

Identification des fonctionnalités

J’ai identifié 4 actions de base en partant de la langue française, à savoir :

  • ajouter des mots,
  • accéder à la liste des mots classés par ordre alphabétique, avec une possibilité de consultation transversale par type de mot,
  • rechercher un mot,
  • réviser les mots de façon simple (sélection d’un mot français au hasard avec sélection de la bonne traduction japonaise parmi trois possibilités).

Ces fonctionnalités sont accessibles via un tableau de bord, uniquement consultable par identification. En effet, en tant qu’outil personnel et donc propre à son utilisateur, cela m’a paru logique de ne pas laisser le dictionnaire consultable publiquement. C’est pour cette raison que je réfléchis, en parallèle, à une page publique de présentation de l’outil.


Visuel de l'aperçu de la maquette du tableau du bord pour un ordinateur de bureau.
Aperçu de la maquette du tableau du bord pour un ordinateur de bureau. – 2019
Visuel de l'aperçu de la maquette du tableau du bord pour un ordinateur de bureau.
Extrait de la page publique en cours de maquettage (partie présentation du tableau de bord) – 2019

Choix techniques

Mon dictionnaire est en cours de développement sur une base WordPress 5 (PHP), à partir de laquelle j’enrichis et modifie les fonctionnalités de base. Cela me permet de créer un thème sur-mesure et adapté à mes besoins. À ce jour, la majorité du travail restant réside surtout dans la mise en forme (intégration CSS / HTML / JS) de certains éléments.


Identité visuelle, design et graphisme

Le logo de mon dictionnaire, que j’ai simplement nommé kuremansu no jisho (クレマンス の じしょ) ou « Le dictionnaire de Clémence » est la fusion d’un éventail (évocation du Japon, renforcée avec le rappel du drapeau) avec un livre (évocation du dictionnaire).

Le rouge s’est naturellement imposé comme la teinte dominante de l’outil, dans le but de rester cohérent avec le logo et donc, par extension, avec le drapeau japonais.

Afin d’apporter une touche ludique à mon dictionnaire, j’ai créé une mascotte que l’on peut retrouver un peu partout sur le site (pour notamment illustrer les 4 fonctionnalités) et sur le logo. Je l’ai conçue à partir du kanji 学 (gaku), qui signifie étudier / apprendre.


Visuel du logo du dictionnaire
Aperçu du logo du dictionnaire avec la mascotte – 2019
Visuel de la mascotte déclinée pour chacune des fonctionnalités principales
Aperçu des déclinaisons de la mascotte pour chacune des fonctionnalités principales
(de g. à dr. : ajouter un mot, sélectionner un mot au hasard, consulter la liste des mots, rechercher un mot) – 2019
Aperçu des déclinaisons de la mascotte - Gestion de la réponse (bonne/mauvaise) pour la révision d'un mot par la sélection aléatoire
Versions mobiles - 2019
Aperçu des déclinaisons de la mascotte – Gestion de la réponse (bonne/mauvaise) pour la révision d’un mot par la sélection aléatoire
Versions mobiles – 2019

Aperçus des pages

Voici quelques mises en situation des pages déjà développées, à la fois sur mobile, tablette et ordinateur de bureau. J’ajouterai les autres dès qu’elles seront terminées 😉 !


Aperçus responsives de la page-type liste - 2019
Aperçus responsives de la page-type ‘Liste’ – 2019

 Aperçus responsives de la page-type Mot - 2019
Aperçus responsives de la page-type ‘Mot’ – 2019

Aperçus responsives de la page Choisir un mot au hasard - 2019
Aperçus responsives de la page ‘Choisir un mot au hasard’ – 2019