Créer un Site pour Agence de Voyage avec Figma

L'Équipe Alphorm
L'Équipe Alphorm Ajouter un commentaire 10e lecture en min

Dans cet article et après la découverte de Figma, nous avons exploré les éléments essentiels pour rendre notre projet de site web agence de voyage  Figma à la fois attrayant et fonctionnel. Découvrons comment ces fondations ont été établies.

Concept du Projet de Site Web pour Agence de Voyages avec Figma

Le problème posé ici, c’est que notre site web d’agence de voyages Figma doit attirer un maximum de clients et pour garantir une meilleure visibilité sur internet nous devons répondre aux 4 critères suivants afin de réussir notre projet  :

Une barre de recherche

Image montrant une barre de recherche intégrée dans un site d'agence de voyage de Figma
Barre de recherche dans un site web d'agence de voyage de Figma

Cela permettra aux clients de trouver leurs voyages ou destinations de rêves rapidement avec des filtres comme la destination, la ville de départ, la date et le nombre de personnes pour plus de précision dans les recherches.

Les offres spéciales

Offre spéciale mise en avant dans un design sur un site web d'agence de voyage de Figma
Offre spéciale dans un un site web d'agence de voyage de Figma

L’idée, c’est d’attirer les visiteurs à vouloir réserver sans perdre de temps, car les offres spéciales peuvent expirer avec le temps.

Les offres promotionnelles

Vue d'une offre promotionnelle dans un site web d'agence de voyage de Figma
Offre promotionnelle mise en avant sur un site web d'agence de voyage de Figma

Comme son nom l’indique, il permettra de voir les différentes promotions disponibles pour les voyages.

Une vidéo

Illustration d'une intégration vidéo sur site web d'agence de voyage de Figma
Vidéo intégrée dans une interface de site web agence de voyage Figma

Cette vidéo contiendra une présentation de l’entreprise ainsi que des retours en images sur les voyages qu’elle a déjà organisés.

Vous devez maintenant avoir l’idée du projet  de site web des agences de voyages Figma que nous allons réaliser et comme tout bon projet qui se respecte il est important de faire une analyse concurrentielle pour voir ce que les autres agences de voyages proposent.

Analyse Concurrentielle des Sites Web d'Agences de Voyages

À présent, nous allons comparer les concepts que nous avons imaginés avec d’autres sites web des agences de voyages Figma pour voir ce que la concurrence propose sur le marché.

Taper juste agence de voyages dans votre navigateur et visiter les sites que vous voulez. Pour ma part, je vais prendre les exemples suivants :

Étude de Cas: Le Site Web de Promovacances

Pour ce premier site web, nous retrouvons tous les fonctionnalités qu’on a imaginées pour notre projet d’agence de voyage Figma:

  • la barre de recherche
Illustration de la barre de recherche sur un site web d'agence de voyage de Figma
Détail de la barre de recherche avec un site d'agence de voyage Figma
  • les offres promotionnelles
Offres spéciales présentées dans un site web d'agence de voyage Figma
Offres spéciales conçues avec Figma
  • les offres spéciales
Design d'offres promotionnelles dans un site d'agence de voyage avec Figma
Offres promotionnelles en design Figma

Examen du Site Web de Selectour

Pour ce site d’agence de voyage de Figma aussi nous retrouvons 2 des concepts que nous avons posés :

  • La barre de recherche
Deuxième vue de la barre de recherche de site d'agence de voyage Figma
Autre perspective de la barre de recherche
  • les offres promotionnelles

 

Offres promotionnelles révisées via Figma
Mise à jour des offres promotionnelles

Par contre, on ne retrouve pas une section pour les offres spéciales pour des voyages dans l’immédiat.

Synthèse des Meilleures Pratiques des Agences de Voyages en Ligne

Pour cette analyse, nous pouvons noter deux ou trois choses que l’on peut intégrer dans notre site web Figma à part les concepts que l’on a déjà prédéfinis :

  • il faut impérativement intégrer un numéro de téléphone
Design Figma montrant l'inclusion de numéros de téléphone
Numéros de téléphone visibles grâce à Figma
  • mettre en place un carrousel pour donner l’envie de voyager
Conception d'un carrousel pour voyager via Figma
Carrousel de voyage conçu par Figma
  • il faut aussi que notre projet adopte le paiement par carte VISA en ligne :
Agences utilisant Visa pour paiements dans Figma
Paiement Visa intégré par Figma

Création et Sélection d'un Logo pour Site Web avec Figma

Maintenant que tout est en place sur le plan conceptuel, commençons par trouver un logo pour notre page d’accueil.

Votre logo marquera l’identité de votre site web d’agence de voyage Figma donc il est important de bien le choisir. Pour moi, j’ai fait mon propre logo qui est le suivant pour notre design :

