Expression Blend

Metro e l’armonia perfetta

Alessandro Scardova — Sat, 28 Jan 2012 18:21:04 GMT

Metro è un Design Language, (potremmo definirlo anche un “pattern di User Experience”) introdotto da Microsoft, prima con Encarta 95, poi Windows Media Center e Zune (fonte). La sua introduzione è abbastanza datata, ma è da poco più di un anno che con Windows Phone 7 gli sviluppatori e i designer hanno iniziato a lavorarci.

Spesso ridotto alla leggenda che lo vuole “ispirato dalle stazioni delle metropolitane”, in realtà Metro ha una storia molto più interessante.

Metro è basato sui principi stilistici dell’International Typographic Style, sviluppatosi negli anni ‘50 in Svizzera; lo stile è infatti anche chiamato Swiss Style. Lo stile svizzero si basa su tre punti cardinali: chiarezza, leggibilità e obiettività. (Fonte) E’ uno stile freddo, impersonale e per questo poco utilizzato in pubblicità ma che ha trovato largo impego nell’architettura moderna e per la sua leggibilità nei cartelli informativi.

In realtà Metro si ispira più direttamente agli stessi principi a cui si riconosce lo stile svizzero degli anni ‘50, attingendo direttamente alle idee nate nel cosiddetto Movimento Moderno, un movimento multidisciplinare che intorno agli anni venti e trenta del XX secolo ha cercato di migliorare l’architettura, l’urbanistica, la pittura e il design concentrandosi sulla funzionalità e introducendo nuovi concetti estetici.

Al Movimento Moderno, appartiene in particolare una rivista fondata in Olanda nel 1917 chiamata De Stijl. Lo stile.

Il contributo dato alla rivista De Stijl da Theo van Doesburg e Piet Mondrian ha il suo apice con la definzione di un termine che in segna un punto fermo nell’arte astratta: in neo-plasticismo. Il critico d’arte Giulio Carlo Argan, intellettuale e sindaco di Roma, nel 1976 scrive :

“Nella poetica neo-plastica è estetico il puro atto costruttivo: combinare una verticale ed una orizzontale oppure due colori elementari è già costruzione.”

In pratica è una grafica “pura” che combina linee e colori esclusivamente con un obiettivo estetico . Il De Stijl introduce uno stile interdiscipliare che si basa su alcuni principi che ritroviamo in Metro.

Astrazione
Essenzialità
Geometria

Negli elementi che compongono l’interfaccia utente, dobbiamo tenere conto di questi principi; per esempio, se dobbiamo disegnare un pulsante esso dovrà essere un rettangolo oppure un cerchio, non una forma complessa che ricorda un pulsante fisico, come il classico rettangolo con angoli arrotondati che troviamo tra i controlli di Windows. La nostra interfaccia utente dovrà essere essenziale, ma non minimale: dovrà contenere tutto ciò che serve e soltanto ciò che serve, senza però mettere in difficoltà l’utente con elementi troppo piccoli.

Seguendo questi semplici principi e le linee guida ufficiali, riuscirete a realizzare applicazioni funzionali e belle da usare.

Buon Metro!

Una riflessione su Html5 e XAML

Alessandro Scardova — Wed, 30 Nov 2011 12:49:45 GMT

L’occasione è quella dell’uscita della 4 prewiev di Internet Explorer 10 (link) ma è da un po’ che mi chiedo se HTML5 diventerà concretamente una tecnologia per lo sviluppo di applicazioni “client”. Diamo per scontato che HTML5 sarà il futuro del web ma oggi, tolti i grossi ‘player’, vedo ancora tanti, forse troppi, contenuti con tecnologie a plug-in ma soprattutto strumenti di sviluppo ancora allo stato primordiale.

La strada di Html5 verso la conquista del desktop è parallela, non conseguente, a quella del web, con scenari molto differenti.

Oggi sviluppare un’applicazione Metro in Html5 è vincente quando si verificano almeno una di queste condizioni:

l’applicazione condivide parte del front end con un sito web;
il team è fortemente skillato su HTML CSS e JavaScript.

Alcuni potrebbero suggerire una terza opzione se tra i requisiti ci fosse il supporto multipiattaforma, ma che io sappia le funzionalità Html5 per desktop di Apple sono limitate ai widget, senza un accesso diretto alle funzionalità del sistema operativo.

Per contro sviluppare applicazioni Metro in Html5 è perdente quando tra i requisiti ci sono:

supporto a Windows 7 o precedenti;
mancanza di conoscenze specifiche nel team di sviluppo.

Sviluppare in XAML oggi è vincente se il team ha

conoscenze dei linguaggi del Framework .NET: C# o VB.Net;
conoscenza di C++;
esperienza di sviluppo di applicazioni Silverlight, WPF o Windows Phone.

