MAKEBETTERMETROAPPS
Chi sono•   www.alessandro.scardova.it•   facebook.com/alexbream•   @alexbream•   Microsoft MVP Expression Blend•   DotDot...
PrincipiMetro      Le origini   GeneraliDesignLanguage           Metro in           Windows      Metro inAgenda     Phone ...
Da dove viene Metro?
Il «DE STYIL»•   Nasce in Olanda nel 1917•   Rivista      • Theo van Doesburg      • Piet MondrianNeoplasticismo (la nuova...
BauhausScuola Statale del Bauhaus• Scuola di architettura arte e design• Nasce in Germania nel 1919• Walter Gropius• Punto...
Stile Svizzero•   Nasce nel dopoguerra•   International Typographic Style•   Chiarezza•   Leggibilità•   Oggettività•   Gr...
Weniger, aber besser•   Le 10 regole di Dieter Rams      Un buon design è innovativo      Un buon design rende un prodotto...
Metro desing language
Tipografia•   Typeface sans-serfif      • Segoe UI      • Calibri      • Cambria• Un solo font• Poche dimensioni• Salvo ri...
Geometria•   Forme semplici      • Rettangolo      • Cerchio•   Margini      • Quando si      • Quando no      • Epigrafe?...
Colori•   Colori primari•   Evitare     • Sfumati     • Ombreggiature     • Colori pastello•   Limitare numero•   Usare co...
Tiles•   Contenuto     • Immagine     • Testo•   Dinamico•   Funzione•   Cambio di contesto
Content before chromeDieter Rams - 606 U.S.S. Shelving
Coerenza
Metro on Windows Phone 7.5
Application Bar•   Pulsanti     • Simboli chiari, obiettivi     • Non riciclare•   Mini e default size•   Menu item     • ...
Panorama•   Ricco contenuto visuale•   Application bar solo mini size•   Solo verticale•   Non più di 5 sezioni•   Backgro...
Pivot•   Maggiore numero di item•   Performances•   Usare con parsimonia•   Ok per visualizzare dati
Metro on Windows 8
Anatomia di un app•   Hub•   Section•   Detail
App bar
Semantic Zoom
Snapped views
Pixel density
Scaling
Contracts and extensions•   Search•   Share•   Settings
Tipografia•   Page Header 42 px•   Page Subheader 20PX•   Body text 11px•   Info minori 9px• Opacita 60% elementi secondari
Q&A
Buon Metro a tutti
Upcoming SlideShare
Loading in …5
×

Make better metro apps

857 views

Published on

Introuzione al metro design language per Windows Phone 7.5 e per Windwos 8.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Make better metro apps

  1. 1. MAKEBETTERMETROAPPS
  2. 2. Chi sono• www.alessandro.scardova.it• facebook.com/alexbream• @alexbream• Microsoft MVP Expression Blend• DotDotNet.org
  3. 3. PrincipiMetro Le origini GeneraliDesignLanguage Metro in Windows Metro inAgenda Phone 7.5 Windows 8 Q&A
  4. 4. Da dove viene Metro?
  5. 5. Il «DE STYIL»• Nasce in Olanda nel 1917• Rivista • Theo van Doesburg • Piet MondrianNeoplasticismo (la nuova plastica)• Corrente multidisciplinare• Astrattismo geometrico • Fome pure • Bidimensionali • Colori primari• Pubblicato nei quaderni del Bauhaus nel 1925
  6. 6. BauhausScuola Statale del Bauhaus• Scuola di architettura arte e design• Nasce in Germania nel 1919• Walter Gropius• Punto di riferimento per Movimenti di InnovazioneMovimento Moderno• Razionalità• Chiarezza• Etica• SocialeLa scuola Bauhaus viene chiusa nel 1933dal governo nazista perchè troppo apertaalle tendenze internazionali. (wikipedia)
  7. 7. Stile Svizzero• Nasce nel dopoguerra• International Typographic Style• Chiarezza• Leggibilità• Oggettività• Griglie modulari composte da linee verticali e orizzontali
  8. 8. Weniger, aber besser• Le 10 regole di Dieter Rams Un buon design è innovativo Un buon design rende un prodotto utile Un buon design è estetico Un buon design ci aiuta a capire un prodotto Un buon design non è invasivo Un buon design è onesto Un buon design è duraturo Un buon design lo è fino all’ultimo dettaglio Un buon design si preoccupa dell’ambiente Un buon design è meno design possibile• Purezza e semplicità• Influenza Jonathan Ive (Apple) http://itomizer.com/
  9. 9. Metro desing language
  10. 10. Tipografia• Typeface sans-serfif • Segoe UI • Calibri • Cambria• Un solo font• Poche dimensioni• Salvo rispetto «brand»
  11. 11. Geometria• Forme semplici • Rettangolo • Cerchio• Margini • Quando si • Quando no • Epigrafe?• Asimmetria• No bordi arrotondati• No forme «naturali»
  12. 12. Colori• Colori primari• Evitare • Sfumati • Ombreggiature • Colori pastello• Limitare numero• Usare codice colore
  13. 13. Tiles• Contenuto • Immagine • Testo• Dinamico• Funzione• Cambio di contesto
  14. 14. Content before chromeDieter Rams - 606 U.S.S. Shelving
  15. 15. Coerenza
  16. 16. Metro on Windows Phone 7.5
  17. 17. Application Bar• Pulsanti • Simboli chiari, obiettivi • Non riciclare• Mini e default size• Menu item • Funzionalità minori • Non più di 5• Background• Foreground
  18. 18. Panorama• Ricco contenuto visuale• Application bar solo mini size• Solo verticale• Non più di 5 sezioni• Background art • Ma anche no• Ok per tiles, text buttons• Non per dati
  19. 19. Pivot• Maggiore numero di item• Performances• Usare con parsimonia• Ok per visualizzare dati
  20. 20. Metro on Windows 8
  21. 21. Anatomia di un app• Hub• Section• Detail
  22. 22. App bar
  23. 23. Semantic Zoom
  24. 24. Snapped views
  25. 25. Pixel density
  26. 26. Scaling
  27. 27. Contracts and extensions• Search• Share• Settings
  28. 28. Tipografia• Page Header 42 px• Page Subheader 20PX• Body text 11px• Info minori 9px• Opacita 60% elementi secondari
  29. 29. Q&A
  30. 30. Buon Metro a tutti

×