Wireframe

In fase di progettazione della interfaccia grafica di un software, che sia un sito web o app per smartphone ecc, è particolarmente utile utilizzare un diagramam semplice ed essenziale che permetta di definire una bozza, una demo , provino dell’interfaccia che vogliamo realizzare. Questo ha una doppia valenza: consentire agli sviluppatori e progettisti di dialogare e confrontarsi con un diagramma sotto li occhi e secondo di fornire al cliente/committente di avere un elemento visivo su cui ragionare e dettagliare meglio quelle che possono essere le ulteriori necessità o gusti.

Il wireframe o diagramma wireframe non ricade specificatamente in uno standard UML, ma consente in modo sostanzialmente condiviso e unificato di realizzare un diagramma in bianco e nero o scala di grigi al più che visualizzi la rappresentazione delle struttura e delle principali funzionalità del software in progettazione/sviluppo.

Elementi grafici

Non esistono molte regole pratiche per disegnare un wireframe convincente. esistono almeno due modalità: a bassa definizione, quello che probabilmente interessa più allo studente che deve realizzare un wireframe carta e penna, e quell oad alta definizione con elementi grafici simili al risultato finale e colori. Vediamo solo alcuni elementi grafici caratteristici ricorrenti.

  • Box: Rappresenta un contenitore per il testo o per altri elementi, come immagini o pulsanti.
  • Testo: Indica il testo di esempio che verrà sostituito con il contenuto reale. Spesso si indica con due o più lineette orizzontali abbastanza fitte, anche zigrinate oppure un semplice riempitivo stile “Lorem ipsum”.
  • Immagini: Indica le aree in cui verranno inserite immagini reali. Spesso si indica un riquadro sbarrato con una x sulle diagonali.
  • Video: un piccolo box col al centro un cerchio e il triangolo simbolo del play
  • Pulsanti: Rappresenta i pulsanti interattivi che gli utenti possono cliccare.
  • Link: Indica i collegamenti ipertestuali tra le diverse pagine o sezioni del sito.
  • Menu di navigazione: Rappresenta i menu e le opzioni di navigazione del sito.
  • Campi di input: Rappresenta i campi di una form in cui gli utenti possono inserire testo o dati.
  • Icone: Utilizzate per rappresentare elementi come icone di menu, icone social e altro ancora.
Esempio con wireframe.cc

Come realizzarli

Di software ne esistono veramente decine se non centinaia. Molti sono online per sfruttare le funzionalità cloud soprattutto collaborative. Molte soluzioni prevedono piani di pagamento. Ne elenchiamo solo alcuni che riteniamo più significativi ma il lettore può approfondire individualmente e trovare il servizio per lui ottimale. Riflettiamo sul fatto che ci siano così tanti software con diversi tipologie di esperienze per i progettisti; come venga messa in risalto la progettazione delle demo quale fase importante; avere degli strumenti che velocizzino la realizzazione con poca fatica.

  • Adobe XD (offline e commerciale)
  • Sketch (offline e commerciale)
  • Axure RP (offline e commercilae)
  • Lunacy una alternativa libera e offline compatibile anche con Linux (vai su https://icons8.com/lunacy)
  • Pencil progetto non molto attivo ma pur sempre valido e compatibile con tutte le piattaforme inclusa Linux.
  • https://wireframe.cc online con piano gratuito, pensato più per demo di software desktop.
  • https://mydraft.cc online e gratuito, la versione più didattica e completa probabilmente
  • draft.io gratuito con registrazione, soluzione molto versatile ed intressante
  • https://www.figma.com forse la soluzione completa e definitiva per la creazione di prototipi ben oltre la semplice stilizzazione. La soluzione commercialmente più diffusa e professionale. Ha anche un piano gratuito. Trovate una quantità enorme di video, tutorial, persino reel su lavori e tecniche di realizzazione.
  • https://balsamiq.com (anche offiline e commerciale)
  • https://proto.io pensato più per i dispositivi mobili con funzionalità molto avanzate, comemrciale
  • https://vectr.com anche gratuito con limitazioni ma diversi tutorial interessanti per chi non ha mai fatto grafica

Ultima modifica 24 Aprile 2024