La mancanza del supporto a Windows 7 o precedenti di WinRT ne preclude anche il supporto di applicazioni Metro basate su XAML; probabilmente però sarà più semplice fare il porting verso Silverlight di un’applicazione XAML che non di una scritta con HMTL5, specie se si sono adottati pattern di separazione del presentation layer come il noto MVVM. Tra l’altro possiamo dire che oggi Silverlight rimanga ancora una buona soluzione per sviluppare soluzioni verso Mac OS.

Lo scenario di un unico linguaggio cross-platform per realizzare applicazioni che possano girare ovunque è dunque ancora lontano e penso che Html5 potrà essere una base concreta per svilupparlo. Microsoft in futuro supporterà le tecnologie che verranno più utilizzate, ,ma non penso esisti una roadmap definita in tal senso: troppe sono le incognite, in particolare quelle che dipendono dalla concorrenza.

Per concludere questa breve riflessione, XAML è la tecnologia che ci offre maggiore retro compatibilità e migliori strumenti di sviluppo: Html5 oggi ha ancora troppe incognite per rappresentare una soluzione equivalente.

Prototipizzare App Windows Phone 7 con SketchFlow

Alessandro Scardova — Mon, 04 Apr 2011 09:17:00 GMT

Da qualche giorno, grazie a Martin Tirion, è disponibile un template utile per realizzare prototipi delle vostre applicazioni WP7.

Il template realizza un’applicazione Silverlight liberamente pubblicabile e simula le funzionalità principali del telefono, compreso il tasto Back e il tasto Home.

Veramente ultile!

Maggiori info e per il dwonload:
http://blogs.microsoft.nl/blogs/ux/archive/2011/03/23/using-sketchflow-for-windows-phone-prototyping.aspx

UX Day a Napoli: le slides

Alessandro Scardova — Sat, 05 Mar 2011 10:12:14 GMT

Per chi è interessato, può rivedere le slide dei miei due interventi allo UX Day di Napoli.

Napoli UX Day - Principi di user experience

View more presentations from ascardova

Napoli Napoli UX Day - User eXperience in action con WP7

View more presentations from ascardova

UX Day a Napoli

Alessandro Scardova — Wed, 16 Feb 2011 11:20:56 GMT

Venerdì prossimo sarò ospite dei ragazzi di DotNetCampania all’UXDay

Sarà una bella occasione per visitare Napoli e per parlare di UX in un modo diverso.

Nella prima sessione che cercheremo di affrontare la UX da un punto di vista diverso: non quello tipico del designer ma quello più pragmatico del developer, cercando di collocare la UX all’interno di tutte le fasi di del ciclo di vita del sofware, dal concept, al deploy, passando, perchè no, anche per il testing della user experience.

Nella seconda sessione vedremo come affrontare la user experience dei device touch in genere, ed in particolare all’interno delle guidelines per lo sviluppo di apps per Windows Phone 7.

Vi aspetto!

http://dotnetcampania.org/content/UXDay.aspx

Windows Phone 7 UI: l’icona e la Tile.

Alessandro Scardova — Fri, 10 Sep 2010 09:48:06 GMT

Le UI guidelines di luglio introducono due elementi molto importanti per integrare le nostre applicazioni per Windows Phone 7 nella User Experience dell’utente e sono l’icona e la Tile.

L’icona, che nel template fornito con i Tools (almeno nella versione beta) ha il nome di ApplicationIcon.png, viene aggiunta al progetto come “content” e viene referenziata nel file WMAppManifest.xml in questa riga:

    <IconPath IsRelative="true" IsResource="false">ApplicationIcon.png</IconPath>

L’icona deve avere una dimensione di ~~63x63~~ 62x62 pixel e dovrebbe essere un formato PNG ~~o JPEG~~. La versione beta dei tool permette di selezionere nei setting solo il formato PNG.*

L’integrazione purtroppo non è completa: come si vede dell’immagine l’icona della mia applicazione “Do Not Push” non ha il colore di sfondo (in questo del tema “blue”) chiamato “Accent”: quel colore, disponibile come risorsa chiamata ~~PhoneAccentColor~~ PhoneAccentBrush all’applicazione, non viene per ora applicato all’icona anche se abbiamo scelto uno sfondo trasparente per il nostro PNG.

Speriamo che nella versione RTM questo fastidioso inconveniente venga risolto o che venga fornita una documentazione ufficiale su come sfruttare l’Accent per colorare l’icona dell’applicazione.

La tile è una icona più grande, di dimensione 173x173 pixel che viene utilizzata nello start menu per eseguire rapidamente la nostra applicazione e per visualizzare le notifiche appunto dette Tile. La tile può essere posizionata nello start menu solo dall’utente finale con il comando “pin to start”

