Durante il nostro metodo di lavoro, quando si inizia un progetto web, è molto utile e saggio creare un Wireframe.

Il wireframe ha lo scopo di comunicare la struttura delle pagine, indicando le posizioni e le logiche dei principali elementi, senza inserire colori o elementi grafici di design, che verranno presi in considerazione in uno step successivo.

Infatti dopo il brief con il cliente e aver assimilato le informazioni da dover inserire all’interno del sito web, è buona norma iniziare a delineare la struttura che avranno le principali pagine come home page, pagina interna, ricerca ed eventuali altre aree primarie.

Questo lavoro iniziale pre-bozza grafica ci permetterà di ottimizzare e risparmiare tempo in modo da raggiungere un accordo sulle posizione dei principali elementi, che andranno a comporre la nostra pagina.

Questo metodo ci permetterà di filtrare l’80% di richieste assurde su modifiche sul nostro layout proposto in fase di progettazione.

Belli i Wireframe, ma da dove inizio?

La realizzazione di un wireframe può essere realizzata con matita e carta, oppure utilizzando alcuni servizi dedicati online.

Nessuno ci vieta di creare nella nostra libreria personale di Adobe Photoshop, gli elementi principali di una struttura web, e comporre il nostro wireframe.

Da qui in poi entra in gioco il nostro bagaglio di ispirazione, infatti durante il nostro apprendimento nel mondo del web design, verremo a contatto con centinaia e centinai di idee grafiche, che riusciranno a farci ispirare e far scattare in noi la scintilla creativa.

Una volta trovata l’ispirazione possiamo iniziare, carte e matita, photoshop o altri servizi esterni.

Carta e Matita

Immagine anteprima YouTube

Photoshop

Immagine anteprima YouTube

Servizi Online

Sul web possiamo trovare diversi servizi online gratuiti o a pagamento, che faciliteranno la realizzazione del wireframe con un set di elementi grafici pronti all’uso.

Io vi consiglio questi 5 servizi, utili e facili da usare.

1. MockFlow

MockFlow permette di creare e collaborare in tempo reale su modelli di interfaccia utente per software e siti web.

2. Axure

Axure permette agli sviluppatori di creare wireframe, diagrammi di flusso e le specifiche tecniche per applicazioni e siti web.

3. iPlotz

iPlotz ti permette di creare rapidamente modelli cliccabili e navigabili.

4. Mockingbird

Mockingbird permette di collegare insieme più progetti e visualizzarli in anteprima in modo interattivo.

5. FlairBuilder

FlairBuilder permette di creare wireframe in modo interattivo e intuitivo tramite elementi presi dal web.

Servizi Extra + Sondaggio

Oltre a servizi esterni per la realizzazione di wireframe, possiamo trovare alcune chicche creative per rendere la progettazione ancora più divertente e immediata.

UXPin: Creare Wireframe con un Notepad Cartaceo

UXPin è un progetto ideato da un gruppo di ragazzi Polacchi, che lavorando nel campo dell’ User Experience, hanno creato un kit formato da un blocco note cartaceo, con lo scopo di costrutire la struttura di un sito web.

Wirify: Trasformare una Pagina Web in Wireframe

Wirify è un bookmarklet che permette di trasformare qualsiasi pagina web in un wireframe con un solo click.

 

Letture Consigliate per Webdesign

Articoli simili


Autore:

Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.