Wireframe (web design)
[[File:Profilewireframe.png|miniatura|destra|Esempio]]
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.<ref>{{Cita libro|nome=Gerard|cognome=Blokdyk|titolo=Website Wireframe: Getting Started|lingua=En|}}</ref> È diventato quindi uno strumento di lavoro essenziale per molte figure professionali che operano nel mondo internet come interaction designer, information architect e [[User Experience|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.<ref>{{Cita articolo|nome=Alfredo|cognome=Iannone|autore=|url=https://alfredoiannone.com/2018/05/02/come-creare-un-wireframe-interattivo/|titolo=Come creare un wireframe interattivo|pubblicazione=|data=}}</ref>

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<ref name="brown3">{{cita libro|cognome=Brown|nome=Dan M.|titolo=Communicating Design: Developing Web Site Documentation for Design and Planning|url=https://archive.org/details/communicatingdes0000brow|edizione=2nd|anno=2011|editore=[[New Riders Press]]|isbn=978-0321712462}}</ref>

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<ref name="wodtke4">{{cita libro|cognome1=Wodtke|nome1=Christina|titolo=Information Architecture: Blueprints for the Web|url=https://archive.org/details/informationarchi0000wodt|edizione=2nd|anno=2009|editore=[[New Riders Press]]|isbn=978-0321600806|cognome2=Govella|nome2=Austin}}</ref>.

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<ref name="konigi">{{cita web|url=http://konigi.com/glossary/wireframes/|nome=Michael|cognome=Angeles|titolo="Wireframes"|data=2014-09-25|sito=Konigi Wiki|accesso=25 marzo 2011|urlarchivio=https://web.archive.org/web/20180505065903/http://konigi.com/uiref/wireframes/|dataarchivio=5 maggio 2018}}</ref>.

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<ref name="wodtke4"/>. 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<ref name="brown3"/>.

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 [[Mockup|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<ref name="wodtke4"/>. Il contenuto fittizio, il testo di riempimento [[Lingua latina|latino]] ([[lorem ipsum]]), il contenuto di esempio o simbolico vengono utilizzati per rappresentare i dati quando il contenuto reale non è disponibile.<ref name="brown3"/> 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<ref name="wodtke4"/>. 
[[File:Wireframe of potential component of "structured tasks" feature in Mediawiki 2020-05-28 5.png|alt=Wireframe di un web form|miniatura|Wireframe di un web form]]
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<ref>{{Cita web|url=https://theblog.adobe.com/adobe-flash-update/|titolo=Flash & The Future of Interactive Content {{!}} Adobe Blog|sito=web.archive.org|data=2 dicembre 2017|accesso=2 febbraio 2021|dataarchivio=2 dicembre 2017|urlarchivio=https://web.archive.org/web/20171202123704/https://theblog.adobe.com/adobe-flash-update/|urlmorto=sì}}</ref>) 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<ref name=":0">{{Cita news|url=https://steadfastcreative.com/low-fidelity-vs-high-fidelity-wireframes/|titolo=Low-fidelity vs. High-fidelity Wireframes - Steadfast Creative|data=13 settembre 2016|opera=Steadfast Creative|accesso=6 febbraio 2018|lingua=en|dataarchivio=5 febbraio 2017|urlarchivio=https://web.archive.org/web/20170205103635/http://steadfastcreative.com/low-fidelity-vs-high-fidelity-wireframes/|urlmorto=sì}}</ref>.

== Elementi di wireframe ==
Lo schema di un sito web può essere suddiviso in tre componenti: progettazione delle informazioni, progettazione della navigazione e progettazione dell'interfaccia. Il layout di pagina è il punto in cui questi componenti si uniscono, mentre il wireframing è ciò che descrive la relazione tra questi componenti<ref name="garrett4">{{cita libro|cognome=Garrett|nome=Jesse James|titolo=The Elements of User Experience: User-Centered Design for the Web and Beyond|url=https://archive.org/details/elementsofuserex0000garr|anno=2010|editore=[[New Riders Press]]|isbn=978-0321683687}}</ref>.

=== Progettazione delle informazioni ===
Il design dell'informazione è la presentazione, il posizionamento e la priorità delle informazioni in un modo che facilita la comprensione. Il design delle informazioni è un'area del design dell'esperienza utente , inteso a visualizzare le informazioni in modo efficace per una comunicazione chiara. Per i siti web, gli elementi informativi dovrebbero essere disposti in modo da riflettere gli obiettivi e le attività dell'utente<ref name="garrett4"/>.

=== Design della navigazione ===
Il sistema di navigazione fornisce una serie di elementi dello schermo che consentono all'utente di spostarsi da una pagina all'altra del sito web. Il design della navigazione dovrebbe comunicare la relazione tra i collegamenti che contiene in modo che gli utenti comprendano le opzioni che hanno per navigare nel sito. Spesso i siti web contengono più sistemi di navigazione, come navigazione globale, navigazione locale, navigazione supplementare, navigazione contestuale e navigazione di cortesia<ref name="garrett4"/>.

=== Design dell'interfaccia ===
La progettazione dell'interfaccia utente include la selezione e la disposizione degli elementi dell'interfaccia per consentire agli utenti di interagire con la funzionalità del sistema<ref name="garrett4"/>.  L'obiettivo è facilitare il più possibile l'usabilità e l'efficienza. Gli elementi comuni che si trovano nella progettazione dell'interfaccia sono pulsanti di azione, campi di testo, caselle di controllo, pulsanti di opzione e menu a discesa.

== Note ==
<references />

==Altri progetti==
{{ip|c=Category:Website wireframes}}

{{portale|informatica}}

[[Categoria:Web design]]