Objectif-Justice
Objectif-Justice est un site conçu pour rendre la justice française plus compréhensible et défend une idée simple mais essentielle : Comprendre la Justice, simplement.
J’ai assuré la refonte complète du site, en repensant à la fois son identité graphique et son intégration technique. L’objectif : proposer une interface claire, élégante et cohérente avec les valeurs portées par le contenu : accessibilité, simplicité…
Couleur et accessibilité
Lors d’une précédente version, le bleu avait été défini comme couleur identitaire du site. Dans cette version, cette teinte a été ajustée afin de répondre aux exigences d’accessibilité, notamment pour garantir un bon contraste. Une déclinaison spécifique du bleu a également été créée pour la version sombre du site.
Identité
Site web
Accessibilité / Ratio des contrastes
Logotype et pictogramme
L’identité visuelle s’appuie sur un logo que j’avais déjà réalisé lors d’une version antérieure du site.
une interprétation épurée de la balance de la justice, réduite à l’essentiel jusqu’à évoquer la forme d’une accolade. Ce symbole simple et graphique incarne à la fois l’idée d’équilibre et l’élégance d’un langage visuel accessible.
Le logo utilise la police Roboto Slab, également choisie pour les textes longs du site afin d’assurer une cohérence visuelle.
Interfaces
La phase de design a été entièrement réalisée sur Figma, avec un soin particulier apporté à la structure, à la hiérarchie de l’information et à la lisibilité de l’interface. Les maquettes ont été conçues pour s’adapter naturellement aux différents devices, en intégrant dès le départ une double version claire et sombre, compatible avec les préférences système des utilisateurs. Une attention particulière a été portée aux contrastes, à la lisibilité des couleurs et à la clarté des composants, afin d’assurer une expérience accessible et confortable pour tous les profils de lecture.
Je vous propose de jeter un œil directement au projet en ligne : il y a pas mal d’infos, et c’est sûrement plus sympa que de juste regarder des captures. Le projet continue d’évoluer au fil des retours qu’on reçoit, donc n’hésitez pas à me dire ce que vous en pensez !
Les retours et les données associées seront utilisés uniquement dans le but d’améliorer le site. Ils ne seront partagés qu’entre le créateur du site et moi-même.
Iconographie
Les pictogrammes, réalisés sur Affinity Designer, ont été conçus pour illustrer les grandes thématiques juridiques du site : droit pénal, droit du travail, justice des mineurs, etc. Il s’agissait de traduire des concepts parfois abstraits en formes simples et lisibles et évocateur.
Imagerie «low tech»
L’imagerie utilisée pour ce site adopte un style low-tech, avec une palette très réduite de couleurs. Ce choix esthétique permet de conserver la clarté du sujet sans le dénaturer, tout en assurant une légèreté maximale pour le site. Résultat : un temps de chargement réduit et une expérience optimisée, même sur des connexions limitées.
Les illustrations de catégories sont d’abord travaillées sous Affinity Photo pour un rendu optimisé. J’ai ensuite mis en place une solution alternative via Figma, utilisée notamment pour la création de PDF LinkedIn.
Cette approche présente quelques limites (détourage et compression moins performants), mais elle permet, dans certains cas, d’offrir une plus grande autonomie aux contributeurs éditoriaux, notamment lorsque le sujet visuel est déjà isolé.
Mettre en place cette imagerie low-tech prend un peu de temps, et elle est surtout prévue pour les catégories. Les articles n’en profitent pas encore, notamment dans les versions précédentes. Il a donc fallu prendre cette contrainte en compte lors de l’intégration, et trouver des solutions, notamment avec des filtres, pour éviter de trop dénaturer l’interface.
Intégration et « Developpement »
Le site repose sur une installation WordPress entièrement personnalisée, développée en HTML, CSS, PHP et JavaScript. Le thème a été codé sur mesure, avec une structure souple basée sur CSS Grid et Flexbox, et l’utilisation de variables CSS pour une gestion cohérente des couleurs, des espacements et des modes d’affichage.
L’ensemble est responsive et s’adapte aux préférences système grâce à un thème clair et un thème sombre intégrés nativement. J’ai également accordé une attention particulière à l’accessibilité — structure sémantique, contraste, navigation clavier — en appliquant au mieux les bonnes pratiques selon mes connaissances actuelles. Le code reste pensé comme une base évolutive, appelée à s’améliorer au fil de mes recherches, de mes expérimentations et de ma montée en compétences.
Si vous avez des retours liés au développement ou à l’accessibilité du projet, je suis preneur. N’hésitez pas à me contacter toute remarque constructive est appréciée et peut contribuer à faire évoluer le projet.
Les retours et les données associées seront utilisés uniquement dans le but d’améliorer le site. Ils ne seront partagés qu’entre le créateur du site et moi-même.
PDF LinkedIn
Le créateur du site partage parfois des PDF pédagogiques sur LinkedIn, notamment autour de la jurisprudence. Pour l’aider, j’ai conçu une trame sur Figma, facile à adapter selon ses contenus.
J’ai mis à disposition une bibliothèque d’images et d’icônes, ainsi que des composants simples à modifier. Je l’ai aussi formé à l’outil pour qu’il puisse être autonome, tout en restant disponible si besoin.
Les retours et les données associées seront utilisés uniquement dans le but d’améliorer le site. Ils ne seront partagés qu’entre le créateur du site et moi-même.
Rendu du PDF
Le lecteur PDF intégré de LinkedIn rend mieux hommage à ces contenus pédagogiques