Quote

Si je pouvais recréer le Web,
j’en ferais un endroit merveilleux,
ouvert,
étonnant,
de partage,
sans pub,

accessible à tous.


Compétences

Web & UI Design

Je garde les yeux grand ouverts sur les tendances graphiques et design du Web depuis mes débuts en 2003. Aujourd’hui je me spécialise dans le design simple et épuré, voire minimaliste. Je conçois des interfaces Web et mobile (UI), pour tablette et smartphone. L'expérience me permet également d'apporter ma contribution en UX design, ergonomie et storytelling.

Intégration

Je code dans les règles de l'art en HTML (inc. HTML5), CSS (inc. CSS3), SVG et JavaScript (Vanilla ou jQuery), avec ou sans framework ou préprocesseur CSS (SASS ou Less) et valide W3C. Je prends en compte la rétrocompatibilité nécessaire au projet en fonction de sa cible, ainsi que l'optimisation des performances. Je code également des sites Web responsives (RWD) ou dédiés (desktop, tablette, smartphone, etc.).

SEO & A11Y Qualité

Je mets une attention particulière à délivrer le fruit de mon travail dans la meilleure qualité en fonction des contraintes inhérentes au projet. Maintenabilité, On-page SEO, accessibilité (A11Y), sémantique (microdata), performance, compatibilité, etc.

Formation HTML & CSS

Je dispense des formations en HTML et CSS en école privée à des étudiants de niveaux débutant à avancé, et à des professionnels ayant des besoins d'apprentissage ou de mise à niveau en intégration optimisée.


Personnalité

/me

J’aime le design, le code, les deux ensemble, l’expérimentation, la trance progressive, le jazz, la musique en général, le cinéma, la science-fiction, le fantastique, les jeux vidéos, les casse-têtes, les Rubik's cubes, le tennis, le body pump, le roller, le ski, la randonnée, la pétanque, les bandes dessinées, les mangas, la japanimation, les jeux de société, les nouvelles technologies, les trucs de geek, le bon café…


Expérience professionnelle

Quelques projets récents…


Intégration du nouveau site d'Opquast, en collaboration avec le designer Francis Chouquet. Considérant l'activité et la cible, il y a un enjeu important en terme d'accessibilité et de qualité de code. J'ai mis un effort tout particulier sur l'ajout de schémas de données structurées.

  • Intégration rétrocompatible IE8
  • Optimisations SEO et d’accessibilité (microdata, ARIA, etc.)
  • Optimisations des rendus d’images (SVG, etc.)
  • Optimisations des performances
  • Optimisations responsives pour tablettes, smartphones et pour l'impression
Version desktop du site Opquast
Le site Opquast, version desktop
Version mobile du site Opquast
Le site Opquast, version mobile


Définition de la nouvelle communication du site de SudWeb, la conférence annuelle itinérante, avec la charte graphique préalablement définie. Concidérant la cible, la rétrocompatibilité ne sera pas un frein à l'innovation en développement front-end.

  • Direction artistique (wireframes, ergonomie, UX, etc.)
  • Définition du Web design
  • Intégration rétrocompatible IE11, notamment une grille CSS par flexbox
  • Optimisations SEO et d’accessibilité
  • Optimisations des rendus d’images (sprite SVG, etc.)
  • Optimisations des performances
  • Optimisations responsives pour tablettes et smartphones
Home 2016 du site SudWeb
Home 2016 du site SudWeb
Listing des conférences
Listing des conférences


Conception d'un extranet de gestion de clients, consultations et facturations à destination des ostéopathes. Ce projet a demandé beaucoup d'attention à rendre l'interface simple, rapide, et utilisable en mobilité.

  • Direction artistique (wireframes, ergonomie, UX, etc.)
  • Définition du Web design
  • Intégration rétrocompatible IE10
  • Définition d'un framework HTML et CSS adapté aux besoins client
  • Optimisations des rendus d’images (iconfont, SVG, etc.)
  • Optimisations des performances
  • Optimisations responsives pour tablettes et smartphones
Dossier patient de l'extranet Ostéo2ls
Dossier patient de l'extranet Osteo2ls
Ostéo2ls version mobile
Osteo2ls version mobile


