• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Make better metro apps
 

Make better metro apps

on

  • 769 views

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

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

Statistics

Views

Total Views
769
Views on SlideShare
672
Embed Views
97

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 97

http://www.whymca.org 96
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Concentrarsi sul contenuto.
  • Concentrarsi sul contenuto.

Make better metro apps Make better metro apps Presentation Transcript

  • MAKEBETTERMETROAPPS
  • Chi sono• www.alessandro.scardova.it• facebook.com/alexbream• @alexbream• Microsoft MVP Expression Blend• DotDotNet.org
  • PrincipiMetro Le origini GeneraliDesignLanguage Metro in Windows Metro inAgenda Phone 7.5 Windows 8 Q&A
  • Da dove viene Metro?
  • 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
  • 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)
  • Stile Svizzero• Nasce nel dopoguerra• International Typographic Style• Chiarezza• Leggibilità• Oggettività• Griglie modulari composte da linee verticali e orizzontali
  • 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/
  • Metro desing language
  • Tipografia• Typeface sans-serfif • Segoe UI • Calibri • Cambria• Un solo font• Poche dimensioni• Salvo rispetto «brand»
  • Geometria• Forme semplici • Rettangolo • Cerchio• Margini • Quando si • Quando no • Epigrafe?• Asimmetria• No bordi arrotondati• No forme «naturali»
  • Colori• Colori primari• Evitare • Sfumati • Ombreggiature • Colori pastello• Limitare numero• Usare codice colore
  • 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 • Funzionalità minori • Non più di 5• Background• Foreground
  • 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
  • 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