Charte graphique et crédits

🔗Site web

Liste des personnes ayant contribué au développement du site web. Cette liste n’inclut pas les auteur·ice·s des articles postés dans la section blog.

  • Neil : développement (HTML/CSS), design, prototypage, création de contenus graphiques vectoriels, rédaction du contenu, import depuis l’ancien site web, développement logiciel (Rust) d’outils annexes et traduction.
  • Brume : retours UI/UX, relecture complète et création de contenus graphiques artistiques et vectoriels.
  • Alex : traduction et relecture de toutes les pages des services et de la page Charte graphique et crédits, contribution au développement (HTML/CSS).
  • Aldec : traduction et relecture des pages Présentation des activités, Ateliers et Stands.
  • Théo : traduction et relecture de la page d’accueil et de la page Activités/Conférences.
  • n2r : traduction de la page Association.
  • Denise : traduction de la page FAQ.

Le design de notre logo s’appuie sur celui d’une grue en origami. L’image de l’oiseau a été choisie dans le but d’évoquer l’envol, la liberté. Cela fait également écho au nom original de l’association, 42l (prononcez « quarante-deux z’ailes ») : les deux ailes d’un oiseau.

Il existe également en version alternative « contours », où les contours blancs sont renforcés et les couleurs sont retirées.

Logo

Notre logo est disponible en format SVG / version « contours ».

Nous utilisons aussi une version du logo avec le nom de notre association et notre slogan. Retrouvez également quelques variantes sans ombre, en noir sur blanc et avec le logo version contours :

Logo avec le nom de l’association

Variante sans ombre

Variante version noir sur blanc

Variante version contours

Variante version contours sans ombre

Variante version contours sans ombre noir sur blanc

🔗Bannière

Pour les réseaux sociaux et nos outils de communication, nous avons conçu une bannière avec plusieurs variantes :

Bannière avec le logo, le nom et le slogan de l’association

Bannière avec le logo et le nom de l’association

Bannière sans texte

Si vous avez besoin d’une version vectorielle ou en plus haute résolution, veuillez nous contacter.

🔗Police de caractères

Nous utilisons la police Contre-Aller, une version modifiée de la police Aller créée par Dalton Maag et publiée sous Aller Font License v1.00.

Cette version intègre une modification des caractères x, k et t (minuscules et majuscules) pour une meilleure lisibilité ainsi que le support des espaces insécables.

🔗Couleurs

Nous avons choisi d’utiliser un thème sombre pour le confort de lecture.

Contrairement à la version précédente du site où nous utilisions de nombreuses couleurs du logo, nous avons décidé de limiter notre nombre de couleurs à quelques teintes.

// Palette de bleus, teinte sur une partie de nos pages
$blue-2: #6EA2F4;
$blue-3: #3C80EC;
$blue-4: #1B66DB;
$blue-5: #1251B3;
$blue-6: #0B4092;
$blue-7: #063378;
$blue-8: #032862;

// Gris utilisé en couleur d’arrière-plan sur toutes nos pages
$dark-2: #28292b;

// Noir transparent utilisé pour foncer notre gris d’arrière-plan et
// créer un gris plus sombre, utilisé pour divers conteneurs sur la page
$dark-3: #00000042;

// Barre de navigation
$navbar-1: #9f2e45;
$navbar-2: #5d3067;

// Versions à contraste réduit pour un usage de ces teintes
// sur d’autres éléments de la page
$navbar-like-1: #972e49;
$navbar-like-2: #653063;
$magenta-navbar: #852f53;

// Couleur de nos textes et liens
$text: whitesmoke;
$link: #FF459C;

🔗CSS

Nous avons abandonné le framework CSS Bulma, que nous utilisions sur l’ancien site. Cette version dispose de feuilles CSS entièrement écrites à la main en Sass. Vous pouvez retrouver les sources ici.

🔗Moteur de rendu

Nous utilisons le générateur de sites statiques Zola pour générer nos pages à partir de modèles.

🔗Crédits des ressources graphiques

Liste des icônes et des diverses ressources graphiques utilisées sur notre site.

🔗Icônes

  • La plupart des icônes utilisées sur notre site, notamment dans la barre de navigation et la page d’accueil, proviennent de Tabler Icons.
  • Les icônes assets/svg/wrench.svg et assets/svg/mic.svg ont été créées par Online Web Fonts.
  • Les icônes de nos services proviennent généralement des logiciels assurant le fonctionnement de ces services (ex.: services Nextcloud, Git, Schémas, Nitter…). D’autres sont des images vectorielles que nous avons réalisées ou des sets d’émoticônes (ex.: services Liens, Forms…).
    • Ces icônes ont été modifiées par nos soins afin de correspondre à notre charte graphique.
  • Les icônes RSS, Twitter, PeerTube, Mastodon et le logo des CHATONS sont la propriété de leurs ayant-droits respectifs.

🔗Autres ressources

  • Les images vectorielles utilisées pour la section Activités proviennent de Undraw et ont été modifiées par nos soins pour correspondre à nos besoins.
  • Les portraits artistiques de nos membres sur la page Association ont été dessinés par Brume.
  • Le fond étoilé utilisé en arrière-plan sur toutes nos pages a été réalisé par Brume.