Création de sites d'assurance pour une communication de niches. Au vu des cibles, les sites doivent être simples et efficaces, performants, responsives et rétrocompatibles.

  • Direction artistique (wireframes, ergonomie, etc.)
  • Définition des chartes graphiques et Web designs
  • Intégration rétrocompatible IE6 par dégradations graciseuses
  • Optimisations SEO et d’accessibilité (microdata, ARIA, etc.)
  • Optimisations des rendus d’images (SVG, etc.)
  • Optimisations des performances
  • Optimisations responsives pour tablettes et smartphones
Version desktop du site jeunes et étudiants à l'étranger de Mondial Assistance
Assurance pour jeunes expatriés
Version desktop du site business à l'étranger de Mondial Assistance
Assurance pour professionnels expatriés


Création du site one page du restaurant en responsive. Le challenge ici est d'afficher des photos de haute qualité, tout en ayant un site performant qui charge rapidement, surtout sur smartphone.

  • Direction artistique (wireframes, ergonomie, etc.)
  • Intégration rétrocompatible IE9
  • Optimisations SEO et d’accessibilité (microdata, ARIA, etc.)
  • Optimisations des rendus d’images (SVG, etc.)
  • Optimisations des performances
  • Optimisations responsives pour tablettes et smartphones
Version desktop du site un soir à Shibuya
Le site du restaurant version desktop
Version mobile du site un soir à Shibuya
Le site du restaurant version mobile


Intégration du site one page du restaurant en responsive. Au vu de la maquette fournie, les visuels doivent être optimisés pour les écrans Retina, mais aussi pour le chargement en mobilité, et retrocompatible pour IE8.

  • Intégration rétrocompatible IE8
  • Optimisations SEO et d’accessibilité (microdata, ARIA, etc.)
  • Optimisations des rendus d’images (SVG, etc.)
  • Optimisations des performances
  • Optimisations responsives pour tablettes et smartphones
Version desktop du site LittleRock Diner
Le site du restaurant version desktop
Version mobile du site LittleRock Diner
Le site du restaurant version mobile


Intervention sur la refonte des sites e-commerce Casino Drive et Casino Express. Compte tenu du client et de sa large cible, l’optimisation SEO et de l’accessibilité sont primordiales.

  • Intégration rétrocompatible IE7
  • Optimisations SEO et d’accessibilité
  • Optimisations des performances
  • Prise en compte du « service rendu » (affichage, navigation) pour tablettes


Direction artistique et création d’un design pour la fédération des parents d'élèves de l'enseignement public. La charte graphique doit être plus en accord avec la cible et les tendances graphiques et ergonomiques actuelles. Le design doit être prévu pour une plate-forme multi-site via le CMS Mura.

  • Propositions ergonomiques et d’organisation des contenus
  • Définition de la charte graphique et Web design
Accueil du site de la PEEP
Maquette de la page d'accueil
Bas de page du site de la PEEP
Maquette du menu et liste de news


Intervention sur la refonte graphique du site national de Century21, avec l’aide de deux confrères freelances, pour concevoir les interfaces et décliner toutes les pages nécessaires aux intégrateurs.

  • Propositions ergonomiques
  • Propositions et déclinaisons graphiques
Une page du site de Century21
Maquette de la page Ma sélection
Une autre page du site de Century21
Maquette de détail d'un département


Intervention sur la nouvelle stratégie mobilité de Cdiscount, en tant que prestataire externe par l'intermédiaire du groupe SQLI (SSII). Élaboration d’interfaces pour les applications iPhones, iPad et smartphones Android ; et également sur les sites e-commerce dédiés smartphones et tablettes.

  • Propositions ergonomiques
  • Propositions et déclinaisons graphiques
  • Conseils en performance
Version mobile du site Cdiscount
Le site version mobile
Version tablette du site Cdiscount
Le site version tablette

… et d'autres sites one-page, e-commerce, responsives ou dédiés, applications mobiles, etc.


Quote_2

Je veille à délivrer le fruit de mon travail
dans la meilleure qualité, et adapté au budget.


Article et conférences

Quelques articles, conférences et démonstrations…


À suivre

Twitter LinkedIn Facebook Google+ CodePen Spotify


Contactez-moi