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

1. MAKE
BETTER
METRO
APPS

2. Chi sono
• www.alessandro.scardova.it
• facebook.com/alexbream
• @alexbream
• Microsoft MVP Expression Blend
• DotDotNet.org

3. Principi
Metro Le origini Generali
Design
Language
Metro in
Windows Metro in
Agenda Phone 7.5 Windows 8 Q&A

4. Da dove viene Metro?

5. Il «DE STYIL»
• Nasce in Olanda nel 1917
• Rivista
• Theo van Doesburg
• Piet Mondrian
Neoplasticismo (la nuova plastica)
• Corrente multidisciplinare
• Astrattismo geometrico
• Fome pure
• Bidimensionali
• Colori primari
• Pubblicato nei quaderni del Bauhaus nel 1925

6. Bauhaus
Scuola Statale del Bauhaus
• Scuola di architettura arte e design
• Nasce in Germania nel 1919
• Walter Gropius
• Punto di riferimento per
Movimenti di Innovazione
Movimento Moderno
• Razionalità
• Chiarezza
• Etica
• Sociale
La scuola Bauhaus viene chiusa nel 1933
dal governo nazista perchè troppo aperta
alle tendenze internazionali. (wikipedia)

7. Stile Svizzero
• Nasce nel dopoguerra
• International Typographic Style
• Chiarezza
• Leggibilità
• Oggettività
• Griglie modulari composte da linee
verticali e orizzontali

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. Metro desing language

10. Tipografia
• Typeface sans-serfif
• Segoe UI
• Calibri
• Cambria
• Un solo font
• Poche dimensioni
• Salvo rispetto «brand»

11. Geometria
• Forme semplici
• Rettangolo
• Cerchio
• Margini
• Quando si
• Quando no
• Epigrafe?
• Asimmetria
• No bordi arrotondati
• No forme «naturali»

12. Colori
• Colori primari
• Evitare
• Sfumati
• Ombreggiature
• Colori pastello
• Limitare numero
• Usare codice colore

13. Tiles
• Contenuto
• Immagine
• Testo
• Dinamico
• Funzione
• Cambio di contesto

14. Content before chrome
Dieter Rams - 606 U.S.S. Shelving

15. Coerenza

16. Metro on Windows Phone 7.5

17. Application Bar
• Pulsanti
• Simboli chiari, obiettivi
• Non riciclare
• Mini e default size
• Menu item
• Funzionalità minori
• Non più di 5
• Background
• Foreground

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. Pivot
• Maggiore numero di item
• Performances
• Usare con parsimonia
• Ok per visualizzare dati

20. Metro on Windows 8

21. Anatomia di un app
• Hub
• Section
• Detail

22. App bar

23. Semantic Zoom

24. Snapped views

25. Pixel density

26. Scaling

27. Contracts and extensions
• Search
• Share
• Settings

28. Tipografia
• Page Header 42 px
• Page Subheader 20PX
• Body text 11px
• Info minori 9px
• Opacita 60% elementi secondari

29. Q&A

30. Buon Metro a tutti