Embed Size (px)
DESCRIPTION
Des slides et Blend pour Visual Studio : Voilà le cocktail requis pour vous expliquer comment partir d'un template applicatif basique pour le transformer en une application brandée, possédant une identité et agréable. Nous verrons comment trouver ou créer des assets graphiques de qualité pour obtenir un résultat très agréable, et quels sont les principes à respecter pour y parvenir, le tout en 45 mns ! Speakers : Michel Rousseau (microsoft)
Citation preview
Design/UX/UI
Branding et ModernUI
Michel ROUSSEAUTechnical Evangelist UX,UI,Design
Microsoft
[email protected]@rousseau_michel
www.aka.ms/michel
Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant
une véritable identité
Design/UX/UI#mstechdays
Dans cette session, nous balayerons les tenants et aboutissants du branding de marque pour le design applicatif. Par une approche pas à pas, nous verrons comment conformer facilement et rapidement l’identité de marque avec le design XAML dans Blend pour Visual Studio. Nous verrons également quelques trucs et astuces pour conforter votre approche par des exemples réels.
Les buts :Comprendre les composantes de l’identité dans une application Windows 8.1,Comprendre comment implémenter un design Windows 8,1 dans Blend avec du XAML.Comprendre comment orienter un dev ou une agence et où trouver des ressources pour votre projet.
Les buts et objectifs de cette session
Design/UX/UI#mstechdays
Travailler avec une charte graphique, ça fait mal ?
L’identité de marque ? Faites-le vous–même !Le logoLes couleursLe fondLa police
Donner du staïlle à votre appli.Les variantes visuelles
Des exemples de la vie réelle.
Agenda
Design/UX/UI
Une appli grandiose, c’est quoi ?
Design/UX/UI#mstechdays
Un concept grandioseUne application stable et « responsive »Une appli bien designée (je veux dire, au niveau UX)Une appli bien designée (je veux dire, au niveau UI, aussi)Une application qui a une identité.
Une appli grandiose, c’est quoi ?
Design/UX/UI#mstechdays
Mais comment je donne une identité à mon application ?
Design/UX/UI#mstechdays
L’exemple Europe 1
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Charte numérique Europe 1
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Et si je n’ai pas accès à la charte ?
Design/UX/UI#mstechdays
Globalement, une charte c’est …
Des couleurs Une police Un fondUn logo
Design/UX/UI#mstechdays
Par défaut, Blend génère…
Design/UX/UI#mstechdays
ou ceci :
Design/UX/UI#mstechdays
Par l’exemple :L’appli de la compagnie aérienne
Mitch Airways
Design/UX/UI#mstechdays
Suivre un vol.Assurer du contenu institutionnel.Donner des infos business.
Que fera cette application?
Design/UX/UI#mstechdays
Plutôt que des mots,démo.Le template standard(et un champ de data fonctionnel)
Design/UX/UI#mstechdays
Étape n°1trouver la bonne couleur
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Transformer ces couleursen « brushes » XAML(ne pas oublier de parler des thèmes)
Design/UX/UI#mstechdays
Étape n°2
trouver la bonne police
Design/UX/UI#mstechdays
Suis-je obliger de me servir de police SEGOE ?
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Étape n°2 (suite)Intégrer la police
Design/UX/UI#mstechdays
Étape n°3
Créer ou trouver un logo
Design/UX/UI#mstechdays
Haaa…Je ne suis pas designer… Où puis-je trouver un logo?
Design/UX/UI#mstechdays
MSPaint ?
Design/UX/UI#mstechdays
Clipart ?
Design/UX/UI#mstechdays
Haaa…Je ne suis pas designer… Où puis-je trouver un logo?
Icomonstr.com
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Étape n°3 (suite)Insérez son logo
Design/UX/UI#mstechdays
Étape n°4Insérer un background
Design/UX/UI#mstechdays
On évite les clichés.On se renseigne sur les droits relatifs à l’image.On se méfie des images de stocks photo.Les images donnent souvent des textes difficiles à lire.On favorise des dégradés classes et sobres……ou un élément de charte simple.
Trouver le bon background
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Pour toi public : Donner encore un peu(plus) de personnalité.
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Résumons-nous un peu :1. Le branding, c’est primordial.2. Pas besoin d’être designer.(enfin, si, un peu, mais ça se soigne)
Design/UX/UI#mstechdays
Un logo Des couleurs Une police Un fond
Design/UX/UI#mstechdays
Les couleurs : https://https://kuler.adobe.com/ http://colorlovers.com
Les icônes : http://iconmonstr.com/ http://thenounproject.com/
Les polices : http://fontsquirrel.com
Les ressources
Design/UX/UI#mstechdays
Vous en voulez encore ??? Bon, encore quelques exemples.
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
L’EXEMPLE SUNGUARD
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Design/UX/UI#mstechdays
Depuis votre smartphone sur :http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !!!Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les Techdays !
Donnez votre avis !
Design/UX/UI
La validation UX du Store
Michel ROUSSEAUTechnical Evangelist UX,UI,Design
Microsoft
[email protected]@rousseau_michel
www.aka.ms/michel
TOUT CE QUE VOUS AVEZ TOUJOURS VOULU SAVOIR SANS JAMAIS OSER LE DEMANDER...
