In fase di progettazione della interfaccia grafica di un software, che sia un sito web o app per smartphone ecc, è particolarmente utile utilizzare un diagramma semplice ed essenziale, che permetta di definire una bozza, una demo, un provino dell’interfaccia che vogliamo realizzare. Questa attività ha una doppia valenza: consentire agli sviluppatori e progettisti di dialogare e confrontarsi con un diagramma sotto gli occhi e secondo permette al cliente/committente di avere un elemento visivo su cui ragionare e dettagliare meglio quelle che possono essere le ulteriori necessità o gusti del software richiesto.
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 quello ad alta definizione con elementi grafici simili al risultato finale, colori e una grafica professionale ed accattivante. I wireframe a bassa definizione permettono una sommaria progettazione UI e sono molto utili per una veloce progettazione UX. Quelli ad alta definizione, sono pensati per la progettazione UI. Vediamo solo alcuni elementi grafici caratteristici ricorrenti dei wireframe a bassa definizione:
- 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 diaginali 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 o un logo tipo immagine/player.
- Pulsanti: un rettangolo con testo che gli utenti possono cliccare idealmente.
- Link: Indica i collegamenti ipertestuali tra le diverse pagine o sezioni del sito e si ottiene con un testo sottolineato.
- Menu di navigazione: Rappresenta i menu e le opzioni di navigazione del sito.
- Campi di input: sono rettangoli vuoti come 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.
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, incluso Linux.
- https://wireframe.cc online con piano gratuito, anche senza registrazione, pensato più per demo di software desktop. Facile ed intuitivo da usare anche in classe.
- https://mydraft.cc online e gratuito, la versione più didattica e completa probabilmente
- draft.io gratuito con registrazione, soluzione molto versatile ed interessante
- 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 per fare piccole esperienze a scuola. Trovate una quantità enorme di video, tutorial, persino reel su lavori e tecniche di realizzazione.
- https://balsamiq.com (anche offline e commerciale)
- https://proto.io pensato più per i dispositivi mobili con funzionalità molto avanzate, commerciale
- https://vectr.com anche gratuito con limitazioni ma diversi tutorial interessanti per chi non ha mai fatto grafica
Ultima modifica 29 Maggio 2024
