Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio...

Design/UX/UI

Branding et ModernUI

Michel ROUSSEAUTechnical Evangelist UX,UI,Design

Microsoft

mirousse@microsoft.com@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

www.design.windows.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

mirousse@microsoft.com@rousseau_michel

www.aka.ms/michel

TOUT CE QUE VOUS AVEZ TOUJOURS VOULU SAVOIR SANS JAMAIS OSER LE DEMANDER...