Site web
Design de site de tarification SaaS
Ce design de site de tarification SaaS transforme le choix d'une offre en parcours d'achat lisible, avec options de facturation, détail des offres, lignes de comparaison et questions ciblées.
Cas d'usage d'un site de tarification
- Conception de pages de tarificationPrésenter les offres sans noyer les informations d'achat importantes
- Marketing produit SaaSTraduire les différences de service en sections de site faciles à parcourir
- Parcours de décision d'achatAider les visiteurs à comparer coût, limites et support
- Conception de comparatifs de fonctionnalitésOrganiser les capacités communes et propres à chaque offre
Points forts de la comparaison des offres
- Sélecteur de facturationLes choix mensuel et annuel apparaissent avant la sélection de l'offre
- Disposition en trois offresSolo, Team et Enterprise partagent des structures d'offre cohérentes
- Tableau comparatifLes lignes révèlent des différences que les cartes ne peuvent pas montrer
- Questions cibléesLes préoccupations tarifaires deviennent des blocs natifs dépliables
Des libellés de facturation aux questions fréquentes
1 / 3
Design de site de tarification SaaS
Cet exemple officiel inclus dans OpenDesign présente une page de tarification SaaS et d'aide à la décision d'achat pour Filebase. Son titre principal, « One flat rate. No throttling. », pose une proposition tarifaire directe avant que le visiteur n'aborde le détail des offres.
La ligne d'appui, « Start free. Pick a paid tier the day you outgrow it. Switch yearly billing for two months off. », donne à la page une progression : commencer, passer à une offre supérieure en cas de besoin, puis envisager la facturation annuelle. Elle présente la page comme un parcours de décision plutôt que comme un catalogue de fonctionnalités isolées.
Le design utilise une zone de contenu centrée dont la largeur maximale est fixée à 1080px. Cette contrainte maintient le titre, le sélecteur de facturation, les cartes d'offres, le tableau comparatif et les questions dans un même système horizontal lisible, tout en limitant la quantité de détails pouvant figurer à côté de chaque offre.
La décision d'abord
Le titre et le sélecteur de facturation statique apparaissent avant les informations sur les offres. Monthly est stylé comme sélection initiale, tandis que Yearly est présenté comme alternative ; la source n'implémente aucun changement de prix.
Rôles des offres
Solo s'adresse aux particuliers, Team aux groupes jusqu'à 50 personnes, et Enterprise se distingue par le SSO, les clés sur site et un SLA de 99,99 %.
Choisir entre les offres SaaS
Les cartes d'offres sont conçues pour les visiteurs qui doivent associer un contexte de travail à un niveau d'achat. Solo affiche « $8 / month », 1 To de stockage, deux appareils et un support par e-mail. Team change l'unité de prix en « $14 / seat / month » et ajoute stockage mutualisé, rôles, informations d'audit et support prioritaire.
Les cartes répètent un schéma utile : description du public, prix ou état personnalisé, liste de capacités et action. Cette cohérence facilite le repérage des différences entre offres, mais crée aussi un compromis : les libellés de fonctionnalités longs concurrencent la zone d'action, surtout dans la carte Team.
Team est marquée « RECOMMENDED » par un contour orange et un bouton plein « Choose Team ». Cette mise en avant propose un parcours privilégié dans le design, tandis que les actions neutres de Solo et Enterprise préservent les alternatives. Le libellé est une recommandation visuelle, pas la preuve que l'offre est plus performante.
Stockage individuel
Solo met en avant un prix mensuel fixe, un volume de stockage, une limite d'appareils et un support par e-mail.
Opérations d'équipe
Team associe facturation par siège, stockage mutualisé, dossiers partagés, rôles, journal d'audit et analyses d'usage.
Exigences Enterprise
Enterprise remplace le prix affiché par Custom et met en tête le SSO, le provisionnement, les clés de chiffrement et un support dédié.
Comparatif des offres et structure de la page
La séquence de la page est explicite : Solo, Team, Enterprise, Plan comparison, puis Common questions. La section de comparaison reprend les noms des offres en colonnes, au lieu d'obliger les visiteurs à se souvenir des cartes en parcourant les lignes.
Le tableau rend d'abord visibles les capacités communes. La synchronisation par blocs et le chiffrement de bout en bout affichent des coches sur les trois offres, tandis que les dossiers partagés commencent avec Team, SAML / SCIM n'apparaît que pour Enterprise et le journal d'audit commence avec Team. Cet ordre sépare les capacités de base des différences propres aux offres supérieures.
La ligne SLA utilise des valeurs différentes pour Team et Enterprise, tandis que la ligne Support passe de Email à Priority puis à Dedicated CSM. Ces lignes montrent pourquoi le tableau existe : les cartes de prix résument une offre, mais un tableau expose la dimension exacte sur laquelle les offres divergent.
| Fonctionnalité | Solo | Team | Enterprise |
|---|---|---|---|
| Synchronisation par blocs | Oui | Oui | Oui |
| Chiffrement de bout en bout | Oui | Oui | Oui |
| Dossiers partagés | Non | Oui | Oui |
| SAML / SCIM | Non | Non | Oui |
| Journal d’audit | Non | Oui | Oui |
| SLA | Non | 99.9% | 99.99% |
| Assistance | Prioritaire | CSM dédié |
Questions fréquentes et limites des capacités
La dernière section s'intitule « Common questions » et contient trois questions visibles : « Can I change tiers mid-month? », « Is there a free tier? » et « How does seat-based billing work for Team? ». Leur ordre suit les incertitudes d'achat probables : changer d'offre, coût d'entrée, puis modèle de facturation derrière l'option Team.
Chaque question utilise le motif natif details/summary du navigateur et peut se déplier localement. Les boutons Monthly, Yearly, Choose Solo, Choose Team et Talk to sales n'ont aucun gestionnaire d'événement dans cette source : ils ne modifient pas les prix et n'ouvrent aucun parcours d'achat ou de vente. La page n'établit aucun service connecté de facturation, de compte, de vente ou de support.
Les noms, chiffres, affirmations sur le produit et contenus du comparatif sont illustratifs, sauf vérification séparée. Les captures montrent le design visuel conçu et les données d'exemple indiquées ; elles ne prouvent ni tarifs réels, ni limites opérationnelles, ni réponses de services externes, ni le processus de génération d'origine.
Comment créer un design de site de tarification SaaS dans OpenDesign
Définir la séquence d'achat
Commencez par une proposition tarifaire courte, une phrase d'appui et un choix de facturation. Placez le mode de facturation avant les cartes d'offres afin que le visiteur lise tous les prix dans le même contexte.
Invite suggéréeCrée un design de site web de tarification SaaS pour un produit de stockage de fichiers, avec une zone de contenu centrée de 1080px. Utilise le titre « One flat rate. No throttling. », un sélecteur de facturation statique Monthly et « Yearly · save 17% », et trois offres nommées Solo, Team et Enterprise. Indique que les prix et les promesses produit sont donnés à titre d'illustration. Garde les boutons d'achat comme des exemples non connectés et utilise les éléments natifs details/summary pour déployer la FAQ ; ne laisse pas entendre que le changement de prix, la facturation en direct ou des données opérationnelles vérifiées sont implémentés.
Construire des cartes d'offres comparables
Donnez à chaque niveau le même rythme d'information : public visé, état du prix, capacités et action. Gardez la recommandation Team visuellement distincte, tout en préservant des chemins neutres vers Solo et Enterprise. Vérifiez que les libellés de fonctionnalités les plus longs de Team ne repoussent pas l'action.
Ajouter des éléments d'aide à la décision
Faites suivre les cartes d'un tableau comparatif qui distingue les fonctionnalités communes de celles réservées aux offres supérieures. Terminez par trois questions concises sur le changement d'offre, l'accès gratuit et la facturation par siège. Gardez les interactions proposées locales au design et vérifiez séparément toutes les affirmations sur le produit.
Exporter et obtenir un lien de partage
Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.
Conception de site web pour studio de design IA
La conception du site web de studio de design IA d’OpenDesign transforme le concept d’un studio local-first en landing page éditoriale, où les compétences, les expérimentations et la méthode sont faciles à parcourir.
Site web
Conception de site web d’infrastructure d’IA
Un concept de page d’accueil d’infrastructure d’IA tout en douceur, avec des exemples de métriques d’exécution, des cartes de fonctionnalités imbriquées, des animations subtiles et une unique invitation commerciale.
Site web
Conception de site web de visite nocturne de Bianjing
Un voyage nocturne interactif à travers une Bianjing imaginaire de l’époque des Song, associant une ville fluviale persistante, la poésie, les lanternes et un rythme narratif multilingue par chapitres.
Site web
Conception de site web de journal brutaliste
La conception de site web de journal brutaliste transforme un numéro en forme d’imprimé en un système de lecture web lisible, en associant une typographie audacieuse à une structure éditoriale mesurée.
Site web