Creare la grafica per una applicazione iPhone

Framework iPhone
Framework 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.

Di Guest Blogger

Vuoi essere una guest blogger su Girl Geek Life? Scrivi con noi!.

22 commenti

  1. 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 🙂

  2. Brava Sharon, post molto chiaro e utile. Fra poco ti contatterò per una cosa che ha a che fare con questo blog. complimenti!

  3. 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… :-/

  4. 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.

  5. 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.

  6. 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.

    🙂

  7. 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 🙂

  8. Ciao!
    Mi è stato chiesto di realizzare la grafica per un’applicazione iphone, e mi trovo nel dubbio…quanto chiedere come compenso per un lavoro del genere?

  9. Ciao
    innanzitutto GRAZIE per le info condivise e soprattutto una chiara spiegazione in ITALIANO 🙂
    Vengo al dunque…..mi è stato chiesto di creare una grafica per una app per ios ed essendo digiuno la prima cosa che ho fatto è stata andare ad informarmi tramite la “bibbia” della apple (<a href="http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html&quot;) e ho notato (almeno credo di aver capito) che la Navigation Bar è fissa…..sbaglio ?

    E poi per le icone mi indica le misure 57 x 57px – 114 x 114px (high resolution) ma non specifica che tipo di file è……..png o gif ? tu come ti regoli ?

    Pensavo che almeno graficamente fosse leggermente meno complicata una app 😛

  10. Ciao Mauro,
    mi fa piacere che la spiegazione sia stata chiara e utile 🙂
    Cosa intendi per fissa? che deve stare nella parte in alto dell’app che vai a creare e che ci deve essere? La risposta è SI, serve ad esempio per indicare in quale punto ci si trova in una App e per tornare al passaggio precedente.

    Il formato delle icone è in PNG, non viene usato il formato GIF.
    Per le dimensioni dell’icona, utilizzano il formato più grande per avere sempre una buona resa sulla qualità, poi viene adattata alle dimensioni reali quando si carica sul sistema.

    Per @Oneta: mi scuso di non aver visto e risposto al tuo messaggio, orami visto la data è passato parecchio tempo e immagino che tu abbia già trovato una soluzione. Sfortunatamente non posso esserti comunque d’aiuto, perchè mi sono occupata solo di realizzare l’App e non ho trattato io la parte economica.

  11. Si effettivamente intendevo la posizione in alto della Navigation Bar ma anche la dimensione….ho 1 pò studiato il manuale (mai che ce ne fosse uno in italiano….) e ho capito che anche la dimensione deve essere fissa (562x187px se non erro) mentre io vorrei comunque snellirla in altezza per recuperare un pò di spazio.

    Per le immagini…..ho chiesto se andassero anche GIF perchè chi mi ha passato l’app aveva usato questo formato anche se io sostengo che oramai siano ben “fuori uso”.

    Per le dimensioni non ho capito…..è il sistema stesso a ridimensionarle o poi in fase di caricamento si devono caricare a 57×57 ?

    Scusa se bombardo ma è la prima volta che mi trovo a lavorare con le applicazioni ed è tutto nuovo per me.

  12. @ Sharon Sala:
    Ciao Sharon,
    approfitto anche io di te chiedendoti delle cose, sperando di essere ben accetto in un sito di ragazze appassionate di tecnologia 😉

    Mi sono anche io scontrato con questo problema: sto realizzando, insieme ad un mio amico programmatore, un’applicazione, io mi occupo della parte grafica.
    L’applicazione dovrebbe uscire come universal, cioè compatibile per tutti i devices (iphone retina, iphone, ipad).

    L’applicazione dovrebbe avere pulsanti customizzati tipo play stop ecc.

    Devo disegnare l’interfaccia grafica e i pulsanti per le dimensioni dello schermo retina? sarà il programma che riduce le immagini per farle stare nello schermo meno definito dell’iphone non retina?

    L’ipad ha una definizione nettamente diversa, devo disegnare il tutto anche per le dimensioni dell’ipad?

    Scusa magari sono banali come domande ma non riesco a trovare una risposta certa.

    Grazie

    Andrea

  13. Ciao Mauro e Andrea,
    cerco di rispondere alle vostre domande, inizio con Mauro.

    Ti capisco, sfortunatamente non ci sono manuali, tutorial o altro in giro che specifica meglio come comportarsi con la grafica di una applicazione.
    Parlano tutti della parte di sviluppo, ma nessuno approfondisce l’aspetto grafico. Così bisogna sperimentare e provare 🙂

    Per le icone come dicevo devi lavorare sul formato più grande, cioè il 114×114, da questa realizzi la stessa icona anche nei formati più piccoli. Sarà poi il sistema che visualizzerà quella corretta in base alle situazioni.

    Passo alle domande di Andrea.
    Sul iPhone retina non so darti indicazioni precise, non ho ancora avuto modo di studiarlo e non saprei dirti con certezza se ci sono differenze sostanziali a livello grafico da adottare per le applicazioni.
    Diciamo che mi piacerebbe testarlo caricandoci App pensate solo per iPhone, per vedere come si comportano e come si visualizzano.

    Invece per iPad, si dovrai ridisegnare App per questo formato, perché le differenze di dimensione, risoluzione e proporzioni dello schermo sono nettamente diversa dall’iPhone.
    Se hai un iPad per fare dei test, puoi vedere subito tali differenze caricando su di esso un applicazione pensata solo per iPhone.

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.