Strutture Fondamentali: Wireframes

Home | Blog | Strutture Fondamentali: Wireframes

Negli ultimi mesi ho lavorato molto con i wireframes e molto spesso mi hanno chiesto: “Cosa sono? A cosa servono esattamente?”, “Come hai imparato a farli?” oppure “Cosa usi per crearli?”. Da qui ho deciso di scrivere qualcosa che aiuti a comprendere, o almeno spero, cosa siano i “famosi” wireframes che ogni volta nomino.
In informatica la parola “wireframe” indica un tipo di rappresentazione grafica degli oggetti tridimensionali, ovvero la sola rappresentazione dei bordi di un oggetto 3D immaginando che siano dei fili di ferro.
Ma nel web cosa rappresentano? Beh si, recentemente lo stesso termine viene utilizzato anche nel web design per rappresentare una bozza strutturale del sito web o software che verrà poi realizzato. Personalmente mi piace definirlo come lo scheletro iniziale sul quale prenderà forma il sito web, ma soprattutto la base indispensabile per la realizzazione di una buona grafica finale.
La sua utilità principale è quella di individuare sin da subito le dinamiche necessarie dal punto di vista pratico e quindi di partire sin dall’inizio con delle buone basi di usabilità.
Nel web l’usabilità supera di gran lunga l’importanza della bellezza di un sito web, immaginiamo di atterrare su una landing page bella, colorata e ricca di immagini… a primo impatto potresti rimanere stupito a bocca aperta, ma in realtà non hai ancora capito qual è il vero scopo di quella pagina, scrolli un po’ e inevitabilmente la abbandoni. Beh questo sarebbe un classico caso di landing page non usabile che non porta nessuna conversione!

Qual è il metodo più giusto da utilizzare?

Non esiste un metodo giusto per la creazione di un wireframe, si possono creare schizzi a mano libera decidendo quale sia la posizione più adatta per gli elementi che andranno a comporre la landing page; si possono utilizzare dei diagrammi di flusso per schematizzare e facilitare la comprensione del percorso degli utenti; infine per gli amanti dell’ordine che non vogliono fogli disegnati sempre in giro (come me), esistono addirittura dei software online dedicati proprio alla creazione dei wireframes.
Io utilizzo MockFlow!
Mockflow offre la possibilità di creare wireframes, sitemaps, timelines ed altro ancora anche gratuitamente. Io ho imparato ad utilizzarlo in poco tempo e senza grandi difficoltà…
Ho iniziato con un semplice account gratuito ed imparando pian piano ho sentito la necessità di passare all’account Pro. La necessità è nata sostanzialmente dal poco spazio gratuito disponibile, avevo a disposizione solamente quattro fogli con lunghezza limitata e soprattutto la possibilità di creare un solo progetto. I vantaggi dell’account Pro? Progetti e fogli illimitati per creare i vostri wireframes e molto altro ancora!!
In questo modo posso dividere i vari progetti ed assegnare ad ognuno un nome con all’interno tutti i fogli di cui ho bisogno, il tutto nel massimo ordine e senza perdere informazioni essenziali.
Mockflow permette inoltre di gestire i progetti individuando velocemente quali sono in corso, quali completati e quali archiviati.

Quali elementi posso inserire nel mio foglio?

Una volta creato il nuovo foglio bianco, grazie ai comandi situati nella colonna di destra, è possibile inserire con un semplice drag&drop (clicca e trascina) una vasta gamma di elementi, quali box immagini, blocchi di testo, box video, barre di scorrimento, button, icone, alertbox, banner, esempi di diagramma e molto altro ancora… si tratta di elementi stilizzati, a volte completamente diversi dal risultato finale ottenuto solo dopo l’intervento di un grafico esperto, poiché hanno il compito di fissare la tipologia di oggetto che dovrà occupare un certo spazio e non il vero e proprio aspetto che si otterrà a lavoro concluso.
Il wireframe è quindi il punto di partenza per il grafico che dovrà poi occuparsi dei colori, del logo e delle immagini appropriate da inserire. Il compito di colui che si occupa di wireframes è decidere dove mettere un’immagine, un video o un contact form per facilitare la navigazione dell’utente; sarà poi compito del grafico renderlo piacevole alla vista rispettando i requisiti di usabilità che vengono indicati.
La struttura è di solito realizzata in bianco e nero, proprio per lasciare spazio all’immaginazione di chi andrà poi a creare l grafica. Personalmente utilizzo i colori, che mette a disposizione MockFlow, solo nel caso dei button che rappresentano le call to action importanti e per mettere in evidenza il riquadro contenente tutti gli elementi che dovranno rimanere “above the fold”, ovvero visibili sin da subito senza necessità di scroll lungo la pagina.

Nessuna idea davanti al foglio bianco?

Esistono molti templates pronti dal quale si può prendere lo spunto iniziale, quanto basta per sbloccarsi e continuare senza nessun aiuto. Sono disponibili nello store, facilmente raggiungibile cliccando in alto a destra, sia gratuiti che a pagamento.
Ovviamente non manca il materiale riguardante il mobile, nello store si trovano facilmente alcuni esempi. Personalmente mi limito ad utilizzare la sola immagine del telefono (disponibile per vari modelli), per avere un’idea complessiva dello schermo finale, realizzando all’interno la struttura che ritengo più appropriata per il lavoro che sto effettuando.

Posso esportare i miei wireframes ed inviarli a chi voglio?

Certo! MockFlow permette di esportare in pochi click tutti i fogli di cui ho bisogno in diversi formati: pdf, png, doc, xls, html 5 e ppt.
Una volta salvati nel formato più adatto non ti resta che inviare il tuo lavoro alla persona incaricata di sviluppare le pagine vere e proprie!
In bocca al lupo! 🙂


Stai cercando un'agenzia per approfondire gli argomenti di questo articolo?
Clicca qui per andare alla nostra pagina contatti.

Avatar

Roberto Paolucci

SEO Specialist

Informazioni biografiche

Parlaci del tuo Progetto
Condividi con noi i tuoi obiettivi e la tua idea di business