Projets

Des projets

Sommaire des réalisations

Réalisations sur Illustrator

Reproductions de logos et d'illustrations vectorielles réalisées au cours de la formation.

Reproduction du logo Disney Babies
Reproduction du logo Disney Babies
Reproduction du logo Publicis
Reproduction du logo Publicis
Reproduction d'illustration de bébé Yoda
Reproduction d'illustration de bébé Yoda
Illustration de poules partant pour l'espace
Illustration de poules partant pour l'espace
Défi de Noël — illustration d'une boule de Noël
Défi de Noël — illustration d'une boule de Noël

Réalisations sur Photoshop

Colorisation, restauration de photos, montages et retouches.

Colorisation et restauration de photo
Colorisation et restauration de photo
Montage photo avec des citrons
Montage photo avec des citrons
Moodboard pour mon identité visuelle
Moodboard pour mon identité visuelle
Moodboard pour un site de diagnostiqueur immobilier
Moodboard pour un site de diagnostiqueur immobilier
Avant la retoucheAprès la retouche
Travail des visages sur Photoshop — avant / après

Quatre défis logo réalisés pour des commerces fictifs, de la présentation à la mise en situation.

Boucherie

Logo boucherie — présentation
Présentation du logo
Brief du défi logo boucherie
Brief résumé
Mockup logo boucherie
Mockup

Boulangerie

Logo boulangerie — présentation
Présentation du logo
Brief du défi logo boulangerie
Brief résumé
Mockup logo boulangerie
Mockup

Coiffeur

Logo coiffeur — présentation
Présentation du logo
Brief du défi logo coiffeur
Brief résumé
Mockup logo coiffeur
Mockup

Orthophonie

Logo orthophonie — présentation
Présentation du logo
Brief du défi logo orthophonie
Brief résumé
Mockup logo orthophonie
Mockup

Exercices web : du HTML au CSS

Exercices en HTML

Modèle de formulaire à obtenir
Résultat souhaité
Extrait de code HTML
Extrait de mon code HTML
Rendu du formulaire codé
Rendu de l'exercice

Exercices en CSS

Modèle de page à obtenir
Page à réaliser
Extrait de code CSS
Extrait de mon code CSS
Extrait de code HTML
Extrait de mon code HTML
Rendu vidéo de la page réalisée

Maquettes Figma

Exercice Figma « Maquette Bonjour. » — voir le fichier Figma.

Maquette à reproduire — version desktop
Maquette à reproduire — version desktop
Maquette à reproduire — version mobile
Maquette à reproduire — version mobile

Site web : MSP Salutem Domum

Site de la Maison de Santé Pluriprofessionnelle Salutem Domum, à Saint-Géniès-de-Malgoirès (Gard). Né comme projet d'examen de ma formation « Concepteur designer UI », il est aujourd'hui en ligne et utilisé par la MSP et ses patients.

Page d'accueil du site de la MSP Salutem Domum
Client
MSP Salutem Domum
Mon rôle
Conception et réalisation de A à Z
Outils
Figma, WordPress, Divi

Les enjeux

  • Expliquer simplement ce qu'est une MSP, ses missions de santé publique et ses protocoles de soins.
  • Aider les patients à trouver rapidement un professionnel et les infos pratiques (accès, contact, numéros utiles).
  • Permettre à l'équipe de publier ses actualités en autonomie (campagnes de dépistage, vaccination, prévention).
  • Rester lisible pour tous les publics, avec une barre d'outils d'accessibilité.

Ce qui a été réalisé

  • Arborescence
  • Maquettes
  • Annuaire des membres
  • Actualités
  • FAQ
  • Numéros utiles
  • Accessibilité
Voir le site en ligne (nouvel onglet)

Linktree sur-mesure

Ma page de liens personnelle, conçue dans Figma puis codée à la main en HTML et CSS, sans framework ni service payant. L'objectif n'était pas l'effet visuel, mais la qualité du code et le lien direct entre design system et CSS.

Linktree d'Alicia Cavallo — version desktop
Version desktop
Linktree d'Alicia Cavallo — version mobile
Version mobile
Type
Projet personnel
Outils
Figma, HTML, CSS, Prettier, Stylelint, GoatCounter

Les contraintes que je me suis fixées

  • Toutes les valeurs viennent de design tokens nommés comme les variables Figma (primitives → sémantiques).
  • Architecture CSS en @layer : aucun !important, aucun id dans le CSS, 3 niveaux de sélecteur maximum.
  • Classes BEM identiques aux composants Figma ; les variants ne changent que des variables.
  • Accessibilité : HTML sémantique, contrastes AA, focus visible, navigation clavier, prefers-reduced-motion.
  • Statistiques de visites et de clics sans cookies, donc sans bandeau de consentement.
Voir la page (nouvel onglet) Code sur GitHub (nouvel onglet) Maquette Figma (nouvel onglet)

Notices d'installation

Mise en page de notices d'installation de citernes souples lors de mon alternance en communication.

Type
Projet d'alternance
Outils
Illustrator, Word, Photoshop, Firefly

Les contraintes fixées

  • Le document doit être pratique et lisible y compris en impression noir et blanc.
  • L'identité de marque doit être respectée.
  • Les termes, visuels et étapes doivent permettre de comprendre comment fonctionne l'installation de la citerne et/ou de l'automate.
Voir la notice pour l'installation des citernes souples (nouvel onglet) Voir la notice pour l'installation de l'automate (nouvel onglet)