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.
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.
Dai rompo io il ghiaccio :p
Ok lo faccio per spuntare la casellina per monitorare i commenti, caso mai volete fare qualche domanda, vengo a rispondere
Creare la grafica per una applicazione iPhone http://ping.fm/vfNic
This comment was originally posted on Twitter
Italy: Creare la grafica per una applicazione iPhone http://bit.ly/cGZRTt
This comment was originally posted on Twitter
Brava Sharon, post molto chiaro e utile. Fra poco ti contatterò per una cosa che ha a che fare con questo blog. complimenti!
Ecco se dovessi disegnare un’app per iPhone so dove trovare informazioni. O meglio, saprei a chi chiedere
This comment was originally posted on FriendFeed
Ciao lalui, contattami pure e grazie mille per i complimenti e anche per la pubblicità
utile! questo me lo conservo, dovesse capitare anche a me!
grazie Sharon!
Ciao Laura prego, sono contenta che il post sia utile
Ciao Sharon, spunti molti utili, grazie per averli condivisi.
C’è ancora un punto su cui sto sbattendo la testa e forse continuo a perdermi in un bicchiere d’acqua: la risoluzione dei vari dispositivi. Non parlo delle dimensioni degli schermi (quelle si trovano facilmente). Mi riferisco alla profondità in bit e alla dpi. Ho il dubbio che ogni smartphone segua le sue regole… ma è anche verò che se creo una png a 16 bit da usare come sfondo, il file pesa molto di più… e quindi l’applicazione risulta più lente. Lo stesso discorso vale per i dpi: tu a quanto lavori? a 72? a 96? a…?
Non riesco a trovare risposte a riguardo. Non ci sono neanche negli SDK per iPhone o per Android… :-/
Molto interessante. Per prova ho iniziato a lavorare sulla versione mobile del mio sito (www.orangedropdesign.com/i) e dopo aver pubblicato un articolo sul mio blog con un video di prova alcuni sviluppatori mi hanno chiesto di collaborare con loro.
È sicuramente un campo molto interessante e innovativo in cui poter cominciare a trovare un buon riscontro.
Ciao Ilaria, si infatti le informazioni sugli aspetti grafici si trovano difficilmente in giro, effettivamente nemmeno io sono riuscita a trovare indicazioni sui bit o i dpi. Ho risolto onestamente ragionando come se l’applicazione andasse sul web, cioè lavorando a 8 bit e 72 dpi. Il ragionamento è nato anche da un seminario che ho seguito, spiegava come trasformare una applicazione web in una applicazione ibrida per iPhone, il tutto si basava sul creare seguendo le regole standard di xhtml e css3.
Grazie per la risposta! sto continuando a pensarci e credo anch’io che sia così. Del resto su web non ci facciamo la domanda sui monitor in cui il sito vedrà visto: teniamo in considerazione le dimensioni minime, le varie adattabilità … ma non mettiamo in dubbio che si prosegua sempre a 8 bit e 72 dpi.
Ciao Andrea, sono andata a curiosare il sito mi piace un pò meno la pagina portfolio, sarà che non amo le transizioni sulle immagini, sarà che mi piace decidere da me quando girare immagine, quando fermarmi ecc.
Il video lo guardo sta sera con più calma che sono curiosa, anzi come lo hai realizzato? io di video non so nulla perciò sono curiosa.
Concordo con te che sia un campo molto interessante, inoltre qua in Italia è anche abbastanza nuovo e con possibilità di trovare nuovi lavori.
@Ilaria, prego