Bien passer le Store : Le respect des guidelines
 

Bien passer le Store : Le respect des guidelines

le

  • 434 vues

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 ...

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…

Statistiques

Vues

Total des vues
434
Vues sur SlideShare
434
Vues externes
0

Actions

J'aime
0
Téléchargements
5
Commentaires
0

0 Ajouts 0

No embeds

Accessibilité

Catégories

Détails de l'import

Uploaded via as Microsoft PowerPoint

Droits d'utilisation

© Tous droits réservés

Report content

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire
  • 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

Bien passer le Store : Le respect des guidelines Presentation Transcript

  • 1. BIEN PASSER LE STORE LE RESPECT DES GUIDELINES SachaLEROUX & AxelNEMETHDesign
  • 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 neigeDesign
  • 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 vestesDesign
  • 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 UIDesign
  • 6. CHAP1LES BASES DE MODERN UIDesign
  • 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éationDesign
  • 8. 12
  • 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 RoheDesign
  • 10. All pictures are the property of their owners
  • 11. CHAP2LES BASES DE LA CONCEPTION CENTREE UTILISATEURDesign
  • 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 dun produitDesign
  • 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 - CentralDesign
  • 15. CHAP3L’ERGONOMIE DES APPS MODERN UIDesign
  • 16. L’ERGO DE Comprendre vos utilisateurs VOTRE Mock-up APPLI Créer des scenarios d’utilisationsDesign
  • 17. TYPES DE PAGESDesign
  • 18. HUB & SPOKEDesign
  • 19. FONCTIONS PRINCIPALES & SECONDAIRESDesign
  • 20. NAVIGATION TABULAIREDesign
  • 21. NAVIGATION VIA APP BARDesign
  • 22. RACCOURCIS VERS CHARMSDesign
  • 23. OUBLI DE LA SNAP VIEW !Design
  • 24. PAS D’INDICATION DE LA NAVIGATIONDesign
  • 25. HOME PAGE ‘MENU’Design
  • 26. LANDING PAGE INUTILEDesign
  • 27. ZONES ET PAGES VIDESDesign
  • 28. Design
  • 29. Design
  • 30. PERSONNALISATION DE L’EXPERIENCEDesign
  • 31. RESPONSIVE DESIGNDesign
  • 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 + feedbackDesign
  • 33. CHAP4GRAPHIC DESIGNDesign
  • 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évDesign
  • 35. S E M U I SIMPLE ESTHETIQUE MEMORISABLE UNIQUE INTEMPORELDesign
  • 36. Design
  • 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. Design
  • 39. Design
  • 40. Hiérarchisation visuelle Evite la monotonie FOCUS VISUEL Facilite la lectureDesign
  • 41. VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUAL VISUEL VISUEL VISUEL VISUEL VISUELDesign
  • 42. VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUALDesign
  • 43. VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL FOCUS VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUEL VISUAL VISUELDesign
  • 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. Attention au Serif LES POLICES Jamais de 4 polices Privilégier la simplicité ToUjours le Même CHOIX poUR la casSEDesign
  • 46. Design
  • 47. Recouper avec les valeurs de l’application APPLI FINALE Décliner le style sur différents écransDesign
  • 48. Design
  • 49. Design
  • 50. Design
  • 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 UtilisateurDesign
  • 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 TechDayshttp://notes.mstechdays.fr
  • 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 accompagnerWindows 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