donner un style moderne à votre application grâce à la suite expression
DESCRIPTION
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.TRANSCRIPT
![Page 1: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/1.jpg)
Donnez un style
moderne à votre
application avec la
suite Expression
![Page 2: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/2.jpg)
Blog
blog.devndesign.fr
@nbelval
Nathalie BELVAL
Soat Experte C#/XAML
WPF
Silverlight
Windows Phone
Windows 8
![Page 3: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/3.jpg)
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
![Page 4: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/4.jpg)
LES OUTILS POUR BIEN
DÉMARRER
![Page 5: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/5.jpg)
Outils pour le prototypage
Powerpoint
Expression Blend avec Sketchflow
Expression Design (gratuit)
5
![Page 6: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/6.jpg)
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
6http://www.url.com/
![Page 7: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/7.jpg)
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
![Page 8: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/8.jpg)
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
![Page 9: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/9.jpg)
DÉMO
SMARTSHOPPING
http://app-smartshopping.com/
SMART SHOPPINGUNE ENVIE D’ACHETER UN PRODUIT ? RECHERCHEZ CE DERNIER DANS L’APPLICATION QUI VOUS DIRA OÙ VOUS LE PROCURER AU MEILLEUR PRIX.
![Page 10: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/10.jpg)
PHASES
PRÉALABLES
![Page 11: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/11.jpg)
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
![Page 12: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/12.jpg)
PHASE DE
PROTOTYPAGE
![Page 13: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/13.jpg)
DÉMOEXPRESSION DESIGN
![Page 14: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/14.jpg)
PHASE DE
RÉALISATION
![Page 15: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/15.jpg)
DÉMOEXPRESSION BLEND
![Page 16: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/16.jpg)
ConclusionPour 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
![Page 17: Donner un style moderne à votre application grâce à la suite Expression](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556a430bd8b42a4a1e8b4bac/html5/thumbnails/17.jpg)
DES QUESTIONS ?