Iniziare con Wireframing usando Balsamiq

Il wireframing può essere idealmente definito come un'attività per visualizzare il layout di uno schermo. Ci sono molti strumenti di wireframing presenti oggi sul mercato, ma il più semplice e il più utilizzato è Balsamiq, il nostro argomento di oggi. Ma, prima, capiamo prima perché abbiamo bisogno di wireframe?
Quando si tratta di sviluppo software, è fondamentale sapere come apparirà il prodotto finale, anche prima dell'inizio dello sviluppo. Questa visualizzazione iniziale del prodotto funge da linea guida per tutte le parti interessate e aiuta a evitare qualsiasi ambiguità che potrebbe sorgere in futuro.
In passato, i paragrafi di testo venivano utilizzati per ottenere i requisiti del software.

Tuttavia, questi frammenti di testo non erano sufficienti per avviare la visualizzazione, poiché ogni persona che leggeva i requisiti lo visualizzava in un modo diverso dal resto. Questa ambiguità porta a un sacco di confusione e si traduce in spreco di tempo, denaro e sforzi. Per aiutare la causa, entra in gioco il wireframing. A causa della facilità che apporta al processo di sviluppo generale.

In questo articolo, ti aiuteremo a capire domande come:

• • Cos'è il balsamiq?

• • Come iniziare con esso?

• Come esportare il wireframe/mockup finale?

Cos'è il balsamiq?

Il wireframing, in sostanza, può essere eseguito su un tovagliolo usando una penna. Alla fine della giornata, dopotutto è solo uno schizzo. Tuttavia, quando si tratta di collaborare e condividerlo con i professionisti, è meglio passare a uno dei tanti strumenti oggi presenti sul mercato. Uno di questi strumenti è Balsamiq: è semplice da usare e fornisce molte funzionalità per costruire un utile wireframe.
Balsamiq è uno strumento eccellente e soddisfa tutti i requisiti di wireframing e collaborazione. Ha un set unico di funzionalità che ti consentono di eseguire rapidamente wireframe, ottenere feedback in tempo reale, incorporare tali feedback e migliorare il wireframe. Questo alla fine fa allineare l'intero team con la funzionalità dell'applicazione per quanto riguarda il layout.
Con Balsamiq, anche collaborare con i membri del team remoti è un gioco da ragazzi in quanto può esportare wireframe in formato PNG o PDF che consente flessibilità durante la condivisione dei wireframe.
10 strumenti di wireframing più efficaci

Iniziare con Balsamiq

Balsamiq è disponibile per Windows e Mac OS e può essere scaricato online . Dopo aver scaricato lo strumento e averlo aperto, vedrai una schermata come:

Come mostrato nello screenshot sopra, l'interfaccia utente di Balsamiq è divisa nelle quattro parti seguenti.

• • Navigatore

• • Libreria dell'interfaccia utente

• • Ispettore

• Spazio/area wireframe

La sezione evidenziata in rosso serve per passare dall'ispettore sezioni alle informazioni sul progetto. Le funzionalità sono incluse nella libreria dell'interfaccia utente, diamo un'occhiata in modo approfondito.

La libreria dell'interfaccia utente

La libreria dell'interfaccia utente è classificata in base a diversi elementi dello schermo.
Facciamo conoscenza con le diverse categorie di elementi dello schermo disponibili in Balsamiq.

• • Tutti − Cliccando su questo ti verranno mostrati tutti gli elementi dell'interfaccia utente offerti da Balsamiq. Lo scorrimento orizzontale ti consentirà di visualizzarli o utilizzarli.

• • Risorse : questa sezione include le cose che puoi caricare e utilizzare successivamente nei tuoi wireframe.

• • Grande : include gli elementi dello schermo ragionevolmente più grandi come i segnaposto, la finestra del browser, l'iPhone e l'iPad.

• • Pulsanti : questa sezione include tutti i controlli dei pulsanti di cui avrai bisogno in un wireframe, come pulsanti di azione, caselle di controllo, ecc.

• • Comune - Questa sezione comprende le forme utilizzate per denotare le interazioni più comuni.

• • Contenitori − Include opzioni come Window, FieldSet, Browser, ecc. Come suggerisce il nome, include Window, FieldSet, Browser, ecc.

• • Moduli : questa categoria contiene tutti i controlli relativi ai moduli, come elementi di input, pulsanti di opzione, pulsante di invio e così via.

• • Icone : contiene l'insieme di icone che è possibile utilizzare per denotare una particolare operazione. Ad esempio, un'icona floppy invece del pulsante di salvataggio, ecc. Balsamiq offre una vasta collezione di icone gratuite che possono essere utilizzate per varie azioni.

