Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Bien passer le Store : Le respect des guidelines

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 55 Publicité

Bien passer le Store : Le respect des guidelines

Télécharger pour lire hors ligne

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…

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…

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Publicité

Similaire à Bien passer le Store : Le respect des guidelines (20)

Plus par Microsoft Technet France (20)

Publicité

Plus récents (20)

Bien passer le Store : Le respect des guidelines

  1. 1. BIEN PASSER LE STORE LE RESPECT DES GUIDELINES SachaLEROUX & AxelNEMETH Design
  2. 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. 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. 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. 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. 6. CHAP1LES BASES DE MODERN UI Design
  7. 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. 8. 1 2
  9. 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. 10. All pictures are the property of their owners
  11. 11. CHAP2LES BASES DE LA CONCEPTION CENTREE UTILISATEUR Design
  12. 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. 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. 14. Incertitude Certitude Recherche Création - itérations Mise en œuvre * Représentation de Damien Newman - Central Design
  15. 15. CHAP3L’ERGONOMIE DES APPS MODERN UI Design
  16. 16. L’ERGO DE Comprendre vos utilisateurs VOTRE Mock-up APPLI Créer des scenarios d’utilisations Design
  17. 17. TYPES DE PAGES Design
  18. 18. HUB & SPOKE Design
  19. 19. FONCTIONS PRINCIPALES & SECONDAIRES Design
  20. 20. NAVIGATION TABULAIRE Design
  21. 21. NAVIGATION VIA APP BAR Design
  22. 22. RACCOURCIS VERS CHARMS Design
  23. 23. OUBLI DE LA SNAP VIEW ! Design
  24. 24. PAS D’INDICATION DE LA NAVIGATION Design
  25. 25. HOME PAGE ‘MENU’ Design
  26. 26. LANDING PAGE INUTILE Design
  27. 27. ZONES ET PAGES VIDES Design
  28. 28. Design
  29. 29. Design
  30. 30. PERSONNALISATION DE L’EXPERIENCE Design
  31. 31. RESPONSIVE DESIGN Design
  32. 32. 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
  33. 33. CHAP4GRAPHIC DESIGN Design
  34. 34. 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
  35. 35. S E M U I SIMPLE ESTHETIQUE MEMORISABLE UNIQUE INTEMPOREL Design
  36. 36. Design
  37. 37. 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
  38. 38. Design
  39. 39. Design
  40. 40. Hiérarchisation visuelle Evite la monotonie FOCUS VISUEL Facilite la lecture Design
  41. 41. VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUAL VISUEL VISUEL VISUEL VISUEL VISUEL Design
  42. 42. VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUAL Design
  43. 43. VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL FOCUS VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUAL VISUEL Design
  44. 44. 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
  45. 45. Attention au Serif LES POLICES Jamais de 4 polices Privilégier la simplicité ToUjours le Même CHOIX poUR la casSE Design
  46. 46. Design
  47. 47. Recouper avec les valeurs de l’application APPLI FINALE Décliner le style sur différents écrans Design
  48. 48. Design
  49. 49. Design
  50. 50. Design
  51. 51. 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
  52. 52. 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
  53. 53. 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

Notes de l'éditeur

  • SACHA
  • SACHA
  • AXEL
  • SACHA
  • AXEL
  • AXELExtrêmement adapté à la « consommation de contenu »Immersion de l’utilisateurs dans le contenu et non dans le chrome > exemple du journalAttention remarque à adapter pour les applications de création de contenu > masquer le chrome présente un risque d’incompréhension et d’improductivité
  • AXELExempledel’improductivité de masque le chrome dansune application de creation > Rejet de l’application, et incomprehension de l’utilisateur.Comment je fais pour démarrer, pour ajouter du texte et des shapes ?
  • AXELDéjà présent depuis de nombreuses années dans le monde du print (questions de coûts) > plus récent dans l’UI et le web > minimalisme stylistique, hiérarchisation de l’information, typographique (inspiré du Swiss design dans les 40’ ou 50’)Ludwig Mies Van DerRohe né le 27 mars 1886 à Aix-la-Chapelle et mort le 17 août 1969 à Chicago, est un architecte et designer allemand.Un contenu pertinent se suffit à lui mêmeInutile de multiplier les effets stylistiques, le travail de quelques détails judicieux suffit
  • AXEL
  • SACHA
  • SACHA
  • SACHA
  • SACHANon ce n’est pas une œuvre d’art de notre styliste
  • SACHA
  • SACHAMock-up : inutile d’avoir des outils spécifiques :- Powerpoint- un bic et du papierScenarii d’utilisation : toujours replacer l’organisation de l’application et l’agencement des pages dans un contexte d’utilisation > ainsi on ne créé pas de pages ou zones inutiles. L’ergonome dit : STOP aux pages qui servent à rien (exemple de la page de détails qui ne donne pas plus d’info que la tile)
  • SACHA
  • SACHA
  • SACHA
  • SACHA
  • SACHA
  • SACHA
  • SACHA
  • SACHA
  • SACHA
  • SACHA
  • SACHA
  • SACHAShowingStoryboarding PPT
  • SACHA+AXEL
  • AXELShowingStoryboarding PPT
  • AXELShowingStoryboarding PPT
  • AXEL
  • AXEL
  • AXELSouris> States/overlayExpérience de l’OS > mes utilisateurs sont déjà formés par les autres applis > je ne perds pas l’utilisateurScroll dans beaucoup d’éléments > découpage en catégorie / sous-pages / semantic zoomRésolution et DPI contrôle en 140%, 180% en fonction du DPILa fluidité de l’app est super importante, toujours avoir un feedback visuel des actions faites par l’utilisateur
  • AXEL
  • AXELVisuelle > Acte de sélection, partie visible et identifiable en premier lieuOn vire le designer qui n’est pas capable de donner une explication à son designDesign dépend de la cible et du placement du produit (haut de gamme, entrée de gamme, dynamique) lié aux valeurs de l’application > pour notre démo on suppose que la cible a été identifiéeTrending tous les jours, planches de tendancesFormes couleurs matièresOn pense aussi en dernier lieu à la difficulté d’intégration
  • AXELSimple: Lessis moreEsthetique : subjectif mais certaines choses sont communément admises comme inesthétiques. Le trending aide à visualiser celaMémorisable : doit pouvoir être imaginé dans l’esprit (exemple logo windows)Unique : difficile à obtenir mais peut se jouer dans les détailsIntemporel : sujet aux tendances > l’expérience d’un designer permet de juger de la pérennité du travail
  • AXEL+SACHA
  • AXEL
  • AXELExemple d’évolution des logos
  • AXEL+SACHALogos final
  • AXEL
  • AXELFocus visuel par la couleur > le plus simple et plus efficace mais fonctionne que si peu de couleurs
  • AXELFocus visuel par taille > attention toujours aligné sur la grille
  • AXELFocus visuel typographique > le plus subtil mais apporte de la finesse au design
  • AXELOn évite la multiplication de couleurs sauf cas particuliers (2 ou 3 couleurs suffisent)Pas de RVB extrême on privilégie des couleurs qui existe en print > moins agressif si écran mal calibré
  • AXEL
  • AXEL
  • AXEL
  • AXEL+SACHA
  • AXEL+SACHA
  • AXEL+SACHA
  • SACHASatisfaction de l’utilisateur final > Satisfaction du client
  • Notation

×