Wireframe (web design)

Nel web design il wireframe (lett. "fil di ferro") rappresenta il modello iniziale di rappresentazione di un sito web.

A partire dalla fine degli anni 90, con la diffusione di internet, il wireframe è diventato uno strumento fondamentale per la progettazione dei siti web. Costituisce la prima rappresentazione visuale del sito e cioè un elaborato grafico low fidelity che ha lo scopo di identificare la struttura del sito web, l'architettura dell'informazione e la disposizione degli elementi nella pagina. È diventato quindi uno strumento di lavoro essenziale per molte figure professionali che operano nel mondo internet come interaction designer, information architect e user experience manager. Per realizzare un wireframe possono bastare penna e carta ma in rete sono disponibili una serie di tools che permettono di creare wireframe interattivi.

I wireframe si concentrano su:

La gamma di funzioni disponibili

Le priorità relative delle informazioni e delle funzioni

Le regole per la visualizzazione di determinati tipi di informazioni

L'effetto di diversi scenari sul display

Il wireframe del sito Web collega la struttura concettuale sottostante, o architettura dell'informazione, alla superficie o al design visivo del sito Web. I wireframe aiutano a stabilire la funzionalità e le relazioni tra i diversi modelli di schermata di un sito web. La creazione di wireframe è un modo efficace per realizzare prototipi rapidi di pagine, misurando la praticità di un concetto di design. Il wireframing inizia in genere tra "lavori strutturali di alto livello, come diagrammi di flusso o mappe dei siti, e progetti di schermate". All'interno del processo di costruzione di un sito web, il wireframing è il punto in cui il pensiero diventa tangibile.

Oltre ai siti Web, i wireframe vengono utilizzati per la prototipazione di siti mobile, applicazioni per computer o altri prodotti basati su schermo che implicano l'interazione uomo-computer .

Usi dei wireframe

I wireframe possono essere utilizzati in diverse discipline. Gli sviluppatori utilizzano i wireframe per ottenere una comprensione più tangibile delle funzionalità del sito, mentre i progettisti li utilizzano per spingere il processo dell'interfaccia utente (UI). I progettisti dell'esperienza utente e gli architetti dell'informazione utilizzano wireframe per mostrare i percorsi di navigazione tra le pagine. Gli analisti aziendali utilizzano i wireframe per supportare visivamente le regole aziendali e i requisiti di interazione per uno schermo. Gli stakeholder aziendali esaminano i wireframe per garantire che i requisiti e gli obiettivi siano soddisfatti durante la progettazione. I professionisti che creano wireframe includono analisti aziendali, architetti dell'informazione, designer dell'interazione, designer dell'esperienza utente, grafici, programmatori e responsabili di prodotti.

Lavorare con i wireframe può essere uno sforzo collaborativo poiché collega l'architettura dell'informazione al design visivo. A causa delle sovrapposizioni in questi ruoli professionali, possono verificarsi conflitti, rendendo il wireframing una parte controversa del processo di progettazione. Poiché i wireframe hanno un'estetica "ridotta all'osso", è difficile per i progettisti valutare con quanta precisione il wireframe deve rappresentare i layout effettivi dello schermo. Per evitare conflitti, si consiglia agli analisti aziendali che comprendono i requisiti dell'utente, di creare un wireframe di base e quindi collaborare con i progettisti per migliorare ulteriormente i wireframe. Un'altra difficoltà con i wireframe è che non visualizzano in modo efficace i dettagli interattivi perché sono rappresentazioni statiche. Il design moderno dell'interfaccia utente incorpora vari dispositivi come pannelli espandibili, effetti al passaggio del mouse e caroselli che rappresentano una sfida per i diagrammi 2-D.

I wireframe possono avere diversi livelli di dettaglio e possono essere suddivisi in due categorie in termini di fedeltà o di quanto assomigliano al prodotto finale.

Bassa fedeltà

Simile a uno schizzo approssimativo o a un rapido mock-up, è possibile produrre rapidamente wireframe a bassa fedeltà. Questi wireframe aiutano un team di progetto a comunicare idee e collaborare in modo più efficace poiché sono più astratti, utilizzando rettangoli ed etichettatura per rappresentare il contenuto. Il contenuto fittizio, il testo di riempimento latino (lorem ipsum), il contenuto di esempio o simbolico vengono utilizzati per rappresentare i dati quando il contenuto reale non è disponibile. Ad esempio, invece di utilizzare immagini reali, è possibile utilizzare un rettangolo segnaposto.

I wireframe a bassa fedeltà possono essere utilizzati per facilitare la comunicazione del team su un progetto e vengono utilizzati nelle prime fasi di un progetto.

Alta fedeltà

I wireframe ad alta fedeltà vengono spesso utilizzati per la documentazione perché incorporano un livello di dettaglio che si avvicina maggiormente al design della pagina Web effettiva, richiedendo quindi più tempo per la creazione.

Per i disegni semplici o di bassa fedeltà, la prototipazione su carta è una tecnica comune. Poiché questi schizzi sono solo rappresentazioni, le annotazioni , note adiacenti per spiegare il comportamento, sono utili. Per progetti più complessi, il rendering di wireframe utilizzando il software del computer è popolare. Alcuni strumenti consentono l'incorporazione dell'interattività, inclusa l'animazione Flash (obsoleta dal 31 dicembre 2020) e le tecnologie web front-end come HTML, CSS e JavaScript.

I wireframe ad alta fedeltà includono contenuti più reali, scelte tipografiche specifiche e informazioni sulle dimensioni dell'immagine. A differenza dei wireframe a bassa fedeltà, i wireframe ad alta fedeltà possono includere immagini reali. Le scelte di colore non sono incluse, ma i diversi valori di colore possono essere rappresentati in scala di grigi.