home icon

Retournez

Design & Développement Web

Website pour Ruah

Un site web réactif et accessible conçu pour connecter les organisations qui soutiennent les adolescents socialement vulnérables.

client icon
Ruah
tools icon
React ◦ TailwindCSS ◦ Figma
duration icon
2 Semaines

Produits Rendus

Donner vie aux idées, du concept à la création

    • Vidéo animée de présentation sur les réseaux sociaux
    • Système de conception UI/UX complet (Figma)
    • Site Web institutionnel entièrement réactif
  • Problèmes

    Identifier les problèmes fondamentaux et ce qui doit être résolu

    challenge icon

    Défi

    Comment puis-je concevoir et développer un produit numérique qui s'adresse à la fois aux organisations de travail social et aux adolescents vulnérables tout en équilibrant l'accessibilité, la crédibilité et l'identité originale de la marque ?

    Approche

    Le design stratégique en action

    Pourquoi

    Je souhaitais soutenir l'association en améliorant l'accès aux aides et ressources sociales avec mes compétences et les besoins de l'institution.

    Quoi

    Mon rôle s'est étendu du début à la fin, en tant que concepteur de sites Web et développeur frontend, j'étais également le responsable créatif de la vidéo d'animation d'introduction de la marque.

    Comment

    J'ai étudié les principes fondamentaux de la marque et j'ai démarré le projet à travers un processus de conception centré sur l'humain, en participant à différents processus comme le wireframing et le prototypage dans Figma, et le développement final dans React.

    Moodboard

    Wireframe

    Structure basse fidélité & disposition initiale

    Principes de Design

    shapes icon

    Stabilité. Pour ancrer le récit visuel principal de la marque sur différentes plateformes, le site web doit être cohérent avec ses éléments visuels clés.

    inclusiveness icon

    L'accessibilité avant tout. Le site web doit être accueillant et accessible à tous les utilisateurs potentiels.

    chemistry glass icon

    Design axée sur le mobile. L'appareil principal des jeunes est le téléphone portable ; cette approche répond donc mieux à leurs besoins.

    information icon

    Clarté visuelle et simplicité. L'utilisation de couleurs simples et audacieuses et de formes réduites améliore le contraste et réduit la fatigue oculaire.

    Galerie

    Réactivité du website sur des appareils mobiles

    Composants du website avec React

    Produit Final sur des ordinateurs

    Points à retenir du projet

    star icon

    Équilibre entre les besoins des utilisateurs selon les différents publics (adolescents vs institutions)

    megaphone icon

    Création d'un impact émotionnel grâce à des composants de conception

    check_mark icon

    Aucune identité de site Web pour établir la confiance avec les organisations partenaires ou les utilisateurs.

    Notes finales

    Ce projet m'a permis de comprendre le pouvoir de la technologie et du design dans le travail à impact social, tout en touchant un public sous-représenté en ligne. Il m'a également permis de développer différentes compétences techniques dans des domaines aussi variés que le développement, le design et l'animation.