Après un tour rapide sur les outils et ressources pour bien intégrer le style moderne à votre application, nous allons voir comment créer des interfaces modernes avec Expression Blend et comment créer les ressources de votre application (logos, icônes, etc) avec Expression Design.

1. Donnez un style
moderne à votre
application avec la
suite Expression

2. Nathalie BELVAL
Soat Experte C#/XAML
WPF
Blog
Silverlight
blog.devndesign.fr
Windows Phone
Twitter
Windows 8 @nbelval

3. Agenda
Des outils pour bien démarrer
Cas d’étude : SmartShopping
Phases préalables
Phase de prototypage avec Expression
Design
Phase de réalisation avec Expression Blend
Légende je suis un mot clé important
3

4. LES OUTILS POUR BIEN
DÉMARRER

5. Outils pour le prototypage
Powerpoint
Expression Blend avec Sketchflow
Expression Design (gratuit)
5

6. Prototyper avec PowerPoint
Installer Visual Studio 2012 sur
votre PC
Lancez PowerPoint
…un nouveau menu
« Storyboarding » apparaît:
Cliquez sur « Storyboard
Shapes »
Voici des formes pour Windows
8 et Windows Phone
http://www.url.com/ 6

7. Outils pour la conception
Mémo sur les
guidelines modernUI
Site web officiel :
www.design.windows.com
Pour aller plus loin,
guidelines détaillées au
format PDF:
http://go.microsoft.com/fwli
nk/p/?linkid=258743
7

8. Outils pour le développement
Visual Studio 2012
■ choisissez votre langage préféré :
◾VB/C++/C# et XAML
◾HTML et JavaScript
■ Template de projet, permettant d’accélérer le
développement de vos applications.
Expression Blend for
VisualStudio
8

9. DÉMO
SMART SHOPPING
SMARTSHOPPING
UNE ENVIE D’ACHETER UN PRODUIT ?
RECHERCHEZ CE DERNIER DANS
L’APPLICATION QUI VOUS DIRA OÙ
VOUS LE PROCURER AU MEILLEUR PRIX.
http://app-smartshopping.com/

10. PHASES
PRÉALABLES

11. Phases préalables
Phase de découverte =
■Stratégie
■Recherche sur les utilisateurs
■Inventaire du contenu
Phase de définition =
■Structuration de l’information
■Design d’interaction
■Système de navigation
■Design d’interface (mise en forme à l’écran)
■Design d’information (présentation, hiérarchie)
11

12. PHASE DE
PROTOTYPAGE

13. DÉMO
EXPRESSION DESIGN

14. PHASE DE
RÉALISATION

15. DÉMO
EXPRESSION BLEND

16. Conclusion
Pour améliorer votre productivité à consommer
sans modération :
Expression Design
Expression Blend
Pour aller plus loin avec Blend,
■Rendez-vous toutes les semaines sur mon blog :
blog.devndesign.fr
Pour aller plus loin avec « le savant mélange
d’une image de marque et du style
moderne »
■Rendez-vous aux Techdays, le mercredi
13 février à 11h : http://tinyurl.com/bj7p9lf
16

17. DES QUESTIONS ?