• • iOS : contiene i controlli dell'interfaccia utente specifici per iOS.

• • Layout - I layout sono estremamente importanti quando è necessario rappresentare una pagina/caratteristica di base. Questa categoria include la maggior parte dei layout come schede verticali / orizzontali, fisarmoniche, ecc.

• • Markup : viene utilizzato per aggiungere un commento su un particolare controllo nel wireframe. Contiene anche callout utilizzati per mostrare la connettività in molti scenari.

• • Media : in questa sezione sono disponibili tutti i controlli dell'interfaccia utente relativi ai media che aiutano a mostrare un'immagine/video/suono nel wireframe.

• • Simboli - Questa è una raccolta di componenti riutilizzabili che possono ridurre il tempo necessario per creare i componenti comuni.

• Testo - Come dice il nome, questo contiene tutti i controlli dell'interfaccia utente relativi al testo. Funzionalità come un blocco di testo, casella combinata, barra dei collegamenti, ecc. sono disponibili in questa categoria.

La conoscenza di questi componenti, unita al fatto che Balsamiq ti consente di trascinare e rilasciare facilmente i componenti, ti aiuterà a creare wireframe di tua scelta in modo rapido ed efficace.
Quale di questi strumenti di gestione dei prodotti stai già utilizzando?

Ora, supponiamo per il tuo sito web di aver creato un wireframe di queste quattro pagine: Home, Prodotti e servizi, Contattaci e Chi siamo. Ora, dobbiamo eseguire un altro compito essenziale che farà in modo che il nostro wireframe assomigli un po 'più a un sito Web a tutti gli effetti e meno a uno schizzo. Per questo, dobbiamo collegare le nostre pagine, poiché idealmente sarebbero collegate in un sito Web. Il collegamento ti aiuta anche ad andare avanti e indietro tra i wireframe facilmente.

Collegamento delle pagine

Questo passaggio aiuterà i tuoi wireframe ad apparire in ordine, come farebbero su qualsiasi sito web. Per ottenere questa navigazione, fai clic sulla barra dei collegamenti nell'angolo in alto a destra .
Innanzitutto, iniziamo collegando la Homepage alla pagina Prodotti e Servizi:

• • Vai alla home page

• Fare clic sulla barra dei collegamenti nell'angolo in alto a destra

Fare riferimento al riquadro delle proprietà

La sezione evidenziata in verde mostra i vari wireframe che hai creato fino ad ora. Iniziamo collegando la Home page. Fare clic sul menu a discesa per visualizzare l'elenco dei modelli disponibili. Mostrerà un elenco come di seguito:

Dall'elenco a discesa visualizzato, seleziona Prodotti e servizi per creare un collegamento da Home a Prodotti e servizi. Allo stesso modo, ripetere la stessa procedura per le altre pagine.
L'arte del processo decisionale: per manager, leader e addetti ai prodotti

Esportazione del Wireframe

Il wireframe che hai appena creato non è di alcuna utilità se non puoi presentarlo al tuo cliente/utente finale in un formato più comune, come PDF o PNG. A tale scopo, Balsamiq ti consente di esportare facilmente i mockup in uno di questi formati.
In questo esempio, stiamo esportando il nostro mockup in un formato PDF. Per questo, fai clic sul menu Progetto, quindi fai clic su Esporta in PDF.
Otterrai una schermata come quella mostrata di seguito:

Seleziona la casella di controllo - "Mostra suggerimenti per il collegamento".
Quindi, fai clic su Esporta in PDF . Mostrerà un popup in cui puoi specificare un locale in cui desideri esportare il PDF. L'avanzamento verrà mostrato in una barra di avanzamento come di seguito.

Al termine dell'esportazione, verrà visualizzata una casella di conferma. Cliccando sulla casella, potrai visualizzare il PDF insieme a tutte le navigazioni che hai impostato.
Costruire prodotti minimi vitali: quanto è troppo?

Avvolgendo…
Non si può negare l'importanza del wireframing nel mondo dello sviluppo di applicazioni di oggi. Forniscono molte funzionalità che finiscono per alleggerire il tuo carico di lavoro complessivo: gli strumenti di wireframing non mancano assolutamente, ma Balsamiq è uno dei pochi strumenti che soddisfa le tue esigenze a tutto tondo!

Impara i corsi MBA online dalle migliori università del mondo. Guadagna master, Executive PGP o programmi di certificazione avanzati per accelerare la tua carriera.