Exemple de logo pour un projet, créé avec Figma
Logo proposé pour notre projet

Bien sûr, vous êtes libre de trouver un autre sur Freepik, Vecteezy,… ou pourquoi ne pas créer votre propre logo si vous le désirez.

Intégration du Logo dans Figma pour le Web

Assurez-vous d’avoir enregistré votre fichier au format .SVG pour pouvoir apporter des modifications par la suite si nécessaire puis suivez ces étapes :

  • Commencez par ouvrir Figma
  • créez un nouveau projet que nous nommerons Agence Travel
  • créez un frame pour placer votre logo
  • Faites un glisser+déposer pour le placer directement dans votre frame

À la fin, vous devriez avoir ce résultat :

Capture d'un logo intégré dans un cadre Figma
Logo dans un cadre Figma

Choix des Couleurs pour le Design Web d'Agence de Voyages via Figma

Nous continuons toujours sur notre progression, et il est temps d’incorporer les couleurs que nous allons utiliser dans Figma.

Souvenez de la procédure pour créer un style de couleur pour notre site d’agence de voyage Figma:

Comment définir un style de couleur sur Figma
Style de couleur personnalisé sur Figma

Maintenant, suivez la procédure pour créer trois couleurs :

  • Nommer couleur principale pour la couleur bleu dans le cas de notre logo
  • Couleur secondaire pour la couleur jaune
  • BG (ou Background) pour la couleur de l’arrière-plan en se basant sur la couleur principale, mais ajoutant une nuance de gris
Méthode pour choisir une couleur d'arrière-plan dans Figma
Sélection de couleur d'arrière-plan
  • Trouver la couleur des polices en utilisant une nuance de noir plus atténuée comme la couleur #323232 par exemple.
Conseils sur l'utilisation des couleurs pour la typographie
Typographie sans noir pur

Votre résultat final devrait donner ceci :

Notre palette de couleurs personnalisée sur Figma
Palette de couleurs Figma

Vous cherchez à approfondir vos connaissances et créez des designs avec figma, nous vous recommandons de suivre notre formation : Formation Figma

Sélection des Typographies pour Agences de Voyages sur Figma

Avoir une belle palette de couleur c’est bien, mais avec une belle typographie c’est mieux. Sans plus attendre, mettons en place les styles de polices que nous allons utiliser.

Pour créer un style de police, c’est à peu près la même chose qu’avec les couleurs :

Comment créer un style de police dans Figma
Styles de police personnalisés sur Figma

Passons maintenant dans la création de nos 3 styles de texte :

Pour le titre principal de notre site web

Exemple de rendu du texte H1 dans Figma
Rendu de texte H1 en Figma
  • Nom du style : H1 (pour Heading 1 comme la balise HTML)
  • La taille : 32 px
  • Le type : Arial Rounded MT Bold
  • La couleur : couleur de la typographie (celui qu’on a créé tout à l’heure)

Pour les sous-titres de notre siteweb

Exemple de rendu du texte H2 dans Figma
Rendu de texte H2 en Figma
  • Nom du style : H2
  • La taille : 15 px
  • Le type : Roboto
  • La couleur : #8D8D8D

Pour les paragraphes de notre siteweb

Exemple de rendu du texte H3 dans Figma
Rendu de texte H3 en Figma
  • Nom du style : H3
  • La taille : 18 px
  • Le type : Roboto
  • La couleur : couleur de la typographie

À la fin, vous devrez aboutir à cela :

Présentation de notre typographie finale dans Figma Typographie finale en action sur Figma Présentation de notre typographie finale développée sur Figma, illustrant l'harmonie et la fluidité dans notre design web.
Typographie finale en action sur Figma

Récapitulons un peu ce que nous avons fait jusqu’à présent. Premièrement, nous avons défini l’identité qui va caractériser notre page d’accueil en définissant nos fonctionnalités et ceux que nous avons ajoutés après l’analyse concurrentielle. Puis nous avons choisi notre logo qui sera la marque de notre agence de voyage Figma . Enfin, on a préparé le terrain pour commencer à designer en créant notre palette de couleur et notre typographie. Et voilà notre site web a été bien créé

On se retrouve alors dans le prochain article pour structurer notre page d’accueil

Conclusion

En conclusion, cet article a posé les bases nécessaires pour un site web d’agence de voyages à la fois fonctionnel et attrayant. Grâce à des fonctionnalités comme la barre de recherche et les offres spéciales, enrichies par des analyses concurrentielles, nous avons préparé le terrain pour distinguer notre offre dans un marché compétitif. Pour aller plus loin, lisez notre prochain article sur la création de wireframes avec Figma, où nous aborderons la structuration de notre page d’accueil, consolidant notre identité visuelle et fonctionnelle.

Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.
Laisser un commentaire