Skills : From Scratch | ui / ux design | high resolution screen | Front-end development (Bootstrap, MDL, jQuery, Twig, SASS) | Symfony 2 | Print design | Logo
Date : january - april 2016
Date : january - april 2016
Result : www.lifemotiv.net
Position : Web Designer Freelance
Lifemotiv is the platform of well-being in France. I was in collaboration with a back end developer to make this MVP (Minimum Valuable Product).
I started to make a competitive design benchmark. I've included the digital content sales platform in this benchmark. I proposed several graphic tracks. Based on the material design guidlines, I realized the models of the main screens (Home, Search page, Author page, parcours presentation page, content consumption pages, etc.) in three screen sizes: desktop, tablet and mobile. To do this, of course, I retouched each image to fit with the atmosphere of the website. I clipped some images to correspond with their position on the website.
-------
Lifemotiv est la plateforme de bien-être en France. J'était en collaboration avec un développeur Back end pour réaliser le MVP (Minimum Valuable Product) de cette plateforme.
Après un benchmark design de la concurrence et des plateforme de vente de contenu numérique, j'ai proposé plusieurs pistes graphiques. Partant sur le material design, j'ai réalisé les maquettes des écrans principaux (accueil, page de recherche, page d'auteur, page de présentation des parcours, pages de consommation de contenu, etc.) en trois tailles d'écrans : ordinateur de bureau, tablette et mobile. Pour ce faire, j'ai bien-sûr retouché chaque images pour qu'elles soient dans l'atmosphère du site ou qu'elles correspondent avec leur position dans le site (détourage de certaines images).
Hight resolution screen of the home page for desktop. As you can see, this page has been improved since this hight resolution screen, see the improvements on the website: lifemotiv.net.
-----
Maquette de la page d'accueil en version desktop. Vous remarquerez que cette page a évolué depuis la création de cette maquette graphique, voir sur le site lifemotiv.net.
Then, I've started the front-end development on Symfony2. So, I used Twig (the rendering template of Symfony2 as PHP), Sass (with Gulp to concat to css) and jQuery to animate or create some interactive elements.
-----
Ensuite, j'ai intégré les maquettes sur symfony2 en utilisant Twig (petit frère du PHP et surtout moteur de template de symfony2), Sass (avec Gulp pour la compilation en css) et jQuery pour les animations et certains éléments d'intéractions.
I've created many jQuery fonction to animation the website and improve the user experience. For example, on this page (above this text), the sidebar with CTA (call to action) follow the scroll to stay visible (they stop their progression when they arrived to a full width section: here, these sections are "avis" and "nous vous recommandons également"). Maybe you can understand better if you visite the website online: www.lifemotiv.net/partner-yoga.
-----
Création de plusieurs fonctions jQuery pour animer le site et améliorer l'expérience utilisateur. Par exemple, sur cette page, la sidebar contenant les CTA de conversion suivent le scroll pour toujours rester visible (ils s'arrêtent de descendre lorsque l'on atteint une section qui prend toute la largeur de l'écran : ici les sections "avis" ou "nous vous recommandons également"). Vous comprendrez peut être mieux en allant voir le site ici : www.lifemotiv.net/partner-yoga.
Design and front-end development of all secondary pages (signup / signin / checkout / password lost / CGU / Helps / my purchases / user profile / etc.)
-----
Design et intégration de toutes les pages annexes (inscription / connexion / paiements / mot de passe perdu / CGU / Aides / mes achats / profil utilisateur / etc.)
This platform is full responsive and workable with all browser (until IE 9)
-----
La plateforme est totalement responsive et fonctionne sur tous navigateurs (jusqu'à IE 9).
