monthly.info: dall'idea al design dell'interfaccia mobile, step by step. versione 1.0
DESCRIPTION
Le slide che hanno accompagnato il mio intervento al Whymca di Milano (21 maggio 2010). Dopo l'intervento ho ricevuto diversi suggerimenti che approfondirò nel mio blog.TRANSCRIPT
![Page 1: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/1.jpg)
MONTHLY.INFODALL’IDEA AL DESIGNDELL’INTERFACCIA MOBILE,STEP BY STEP
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 2: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/2.jpg)
ARGOMENTI
1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: studio dell’interfaccia
5. Applicazione: progetto dell’interfaccia
6. 3 dubbi
7. Risorse e conclusioni
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 3: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/3.jpg)
ARGOMENTI
1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: studio dell’interfaccia
5. Applicazione: progetto dell’interfaccia
6. 3 dubbi
7. Risorse e conclusioni
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 4: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/4.jpg)
CHE COS’ÈMONTHLY.INFOmonthlyinfo.com
È un servizio onlineche permette di monitorareil ciclo.
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 5: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/5.jpg)
Bisogna registrarsioppure loggarsi
COMEFUNZIONA
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 6: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/6.jpg)
Homepage:Da qui si vede la previsione del prossimociclo
COMEFUNZIONA
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 7: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/7.jpg)
Homepage:Si può selezionareun giorno comedata di iniziodel ciclo
COMEFUNZIONA
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 8: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/8.jpg)
Homepage:Si possono vederee cambiarele dateprecedenti
COMEFUNZIONA
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 9: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/9.jpg)
Homepage:Si può vederea che punto del ciclo ci si trovaal momento della visita al sito
COMEFUNZIONA
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 10: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/10.jpg)
Homepage:Informazionigenerali in basealla mediadei cicliprecedenti
COMEFUNZIONA
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 11: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/11.jpg)
Homepage:Graficocon le statistiche
COMEFUNZIONA
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 12: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/12.jpg)
Calendario:ripropone in grande il pannelloa sinistra in homepage
COMEFUNZIONA
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 13: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/13.jpg)
COMEFUNZIONA
Data:quando si aggiungeo si edita una datasi possono inserire note.Una data può essere taggata come“inizio ciclo”
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 14: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/14.jpg)
Reminders:se ne possono impostare n e arriverà un avviso via mail
COMEFUNZIONA
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 15: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/15.jpg)
Settings:per aggiornarele impostazionipersonali
COMEFUNZIONA
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 16: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/16.jpg)
AboutDonateNewsTermsContact
ALTRI CONTENUTI
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 17: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/17.jpg)
VERSIONE MOBILEDEL SITO
Non esiste, ma la grafica si adatta bene.Finché...
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 18: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/18.jpg)
VERSIONE MOBILEDEL SITO
...non proviamoa usarla.
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 19: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/19.jpg)
CHI SONO
Ilaria Mauric
• freelance art director e designer delle interfacce• mi interesso di user experience e information architecture• mi interesso di nuove tecnologie• amo leggere fumetti
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 20: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/20.jpg)
COSA VORREI PER MONTHLY.INFO
• ux più comoda per chi usa il servizio da smartphone
• previsioni future, non limitate al solo “prossimo ciclo”
• quando c’è connessione, i dati vengono aggiornati online. Non devo preoccuparmi della copertura di rete (stile Dropbox)
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 21: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/21.jpg)
METODO
Ux + interface design Sviluppo
Ma gli attori potrebbero essere di più... anzi, lo sono quasi sempre.
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 22: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/22.jpg)
ARGOMENTI
1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: studio dell’interfaccia
5. Applicazione: progetto dell’interfaccia
6. 3 dubbi
7. Risorse e conclusioni
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 23: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/23.jpg)
WEB APPLICAZIONE• content is king (contenuto, divertimento/curiosità
comunicazione)
• accesso - quando abbiamo un pc - quando siamo connessi
• oggetto non personale
• context is king (funzionalità, utilità, servizio)
• accesso - quando il nostro smartphone è con noi (sempre) - a prescindere dalla copertura di rete
• oggetto personale
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 24: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/24.jpg)
WEB APPLICAZIONE• risposta “relativamente” lenta
• le funzioni disponibili sono molte a discapito della funzionalità di maggiore interesse (inizia ciclo oggi)
• vantaggio per sviluppatori: rimanendo su web, basta creare un foglio stile ad hoc per la visualizzazione mobile
• risposta veloce
• possibilità di ristudiare il servizio in modo che semplifichi al massimo le operazioni più probabili
• svantaggio per sviluppatori: su mobile, piattaforme diverse e codice da riscrivere da capo.
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 25: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/25.jpg)
ARGOMENTI
1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: studio dell’interfaccia
5. Applicazione: progetto dell’interfaccia
6. 3 dubbi
7. Risorse e conclusioni
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 26: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/26.jpg)
MONTHLY.INFO
DA WEB AD APPLICAZIONE- calendario per aggiungere date- date modificabili- aggiungi note- situazione generale- statistiche- reminders- settings- about- donate- news- terms- contact
- calendario per aggiungere date- date modificabili- aggiungi note- situazione generale- statistiche- reminders- settings- about- donate- news- terms- contact
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 27: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/27.jpg)
APPLICAZIONE: PRIORITÀ1) situazione odierna2) aggiungi data3) aggiungi nota4) reminders5) settings
6) situazione generale
7) about
MONTHLY.INFO
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 28: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/28.jpg)
MONTHLY.INFO
APPLICAZIONE: OLTRE IL WEB1) situazione odierna2) aggiungi data3) aggiungi nota4) reminders push notifications5) settings
6) situazione generale eventi passati e futuri
7) about credits
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 29: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/29.jpg)
ARGOMENTI
1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: studio dell’interfaccia
5. Applicazione: progetto dell’interfaccia
6. 3 dubbi
7. Risorse e conclusioni
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 30: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/30.jpg)
SITO (VERSIONE MOBILE) APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 31: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/31.jpg)
SITO (VERSIONE MOBILE) APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 32: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/32.jpg)
SITO (VERSIONE MOBILE) APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 33: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/33.jpg)
INIZIO CON I WIREFRAME
Con Balsamiq, Flairbuilder, Omnigraffle, MockFlow, Axure...Ma anche con Illustrator, Google Drawings, Corel Draw...
Oppure...
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 34: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/34.jpg)
WIREFRAME
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 35: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/35.jpg)
WIREFRAME
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 36: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/36.jpg)
WIREFRAME
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 37: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/37.jpg)
WIREFRAME
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 38: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/38.jpg)
WIREFRAME
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 39: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/39.jpg)
WIREFRAME: ALCUNI LINK PER DISEGNARE
Per Android:http://www.tomhume.org/2010/01/android-wireframe-templates.html
Per iPhone:http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/
Ma ci sarebbero anche Palm, Blackberry, Nokia, Samsung...
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 40: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/40.jpg)
SCEGLI LA PIATTAFORMA DI SVILUPPO... e leggi le UI guidelines sugli SDK:
Per Android:http://developer.android.com/guide/practices/ui_guidelines/index.html
Per iPhone OS X:http://tuvix.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
Ma ci sarebbero anche Windows Mobile, Palm OS, Symbian...
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 41: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/41.jpg)
IMPOSTA IL FILE DI BASEDa un programma di elaborazione immagini (Photoshop, Fireworks, Gimp, Pixelmator...), il file dovrà avere queste specifiche:
• schermo a 320 x 480 pixel *• doppio formato (portrait e landscape) **• risoluzione: 72 dpi ***• profondità: 8 bit ***• metodo colore: RGB
* Molti OS girano su device con risoluzioni diverse.** La grafica dovrà essere adattabile (fluida).*** Continuo ad avere qualche dubbio su questi due dati.
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 42: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/42.jpg)
Online si trovano file grafici su livelli che contengono i principali elementi dell’interfaccia di uno smartphone: top bar, nav bar, tab bar, sliders, alert, bottoni, tastiere...
Per Android:http://www.matcheck.cz/androidguipsd/
Per iPhone:http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/
RISORSE PER LA GUI
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 43: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/43.jpg)
RISORSEPER LA GUI
Per questa presentazione, ho scelto iPhone e gli elementi contenutinel kit di Teehan+Lax (molto completi e dettagliati)
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 44: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/44.jpg)
ARGOMENTI
1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: studio dell’interfaccia
5. Applicazione: progetto dell’interfaccia
6. 3 dubbi
7. Risorse e conclusioni
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 45: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/45.jpg)
APPLICAZIONE
top bar
nav bar
tab bar
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 46: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/46.jpg)
APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 47: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/47.jpg)
APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 48: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/48.jpg)
APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 49: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/49.jpg)
APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 50: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/50.jpg)
APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 51: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/51.jpg)
APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 52: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/52.jpg)
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 53: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/53.jpg)
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 54: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/54.jpg)
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 55: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/55.jpg)
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 56: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/56.jpg)
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 57: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/57.jpg)
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 58: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/58.jpg)
... più altre eventuali
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 59: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/59.jpg)
SITO (LANDSCAPE) APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 60: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/60.jpg)
ARGOMENTI
1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: studio dell’interfaccia
5. Applicazione: progetto dell’interfaccia
6. 3 dubbi
7. Risorse e conclusioni
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 61: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/61.jpg)
DUBBIO 1:LA COMPLICHIAMO?
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 62: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/62.jpg)
Più si aggiungonofunzionalità, più è necessario eseguire degli user test accurati
Nel dubbio, non famolo strano.
DUBBIO 1:LA COMPLICHIAMO?
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 63: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/63.jpg)
Le date e le note hanno la stessa funzione: creare un evento nel calendario. L’evento potrà avere una nota o un tag (inizio ciclo).
DUBBIO 2:I COLORI AIUTANO DAVVERO?
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 64: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/64.jpg)
Meglio tenere un unico colore?
DUBBIO 2:I COLORI AIUTANO DAVVERO?
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 65: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/65.jpg)
Rivalutare uso delle icone e possibile funzionamento “intelligente” dello sliderSì/No.
DUBBIO 2:I COLORI AIUTANO DAVVERO?
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 66: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/66.jpg)
Siamo sicuri che 72 dpi e 8 bitsia la risoluzione corretta?
DUBBIO 3:A CHE RISOLUZIONELAVORIAMO? ?
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 67: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/67.jpg)
ARGOMENTI
1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: studio dell’interfaccia
5. Applicazione: progetto dell’interfaccia
6. 3 dubbi
7. Risorse e conclusioni
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 68: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/68.jpg)
LAVORIAMO IN SQUADRA
Ma gli attori potrebbero essere di più... anzi, lo sono quasi sempre.
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 69: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/69.jpg)
LAVORIAMO IN SQUADRA
NUOVE INTERFACCE
Ma gli attori potrebbero essere di più... anzi, lo sono quasi sempre.
Nuovi dispositivi =
Nuovi scenari=
Nuovi contesti
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 70: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/70.jpg)
COSA C’È DIETRO
Design contestuale:
• http://www.slideshare.net/lucamascaro/verso-la-mobilita
• http://www.slideshare.net/nickf/contextual-web-ii (per web, ma linee guida ok anche per applicazioni)
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 71: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/71.jpg)
COSA C’È DIETRO
Design comportamentale e ux:
• http://www.slideshare.net/nickf/mobile-ux• http://www.slideshare.net/OpenRoad/mobile-ui-
design-user-centered-design-and-ui-best-practices• http://www.usabile.it/492010.htm (per web, ma linee guida ok anche per applicazioni)
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 72: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/72.jpg)
ARTICOLI UTILI
Introduzione alla progettazione grafica per iPhone (di Sharon Sala)
Differenze tra web e software (di Maurizio Boscarol)
• http://www.girlgeekdinnersitalia.com/2010/04/
creare-la-grafica-per-una-applicazione-iphone/
• http://usabile.it/092001.htm (articolo del 2001, con fondamenti ancora validi)
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 73: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/73.jpg)
GRAZIE A• Heather di Monthly.Info che mi ha autorizzato a partire dal suo sito web;• Adriano Gasparri, che mi ha fatto scoprire Monthly.Info e per il continuo confronto professionale;• Il gruppo di Dolcevita Android, che mi ha aperto le porte sul mobile: Alfredo Morresi, Lorenzo Massacci,
Michele Focanti, Sergio Sarnari, Andrea Balducci.
...e a tutti quelli che mi hanno dato un parere su queste slide.
21 maggio 2010 • Monthly.info • Ilaria Mauric
![Page 74: Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0](https://reader033.vdocument.in/reader033/viewer/2022051610/54847eb8b479590f0d8b4b67/html5/thumbnails/74.jpg)
DOMANDE?RISPOSTE? CORREZIONI? VOSTRE ESPERIENZE?
ilariamauric.it
21 maggio 2010 • Monthly.info • Ilaria Mauric