Ignite GGD#12: Trasforma il tuo Nintendo DS in un E-book reader

15 mag

Ecco il video e la presentazione ufficiali della 12° serate delle Girl Geek Dinner Milano.

View more presentations from GGD Milano.

Sullo stesso argomento è possibile leggere anche l’articolo che ho scritto per Girl Geek Life, con tutti i link e i dettagli.

Creare la grafica per una applicazione iPhone

29 apr

Sono recidiva lo so, ma mi lascio tentare, ecco il secondo post scritto e pubblicato su Girl Geek Life

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.

Video per come migliorare graficamente un’applicazione

Fireworks – link 1

Fireworks – link 2

Fireworks – link 3

Fireworks – link 4

Grafica – link 1

Grafica – link 2

Grafica – link3

Una mattina di primavera con Camparitivo in Triennale

15 apr

Può capitare che in una bella giornata di primavera sai di avere un pò di tempo per te stessa e che ti attende un impegno molto piacevole.
Esco sotto un timido sole che gioca a nascondersi dietro alle nuvole e a comparire per scaldarti un pò, in questa mattinata un pò freddina per essere aprile.

Cammino per le vie di Milano, sempre con lo sguardo di una bambina che scopre sempre con gioia quante cose belle nasconde questa città, che sembra così tanto grigia e sgobbona per chi viene da fuori.

Devo muovermi c’è un aperitivo chiccoso che mi aspetta, in una location famosa per l’arte e il design; allungo il passo, perchè non è il caso di arrivare in ritardo al Camparitivo alla Triennale con CampariMatteo Ragni che ci farà scoprire questo nuovo bar tra arte e natura.

Muoversi, sono curiosa di vedere cosa mi aspetta!

(continua…)