Creare Mockup usando WordPress

Fonte immagine: http://blog.mrwebmaster.it/2015/02/18/creare-interfacce-per-app-iphone-con-iphone-mockup.html

Fonte immagine: http://blog.mrwebmaster.it/2015/02/18/creare-interfacce-per-app-iphone-con-iphone-mockup.html

Immaginiamo di voler sviluppare una nuova app. Vi è venuta un’idea straordinaria, un’intuizione fantastica per un App che sbalordirà l’App Store?
Abbiamo quindi bisogno di un tecnico che ci aiuti a realizzare l’idea. Ma immaginiamo lo scenario più comune, ovvero quello in cui chi ha avuto l’intuizione non abbia alcun tipo di conoscenza informatica. Immaginiamo che il vostro potenziale cliente abbia anche serie difficoltà ad utilizzare i principali software per sviluppare la propria creatività. Insomma lo scenario più comune è quello in cui il vostro potenziale cliente al massimo riesca ad utilizzare Word ed Excel o Paint, ma si sente adatto all’avventura sulle app essendo capacissimo nel pubblicare su facebook.

Ciò di cui ha bisogno questo ipotetico cliente è un supporto personale, e si aspetta che Voi – il tecnico – riusciate a comprendere e completare l’idea che ha avuto e quindi riusciate a dar vita al progetto di business che ci dovrebbe essere dietro questa idea.
Il nocciolo del discorso è:  come fare a far diventare un idea di un estraneo in un prodotto che lui stesso possa vendere e arricchirlo?
La proposta mi è stata data diverse volte ma la questione continua ad essere complicata: come facciamo a fargli l’app e sopratutto come facciamo a dirgli quanto costa, visto che il nostro potenziale cliente continua a chiederci quanto verrebbe a costare un lavoro chiavi in mano che riesca a dar vita alla sua idea, quanto costa dar vita ad un idea raccontata in pochi minuti?

Questo è il topico vicolo cieco in cui veniamo portati da quasi tutti i nostri aspiranti clienti, e visto che vogliamo soddisfarli dobbiamo stare attenti alle parole che usiamo e sopratutto alle cifre che esponiamo. Allora per uscire dall’impasse sono solito rispondere : << senza preparare un  Mockup ben fatto difficilmente si potrà riuscire a capire quanto quest’app possa costare>>, anche in fase iniziale , quella budgetaria, perchè i tempi di sviluppo si possono tranquillamente centuplicare ex post e tanto facilmente le previsioni possono diventare inaffidabili se non si son esposte a dovere tutte le funzionalità che l’app deve possedere. Quello che non si riesce mai a far comprendere è che tutto ciò che il cliente da per scontato spesso genera nuovi costi che non potremo supportare.

Mock-up o Mockup
Per mock-up o Mockup intendiamo la riproduzione di un oggetto , o in questo caso di un’app, che possa rappresentarlo ad uso didattico e dimostrativo o scenografico.
In genere i mock-up vengono utilizzati nel marketing e rappresentano dei modelli, o prototipi, che sono necessari per poter testare una nuova confezione, un espositore, uno stand, un gadget , una scenografia …etc etc…
Dall’ultimo paragrafo risulta quindi ovvio che se un direttore marketing ha necessità di avere in mano un mockup, anche solo per poter verificare una confezione di surgelati da immettere sul mercato, figuriamoci che qualità e tipo di dettagli dovrebbe avere un prototipo/mockup di un’applicazione per complicatissimi dispositivi mobili. Un applicazione a differenza di una semplice confezione può avere in se infinite iterazioni , infinite vesti grafiche e infinite funzionalità.

Quindi di che si tratta? Cosa è un mockup? Perché è necessario per lo sviluppo di un’ App?
In poche parole abbiamo detto che è un prototipo, quindi è un modello in scala di un oggetto, spesso questo oggetto ancora non è stato costruito e quindi il mockup normalmente è la rappresentazione di un modello ipotetico.

Ci sono diversi software, più o meno professionali,  che possono aiutare l’ufficio marketing a non pendere enormi cantonate sulla definizione del budget e dei tempi per lo sviluppo e pubblicazione di un app per iPhone, iPad o Android, o un qualsiasi software applicativo.

In questo articolo vedremo una  puntata di Total Photoshop (http://www.total-photoshop.com) un sito che contiene numerosi video tutorial e dedicato principalmente ai creativi digitali che utilizzano WordPress per la creazione dei propri siti Web..
Vedremo come realizzare un mockup dei dispositivi più conosciuti grazie ad un plugin di WordPress, sarà sufficiente utilizzare un cosiddetto shortcode.

Fonte: http://www.total-photoshop.com/video/WP_3614_Device_MockUp.mp4 Download Video: mp4: “Device Mockup”

Wireframe
Qualora non abbiate confidenza con WordPress vi suggerisco di iniziare a preparare almeno un wireframe per ogni schermata o pagina di cui deve essere composta l’app.. Definiamo  wireframe  il semplice abbozzo degli oggetti presenti nella pagina dell’app e sopratutto della loro posizione al suo interno.

Di seguito alcuni link a software che possono aiutare a creare wireframe online.
Ricordate sempre che se avete ostacoli con l’uso di questi software potete tranquillamente disegnarli anche solo su carta, e poi trascriverli graficamente in un secondo momento con gli strumenti che più vi aggradano.

Risorse online Descrizione
Balsamiq mockups La versione demo gratuita si può utilizzare praticamente senza restrizioni, permette di esportare file di testo (XML) per salvare i progetti. Non richiede registrazione. È realizzato in flash, quindi non si può utilizzare su iPad.
iPLOTZ Offre un profilo gratuito e richiede la registrazione. Oltre al tool per i wireframe supporta anche nella gestione dei progetti e dei tempi. Usa Flash, quindi non si può utilizzare su iPad..
Mockflow La versione free permette di realizzare un progetto alla volta ma consente di salvarlo e condividerlo. Richiede la registrazione. È realizzato in flash, quindi non si può utilizzare su iPad.
HotGloo Permette un test gratuito per 15gg, previa iscrizione. Consente la condivisione del progetto. È realizzato in flash, quindi non si può utilizzare su iPad.
iPhone Mockup  Per la realizzazione di bozze e modelli online per le interfacce utente delle applicazioni mobili destinate al iPhone, libero e gratuito
Lumzy Software Mockup interattivi, per clienti inesperti crea mockup che mostrano come il sito o l’applicazione funzionerà. I clienti potranno interagire con il mockup con la sensazione di avere sott’occhio uno schizzo disegnato a mano.
Cacoo Software di disegno online che ti permette di creare diagrammi, come mappe del sito, cornici, UML e diagrammi di rete. Permette a più utenti di lavorare e modificare lo stesso mockup in ottica collaborativa
Pencil Project Software free diffuso ed è piuttosto potente. ; è un addon del browser Firefox per la realizzazione di mockup e wireframe di GUI con una molte funzioni, Compatibile con Linux, Windows e Apple Mac-Osx.
Web Site Wireframe Tool E’ un semplice strumento per fare mockup e wireframe, spartano e rapido e permette di condividere velocemente i risultati via web. Web Site Wireframe Tool è Free e funziona con il browser, tra cui Internet Explorer e Mozilla Firefox.

2 commenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*