La progettazione di un sito Web è ogni volta un'esperienza a sé, ma con il tempo alcune pratiche comuni hanno cominciato a radicarsi nella "cassetta degli attrezzi" di ogni buon Web Designer. Ogni periodo storico però ha le sue mode e le sue tendenze, destinate a condizionare ‐ in diversa misura ‐ buona parte della creazione grafica dei siti Web.
In questo contesto, è molto comune per alcuni player di grande peso, così come per alcune novità tecnologiche, essere parte del cambiamento, fino ad arrivare a dettare delle vere e proprie "regole di design" mirate inevitabilmente a condizionare il gusto e lo stile del Web.
Con Windows 8, tanto gli sviluppatori quanto i designer hanno la possibilità di continuare ad utilizzare tutte le tecnologie con cui hanno più familiarità per realizzare le cosiddette Windows Store apps. Fra queste tecnologie la fanno da padrone anche HTML5, CSS3 e JavaScript, padroni indiscussi del mondo del Web design.
Dietro le quinte, queste applicazioni sfruttano il motore di Internet Explorer 10, che in questa sua ultima versione ha prestato particolare attenzione al rispetto dei più recenti standard Web aprendo strade interessanti per tutti i Web designer.
È quindi questa un'incredibile occasione per realizzare siti Web che si armonizzino perfettamente con il sistema operativo del futuro di casa Microsoft, Windows 8, che in fatto di design ha delle regole tutte sue ma ben specificate.
Fin dal lancio di Windows Phone 7, infatti, Microsoft ha lavorato duramente per stilare le linee guida del suo nuovo linguaggio di design, denominato inizialmente "Metro", in modo che fosse facile per gli sviluppatori realizzare applicazioni che mantenessero ‐ tanto fra loro quanto con il sistema operativo host ‐ una perfetta coerenza grafica e di interazione.
Prima del lancio di Windows 8, Microsoft ha ribattezzato il suo linguaggio di design da Metro a Modern style UI, ma le linee guida specificate sono rimaste pressoché inalterate.
L'ispirazione per il Modern style viene inizialmente dalla riflessione su come la vita di ogni persona, al giorno d'oggi, sia estremamente frenetica e veloce, e come ognuno sia costantemente inondato da un'enorme quantità di informazioni che è costretto a processare pur non avendone effettivamente il tempo. Il parallelo con il mondo del Web e dei sistemi operativi viene piuttosto immediato: navigando nella Rete o utilizzando una applicazione, si ha sempre accesso ad moltissimi dati che spesso sono più di quelli necessari, rendendo complessa la ricerca delle informazioni effettivamente rilevanti, così come la navigazione e l'interazione con la pagina o il sistema.
Luoghi estremamente dinamici come gli aeroporti o le stazioni della metropolitana sono al contrario un ottimo esempio di come progettare un linguaggio di comunicazione completamente concentrato sul trasferire all'utente le informazioni rilevanti ‐ e solo quelle rilevanti ‐ nel modo più chiaro e diretto possibile. Così come è necessario trovare immediatamente il proprio gate all'aeroporto o l'uscita corretta dall'autostrada, allo stesso modo è importante riuscire a navigare all'interno di siti Web ed applicazioni in modo da arrivare subito alla propria meta.
Il linguaggio di design progettato da Microsoft punta quindi ad essere pulito, leggero, veloce e fluido. Il Modern UI style è stato inizialmente progettato solamente per le applicazioni (prima mobile e quindi per tablet e desktop Windows 8), ma sempre più spesso trova un'enorme applicazione nel mondo dello sviluppo Web.
Vediamo come applicare le linee guida suggerite dal linguaggio di design di casa Microsoft anche alla progettazione di siti ed applicazioni Web, anche approfittando del potente motore standard-compliant di Internet Explorer 10.
Riutilizzando gli elementi dell'interfaccia utente proposti dal sistema operativo di Windows 8 si ha la certezza di fare leva su un approccio ben progettato e allo stesso tempo offrire all'utente un'esperienza immersiva coerente con il sistema che è già abituato ad utilizzare.
Per mettere in evidenza alcuni dei suggerimenti più importanti fra quelli proposti dal linguaggio di design di Microsoft, utilizzeremo come caso d'uso il sito Web della conferenza nazionale .NET Campus, realizzato completamente in stile Modern UI. Infine ci sposteremo ad analizzare anche come HTML5, CSS3 e JavaScript possano giocare un ruolo fondamentale in un design Web di successo.
Design for Touch: Tiles
Il menu Start di Windows 8 è stato completamente ridisegnato per ruotare intorno al nuovo concetto di Tile, la "mattonella" che sostituisce le vecchie icone statiche offrendo numerose nuove possibilità.
Già appena arrivati all'homepage del sito Web del .NET Campus si può notare come l'intera pagina sia organizzata in tiles. Ogni tile è rappresentativa di una sezione del sito Web, e lo spazio che offre è utilizzato per mostrare numerose informazioni rilevanti riuscendo comunque ad essere invasive il minimo possibile.
Il concetto di "live tile" è venuto in aiuto in questo caso, permettendo di mostrare pochi dettagli per volta, oppure ad esempio aumentare la ricchezza dell'esperienza utente proponendo subito a colpo l'occhio informazioni aggiuntive come il numero degli iscritti o le foto disponibili, riuscendo comunque ad armonizzarsi con il resto.
Interagendo con le tile è possibile saltare alla sezione desiderata, e la grande superficie cliccabile rende la navigazione un'esperienza estremamente piacevole anche per gli utenti di dispositivi mobili come smartphone e tablet. Questo è un punto estremamente importante per il design di siti Web al giorno d'oggi: il nuovo menu Start di Windows 8 è stato pensato proprio per essere estremamente navigabile attraverso qualunque fonte di input, che siano mouse e tastiera oppure il tocco di un dito.
Celebrate Typography
Per anni uno dei dettami del Web design è stato quello di utilizzare un gran numero di icone grandi, vistose e spesso molto colorate e dettagliate. Il rischio, in questo caso, è di appesantire di molto l'esperienza utente.
Il linguaggio di design di Microsoft suggerisce di riscoprire l'utilizzo del carattere tipografico come elemento grafico, offrendo una grande quantità di vantaggi.
Giocando opportunamente sulla dimensione del font, così come sui suoi vari pesi (regular, light, semibold, bold) è possibile mostrare immediatamente a colpo d'occhio la struttura della pagina e la gerarchia delle informazioni presentate.
Il font utilizzato è quello introdotto con Windows 8, chiamato Segoe UI, che presenta uno stile tipografico estremamente pulito e minimale.
Bold and vibrant Colors
Così come per il carattere, anche il colore è uno strumento decisamente potente nella cassetta degli attrezzi del Web designer. Troppo spesso in passato, però, questo è stato utilizzato in modo improprio, portando a siti Web troppo carichi e pesanti, perciò difficilmente fruibili.
Lo stile Modern UI suggerisce di utilizzare dei colori accesi e ben definiti, studiando però con molta cura la palette da utilizzare. Se ben progettato, infatti, lo schema di colori scelto per il sito Web può essere un ottimo mezzo per enfatizzare ancora la gerarchia dei contenuti, offrire personalizzazione agli utenti, e soprattutto arricchire l'impatto visivo per gli utenti.
Per il sito Web del .NET Campus è stata scelta una palette di 9 colori di accento, insieme poi a bianco, nero e grigio. Questi colori sono stati utilizzati attraverso tutte le sezioni in modo da mantenere una coerenza e permettere all'utente di orientarsi durante la navigazione, tracciando dei veri e propri "percorsi di colore" per spostarsi nel sito Web.
Clean, light and beautiful
Una linea guida estremamente generale di Modern UI suggerisce dovunque possibile di mantenere la complessità del design più limitata possibile, privilegiando elementi grafici semplici, leggeri e "belli". È facile vedere come in realtà puntando su di un design chiaro e pulito, la "bellezza" degli elementi grafici segue da sé.
Nel caso d'uso che stiamo analizzando, ad esempio, per tutti gli elementi di navigazione secondaria è stato scelto un posizionamento molto poco invasivo ma comunque sempre a portata di mano. Un comportamento di questo tipo segue da vicino quello di tutti i comandi aggiuntivi all'interno delle Modern UI style apps di Windows 8, presenti nelle app bar superiori ed inferiori, oppure le interazioni offerte dai Charms di Windows 8 (come ad esempio il Charm Search)
La scelta delle icone, inoltre, è stata guidata completamente dall'essenzialità e allo stesso modo la colorazione punta ad essere leggera e vicina al colore di sfondo, per poi "prendere vita" solo nel momento in cui l'utente decide di interagire con esse.
CSS3 e JavaScript in Internet Explorer 10
Per la più recente versione di Internet Explorer, Microsoft ha posto particolare attenzione al rispetto degli standard, indirizzandosi soprattutto alle specifiche di Cascading StyleSheets Level 3 (più noto come CSS3). Rispetto al già buon lavoro fatto per la versione 9, Internet Explorer 10 offre il supporto dei layout multicolonne, il layout Flexible Box, e il Grid Layout. Inoltre, è migliorato il supporto nativo per gradienti, transizioni e trasformazioni 3D.
È quindi questa un'ottima occasione per realizzare siti Web aderenti agli standard che sfruttino tutte le capacità delle più recenti specifiche di CSS3: queste stesse tecniche possono essere facilmente riutilizzate anche per la realizzazione di applicazioni Modern Style per Windows 8 basate su HTML5.
L'altra area di grande miglioramento di Internet Explorer 10 riguarda JavaScript. Il motore che girava sotto il cofano della versione 9 del browser, denominato Chakra, è un componente fondamentale dell'ultima versione di Internet Explorer ‐ ed è responsabile anche per l'esecuzione delle applicazioni Windows 8 realizzate con HTML e JavaScript.
Le performance di Chakra sono state estremamente migliorate, e tutti gli strumenti di sviluppo ‐ Web e non ‐ di casa Microsoft, il cui tool principe è Visual Studio, supportano pienamente anche i framework di sviluppo JavaScript più diffusi come ad esempio jQuery.
Realizzare siti Web che si armonizzino con il sistema operativo è senza dubbio un'ottima scelta in quanto permette all'utente di orientarsi immediatamente durante la navigazione, ritrovando elementi a lui molto familiare, con i quali è abituato ad interagire, e con le potenzialità messe a disposizione da Internet Explorer 10 l'esperienza tanto dello sviluppatore quanto dell'utente risulta molto piacevole ed intuitiva.
