25 exemples de mise en page de site web (avec wireframes annotés)
25 exemples de mise en page de site web issus de la bibliothèque de gabarits We.Inc, chacun avec un wireframe en boîtes de la structure de la page, un aperçu du design, pourquoi la mise en page fonctionne et quelles entreprises elle convient. Inclut un guide pour choisir une mise en page.
La mise en page d'un site web est l'ordre et l'agencement des sections sur une page : ce qui vient en premier, ce qui se trouve côté à côte, et où se trouve le bouton principal. Voici 25 mises en page, chacune illustrée par un wireframe en boîtes et un aperçu du design complet. Les 25 sont des designs de gabarits We.Inc, pas des sites clients, regroupés selon le type d'activité. La boîte bleue dans chaque wireframe est le principal appel à l'action.
Comment lire les wireframes
Chaque rangée de boîtes représente une bande de la page, de haut en bas au fil du défilement. Les boîtes côte à côte se trouvent l'une à côté de l'autre sur un écran d'ordinateur ; sur un téléphone, elles s'empilent dans le même ordre, la boîte de gauche apparaissant en premier. Cette page porte sur l'agencement global de la page. Pour le haut de la page spécifiquement, voir exemples de section héros ; pour les menus, voir exemples de navigation.
Cinq structures de mise en page en un tableau
| Structure | Ordre des sections | Idéal quand | Exemples ci-dessous |
|---|---|---|---|
| Entonnoir de service | Héros, services, preuves, formulaire | Les visiteurs ont besoin d'un devis ou d'une réservation | 1-8 |
| Visite | Héros, menu, histoire, horaires et carte | Les gens viennent vous voir en personne | 9-14 |
| Réserver ou rejoindre | Héros, tarifs ou planning, réservation | Rendez-vous, cours, adhésions | 15-19 |
| Grille | Héros, grille d'éléments, détail, demande | Annonces, produits, portfolio | 20-24 |
| Lecteur | Héros, travaux, à propos, inscription | L'objectif est un public fidèle | 25 |
Mises en page pour les entreprises de services
1. Commerce d'urgence : bandeau urgent sous le héros
Gabarit : Ironpeak Roofing (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Une bande colorée pleine largeur juste sous le héros retient les personnes ayant un problème urgent (dommages de tempête) avant qu'elles ne fassent défiler la page. À utiliser pour : Couvreurs, restauration, serruriers, remorquage.
2. Multi-service avec un bloc de zone d'intervention
Gabarit : Summit Trades (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Trois cartes de service égales, puis une liste nommée de zones desservies, répond à « faites-vous cela, ici ? » en deux défilements. À utiliser pour : Toute entreprise avec une zone d'intervention définie.
3. Liste de services avec une spécialité mise en avant
Gabarit : Voltline Electric (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Un service à haute valeur ajoutée obtient sa propre section, de sorte que la page vend le travail que vous souhaitez le plus sans cacher le reste. À utiliser pour : Métiers avec une spécialité rentable.
4. Liste de contrôle et devis instantané
Gabarit : Brightwell Cleaning (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Une liste de contrôle visible de ce que comprend chaque visite répond à la principale préoccupation (qu'est-ce que j'obtiens exactement ?) avant le formulaire de tarification. À utiliser pour : Nettoyage, entretien de pelouse, service de piscine.
5. Histoire d'un artisan local
Gabarit : Halden Woodworks (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Nommer la ville dans le titre et montrer « comment se déroule un travail » crée de la confiance pour les grands travaux ponctuels. À utiliser pour : Charpentiers, constructeurs, rénovateurs.
6. Cabinet professionnel : domaines d'expertise et équipe
Template: Sterling & Vance LLP (a We.Inc template design, not a customer site).
Pourquoi ça marche : Les gens choisissent un cabinet d'abord par domaine juridique, puis par personne ; la mise en page suit cet ordre. À utiliser pour : Droit, comptabilité, conseil financier.
7. Conseil : les preuves d'abord
Gabarit : Linden Consult (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Les preuves se trouvent directement après le héros, puis la page présente les services comme des problèmes que l'acheteur reconnaît. À utiliser pour : Consultants, coachs, services B2B.
8. Page comptable courte
Gabarit : Ledgerline CPA (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Quatre sections. Pour un acheteur qui sait déjà qu'il a besoin d'un comptable, moins c'est plus rapide. À utiliser pour : Tout service où l'acheteur arrive décidé.
Mises en page pour la restauration et l'hôtellerie
9. Café : menu, histoire, visite
Template: Ember & Roast (a We.Inc template design, not a customer site).
Pourquoi ça marche : Le menu en premier, la visite en dernier : les gens vérifient ce que vous proposez, puis où et quand. À utiliser pour : Cafés, boulangeries, bars.
10. Boulangerie avec commande à l'avance
Template: Flour & Fern (a We.Inc template design, not a customer site).
Pourquoi ça marche : Une section de commande dédiée transforme la navigation en précommandes. À utiliser pour : Boulangeries, bouchers, préparation de repas.
11. Restaurant à défilement long
Gabarit : Azafran (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Pour un restaurant de destination, l'atmosphère vend la réservation, donc la page raconte une histoire avant de demander. À utiliser pour : Gastronomie, menus de dégustation, salles de réception.
12. Restaurant en trois sections
Gabarit : Crust (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Héros, menu, visite. Le moins de sections qu'un restaurant peut avoir tout en répondant à toutes les questions. À utiliser pour : Restaurants décontractés, plats à emporter.
13. Le planning en premier
Gabarit : ROAM (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Quand l'emplacement change chaque jour, « où êtes-vous aujourd'hui » est la question principale, elle se place donc juste sous le héros. À utiliser pour : Food trucks, marchés, pop-ups.
14. Service événementiel avec formulaire de demande
Template: Harvest & Vine (a We.Inc template design, not a customer site).
Pourquoi ça marche : Les types d'événements en tête permettent au visiteur de se trier lui-même ; un menu exemple rend le prix concret. À utiliser pour : Traiteurs, organisateurs, salles.
Mises en page pour la réservation et l'adhésion
15. Salon axé réservation
Template: Lumé Salon & Beauty Spa (a We.Inc template design, not a customer site).
Pourquoi ça marche : Une liste de prix et un bloc de réservation sont tout ce dont la plupart des visiteurs d'un salon ont besoin. À utiliser pour : Salons, coiffeurs, studios d'ongles et de cils.
16. Planning de cours et tarifs
Gabarit : Tidewater Yoga (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Le planning, puis les prix, puis une offre pour la première visite suit la décision que prend un nouvel élève. À utiliser pour : Yoga, pilates, danse, arts martiaux.
17. Salle de sport avec programmes et niveaux d'adhésion
Gabarit : Iron (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Les niveaux d'adhésion côte à côte facilitent la comparaison ; une première séance gratuite réduit le seuil d'entrée. À utiliser pour : Salles de sport, clubs, adhésions.
18. Clinique : soins, équipe, localisation
Gabarit : Verdant Family Health (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Les patients veulent savoir ce que vous traitez, qui ils verront et comment s'y rendre. À utiliser pour : Cliniques, dentistes, kinésithérapeutes.
19. Vétérinaire avec note d'urgence
Gabarit : Meadowpaw Veterinary (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : La section visite indique aux cas urgents de téléphoner, de sorte que le formulaire de réservation n'est pas utilisé pour les urgences. À utiliser pour : Vétérinaires, soins urgents, tout service avec des urgences.
Mises en page en grille : annonces, boutiques et portfolios
20. Grille d'annonces
Gabarit : Keystone Realty (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Les acheteurs obtiennent la grille ; les vendeurs obtiennent leur propre section et un appel à l'action séparé. À utiliser pour : Immobilier, locations, concessionnaires automobiles.
21. Page produit unique
Gabarit : Verre Halo (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Le prix se trouve dans la barre de menu et à la fin ; tout ce qui est entre répond à « ça en vaut-il la peine ? » À utiliser pour : Marques monoproduit, lancements, produits financés par crowdfunding.
22. Boutique en petite série
Template: Cellar & Rowan (a We.Inc template design, not a customer site).
Pourquoi ça marche : Les produits d'abord, puis l'histoire qui justifie le prix, puis une inscription à la liste pour le prochain lot. À utiliser pour : Artisans, bougies, céramiques, alimentation.
23. Lancement de produit
Gabarit : Loop (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : La prochaine sortie mène ; la grille de boutique sert les gens qui veulent quelque chose maintenant. À utiliser pour : Éditions limitées, vêtements, objets de collection.
24. Grille de portfolio en premier
Gabarit : Drafthouse (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Six projets directement après le titre ; le travail fait la vente. À utiliser pour : Architectes, designers, photographes.
Mises en page personnelles et créatives
25. Auteur avec newsletter
Gabarit : Plume (un design de gabarit We.Inc, pas un site client).
Pourquoi ça marche : Le travail, puis une inscription à la newsletter : l'objectif est des lecteurs qui reviennent, pas une simple demande. À utiliser pour : Auteurs, créateurs, conférenciers.
Comment choisir une mise en page
- Name the one action you want most visitors to take (call, book, buy, enquire, subscribe). That becomes the blue box.
- List the three questions a visitor asks before taking it (for example: do you cover my area, what does it cost, can I trust you). Each gets a section, in that order.
- Pick the pattern from the table above that matches.
- Cut sections you cannot fill with real content. An empty "Results" section or placeholder reviews do more harm than a shorter page.
- Check on a phone. Side-by-side boxes stack; make sure the main button still appears early (see mobile-first design).
Once a single page gets long, split it into several pages. Website structure shows how the sections above turn into a site map.
Erreurs courantes de mise en page
- Mettre le formulaire de contact uniquement en bas d'une page longue, sans bouton dans l'en-tête.
- Trois colonnes de texte pour un public mobile d'abord ; utilisez des cartes qui s'empilent proprement.
- Conserver des numéros de gabarits, des avis ou des badges que vous ne pouvez pas justifier.
- Une galerie avant que le visiteur sache ce que vous faites.
Utilisez l'une de ces mises en page
Chaque mise en page ici est un gabarit dans la bibliothèque de gabarits We.Inc. Avec le plan gratuit, vous pouvez utiliser jusqu'à 3 sites gabarits sur une adresse we.inc (sans crédits IA, sans domaine personnalisé). Le forfait Starter à $20/mois ajoute la construction par IA, vous pouvez donc demander des modifications telles que « déplacer les avis au-dessus des services », et les domaines personnalisés ; voir les tarifs. Faites d'abord une maquette avec le générateur de maquettes de site web, puis vérifiez le résultat avec le vérificateur de site web.
Questions fréquentes
Qu'est-ce qu'une mise en page de site web ?
L'ordre et l'agencement des sections sur une page : ce qui apparaît en premier, ce qui se trouve côté à côte, et où se trouve le principal appel à l'action.
Quelle est la meilleure mise en page pour un site web de petite entreprise ?
Pour la plupart des entreprises de services : un héros avec un bouton clair, des services, des preuves telles que des avis, et un formulaire de contact ou de devis, avec le bouton répété dans l'en-tête.
Combien de sections une page d'accueil doit-elle avoir ?
Autant qu'il en faut pour répondre aux principales questions du visiteur, et pas plus. Les exemples ici vont de quatre à huit sections.
S'agit-il de vrais sites d'entreprises ?
Non. Les 25 sont des designs de gabarits We.Inc, utilisés pour illustrer les structures de mise en page.
Comment les mises en page changent-elles sur mobile ?
Les boîtes côte à côte s'empilent verticalement dans le même ordre, donc placez l'élément le plus important à gauche et gardez le bouton principal près du haut.
Quelle est la différence entre mise en page et structure ?
La mise en page est l'agencement d'une page. La structure est la façon dont les pages se connectent sur l'ensemble du site : la hiérarchie, les URL et les liens internes.
Commencer gratuitement · Sans carte bancaire
Product
- AI Website Builder: Describe a site in plain English; it's live in minutes
- White Label Platform: Your brand, your domain, your margin
- Enterprise: SSO, custom SLAs, and dedicated support
- Developer API: Embed site generation into your SaaS
Who It's For
- For Agencies: Resell under your brand
- For Freelancers: Your own branded builder
- For Hosting Providers: Add a builder to your stack
- For SaaS Platforms: Embed site creation via API
- For Startups
- For Financial Services
- For Healthcare
Features
- Drag & Drop Editor
- Built-in SEO Tools
- Custom Branding
- Client Dashboard
- Reseller Billing (Stripe Connect)
Resources
- Blog
- Help Center
- Free Business Tools
- Website Templates
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App