Landing page

Vibely

Vibely est une startup visionnaire basée aux Etats-Unis. L’application permet aux influenceurs de développer leur communauté hors ligne en se rencontrant en face-à-face, à organiser des événements locaux et à se soutenir les uns les autres partout dans le monde.

Nos actions

Intégration d’une Landing page
Optimisation réactive du design, s’adapte à tout support tablette / mobile / ordinateur de bureau.

Quand Teri, le fondateur de Vibely est venu nous voir, le défi était très simple :

Tout d’abord : un design réalisé avec l’application Sketch (Mobile & Desktop) de la Landing page de l’application Vibely
Le défi : intégrer le design dans une page web optimisée et animée

Qu’est-ce que Sktech App ?Sktech est une boîte à outils de conception conçue pour vous aider à créer votre meilleure oeuvre – de vos premières idées jusqu’à l’oeuvre d’art finale.

1. Le challenge

Comprendre les besoins.

2. Les objectifs

Mettre en place des objectifs clairs.

La page Vibely devait être mise en ligne très rapidement. Il a fallu moins d’un jour et demi à Loïc pour transformer le design en une page web dynamique.Ensuite la dernière partie consistait à mettre des animations sur les différentes sections et à donner une sensation d’aération et de flottement.Nous avons utilisé animate.css pour créer des animations rapides et optimisées. Allez y jeter un œil, c’est génial !

Afin de créer cette page d’accueil optimisée, nous avons utilisé les technologie suivantes : Sass / Smacss – méthodologie BEM / modules NPM.Ques-ce que BEM ?La méthode BEM a été inventé chez Yandex pour développer des sites qui doivent être lancés rapidement et amintenus sur le long terme. Il permet de créer des composants d’interface extensibles et réutilisables. C’est une façon de coder le CSS : Block Element Modifier.

La méthodologie

Suivre la méthode.

4. Les solutions

Qu'est-ce que nous avons fait pour eux.

Dans les 48h qui ont suivi la réception du projet, Loïc a livré une première version de la Landing page du site.
Comme Vibely est une application mobile, la réactivité de la page était cruciale. Une autre journée entière a été consacrée à l’optimisation de la Landing page du site pour qu’elle soit optimale sur toutes les tailles d’écran.
Une bonne communication et une grande réactivité pour offrir, dans un délai très court, une Landing page entièrement réactive à tous les supports et optimisée en termes de taux de clics, tout en étant esthétique.

Les accompagnements

Télécharger la brochure

Ressources