Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Metro, il "linguaggio di design" di Windows 8

I principi ispiratori del "linguaggio di design" utilizzato da Microsoft per i nuovi sistemi operativi, desktop e mobile
I principi ispiratori del "linguaggio di design" utilizzato da Microsoft per i nuovi sistemi operativi, desktop e mobile
Link copiato negli appunti

Abbiamo già parlato di Metro come nuovo linguaggio di design venuto alla luce insieme a Windows Phone 7, e già da allora appariva chiaro come l'insieme di "codici", "regole" e suggerimenti della nuova estetica del design, fosse applicabile non solo alla creazione di interfacce utente per il mondo mobile, ma potesse essere utilizzato per creare UI all'avanguardia anche nel mondo desktop e Web.

Per questo, alla presentazione del nuovo Windows 8, non ci siamo stupiti del fatto che la sua "estetica" fosse completamente Metro, e che su questa nuova piattaforma possano girare quelle che ora verranno chiamate Metro Style App.

Sicuramente la nuova estetica del design sta prendendo piede e regalando i suoi frutti, cerchiamo di analizzarla e capire cosa ha influenzato la nuova tendenza.

Figura 1. Pagina di Start di Windows 8
(clic per ingrandire)


Pagina di Start di Windows 8

In Metro si può riconoscere l'influenza di concetti ereditati da tre esperienze di desing molto importanti:

  • Modern Design (Bauhaus)
  • International Typography Style (Swiss Design)
  • Motion Design (Cinematografia)

In questo articolo esamineremo più a fondo l'impatto che queste esperienze hanno sullo stile Metro e come si sposano con il concetto di interfaccia utente.

Modern Design (Bauhaus)

La scuola di architettura e design della Bahuaus (1919-1933) rappresentò non solo una scuola in cui apprendere l'arte del design, ma anche un punto di riferimento fondamentale per movimenti nati dal razionalismo e dal funzionalismo, facenti parte del "movimento moderno", non esclusivamente legati al mondo dell'architettura e del design, ma legati a qualsiasi forma di arte e comunicazione.

Il principio fondamentale del Bauhaus si basa sul concetto di "fiera riduzione", ovvero togliere tutti gli adorni e ridurre tutto all'essenza. La funzione viene prima di tutto, la funzione determina la forma e le caratteristiche di un oggetto, la funzione rende bello un oggetto, la funzione è l'oggetto stesso.

Soprattutto il concetto fondamentale che nasce da questa corrente di pensiero è che il design può essere industrializzato senza perdere in qualità.

Infatti molti degli oggetti creati in quel periodo sono ancora oggi in produzione e rimangono ancora dopo quasi 100 anni dei veri e propri must e probabilmente lo rimarranno probabilmente per sempre.

Figura 2. Logo del Bauhaus
Logo del Bauhaus

Figura 3. Icone Metro Style
(clic per ingrandire)


Icone Metro Style

Notiamo la similitudine dello stile fra il logo della Bauhaus e le icone in stile Metro.

Tutto questo si collega a Metro che prevede interfacce utente, pulite, leggere, aperte e veloci, e cioè UI in cui il superfluo è ridotto al minimo, tutto ciò che non è strettamente necessario, viene eliminato, UI in cui a parlare sia il contenuto e non il contenitore.

La scelta quindi cade su un linguaggio di design moderno perché, la rivoluzione industriale ha cambiato il mondo, così come l'evoluzione della connessione e il modo di viaggiare che ha reso tutto più piccolo, tutto più a portata di mano.

Tutto nella vita di oggi è più connesso.

Dunque creare ancora UI alla maniera artigianale (ovvero disegnata su misura per il singolo individuo/gruppo) è un modo vecchio di pensare al design.

"Le tecniche di ieri non funzionano nel mondo di oggi" dobbiamo quindi pensare a una UI più industrializzata, ovvero più facile da riprodurre, più facile da ripetersi, anche se non necessariamente uguale a se stessa.

Figura 4. Metro Style App chiamata "save the planet" (di ThinkAhead)
Metro Style App chiamata 'save the planet' (di ThinkAhead)

International Typography Style (Swiss Design)

Il Swiss Design nasce come branca della Bauhaus ed è focalizzato sulle arti grafiche, e sull'uso di una tipografia cristallina e chiara, basata sulla simmetria e sull'uso di pochi ma intensi colori e forti contrasti.

Uno stile tipografico internazionale, ovvero universale, comprensibile in tutti il luoghi che lo ospitano allo stesso modo. Un linguaggio chiaro e diretto che come unico compito ha la funzione si rappresentare un'informazione rapida, chiara e cristallina, perché la vita è in movimento, l'individuo è sempre in movimento, cammina, guida, parla, è sempre circondato da persone, ha sempre fretta, dunque le informazioni devo arrivare rapide e dirette.

Metro si appropria dei principi fondamentali del Swiss Design:

  • Focus sulla chiarezza , leggibilità e buon design grafico
  • Importanza della tipografia
  • Utilizzo di una griglia per il posizionamento degli oggetti
  • Colori marcati senza gradienti e forti contrasti
  • Fotografie al posto di illustrazioni/disegni realistici

Così utilizza un linguaggio che elogia la tipografia nei suoi diversi pesi, riduce le icone all'osso rendendole dei segni universali come quelli che potremmo vedere negli aeroporti, nelle stazioni, nelle strade, luoghi in cui il movimento regna sovrano, e ci consiglia di realizzare UI chiare e dirette, in cui le informazioni non possono essere confuse e soprattutto non personali, ma personalizzabili tramite l'utilizzo di contenuti personali.

Figura 5. Manifesto Swiss Design
Manifesto Swiss Design
Figura 6. Metro style app in Windows 8
Metro style app in Windows 8

Motion Design (Cinematografia)

Questo concetto si può ridurre fondamentalmente a un'unica frase: "è importante il movimento per fornire un impatto emotivo". Questo significa che l'utilizzo del movimento e delle animazioni serve a sottolineare un avvenimento, a catturare l'attenzione, dunque va utilizzato con sapienza e parsimonia.

Apparteniamo all'era digitale, dunque dobbiamo dare l'impressione che tutto sia possibile.

Conclusioni

Cercando di ricapitolare i concetti e di concretizzarli in poche parole:

  • Modern Design (Bauhaus), realizzare UI ridotte all'essenza eliminando il superfluo e rendere protagonista il contenuto (funzione)
  • International Typopgraphy Style (Swiss Design), utilizzare in maniera intelligente la tipografia e avere un linguaggio chiaro, schietto, bello, aiutandoci con colori accesi e forti contrasti
  • Motion Design (Cinematografia), cercare movimenti ma sensati che diano vita all'applicazione

I principi non sono delle regole e non danno delle risposte, abbiamo sempre la libertà di fare come ci pare, ci danno comunque delle linee guida su cui possiamo orientarci, una piattaforma da poter condividere in maniera comune per creare un sistema armonico di qualità.

Ti consigliamo anche