25 Esempi di Layout di Siti Web (Con Wireframe Annotati)
25 esempi di layout dalla libreria template di We.Inc, ognuno con un wireframe a riquadri della struttura della pagina, un'anteprima del design, perché il layout funziona e per quale tipo di attività è ideale. Include una guida alla scelta del layout.
Un layout di sito web è l'ordine e la disposizione delle sezioni su una pagina: cosa viene prima, cosa sta affiancato e dove si trova il pulsante principale. Di seguito sono presentati 25 layout, ognuno mostrato come un semplice wireframe a riquadri e un'anteprima del design completo. Tutti e 25 sono design template di We.Inc, non siti di clienti, raggruppati per il tipo di attività a cui si adattano. Il riquadro blu in ogni wireframe è la chiamata all'azione principale.
Come leggere i wireframe
Ogni fila di riquadri è una fascia della pagina, dall'alto in basso mentre si scorre. I riquadri affiancati stanno uno accanto all'altro su uno schermo desktop; su un telefono si sovrappongono nello stesso ordine, quindi il riquadro di sinistra appare per primo. Questa pagina riguarda la disposizione dell'intera pagina. Per la parte superiore della pagina in particolare, vedi esempi di sezione hero; per i menu, vedi esempi di navigazione.
Cinque schemi di layout in una tabella
| Schema | Ordine delle sezioni | Ideale quando | Esempi sotto |
|---|---|---|---|
| Funnel di servizio | Hero, servizi, prove, modulo | I visitatori cercano preventivo o prenotazione | 1-8 |
| Visita | Hero, menu, storia, orari e mappa | Le persone vengono da te di persona | 9-14 |
| Prenota o iscriviti | Hero, prezzi o calendario, prenotazione | Appuntamenti, corsi, abbonamenti | 15-19 |
| Griglia | Hero, griglia di elementi, dettaglio, richiesta | Annunci, prodotti, portfolio | 20-24 |
| Lettore | Hero, lavori, informazioni, iscrizione | L'obiettivo è un pubblico che ritorna | 25 |
Layout per attività di servizi
1. Servizio urgente: fascia d'urgenza sotto l'hero
Template: Ironpeak Roofing (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Una fascia colorata a tutta larghezza subito sotto l'hero cattura chi ha un problema urgente (danni da tempesta) prima che scorra oltre. Per chi: Coperturisti, restauratori, fabbri, servizi di traino.
2. Multi-servizio con blocco area di copertura
Template: Summit Trades (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Tre schede di servizio uguali, poi un elenco nominativo delle aree coperte, risponde a "fate questo, qui?" in due scorrate. Per chi: Qualsiasi attività con un'area di intervento definita.
3. Elenco servizi con specialità in evidenza
Template: Voltline Electric (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Un servizio di alto valore ottiene la propria sezione, così la pagina vende il lavoro che vuoi di più senza nascondere il resto. Per chi: Artigiani con una specialità redditizia.
4. Checklist e preventivo immediato
Template: Brightwell Cleaning (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Una checklist visibile di cosa include ogni visita risponde alla preoccupazione principale (cosa ottengo esattamente?) prima del modulo prezzi. Per chi: Pulizie, manutenzione del giardino, manutenzione piscine.
5. Storia dell'artigiano locale
Template: Halden Woodworks (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Nominare la città nel titolo e mostrare "come va un lavoro" costruisce fiducia per lavori grandi e unici. Per chi: Falegnami, costruttori, ristrutturatori.
6. Studio professionale: aree di competenza e personale
Template: Sterling & Vance LLP (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Le persone scelgono uno studio per area di competenza e poi per la persona; il layout segue quell'ordine. Per chi: Avvocati, commercialisti, consulenti finanziari.
7. Consulenza: prove prima di tutto
Template: Linden Consult (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Le prove si trovano subito dopo l'hero, poi la pagina inquadra i servizi come problemi che il cliente riconosce. Per chi: Consulenti, coach, servizi B2B.
8. Pagina breve per commercialista
Template: Ledgerline CPA (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Quattro sezioni. Per chi sa già di aver bisogno di un commercialista, meno è più rapido. Per chi: Qualsiasi servizio in cui il cliente arriva già deciso.
Layout per ristorazione e ospitalità
9. Caffetteria: menu, storia, visita
Template: Ember & Roast (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Menu prima, visita per ultima: le persone controllano cosa servite, poi dove e quando. Per chi: Caffetterie, pasticcerie, bar.
10. Panificio con ordine anticipato
Template: Flour & Fern (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Una sezione dedicata agli ordini trasforma la navigazione in preordini. Per chi: Panifici, macellerie, preparazione pasti.
11. Ristorante a scorrimento lungo
Template: Azafran (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Per un ristorante di destinazione, l'atmosfera vende la prenotazione, quindi la pagina racconta una storia prima di chiedere. Per chi: Fine dining, menu degustazione, venue.
12. Ristorante a tre sezioni
Template: Crust (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Hero, menu, visita. Il numero minimo di sezioni che un ristorante può avere rispondendo comunque a ogni domanda. Per chi: Ristoranti casual, take-away.
13. Calendario in primo piano
Template: ROAM (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Quando la posizione cambia ogni giorno, "dove sei oggi" è la domanda principale, quindi va subito sotto l'hero. Per chi: Food truck, mercati, pop-up.
14. Servizio eventi con modulo di richiesta
Template: Harvest & Vine (un design template di We.Inc, non il sito di un cliente).
Perché funziona: I tipi di evento in primo piano permettono al visitatore di orientarsi da solo; un menu campione rende il prezzo più concreto. Per chi: Catering, organizzatori eventi, venue.
Layout per prenotazioni e abbonamenti
15. Salone guidato dalla prenotazione
Template: Lumé Salon & Beauty Spa (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Un listino prezzi e un blocco prenotazione sono tutto ciò di cui la maggior parte dei visitatori di un salone ha bisogno. Per chi: Saloni, barbieri, centri unghie e ciglia.
16. Calendario corsi e prezzi
Template: Tidewater Yoga (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Calendario poi prezzi poi un'offerta per la prima visita segue la decisione che prende un nuovo studente. Per chi: Yoga, pilates, danza, arti marziali.
17. Palestra con programmi e livelli
Template: Iron (un design template di We.Inc, non il sito di un cliente).
Perché funziona: I livelli di abbonamento affiancati semplificano il confronto; una prima sessione gratuita abbassa la soglia. Per chi: Palestre, club, abbonamenti.
18. Clinica: cura, team, posizione
Template: Verdant Family Health (un design template di We.Inc, non il sito di un cliente).
Perché funziona: I pazienti vogliono sapere cosa trattate, chi vedranno e come arrivare. Per chi: Cliniche, dentisti, fisioterapisti.
19. Veterinario con nota urgenza
Template: Meadowpaw Veterinary (un design template di We.Inc, non il sito di un cliente).
Perché funziona: La sezione visita dice ai casi urgenti di telefonare, quindi il modulo di prenotazione non viene usato per le emergenze. Per chi: Veterinari, pronto soccorso, qualsiasi servizio con emergenze.
Layout a griglia: annunci, negozi e portfolio
20. Griglia di annunci
Template: Keystone Realty (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Gli acquirenti ottengono la griglia; i venditori ottengono la propria sezione e una chiamata all'azione separata. Per chi: Immobiliare, affitti, concessionarie auto.
21. Pagina prodotto singolo
Template: Verre Halo (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Il prezzo si trova nella barra del menu e alla fine; tutto nel mezzo risponde a "ne vale la pena?" Per chi: Brand mono-prodotto, lanci, prodotti finanziati tramite crowdfunding.
22. Negozio a produzione limitata
Template: Cellar & Rowan (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Prodotti prima, poi la storia che giustifica il prezzo, poi un'iscrizione alla lista per il prossimo lotto. Per chi: Artigiani, candele, ceramica, prodotti alimentari.
23. Lancio prodotto
Template: Loop (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Il prossimo lancio guida; la griglia del negozio serve chi vuole qualcosa adesso. Per chi: Edizioni limitate, abbigliamento, oggetti da collezione.
24. Griglia portfolio in primo piano
Template: Drafthouse (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Sei progetti subito dopo il titolo; il lavoro fa la vendita. Per chi: Architetti, designer, fotografi.
Layout personali e per creator
25. Scrittore con newsletter
Template: Plume (un design template di We.Inc, non il sito di un cliente).
Perché funziona: Lavori, poi un'iscrizione alla newsletter: l'obiettivo sono i lettori che ritornano, non una singola richiesta. Per chi: Scrittori, creator, speaker.
Come scegliere un layout
- Identifica l'unica azione che vuoi che la maggior parte dei visitatori compia (chiamare, prenotare, acquistare, chiedere informazioni, iscriversi). Quella diventa il riquadro blu.
- Elenca le tre domande che un visitatore si fa prima di compiere quell'azione (ad esempio: operate nella mia zona, quanto costa, posso fidarmi). Ognuna ottiene una sezione, in quell'ordine.
- Scegli lo schema dalla tabella sopra che corrisponde.
- Elimina le sezioni che non puoi riempire con contenuti reali. Una sezione "Risultati" vuota o recensioni segnaposto fanno più danno di una pagina più breve.
- Controlla su telefono. I riquadri affiancati si sovrappongono; assicurati che il pulsante principale appaia ancora presto (vedi design mobile-first).
Quando una singola pagina diventa lunga, dividila in più pagine. La struttura del sito web mostra come le sezioni sopra si trasformano in una mappa del sito.
Errori comuni di layout
- Mettere il modulo di contatto solo in fondo a una pagina lunga, senza pulsante nell'intestazione.
- Tre colonne di testo per un pubblico che usa principalmente il telefono; usa schede che si sovrappongono in modo ordinato.
- Mantenere numeri, recensioni o badge del template che non puoi supportare con dati reali.
- Una galleria prima che il visitatore sappia cosa fai.
Usa uno di questi layout
Ogni layout qui è un template nella libreria template di We.Inc. Con il piano gratuito puoi usare fino a 3 siti template su un indirizzo we.inc (senza crediti IA, senza dominio personalizzato). Lo Starter a $20/mese aggiunge la costruzione con IA, così puoi chiedere modifiche come "sposta le recensioni sopra i servizi", e domini personalizzati; vedi prezzi. Crea prima un mockup della tua versione con il generatore di mockup per siti web, poi verifica il risultato con il website grader.
Domande frequenti
Cos'è un layout di sito web?
L'ordine e la disposizione delle sezioni su una pagina: cosa appare per prima, cosa sta affiancato e dove si trova la chiamata all'azione principale.
Qual è il layout migliore per un sito web di piccola impresa?
Per la maggior parte delle attività di servizi: un hero con un pulsante chiaro, servizi, prove come recensioni e un modulo di contatto o preventivo, con il pulsante ripetuto nell'intestazione.
Quante sezioni dovrebbe avere una homepage?
Tante quante ne servono per rispondere alle domande principali del visitatore, e non di più. Gli esempi qui vanno da quattro a otto sezioni.
Questi sono siti web di aziende reali?
No. Tutti e 25 sono design template di We.Inc, usati per mostrare schemi di layout.
Come cambiano i layout su mobile?
I riquadri affiancati si sovrappongono verticalmente nello stesso ordine, quindi metti l'elemento più importante a sinistra e tieni il pulsante principale vicino alla cima.
Qual è la differenza tra layout e struttura?
Il layout è la disposizione di una singola pagina. La struttura è come le pagine sono collegate in tutto il sito: la gerarchia, gli URL e i link interni.
Inizia gratis · Nessuna carta di credito richiesta
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