Le informazioni della Tile sono contenuti sempre nel file WMAppManifest.xml in questa sezione:

        <TemplateType5>
          <BackgroundImageURI IsRelative="true" IsResource="false">Background.png</BackgroundImageURI>
          <Count>7</Count>
          <Title>Do Not Push</Title>
        </TemplateType5>

Anche in questo caso il tool in versione beta visualizza solo formati PNG e non ha il supporto del colore “Accent”. Nel realizzare questa icona occorre prevedere una zona libera nella parte bassa nella quale verrà automaticamente posizionato il nome dell’applicazione. La tile notification verrà posizionata in alto a destra in un cerchio del colore dell’Accent con un numero in bianco da 1 a 99.

L’icona verrà visualizzata con un velo opaco rispetto alla vostra icona originale. Il layer che contiene il titolo dell’applicazione ha infatti un fondo opaco che si sovrappone alla vostra icona, per permettere la visualizzazione del testo in bianco anche su icone molto chiare.

Vi sono anche Tile a doppia larghezza, ma sono riservate per Microsoft, Il produttore del telefono o il carrier telefonico.

*Aggiornato con le specifiche finali.

Un template per le icone dell’Application Bar di Windows Phone 7

Alessandro Scardova — Sat, 04 Sep 2010 06:04:22 GMT

Il modello di UI di Windows Phone 7, per le applicazioni realizzate con Siliverlight, prevede una specifica area, chiamata Application Bar nella quale possono essere piazzati fino a 4 pulsanti, con la relativa icona. Nell’SDK ci sono una trentina di queste icone, ma se volte fare le vostre icone personalizzate dovete procedere seguendo queste regole:

L’icona deve essere un PNG trasparente
L’icona deve avere una dimensione di 48x48 pixel
L’icona NON deve avere il cerchio, a realizzare il cerchio e le animazioni ci pensa il sistema operativo;
La parte visibile dell’icona deve essere bianca. Il sistema operativo provvederà a cambiare il bianco in nero in caso l’utente scelga l’impostazione con sfondo bianco, e in grigio per i pulsanti disabilitati.
L’icona deve avere una grafica pulita, con i “fili”(strokes) di almeno 3 pixel.

Io mi sono fatto un modello in Expression Design 4 con il quale sto realizzando le icone delle mie applicazioni. Potete scaricarlo qua.

Nel template c’è il cerchio bianco che non deve essere esportato, ma serve come riferimento e come eventuale tracciato di ritaglio. Inoltre è presente un box di 47 x 47 pixel con Fill e Stroke trasparenti che serve a creare la dimensione corretta dell’icona.

Se avete richieste o chiarimenti potete scrivere nel forum italiano su Expression.

Disponibile la trial di Expression Studio 4 Ultimate

Alessandro Scardova — Fri, 23 Jul 2010 13:54:26 GMT

A questo indirizzo è possibile scaricare la versione di prova di Expression Studio 4.0. I download sono disponibili in diverse lingue tra cui l’italiano.

La versione Italiana di Expression Studio non è ancora disponibile agli utenti MSDN, mentre lo è per gli utenti VL.

Rilasciata la Beta dei Windows Phone 7 Dev Tools

Alessandro Scardova — Tue, 13 Jul 2010 07:01:03 GMT

Nuovo ed importante refresh dei Windows Phone 7 Dev Tools. La nuova versione, Beta June 2010, è interessante per gli utilizzatori di Blend, perchè finalmente possono riumovere la versione RC, che era l’unica compatibile con i tools della CTP di Aprile e installare la versione RTM di Blend 4.0. In questa beta, i Windows Phone Dev Tools infatti contengono una versione Beta di Blend 4.0 specifica per lo sviluppo con Windows Phone, installabile side-by-side con la RTM di Blend 4.0.

Nella mia installazione, con Visual Studio 2010 Ultimate, il setup dei Tools NON ha installato (come faceva la CTP) anche la versione di Visual Studio Express specifica per Phone 7, limitandosi ad installare i nuovi template (ora con splashScreen.jpg) per il Visual Studio già presente.

Ulteriori info sul post nel Blog di MSDN Italia

Buon download.

Expression Blend 4 Sketch Mockups Library

Alessandro Scardova — Tue, 08 Jun 2010 19:49:00 GMT

Una dei maggiori limiti di SketchFlow è sicuramente la povertà di controlli Sketch che sono a disposizione, soprattutto rispetto a tools come Balsamiq.

Nella versione 4 sono stati aggiunti alcuni shapes, utilizzati per il fumetto che feci tempo fa sulla prototipizzazione dinamica rispetto a quella statica, ma se volete una libreria con più controlli e di insieme di controlli potete scaricare la Blend 4 Sketch Mockups Library, attualmente in versione alpha, che vi permetterà di essere un po’ più produttivi nei vostri Sketch.