Creare la grafica per una applicazione iPhone

Prima o poi per lavoro doveva capitarmi, ormai siamo nel pieno boom delle applicazioni per smartphone, siti fruibili anche da cellulare e connettività in movimento.

Pertanto un web designer deve imparare nuove regole, nuovi schemi e nuovi approcci di user experience.

La mia avventura, come dicevo, è iniziata quando un cliente dell’agenzia ha manifestato l’esigenza di voler mettere a disposizione dei suoi utenti un’applicazione per iPhone, con gli stessi servizi forniti sul sito.

La prima cosa che ho fatto, non avendo né esperienza in merito, né abbastanza conoscenze della realtà mobile, è stata quella di cercare in rete informazioni sul mondo delle applicazioni per smartphone.

Posso dire che sono stata  fortunata, perché nello stesso periodo ho trovato un paio di seminari da seguire, utili per farmi una prima idea del settore e per raccogliere qualche informazione e link da approfondire cercando su internet.

Le mie ricerche in rete mi hanno fatto notare che le informazioni presenti sugli aspetti grafici per un’applicazione iPhone sono nettamente scarse in confronto a quelle invece legate alla programmazione. Nell’affrontare questa esperienza mi sono infatti sentita un po’ come una pioniera, verso l’ignoto armata solo dei miei studi sulla grafica e il web, verso un mondo nuovo.

Ho deciso così di mettere in pratica le stesse tecniche professionali che utilizzo tutti i giorni per la realizzazione di un sito; pertanto il primo approccio non è stato quello di mettersi al PC e iniziare a disegnare, ma quello di pensare alla progettazione.

Step 1  – studiare:

- quali interazioni e funzionalità si vuole che l’applicazione abbia

- quali esperienze d’uso si vuole che l’utente sperimenti con l’applicazione

- se l’applicazione deve funzionare off-line o online

- se l’applicazione deve avere al suo interno un database completo di informazioni o solo parziale

- se l’applicazione deve funzionare solo a schermo verticale o si può adattare anche nella versione orizzontale.

Messe giù le idee nere su bianco, l’immagine del risultato finale cominciava a farsi largo nella mia mente. Ancora non era il momento di aprire Photoshop.  Prima bisognava passare alla penna, per scrivere le idee, e alla matita per mettere su carta la grafica che si stava affacciando alla mia mente, in modo da non farla fuggire via come il vento.

Step 2 – disegnare:

Ecco che mi sono venuti in aiuto i wireframe trovati in rete

Ho iniziato così disegnare una bozza delle varie schermate dell’applicazione, della navigazione e le interazioni che mi aspettavo di ottenere. Tutto questo sapendo che ci sono alcuni punti fissi da tenere in considerazione:

NavBar Controller: l’area dove vanno posizionati il nome dell’applicazione o della schermata che si sta visualizzando e due bottoni di navigazione. Un esempio, sulla NavBar ci può essere un bottone che riporta al passaggio precedente, il nome della schermata e il bottone per comandi opzionali.

TabBar Controller: l’area dove vanno posizionate le icone dei controlli e delle funzioni che vogliamo creare per l’applicazione.

Un esempio, potremmo inserire un icona che:

- ci riporti all’inizio dell’applicazione

- apra una schermata di ricerca

- permetta di mandare un messaggio di quello che stiamo vedendo o leggendo

- consenta di  memorizzare un’informazione come preferita

e così via.

Misure Schermo: le misure in pixel dello schermo dell’iPhone sono 320×480 in verticale e 480×320 in orizzontale.

Fantasia: tanta e a piacimento, ma se dovesse scarseggia non preoccupatevi in soccorso c’è Apple Store su iTunes. Andate a sbirciare tra le applicazioni disponibili, troverete tanti screenshot utili per imparare e prendere spunto.

Sicuramente quello che fa la differenza è scaricare le applicazioni e provarle, un po’ come andare a guardare i siti della concorrenza per studiare le scelte grafiche, comunicative e di navigazione.

Step 3 -  realizzare:

A questo punto siamo pronti per aprire il nostro amato Photoshop e dare vita alle nostre idee su pixel. Anche in questo caso la rete è stata lì pronta a darmi una mano grazie un utilissimo kit in PSD, dove ci sono la schermata del telefono come base, la tastiera, alcuni bottoni, oggetti e altro ancora .

A questo punto posso solo dirvi lanciatevi e fatemi sapere come va.

Non vi lascio a bocca asciutta, ecco alcuni link per approfondire l’argomento:

Sharon

Sharon Sala nella vita professionale si divide tra Art director e Web project manager, in quella privata segue la sua passione per internet e le mille idee che le frullano sempre in testa.

Autrice: Guest Blogger

Questo post è stato scritto da una guest blogger. Potete vedere i dettagli nel post qui sopra. Vuoi essere una guest blogger su Girl Geek Life? Scrivi con noi!. Dai un'occhiata alla nostra pagina per i dettagli su come è possibile condividere i tuoi suggerimenti con la nostra comunità.
Website: http://www.girlgeeklife.com
Twitter: