Sesion qui consiste à donner plein d’astuces pour avoir un design et une ergo unique sur les appli Modern UI. En résumé je reprends le travail effectué sur l’accélérateur pour expliquer les points essentiels et incontournables de Modern UI, les bonnes pratiques de design pour créer un style unique, les erreurs à éviter…

1. BIEN PASSER LE STORE
LE RESPECT DES GUIDELINES
SachaLEROUX & AxelNEMETH
Design

2. SachaLEROUX (El conceptor)
PRO
Directeur des opérations Bewise by Ai3
Consultant Front-end
IL AIME
@SachaLeroux
Tout ce qui possède une interface
sacha.leroux@ai3.fr Jouer à WoW avec des amis
www.bewise.fr Les meubles de designers super chers
qu’il ne peut pas payer
Les feux de bois quand il neige
Design

3. AxelNEMETH (El designor)
PRO
Consultant Design & DA Bewise by Ai3
Spécialiste UI design et graphic design
IL AIME
@AxelNemeth
Le sport (escalade, roller derby, VTT…)
axel.nemeth@ai3.fr La bonne bouffe
Behance.net/Axel-Nemeth Les meubles et lampes de designers
super chers qu’il ne peut pas payer
Le cuir… sur des chaussures ou des vestes
Design

4. Qui sommes-nous ?
Forte Culture
CA
du Service
2010 :
3,2M€
2011 :
5,8M€
+120 2012 :
AiCubiens 10M€
22/04/2013 Société Ai3 4

5. 01 02 03 04
CHAP1 CHAP2 CHAP3 CHAP4
LES LES ERGO GRAPHIC
BASES BASES DES DESIGN
DE DE LA APPLIS
MODERN CCU MODERN
UI UI
Design

6. CHAP1LES BASES
DE MODERN UI
Design

7. Chrome : éléments visuels
CONTEN
T
permettant d’interagir avec
BEFORE l’application
CHROME
Consommation de contenus
Immersion totale
Attention à la productivité et la
création
Design

8. 1
2

9. Swiss Design
FLAT Existe depuis longtemps dans le
DESIGN print
Typographique et minimaliste
Less is more, L. Mies Van Der Rohe
God is in the details, L. Mies Van Der
Rohe
Design

10. All pictures are the property of their owners

11. CHAP2LES BASES DE LA
CONCEPTION CENTREE
UTILISATEUR
Design

12. Philosophie et démarche
LA de conception , où les besoins, les
CCU attentes et les caractéristiques
propres des utilisateurs finaux
sont pris en compte à chaque étape
du processus de développement
d'un produit
Design

13. Je ne suis pas un bon exemple
VOS d’utilisateur
UTILISA-
TEURS
Quelle est ma cible ?
Qui sont mes utilisateurs ?
Qu’aiment-ils ?
Qu’attendent-ils ?
L’utilisateur final est-il mon client ?
Design

14. Incertitude Certitude
Recherche Création - itérations Mise en œuvre
* Représentation de Damien Newman - Central
Design

15. CHAP3L’ERGONOMIE
DES APPS MODERN UI
Design

16. L’ERGO DE
Comprendre vos utilisateurs
VOTRE Mock-up
APPLI Créer des scenarios d’utilisations
Design

17. TYPES DE
PAGES
Design

18. HUB &
SPOKE
Design

19. FONCTIONS PRINCIPALES &
SECONDAIRES
Design

20. NAVIGATION TABULAIRE
Design

21. NAVIGATION VIA APP BAR
Design

22. RACCOURCIS VERS CHARMS
Design

23. OUBLI DE LA SNAP VIEW !
Design

24. PAS D’INDICATION DE LA NAVIGATION
Design

25. HOME PAGE ‘MENU’
Design

26. LANDING PAGE INUTILE
Design

27. ZONES ET PAGES VIDES
Design

28. Design

29. Design

32. PERSONNALISATION DE L’EXPERIENCE
Design

33. RESPONSIVE
DESIGN
Design

34. Souris + clavier
POINTS Utiliser les charms
IMP. Homogénéiser l’expérience avec l’OS
Roaming
Pas de scroll dans trop d’éléments
Résolution et DPI
Fast and fluid + feedback
Design

35. CHAP4GRAPHIC DESIGN
Design

36. Partie visuelle de la création
C’EST Pas au « petit bonheur la chance »
QUOI ? Cible utilisateur / Placement produit
Trending
FCM
Intégration/dév
Design

37. S E M U I
SIMPLE ESTHETIQUE MEMORISABLE UNIQUE INTEMPOREL
Design

38. Design

39. Branding
VOTRE Identification visuelle de votre appli
LOGO Doit respecter la règle SEMUI
Un logo n’est pas une photo une
icône…
Design

40. Design

41. Design

42. Hiérarchisation visuelle
Evite la monotonie
FOCUS
VISUEL
Facilite la lecture
Design

43. VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL
VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL
VISUAL VISUEL VISUEL VISUEL VISUEL VISUEL
Design

44. VISUEL VISUEL VISUEL VISUEL
VISUEL
VISUEL VISUEL VISUEL VISUEL
VISUEL VISUEL VISUEL VISUEL VISUEL VISUAL
Design

45. VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL
FOCUS
VISUEL VISUEL VISUEL VISUEL VISUEL
VISUEL
VISUEL VISUEL VISUEL VISUEL VISUAL VISUEL
Design

46. Pas trop de couleurs
LES Camaïeux
COULEURS Couleurs complémentaires
Pas de RVB en extrême
(Valeur à 255 ou 0)
https://kuler.adobe.com/#
Design

47. Attention au Serif
LES
POLICES
Jamais de 4 polices
Privilégier la simplicité
ToUjours le Même CHOIX
poUR la casSE
Design

48. Design

49. Recouper avec les valeurs de
l’application
APPLI
FINALE
Décliner le style sur différents écrans
Design

50. Design

51. Design

52. Design

53. 0
Content before chrome 06 White Space
1
02 Hub & Spoke 07 Typographie
03 Charms & App bar 08 Branding
04 Responsive Design 09 Flat Design
05 Grid Design 10 Utilisateur
Design

54. Donnez votre avis !
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
http://notes.mstechdays.fr

55. Développeurs Pros de l’IT
http://aka.ms/generation-app Formez-vous en ligne www.microsoftvirtualacademy.com
http://aka.ms/evenements-
developpeurs Retrouvez nos évènements http://aka.ms/itcamps-france
Les accélérateurs
Faites-vous accompagner
Windows Azure, Windows Phone,
gratuitement
Windows 8
Essayer gratuitement nos http://aka.ms/telechargements
solutions IT
La Dev’Team sur MSDN Retrouver nos experts L’IT Team sur TechNet
http://aka.ms/devteam Microsoft http://aka.ms/itteam