BeeUs
<LE CONCEPT>
BeeUs
BeeUs est un projet de plateforme sociale pensée pour faciliter les rencontres et l’intégration des étudiants dans leur ville. Inspiré par les besoins concrets de la vie étudiante, le site propose une expérience fluide et accessible, conçue avec Astro, React, TailwindCSS et PocketBase.
Contexte
BeeUs est mon projet de second semestre en groupe en BUT MMI. Il s’agit d’une plateforme web imaginée pour proposer des fonctionnalités originales, avec pour objectif de créer une expérience sociale innovante centrée sur les étudiants.
Pourquoi ?
Nous avons choisi ce projet car, en tant qu’étudiants, nous avons nous-mêmes connu l’arrivée dans une nouvelle ville sans repères. Cette expérience nous a permis de nous mettre dans la peau de nos futurs utilisateurs et de donner encore plus de sens à notre travail.
<LE DESIGN>
Moodboard.exe
Fonts.exe
H1
Red Hat Display
H2
Sofia Sans
H3
Sofia Sans
Body
Poppins
Nous avons fait le choix d’utiliser Red Hat Display pour les titres principaux afin de donner du caractère et de la présence à l’identité de BeeUs. Pour les sous-titres, nous avons retenu Poppins, une typographie moderne et polyvalente qui crée un bon équilibre visuel. Enfin, nous avons choisi d’utiliser Montserrat pour le corps de texte qui garantit une lecture fluide et claire, renforçant l’accessibilité et la cohérence du projet.
Palette.exe
Nous avons fait le choix d’associer des teintes sobres pour assurer une bonne lisibilité et mettre en valeur le contenu, à des couleurs vives comme le bleu, le violet, le rose et le jaune pour refléter l’énergie et la convivialité de BeeUs. Cet équilibre permet de renforcer la clarté fonctionnelle tout en installant une atmosphère dynamique et sociale, fidèle à l’esprit du projet.
<LE LOGO>
Essais
Logo
Nous sommes assez rapidement venus à l’idée d’un symbole rappelant une ruche, en lien direct avec le nom BeeUs et l’univers des abeilles. Ce choix nous a permis de représenter visuellement l’idée de communauté, de connexion et de solidarité entre étudiants. Après plusieurs essais, nous avons retenu un design géométrique et épuré représentant une alvéole, à la fois moderne, lisible et facilement déclinable, qui traduit l’identité sociale et collaborative du projet.
<LA MAQUETTE>
Points clés du design
BeeUs est un projet de plateforme sociale pensée pour faciliter les rencontres et l’intégration des étudiants dans leur ville. Inspiré par les besoins concrets de la vie étudiante, le site propose une expérience fluide et accessible, conçue avec Astro, React, TailwindCSS et PocketBase.
Accessibilité
Pensée dès le départ pour garantir la même expérience sur tous les supports.
Responsivité
Optimisée pour tous les supports avec une expérience cohérente.
<LE DÉVELOPPEMENT>
JavaScript
TypeScript
React
Astro
Tailwind CSS
Node.js
PocketBase
Contraintes
Pour ce projet, nous devions travailler avec le framework Astro. Nous pouvions utiliser React, non pas comme framework mais comme librairie, afin d’ajouter de l’interactivité sans gérer le rendu serveur. Le site devait être entièrement responsive sur tous les supports et respecter les règles de la RGPD, ce qui a orienté nos choix techniques et de conception.
Approche
Nous avons travaillé avec Astro en framework et utilisé React en librairie pour l’interactivité, en veillant à garder un code clair et bien structuré. L’un des points essentiels du développement a été d’optimiser le site aussi bien pour mobile que pour desktop, afin d’assurer une expérience fluide et accessible sur tous les supports.
Apprentissage
Ce projet m’a permis de travailler avec Astro et d’explorer l’usage de React pour l’interactivité. J’ai appris à gérer une base de données conséquente comprenant des comptes utilisateurs, des posts et des connexions, tout en assurant la sécurité et le respect de la RGPD. J’ai également renforcé mes compétences en responsivité, en référencement et en accessibilité.