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.[1] È 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.[2]
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[3]
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[4].
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
modificaI 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[5].
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[4]. 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[3].
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[4]. 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.[3] 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[4].
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[6]) 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[7].
Elementi di wireframe
modificaLo 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[8].
Progettazione delle informazioni
modificaIl 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[8].
Design della navigazione
modificaIl 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[8].
Design dell'interfaccia
modificaLa 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[8]. 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
modifica- ^ (EN) Gerard Blokdyk, Website Wireframe: Getting Started.
- ^ Alfredo Iannone, Come creare un wireframe interattivo.
- ^ a b c Dan M. Brown, Communicating Design: Developing Web Site Documentation for Design and Planning, 2nd, New Riders Press, 2011, ISBN 978-0321712462.
- ^ a b c d Christina Wodtke e Austin Govella, Information Architecture: Blueprints for the Web, 2nd, New Riders Press, 2009, ISBN 978-0321600806.
- ^ Michael Angeles, "Wireframes", su Konigi Wiki, 25 settembre 2014. URL consultato il 25 marzo 2011 (archiviato dall'url originale il 5 maggio 2018).
- ^ Flash & The Future of Interactive Content | Adobe Blog, su web.archive.org, 2 dicembre 2017. URL consultato il 2 febbraio 2021 (archiviato dall'url originale il 2 dicembre 2017).
- ^ (EN) Low-fidelity vs. High-fidelity Wireframes - Steadfast Creative, in Steadfast Creative, 13 settembre 2016. URL consultato il 6 febbraio 2018 (archiviato dall'url originale il 5 febbraio 2017).
- ^ a b c d Jesse James Garrett, The Elements of User Experience: User-Centered Design for the Web and Beyond, New Riders Press, 2010, ISBN 978-0321683687.
Altri progetti
modifica
Wikimedia Commons contiene immagini o altri file su Wireframe
