---
title: Cosa sono i Wireframe e perché sono fondamentali per fare funzionare un sito
description: "Quando si costruisce una casa, non si parte immediatamente dai muri. Viene prima realizzato un progetto, seguito dalle fondamenta, e solo in un secondo momento si passa alla creazione vera e propria dell’immobile. Allo stesso modo, quando si progetta un sito, non si comincia a razzo con il disegno del layout grafico, ma piuttosto dalla definizione dell’obiettivo, della struttura (alberatura o architettura dell’informazione) e dei contenuti che il sito dovrà veicolare. A questo punto, poi, si pongono alcuni interrogativi: come organizzare i contenuti nelle varie pagine? In quale ordine mostrarli?"
---

[Ander Blog ](https://www.ander.group/blog)

# [Cosa sono i Wireframe e perché sono fondamentali per fare funzionare un sito](https://www.ander.group/blog/cosa-sono-wireframe)

 Scritto da [Francesca Moretti](https://www.ander.group/blog/author/francesca-moretti) | 07 giu 2019

Quando si costruisce una casa, non si parte immediatamente dai muri. Viene prima realizzato un progetto, seguito dalle fondamenta, e solo in un secondo momento si passa alla creazione vera e propria dell’immobile.

Allo stesso modo, **quando si progetta un sito**, non si comincia a razzo con il disegno del layout grafico, ma piuttosto dalla definizione dell’obiettivo, della struttura (alberatura o architettura dell’informazione) e dei contenuti che il sito dovrà veicolare. A questo punto, poi, si pongono alcuni interrogativi: **come organizzare i contenuti** nelle varie pagine? In quale ordine mostrarli?

 

### Cosa sono i Wireframe

È proprio a questo che servono i **Wireframe**: cioè a prevedere un’organizzazione spaziale dei messaggi all’interno delle pagine del sito. Si tratta di **schemi bidimensionali** molto essenziali che raffigurano la struttura di tutte le diverse tipologie di pagine, per le quali definiscono:

- moduli e informazioni contenute
- ordine e gerarchia degli elementi
- ingombri di testi e immagini
- modalità di navigazione
- Call to Action
- percorsi dell’utente tra le pagine
  
   

### Obiettivo: funzionalità

Lo **scopo dei Wireframe **non è estetico ma esclusivamente **funzionale**. “Solitamente li disegniamo una prima volta a mano, in modo da ridurre al minimo distrazioni e abbellimenti e concentrarci solo sul contenuto”, racconta **Debora Torriani, UX Designer di Ander Group**. “**Creare i Wireframe **significa ragionare, mettersi nei panni dell’utente e prevedere percorsi di navigazione che gli permettano di trovare le informazioni che cerca con il minor numero di clic possibile”.

 

### Mobile first

“Sempre più spesso **progettiamo partendo dal Mobile** - racconta Debora - che è più difficile per via del poco spazio a disposizione, costringe a una chiara prioritizzazione dei contenuti dall’alto verso il basso e obbliga a semplificare. Parallelamente, portiamo avanti anche le schermate per Desktop e Tablet, ma è il Mobile a fare da guida”.

 

### Un continuo Work in Progress

**La realizzazione dei Wireframe** è un continuo Work in Progress: “Partiamo dalla prima versione su carta - prosegue Debora - che è molto grezza e consiste solo in una successione di riquadri; poi la trasferiamo in digitale e un po’ alla volta la arricchiamo. Lo facciamo con **Sketch**, che si rivela comodo per costruire schemi molto semplici e poi abbellirli nel tempo aggiungendo alcuni dettagli”.

 

### Dallo schizzo al prototipo

Ad esempio inserendo dei finti testi, per avere un’idea della loro lunghezza, qualche immagine e inserendo i link tra le pagine. In questo modo si ottiene un **prototipo interattivo**, che costituisce l’ultimo step prima della fase di User Interface, cioè la progettazione del layout e delle animazioni del sito.

 

### Perché i Wireframe sono imprescindibili

Seppur sia un lavoro fatto “dietro le quinte” difficile da apprezzare per i non addetti ai lavori, la **realizzazione dei Wireframe** porta un enorme valore aggiunto al progetto. E gli utenti finali, pur non apprezzando gli schemi in quanto Output vero e proprio, si accorgono del vantaggio nel momento in cui navigano un sito semplice, fruibile, che consente di** reperire i contenuti senza difficoltà**. Spiega Debora: “A volte, credendo di velocizzare, si cade nella tentazione di non realizzare i Wireframe ma di partire dal Design: e questo è un grave errore, che rischia di allungare i tempi anziché accorciarli”.

 

### La User Experience, la nostra stella polare

Questo perché **fare i Wireframe** significa avere una visione d’insieme su tutti i contenuti, prevedere tutti i messaggi che si vogliono veicolare ed essere certi di organizzarli al meglio. Saltando questo step, molto spesso nascono siti dalla struttura debole, incompleti e poco fruibili dagli utenti, anche se esteticamente belli. “La grafica è importante”, conclude Debora, “ma non deve guidare le scelte di progettazione: deve ‘vestire’ i contenuti che sono stati organizzati e previsti nella fase di Wireframing. È invece la **User Experience** - cioè lo studio e la progettazione dell’esperienza dell’utente su un prodotto digitale - a costituire la base di qualsiasi scelta: e non lo dico perché è il mio lavoro. Per me **la UX è un approccio**, che può essere fatto proprio da tutte le persone che lavorano a un progetto indirizzato a utenti in carne ed ossa. Significa premiare sempre la funzionalità e prendere solo decisioni consapevoli che siano utili al pubblico di riferimento, e mai fini a se stesse”.

[Visualizza articolo completo](https://www.ander.group/blog/cosa-sono-wireframe)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Francesca Moretti"
  },
  "dateModified" : "2026-05-04T14:56:33.112Z",
  "datePublished" : "2019-06-07T15:30:40Z",
  "headline" : "Cosa sono i Wireframe e perché sono fondamentali per fare funzionare un sito",
  "image" : {
    "@type" : "ImageObject",
    "height" : 1130,
    "url" : "https://www.ander.group/hubfs/BlogPost_Cosa%20sono%20i%20Wireframe%20e%20perche%CC%81%20sono%20fondamentali%20per%20un%20sito%20che%20funzioni-1.jpg",
    "width" : 2160
  },
  "mainEntityOfPage" : "https://www.ander.group/blog/cosa-sono-wireframe",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Il nostro lavoro è una storia da raccontare"
  }
}
```