Blend est un logiciel de la suite Microsoft Expression. C’est un outil de design interactif puissant pour concevoir des applications riches pour Silverlight et la plateforme .Net.
Avec Expression Blend 4, Microsoft prend soin d’apporter aux concepteurs des outils faciles d’appropriation, afin d’améliorer la relation entre les développeurs et les designers.

En d’autres termes, la proposition de valeur est la suivante : avec Blend, les designers peuvent concevoir en intégralité les interfaces d’une application. Et le prototype ainsi produit peut être directement réutilisé par les développeurs. Alléchant, non ?

Première partie d’une saga…

Cela soulève une première interrogation : comment utiliser Microsoft Blend alors même que la communauté des designers travaille principalement avec la Creative Suite d’Adobe ?
Nous allons tenter de répondre à cette question en abordant dans un premier temps la récupération du design réalisé avec Adobe Photoshop (*.psd).
Nous aborderons dans un second billet la réutilisation d’éléments conçus avec Adobe Illustrator.
Nous verrons enfin comment ajouter de l’interactivité au prototype.

Maquette Photoshop

Afin d’apprécier au mieux les possibilités offertes par Blend, nous avons conçu une interface simple sous Photoshop, contenant les principaux cas d’école dont nous souhaitons valider la reprise par Blend.



Cette interface comporte donc un éventail d’éléments fréquemment utilisés :

• figures vectorielles (rectangles, rectangles arrondis, ellipses, traits et formes personnalisés)
• figures bitmap quelconques
• des styles de calques
• aplat de couleurs, dégradés
• jeu sur l’alpha
• hiérarchisation des données dans des dossiers
• masques (vectoriel et bitmap)
• quelques éléments de texte

Récupération du fichier Photoshop (*.psd)

Pour importer un fichier psd dans Blend, rien de plus simple : il suffit de sélectionner dans le menu « Fichier » : « Importer un fichier Adobe Photoshop… ». C’est on ne peut plus explicite


La fenêtre d’import se découpe en 2 zones, un aperçu de l’interface et les calques sélectionnables. A ce stade, le designer peut librement décider des calques à importer. Ce choix est facilité par la reproduction à l’identique de la hiérarchie des dossiers et calques définis dans Photoshop.


Comme on peut le voir sur la capture d’écran ci-dessous, Blend interprète les dossiers Photoshop en « conteneurs » (en l’occurrence des Canvas).


C’est dans un premier temps assez déroutant. En effet, très fréquemment, les dossiers sont utilisés dans PS pour grouper de manière logique des éléments. Par exemple, imaginons un dossier « libellés » contenant toutes les zones textuelles de l’écran. Au moment de l’import, ce dossier va être transformé en « conteneur » « libellés » ; peu importe que les libellés appartiennent à la barre de navigation ou aux champs du formulaire. Il faudra donc reprendre / réorganiser la structure des éléments importés ; à moins d’avoir pris en compte cette contrainte au niveau de PS.

Il nous reste à voir comment Blend traduit les différents éléments de notre maquette Photoshop.

Interprétation des éléments utilisés dans PS :

La liste, ci-dessous, récapitule la manière dont sont traduits les éléments fréquemment utilisés dans une maquette d’application.

Hiérarchie des calques

Champs de texte

Objet vectoriel

Sur le même sujet

• Prototypage avec SketchFlow
• Les outils de prototypage : collection été 2010
• Création de prototype avec Flash Catalyst