Donnez un style
moderne à votre
application avec la
suite Expression
Nathalie BELVAL
                    Soat Experte C#/XAML




WPF
                   Blog
Silverlight
                blog.devndesign.fr
Windows Phone
                   Twitter
Windows 8       @nbelval
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
LES OUTILS POUR BIEN
DÉMARRER
Outils pour le prototypage
  Powerpoint
  Expression Blend avec Sketchflow
  Expression Design (gratuit)




                                     5
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
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
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
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/
PHASES
PRÉALABLES
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
PHASE DE
PROTOTYPAGE
DÉMO
EXPRESSION DESIGN
PHASE DE
RÉALISATION
DÉMO
EXPRESSION BLEND
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
DES QUESTIONS ?

Donner un style moderne à votre application grâce à la suite Expression

  • 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 POURBIEN DÉMARRER
  • 5.
    Outils pour leprototypage 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 laconception 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 ledé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 ENVIED’ACHETER UN PRODUIT ? RECHERCHEZ CE DERNIER DANS L’APPLICATION QUI VOUS DIRA OÙ VOUS LE PROCURER AU MEILLEUR PRIX. http://app-smartshopping.com/
  • 10.
  • 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.
  • 13.
  • 14.
  • 15.
  • 16.
    Conclusion Pouramé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.