Project
Academic Pair Project
Stack
Heretto (DITA)
HTML/CSS (Visual Studio Code)
Adobe Color
Scope
Structured authoring
Multilingual terminology
Language
French
English
Spanish
Duration
1 month
Year
2026
Project overview
Context
This two-person academic project involved creating an illustrated multilingual glossary and publishing it as a structured HTML page. We developed Mon Balcon Potager, a beginner-friendly resource explaining the essential vocabulary of urban gardening in French, English and Spanish.
Objectives
Make gardening terminology accessible to beginners
Produce consistent content in three languages
Structure reusable content in Heretto
Publish a clear and illustrated HTML resource.
Process description
Tools Used
Heretto was used to structure the content in DITA and transform it into HTML. Visual Studio Code was used to customise the CSS and refine the presentation of the generated page.
Adobe Color was used to define the colour palette and build a consistent visual identity for the project.
Methodology
We defined a beginner audience and selected 18 practical terms related to balcony gardening.
For each entry, we added French, English and Spanish equivalents, an accessible definition, a source and an illustration. The content was organised into a concept topic, a reference topic and a reflective topic.
We also defined a common visual direction early in the project. Adobe Color helped us choose and harmonise the green, pale yellow and other soft tones used throughout the website.
Work Organisation
I created the concept topic introducing the project and its target audience, while the glossary was developed jointly with my teammate.
I also proposed the visual identity and graphic guidelines used for the final website, including the colour palette developed with Adobe Color.
My Role
Structured Content Author
I created the Heretto concept topic introducing balcony gardening, the target audience and the purpose of the glossary.
Glossary Co-Author
I co-created the illustrated trilingual glossary, including term selection, definitions, translations and visual content.
Visual Identity Designer
I proposed the website’s graphic identity, including the colour palette, visual style and overall presentation. I used Adobe Color to test colour combinations and define a soft, nature-inspired palette consistent with the balcony gardening theme.
Final deliverables
Structured Multilingual Glossary Website | Introduction Topic · Illustrated Trilingual Glossary · Reflective Summary
A web page generated from Heretto and customised with CSS, combining an introduction to urban balcony gardening, an illustrated trilingual glossary and a reflective project summary.
Introduction
A short introduction to balcony gardening, its main benefits, and the purpose of the glossary in helping users understand key terms and concepts.
Here is an extract from the introduction to the balcony gardening concept:
Illustrated Glossary
The glossary brings together eighteen key balcony-gardening terms in French, English and Spanish. Each entry includes a short definition and an illustration to make the vocabulary easier to understand and remember.
Discover a selection of entries from the urban gardening glossary:
Reflective Summary
A short review of the collaborative process, tool choices, strengths and possible improvements.
Here is an extract from the reflexive summary:
Here is a selection of illustrations from the glossary:
Critical reflections - Réflexion critique
Acquis
Ce projet m’a permis de mieux comprendre la chaîne de publication structurée, depuis la création des topics dans Heretto jusqu’à leur transformation en HTML.
J’ai aussi appris à construire un glossaire multilingue en tenant compte à la fois de la précision terminologique, du public cible et de la cohérence entre les trois langues. Il fallait que les termes restent compréhensibles pour des débutants, sans devenir trop vagues ou trop simplifiés.
Le projet m’a également permis de mieux voir l’intérêt d’une organisation modulaire du contenu. Même si le glossaire a finalement été regroupé dans un même ensemble, le travail dans Heretto m’a aidée à comprendre comment des contenus séparés peuvent être organisés, réutilisés et publiés ensemble.
Pour conclure, j’ai mieux compris le lien entre contenu structuré et rendu final. Le passage par le HTML et le CSS m’a montré qu’un contenu peut être bien organisé dans l’outil, mais que sa présentation demande encore un vrai travail d’ajustement.
Difficultés rencontrées
La principale difficulté a concerné la personnalisation du résultat généré par Heretto. L’intégration du CSS et l’harmonisation de la mise en page ont demandé plusieurs ajustements.
La production à deux nécessitait également de maintenir un ton, une structure et un niveau de précision homogènes entre les différentes contributions.
Choix méthodologiques
Nous avons choisi un sujet concret et visuel, adapté à un public débutant. Les termes ont été classés par ordre alphabétique et illustrés afin de faciliter leur identification.
Les définitions ont volontairement été rédigées dans un style simple et engageant, plutôt que dans un registre excessivement technique.
Compétences mobilisées
Rédaction structurée et DITA
J’ai créé le topic concept dans Heretto afin d’introduire le domaine, le public cible et l’objectif du glossaire.
Terminologie multilingue
J’ai participé à la conception conjointe du glossaire, à la sélection des termes et à leur présentation en français, anglais et espagnol.
Conception graphique
J’ai proposé la charte graphique du site afin d’assurer une identité visuelle cohérente et adaptée au thème du jardinage urbain.
Pistes d’amélioration
Je définirais dès le départ une charte éditoriale et graphique commune afin de réduire le travail d’harmonisation final.
J’améliorerais également la navigation entre les sections, la validation du HTML, les métadonnées de langue et l’accessibilité du tableau. Une recherche ou un filtre alphabétique faciliterait enfin la consultation du glossaire.