Progettare un sito web: i wireframe

di Francesca Fabbri

Man mano che scrivevo il post Web strategy: storia (al contrario) di un progetto, mi rendevo tristemente conto di dover sorvolare su molti aspetti – ma si sa, quando si vuole raccontare la storia-tipo di un progetto in 4.000 battute, alcune cose non vengono trattate in modo esaustivo e altre non vengono trattate affatto.

Oggi vorrei prendermi un po’ di tempo per raccontare cosa sono i wireframe – intanto provo a spiegarti cosa sono, poi nei prossimi post potrei raccontartene alcuni dei miei.

Anche in questo caso dovrò tagliare con l’accetta e sorvolare sulle attività che portano a realizzare un wireframe. Sappi però che, quando si arriva a disegnarne uno, la struttura del sito (fatta di albero, contenuti, relazioni tra le pagine, modalità di navigazione, elementi su cui focalizzare l’attenzione dell’utente…) è già stata definita, almeno come proposta verso il cliente.

1. Cos’è un wireframe?
   E’ la prima bozza del sito, lo scheletro di una pagina web; una specie di radiografia della struttura. Niente di più (non ha elementi di web design) e niente di meno (definisce visivamente la struttura del sito e traduce in immagine ciò che, prima, era solo testo scritto).
2. A cosa serve un wireframe?
   (Per capire la sua importanza, puoi leggere anche questo articolo di Marco Olivetti). Il wireframe presenta, sotto forma di immagine, gli elementi di una pagina e le modalità di navigazione: e proprio in quanto immagine, anche se grigia e spoglia, comunica in modo più chiaro e più immediato di tante parole. E’ un passo intermedio tra progetto e web design; permette al cliente di capire meglio il delinearsi del progetto e di apportare modifiche in modo semplice e rapido. Inoltre è utilissimo per il web designer, perché gli fornisce indicazioni sui pesi comunicativi dei vari elementi, sul funzionamento di certe aree, su cosa potrebbe fare l’utente ecc.
3. Chi può fare un wireframe?
   Beh, a dire il vero chiunque, anche tu. Voglio dire che non serve essere un grafico o un web designer, al contrario di quello che si potrebbe pensare – ma occorre essere in grado di progettare un sito, ovviamente. In effetti, per una primissima bozza possono bastare carta e penna. Il mio primo wireframe (era per questo sito) l’ho fatto proprio così, carta e matita. Poi l’ho messo in ordine con una tabella di word. Oggi uso SmartDraw.
4. Quanti tipi di wireframe esistono?
   Considerando la risposta alla domanda qui sopra, capisci che ne esistono di infiniti! A mano libera o no, più o meno accurati, a colori o in scala di grigi… Io ne ho visti tanti, soprattutto di quelli realizzati con software appositi (ce ne sono parecchi, e molto diversi tra loro). I più belli? Quelli di Luca Rosati e quelli di Andrea Resmini, che hanno collaborato con i mimuli per alcuni progetti.
5. … ma quant’è brutto un wireframe?
   Tanto, tantissimo. Ed è giusto che sia così, perché non deve dare alcuna indicazione di tipo grafico o estetico – guai se lo facesse! Il suo scopo, come ormai avrai capito, è tutt’altro: è una specie manichino in attesa di essere vestito da un bel web design.

Bene; e se ora ti ritrovi più curioso di prima, ti consiglio di dare un’occhiata al sito Wireframes Magazine.

---

Iscriviti alla
newsletter settimanale   

Sottoscrivi
il feed RSS

Nessun commento

Trackback e pingback

Scrivi un commento