{"id":57699,"date":"2023-04-17T18:54:31","date_gmt":"2023-04-17T16:54:31","guid":{"rendered":"https:\/\/www.unicusano.it\/blog\/?p=57699"},"modified":"2023-05-09T15:37:45","modified_gmt":"2023-05-09T13:37:45","slug":"wireframe-cosa-sono","status":"publish","type":"post","link":"https:\/\/www.unicusano.it\/blog\/didattica\/master\/wireframe-cosa-sono\/","title":{"rendered":"Wireframe: cosa sono e come si creano"},"content":{"rendered":"

Durante la fase di progettazione di siti web e app risulta fondamentale conoscere i wireframe, cosa sono e come si creano.<\/p>\n

Lo strumento rappresenta il punto di partenza per lo sviluppo dell\u2019interfaccia<\/strong>, ovvero una componente essenziale del design e del processo di sviluppo.<\/p>\n

Si tratta di un alleato preziosissimo per designer, sviluppatori e relativi clienti in quanto fornisce un\u2019idea in merito alla struttura del sito, una base di partenza da modificare e migliorare fino a renderlo funzionale al raggiungimento degli obiettivi prefissati.<\/p>\n

Nel corso dei prossimi paragrafi analizzeremo nel dettaglio le caratteristiche dei wirframe con esempi pratici per comprenderne a fondo le potenzialit\u00e0 nell\u2019ottica della realizzazione di un sito web o di un app.<\/p>\n

<\/p>\n

Wireframe: cos\u2019\u00e8<\/h2>\n

Iniziamo a familiarizzare con i wireframe e il significato del termine partendo dalla definizione di Wikipedia<\/strong>, che riportiamo di seguito:<\/p>\n

\u201cNel web design il wireframe rappresenta il modello iniziale di rappresentazione di un sito web. A partire dalla fine degli anni \u201890, con la diffusione di internet il wireframe \u00e8 diventato uno strumento fondamentale per la progettazione dei siti.\u201d<\/p><\/blockquote>\n

In parole semplici potremmo dire che si tratta di uno schema a blocchi che delinea l\u2019ossatura di un progetto<\/strong> (sito web, applicazione, ecc.).<\/p>\n

Il wireframe mostra il layout generale dell\u2019interfaccia; consente di visualizzare la gerarchia delle informazioni, le relazioni tra i vari elementi e i relativi funzionamenti\/comportamenti.<\/p>\n

Lo schema identifica il modo in cui le informazioni e i contenuti di un sito vengono mostrate ai visitatori.
\nAttraverso il wireframe vengono definiti i livelli di importanza dei vari elementi e le relative regole di visualizzazione delle informazioni<\/p>\n

A cosa serve: i vantaggi<\/h3>\n

Compreso a grandi linee cosa vuol dire wireframe entriamo nel dettaglio del funzionamento e dell\u2019utilit\u00e0 dello strumento. Cerchiamo quindi di capire a cosa serve nell\u2019ambito della realizzazione di un sito web e perch\u00e9 \u00e8 cos\u00ec importante.<\/p>\n

In linea generale la bozza permette di visualizzare un’anteprima del layout<\/strong>, ovvero le funzionalit\u00e0 e le caratteristiche che avr\u00e0 il progetto.<\/p>\n

Lo strumento traccia il progetto per cui consente di visualizzare lo scheletro dell\u2019interfaccia e dei relativi \u00a0elementi<\/strong>.
\nSulla base della bozza realizzata \u00e8 possibile quindi procedere con l\u2019inserimento dei vari dettagli, e con le eventuali modifiche strutturali.<\/p>\n

Allo stesso modo i wireframe consentono di individuare possibili problematiche che potrebbero sopraggiungere successivamente.<\/p>\n

Passiamo quindi a quelli che sono i vantaggi pratici per il team operativo.
\nSolitamente la realizzazione di un sito web o di un\u2019app presuppone la collaborazione di vari professionisti (project manager, seo specialist, visual designer, ecc.)
\nIn altre parole allo stesso progetto lavorano differenti profili professionali, ognuna delle quali specializzate in una particolare fase di sviluppo.
\nAvere una base \u2018visuale\u2019, chiaramente comune, sulla quale intervenire \u00e8 funzionale alla realizzazione del prototipo da sviluppare e consente di individuare pi\u00f9 facilmente gli step successivi.<\/p>\n

L\u2019elenco che segue sintetizza l\u2019utilit\u00e0 dei wireframe:<\/p>\n