Couleur et accessibilité
Identité
Le bleu fait partie des éléments fondateurs de l’identité visuelle du projet.
Déjà présent dans une version précédente, il a été conservé comme couleur principale, car il contribue à l’image de confiance et de stabilité recherchée.
Son usage reste central dans la palette pour assurer une continuité dans la perception de la marque.
Site web
Pour cette nouvelle version du site, la teinte de bleu a été retravaillée afin de gagner en cohérence visuelle.
Une variante dédiée a été conçue pour le mode sombre, permettant de conserver la même signature graphique tout en respectant les spécificités de chaque mode d’affichage.
L’ensemble du design repose sur une palette épurée qui met en avant les contenus sans détourner l’attention.
Accessibilité
Les ajustements de couleurs ont été réalisés avec un objectif clair : garantir des contrastes suffisamment élevés pour offrir une lecture confortable dans toutes les conditions.
Le bleu principal a été recalibré afin de respecter les critères d’accessibilité, et chaque déclinaison a été testée pour maintenir une bonne lisibilité, que ce soit en mode clair ou sombre.
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.
Pictogramme
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.
Logotype
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.
- Histoire du site
- Suivant
- Comment ça marche ?
- C’est jugé
- Contact
- Ils parlent d’OJ
- J’apprends
- Juridictions étrangères
- Juridictions superieures
- Partenariat
- À propos
- Première instance matière administrative
- Première instance matière civile
- Première instance matière pénale
- Recherche
- Vers le haut
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.
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 « Développement »
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.
L’ensemble est responsive et s’adapte automatiquement aux préférences système grâce à un thème clair et un thème sombre intégrés. J’ai aussi veillé à l’accessibilité : structure sémantique, contraste, navigation clavier, et bonnes pratiques selon mes connaissances actuelles. Le code est pensé comme une base évolutive, amenée à s’améliorer au fil de mes recherches et expérimentations.
Si vous avez des retours sur le développement ou l’accessibilité, je suis preneur. Toute remarque constructive est la bienvenue et peut aider le projet à évoluer.
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 Figma facilement adaptable à ses contenus.
J’ai également fourni une bibliothèque d’images, d’icônes et de composants modulables. Je l’ai formé à l’outil pour qu’il puisse travailler en autonomie, 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.
