Ce billet est consacré à un nouveau projet web que nous avons réalisé au mois de mars : un projet de design web et de développement web pour Álvaro Vargas.
Dans une approche très axée storytelling, nous allons vous raconter tout le processus de création et de développement de ce site internet entièrement nouveau.
Il y a quelques semaines, Álvaro Vargas nous a contactés. À l’origine, il souhaitait des informations pour la conception d’un livre de recettes qui paraîtra prochainement.
Qui est Álvaro Vargas ?
Álvaro Vargas est un nutritionniste très actif, qui partage chaque jour du contenu sur la nutrition et la santé via les réseaux sociaux. Parfaitement à l’aise avec les médias et leur fonctionnement, il accorde une grande importance à sa présence en ligne et sait en tirer le meilleur parti pour se faire connaître.
Il possède des comptes Facebook, Instagram, publie des podcasts et anime une chaîne YouTube. Sur tous ces supports, il propose un contenu de qualité à destination des passionnés de nutrition et de bien-être. Il partage régulièrement des photos de ses plats, réalise des recettes sur YouTube et publie des articles sur son site personnel. Il est également l’auteur de plusieurs ouvrages sur le même thème.
Aujourd’hui, Álvaro franchit une nouvelle étape dans sa carrière en décidant de transmettre ses connaissances lors d’événements en présentiel. Pour commencer, il animera quelques ateliers à Barcelone et Madrid.
Après avoir validé ensemble la conception intérieure du livre de recettes, la discussion s’est poursuivie autour de ses projets et il nous a confié une mission enthousiasmante.
Pour soutenir sa démarche entrepreneuriale et promouvoir ses ateliers, il souhaitait un site web permettant aux internautes de s’inscrire facilement.
Au travail !
Avec cette demande, nous nous sommes mis à l’ouvrage au studio. Après plusieurs échanges pour bien cerner les attentes du projet, nous avions identifié la ligne graphique recherchée par Álvaro : quelque chose de frais, intuitif, direct, reflétant sa personnalité et ses ambitions professionnelles.
Nous avons donc commencé à travailler sur la proposition graphique destinée à Álvaro.
Ce fut l’un des projets les plus rafraîchissants sur lesquels nous avons travaillé récemment : un site innovant, sans contraintes ni limites créatives, car Álvaro est quelqu’un de très ouvert et il nous a fait confiance dès le départ. Nous avons soigné chaque détail et le résultat nous a enthousiasmés. Il est vrai qu’au début, nous doutions qu’Álvaro ose nous suivre dans nos choix, mais il nous a agréablement surpris en comprenant immédiatement l’orientation que nous souhaitions donner à son site web.
Pour le design graphique du site, nous avons analysé ses réseaux sociaux, ses livres et son blog afin de cerner précisément le style qui lui correspondrait le mieux.
Les points techniques que nous avons particulièrement valorisés dans ce projet sont les animations du site web, le choix des couleurs et la structuration de l’information.
Quels étaient nos objectifs ?
L’objectif était de concevoir un site web onepage, dynamique, intuitif, direct et très interactif.
L’utilisateur devait pouvoir parcourir le site rapidement et trouver toutes les informations nécessaires pour savoir si le cours l’intéresse et comment s’inscrire.
Le délai était court, car Álvaro Vargas souhaitait que le site soit en ligne début avril.
Pour cela, nous avons travaillé efficacement sur les points suivants :
- La palette de couleurs
- L’organisation de l’information
- Les animations
- Le menu
- Transmettre la vision et la mission d’Álvaro
- La passerelle de paiement
- Des supports personnalisés pour Álvaro
1. À propos de la palette de couleurs
Les couleurs choisies offrent un contraste marqué qui confère au design une forte stimulation visuelle, parfaitement adaptée à l’esprit onepage du site web. Ainsi, l’utilisateur est captivé dès son arrivée et reste absorbé jusqu’au bout du site, assimilant toutes les informations sans même s’en rendre compte.
2. À propos de la structuration de l’information
Nous avons également porté une attention particulière à la manière de présenter l’information : comme pour les couleurs, le regard saute d’un module à l’autre, évitant toute monotonie et incitant à poursuivre la visite.
3. Les animations
Le design du site web intègre plusieurs effets qui attirent l’attention de l’utilisateur et apportent le dynamisme nécessaire pour atteindre les objectifs fixés.
Par exemple, dans la section « Questions fréquentes », nous avons imaginé des animations ludiques : les yeux d’Álvaro suivent constamment le mouvement du curseur, et, en passant sur l’un des aliments en arrière-plan, celui-ci disparaît comme par magie… ou grâce à la programmation !
4. Le menu
Le site web propose un menu très original, horizontal, qui permet de naviguer à tout moment entre les différentes sections du site. De plus, la transition du menu, avec son effet de profondeur, le rend particulièrement agréable à utiliser.
5. Transmettre la vision et la mission d’Álvaro Vargas
Grâce aux points précédents et au contenu fourni par Álvaro, la mission et la vision d’Álvaro Vargas sont parfaitement mises en avant.
Une fois le design graphique du site web validé et l’accord d’Álvaro obtenu, nous sommes passés à la phase de développement.
6. La passerelle de paiement
Puisqu’il s’agissait d’un site web avec paiement en ligne, il était essentiel de garantir une sécurité optimale. Nous avons effectué tous les tests nécessaires et expliqué à Álvaro le fonctionnement de la passerelle de paiement, sans aucune difficulté.
En quelques semaines, le site web était déjà maquetté et développé. Tout était prêt pour le lancement, et c’est ce que nous avons fait.
7. Supports personnalisés pour le client 😉
En guise de bonus, nous avons préparé pour Álvaro des visuels à partager sur Instagram et Facebook, afin de promouvoir au mieux ses cours et maximiser l’impact du projet.
Nous savons qu’Álvaro a suscité l’intérêt dès le lancement, et que de nombreuses personnes n’ont pas hésité à réserver leur place à ses ateliers.
Toute l’équipe de JordiEnsenyatDisseny et CodeWebBarcelona lui souhaite beaucoup de succès dans cette nouvelle aventure, en espérant que la salle affiche complet !
Distinctions
Nous avons déjà été référencés sur plusieurs sites spécialisés présentant des réalisations web inspirantes, tels que :
http://www.csswinner.com/details/yo-s-nutrirme/11414
http://www.designnominees.com/sites/yo-s-nutrirme
https://onepagelove.com/yo-se-nutrirme
http://www.bestcss.in/user/detail/Yosenutrirme-5193
Le projet en direct
Si vous souhaitez en savoir plus sur ce projet et le découvrir en ligne, il vous suffit de suivre le lien vers son site web : www.yosenutrirme.com
