SlideShare une entreprise Scribd logo
1  sur  55
Télécharger pour lire hors ligne
BIEN PASSER LE STORE
         LE RESPECT DES GUIDELINES
                     SachaLEROUX & AxelNEMETH




Design
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
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
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
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
CHAP1LES BASES
           DE MODERN UI



Design
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
1




2
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
All pictures are the property of their owners
CHAP2LES BASES DE LA
          CONCEPTION CENTREE
                  UTILISATEUR


Design
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
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
Incertitude                                                            Certitude




 Recherche     Création - itérations   Mise en œuvre
                                          * Représentation de Damien Newman - Central


Design
CHAP3L’ERGONOMIE
         DES APPS MODERN UI



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




Design
TYPES DE
   PAGES




Design
HUB &
    SPOKE




Design
FONCTIONS PRINCIPALES &
 SECONDAIRES




Design
NAVIGATION TABULAIRE




Design
NAVIGATION VIA APP BAR




Design
RACCOURCIS VERS CHARMS




Design
OUBLI DE LA SNAP VIEW !




Design
PAS D’INDICATION DE LA NAVIGATION




Design
HOME PAGE ‘MENU’




Design
LANDING PAGE INUTILE




Design
ZONES ET PAGES VIDES




Design
Design
Design
PERSONNALISATION DE L’EXPERIENCE




Design
RESPONSIVE
  DESIGN




Design
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
CHAP4GRAPHIC DESIGN



Design
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
S          E          M           U           I
         SIMPLE   ESTHETIQUE MEMORISABLE   UNIQUE   INTEMPOREL




Design
Design
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
Design
Design
Hiérarchisation visuelle
                  Evite la monotonie
         FOCUS
         VISUEL
                  Facilite la lecture




Design
VISUEL   VISUEL   VISUEL   VISUEL   VISUEL   VISUEL




         VISUEL   VISUEL   VISUEL   VISUEL   VISUEL   VISUEL




         VISUAL   VISUEL   VISUEL   VISUEL   VISUEL   VISUEL




Design
VISUEL                      VISUEL   VISUEL   VISUEL


                       VISUEL


         VISUEL                      VISUEL   VISUEL   VISUEL




         VISUEL   VISUEL    VISUEL   VISUEL   VISUEL   VISUAL




Design
VISUEL   VISUEL   VISUEL   VISUEL   VISUEL   VISUEL




                           FOCUS
         VISUEL   VISUEL            VISUEL   VISUEL   VISUEL
                           VISUEL


         VISUEL   VISUEL   VISUEL   VISUEL   VISUAL   VISUEL




Design
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
Attention au Serif
           LES
         POLICES
                   Jamais        de   4   polices


                   Privilégier la simplicité
                   ToUjours le Même CHOIX
                   poUR la casSE


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




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

Contenu connexe

Tendances

La matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousLa matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousKiss The Bride
 
Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !Catherine Verfaillie
 
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéGuillaume Abel
 
Symposium uxdesign
Symposium uxdesignSymposium uxdesign
Symposium uxdesignVersusmind
 
Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017Net Design
 
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?Marie Glandus
 
Design de service - le parcours utilisateur
Design de service - le parcours utilisateurDesign de service - le parcours utilisateur
Design de service - le parcours utilisateurEva Villebrun
 
Formation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizonFormation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizonHETIC
 
3. Recherche utilisateur
3. Recherche utilisateur3. Recherche utilisateur
3. Recherche utilisateurLaurent Barbat
 
5. Grands principes de conception
5. Grands principes de conception5. Grands principes de conception
5. Grands principes de conceptionLaurent Barbat
 
Experience map @UXRepublic
Experience map @UXRepublicExperience map @UXRepublic
Experience map @UXRepublicUX REPUBLIC
 
Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013Guillaume Abel
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaborationLaurent Barbat
 
Mix07 Ergonomie et Experience Utilisateur Steria
Mix07 Ergonomie et Experience Utilisateur SteriaMix07 Ergonomie et Experience Utilisateur Steria
Mix07 Ergonomie et Experience Utilisateur SteriaSteria
 
Présentation UX agence Backelite
Présentation UX agence BackelitePrésentation UX agence Backelite
Présentation UX agence BackeliteIdean France
 
Design de services
Design de servicesDesign de services
Design de serviceswedo studios
 
Aprem UX FLUPA “CX et Conception de services” - Laure-Gabrielle Chatenet et J...
Aprem UX FLUPA “CX et Conception de services” - Laure-Gabrielle Chatenet et J...Aprem UX FLUPA “CX et Conception de services” - Laure-Gabrielle Chatenet et J...
Aprem UX FLUPA “CX et Conception de services” - Laure-Gabrielle Chatenet et J...Flupa
 

Tendances (20)

La matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousLa matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tous
 
Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !
 
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
 
Symposium uxdesign
Symposium uxdesignSymposium uxdesign
Symposium uxdesign
 
Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017
 
Mobile design
Mobile designMobile design
Mobile design
 
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
 
Design de service - le parcours utilisateur
Design de service - le parcours utilisateurDesign de service - le parcours utilisateur
Design de service - le parcours utilisateur
 
C’est quoi l’UX -
C’est quoi l’UX -C’est quoi l’UX -
C’est quoi l’UX -
 
Formation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizonFormation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizon
 
3. Recherche utilisateur
3. Recherche utilisateur3. Recherche utilisateur
3. Recherche utilisateur
 
5. Grands principes de conception
5. Grands principes de conception5. Grands principes de conception
5. Grands principes de conception
 
Experience map @UXRepublic
Experience map @UXRepublicExperience map @UXRepublic
Experience map @UXRepublic
 
Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration
 
Mix07 Ergonomie et Experience Utilisateur Steria
Mix07 Ergonomie et Experience Utilisateur SteriaMix07 Ergonomie et Experience Utilisateur Steria
Mix07 Ergonomie et Experience Utilisateur Steria
 
Présentation UX agence Backelite
Présentation UX agence BackelitePrésentation UX agence Backelite
Présentation UX agence Backelite
 
Sprint0
Sprint0Sprint0
Sprint0
 
Design de services
Design de servicesDesign de services
Design de services
 
Aprem UX FLUPA “CX et Conception de services” - Laure-Gabrielle Chatenet et J...
Aprem UX FLUPA “CX et Conception de services” - Laure-Gabrielle Chatenet et J...Aprem UX FLUPA “CX et Conception de services” - Laure-Gabrielle Chatenet et J...
Aprem UX FLUPA “CX et Conception de services” - Laure-Gabrielle Chatenet et J...
 

En vedette

1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !
1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !
1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !Microsoft Technet France
 
2010 céges bemutató diasor 01
2010 céges bemutató diasor 012010 céges bemutató diasor 01
2010 céges bemutató diasor 01NoniJano
 
SharePoint et SQL Server sur Windows Azure
SharePoint et SQL Server sur Windows AzureSharePoint et SQL Server sur Windows Azure
SharePoint et SQL Server sur Windows AzureMicrosoft Technet France
 
Comment intégrer une application ASP.NET dans Windows Azure
Comment intégrer une application ASP.NET dans Windows AzureComment intégrer une application ASP.NET dans Windows Azure
Comment intégrer une application ASP.NET dans Windows AzureMicrosoft Technet France
 

En vedette (6)

1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !
1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !
1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !
 
2010 céges bemutató diasor 01
2010 céges bemutató diasor 012010 céges bemutató diasor 01
2010 céges bemutató diasor 01
 
Apush ppt3
Apush ppt3Apush ppt3
Apush ppt3
 
SharePoint et SQL Server sur Windows Azure
SharePoint et SQL Server sur Windows AzureSharePoint et SQL Server sur Windows Azure
SharePoint et SQL Server sur Windows Azure
 
Comment intégrer une application ASP.NET dans Windows Azure
Comment intégrer une application ASP.NET dans Windows AzureComment intégrer une application ASP.NET dans Windows Azure
Comment intégrer une application ASP.NET dans Windows Azure
 
Nc cw committee
Nc cw committeeNc cw committee
Nc cw committee
 

Similaire à Bien passer le Store : Le respect des guidelines

Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirConcept Image
 
2012 folio brochure
2012 folio brochure2012 folio brochure
2012 folio brochureZélia Sakhi
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Microsoft Technet France
 
Designers, prenez le pouvoir !
Designers, prenez le pouvoir !Designers, prenez le pouvoir !
Designers, prenez le pouvoir !David Koss
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesConcept Image
 
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftLe skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftMicrosoft Décideurs IT
 
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...Microsoft
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Idean France
 
Portfolio Cyrille Hervet
Portfolio Cyrille HervetPortfolio Cyrille Hervet
Portfolio Cyrille HervetCyrille Hervet
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia
 
Workshop UX - Quentin Subervie
Workshop UX - Quentin SubervieWorkshop UX - Quentin Subervie
Workshop UX - Quentin SubervieQuentin Subervie
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015Vincent Pereira
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-designOlivier Soros
 
L'importance du design dans l'efficacité de votre site web
L'importance du design dans l'efficacité de votre site webL'importance du design dans l'efficacité de votre site web
L'importance du design dans l'efficacité de votre site webJulien Dereumaux
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } ManagementDavid Roessli
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?WebSchool Orléans
 
L'intervention de Damien Melich
L'intervention de Damien MelichL'intervention de Damien Melich
L'intervention de Damien MelichLudovic Dublanchet
 

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

Design Trends
Design TrendsDesign Trends
Design Trends
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenir
 
2012 folio brochure
2012 folio brochure2012 folio brochure
2012 folio brochure
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
 
Le web design - fullCONTENT
Le web design - fullCONTENTLe web design - fullCONTENT
Le web design - fullCONTENT
 
Designers, prenez le pouvoir !
Designers, prenez le pouvoir !Designers, prenez le pouvoir !
Designers, prenez le pouvoir !
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
 
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftLe skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
 
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionnel
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016
 
Portfolio Cyrille Hervet
Portfolio Cyrille HervetPortfolio Cyrille Hervet
Portfolio Cyrille Hervet
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UX
 
Workshop UX - Quentin Subervie
Workshop UX - Quentin SubervieWorkshop UX - Quentin Subervie
Workshop UX - Quentin Subervie
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
 
L'importance du design dans l'efficacité de votre site web
L'importance du design dans l'efficacité de votre site webL'importance du design dans l'efficacité de votre site web
L'importance du design dans l'efficacité de votre site web
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } Management
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?
 
L'intervention de Damien Melich
L'intervention de Damien MelichL'intervention de Damien Melich
L'intervention de Damien Melich
 

Plus de Microsoft Technet France

Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex
Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex
Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex Microsoft Technet France
 
Comment réussir votre déploiement de Windows 10
Comment réussir votre déploiement de Windows 10Comment réussir votre déploiement de Windows 10
Comment réussir votre déploiement de Windows 10Microsoft Technet France
 
Fusion, Acquisition - Optimisez la migration et la continuité des outils col...
 Fusion, Acquisition - Optimisez la migration et la continuité des outils col... Fusion, Acquisition - Optimisez la migration et la continuité des outils col...
Fusion, Acquisition - Optimisez la migration et la continuité des outils col...Microsoft Technet France
 
Wavestone déploie son portail Powell 365 en 5 semaines
Wavestone déploie son portail Powell 365 en 5 semainesWavestone déploie son portail Powell 365 en 5 semaines
Wavestone déploie son portail Powell 365 en 5 semainesMicrosoft Technet France
 
Retour d’expérience sur le monitoring et la sécurisation des identités Azure
Retour d’expérience sur le monitoring et la sécurisation des identités AzureRetour d’expérience sur le monitoring et la sécurisation des identités Azure
Retour d’expérience sur le monitoring et la sécurisation des identités AzureMicrosoft Technet France
 
Scénarios de mobilité couverts par Enterprise Mobility + Security
Scénarios de mobilité couverts par Enterprise Mobility + SecurityScénarios de mobilité couverts par Enterprise Mobility + Security
Scénarios de mobilité couverts par Enterprise Mobility + SecurityMicrosoft Technet France
 
SharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle générationSharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle générationMicrosoft Technet France
 
Stockage Cloud : il y en aura pour tout le monde
Stockage Cloud : il y en aura pour tout le mondeStockage Cloud : il y en aura pour tout le monde
Stockage Cloud : il y en aura pour tout le mondeMicrosoft Technet France
 
Bien appréhender le concept de Windows As a Service
Bien appréhender le concept de Windows As a ServiceBien appréhender le concept de Windows As a Service
Bien appréhender le concept de Windows As a ServiceMicrosoft Technet France
 
Protéger vos données avec le chiffrement dans Azure et Office 365
Protéger vos données avec le chiffrement dans Azure et Office 365Protéger vos données avec le chiffrement dans Azure et Office 365
Protéger vos données avec le chiffrement dans Azure et Office 365Microsoft Technet France
 
Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...
Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...
Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...Microsoft Technet France
 
Comprendre la stratégie identité de Microsoft
Comprendre la stratégie identité de MicrosoftComprendre la stratégie identité de Microsoft
Comprendre la stratégie identité de MicrosoftMicrosoft Technet France
 
Vous avez dit « authentification sans mot de passe » : une illustration avec ...
Vous avez dit « authentification sans mot de passe » : une illustration avec ...Vous avez dit « authentification sans mot de passe » : une illustration avec ...
Vous avez dit « authentification sans mot de passe » : une illustration avec ...Microsoft Technet France
 
Déploiement hybride, la téléphonie dans le cloud
Déploiement hybride, la téléphonie dans le cloudDéploiement hybride, la téléphonie dans le cloud
Déploiement hybride, la téléphonie dans le cloudMicrosoft Technet France
 
Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...
Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...
Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...Microsoft Technet France
 
SharePoint 2016 : architecture, déploiement et topologies hybrides
SharePoint 2016 : architecture, déploiement et topologies hybridesSharePoint 2016 : architecture, déploiement et topologies hybrides
SharePoint 2016 : architecture, déploiement et topologies hybridesMicrosoft Technet France
 
Gestion de Windows 10 et des applications dans l'entreprise moderne
Gestion de Windows 10 et des applications dans l'entreprise moderneGestion de Windows 10 et des applications dans l'entreprise moderne
Gestion de Windows 10 et des applications dans l'entreprise moderneMicrosoft Technet France
 
Office 365 dans votre Système d'Informations
Office 365 dans votre Système d'InformationsOffice 365 dans votre Système d'Informations
Office 365 dans votre Système d'InformationsMicrosoft Technet France
 

Plus de Microsoft Technet France (20)

Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex
Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex
Automatisez, visualisez et améliorez vos processus d’entreprise avec Nintex
 
Comment réussir votre déploiement de Windows 10
Comment réussir votre déploiement de Windows 10Comment réussir votre déploiement de Windows 10
Comment réussir votre déploiement de Windows 10
 
OMS log search au quotidien
OMS log search au quotidienOMS log search au quotidien
OMS log search au quotidien
 
Fusion, Acquisition - Optimisez la migration et la continuité des outils col...
 Fusion, Acquisition - Optimisez la migration et la continuité des outils col... Fusion, Acquisition - Optimisez la migration et la continuité des outils col...
Fusion, Acquisition - Optimisez la migration et la continuité des outils col...
 
Wavestone déploie son portail Powell 365 en 5 semaines
Wavestone déploie son portail Powell 365 en 5 semainesWavestone déploie son portail Powell 365 en 5 semaines
Wavestone déploie son portail Powell 365 en 5 semaines
 
Retour d’expérience sur le monitoring et la sécurisation des identités Azure
Retour d’expérience sur le monitoring et la sécurisation des identités AzureRetour d’expérience sur le monitoring et la sécurisation des identités Azure
Retour d’expérience sur le monitoring et la sécurisation des identités Azure
 
Scénarios de mobilité couverts par Enterprise Mobility + Security
Scénarios de mobilité couverts par Enterprise Mobility + SecurityScénarios de mobilité couverts par Enterprise Mobility + Security
Scénarios de mobilité couverts par Enterprise Mobility + Security
 
SharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle générationSharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle génération
 
Stockage Cloud : il y en aura pour tout le monde
Stockage Cloud : il y en aura pour tout le mondeStockage Cloud : il y en aura pour tout le monde
Stockage Cloud : il y en aura pour tout le monde
 
Bien appréhender le concept de Windows As a Service
Bien appréhender le concept de Windows As a ServiceBien appréhender le concept de Windows As a Service
Bien appréhender le concept de Windows As a Service
 
Protéger vos données avec le chiffrement dans Azure et Office 365
Protéger vos données avec le chiffrement dans Azure et Office 365Protéger vos données avec le chiffrement dans Azure et Office 365
Protéger vos données avec le chiffrement dans Azure et Office 365
 
Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...
Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...
Protéger votre patrimoine informationnel dans un monde hybride avec Azure Inf...
 
Comprendre la stratégie identité de Microsoft
Comprendre la stratégie identité de MicrosoftComprendre la stratégie identité de Microsoft
Comprendre la stratégie identité de Microsoft
 
Vous avez dit « authentification sans mot de passe » : une illustration avec ...
Vous avez dit « authentification sans mot de passe » : une illustration avec ...Vous avez dit « authentification sans mot de passe » : une illustration avec ...
Vous avez dit « authentification sans mot de passe » : une illustration avec ...
 
Sécurité des données
Sécurité des donnéesSécurité des données
Sécurité des données
 
Déploiement hybride, la téléphonie dans le cloud
Déploiement hybride, la téléphonie dans le cloudDéploiement hybride, la téléphonie dans le cloud
Déploiement hybride, la téléphonie dans le cloud
 
Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...
Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...
Supervisez la qualité des appels Skype for Business Online à l'aide de Call Q...
 
SharePoint 2016 : architecture, déploiement et topologies hybrides
SharePoint 2016 : architecture, déploiement et topologies hybridesSharePoint 2016 : architecture, déploiement et topologies hybrides
SharePoint 2016 : architecture, déploiement et topologies hybrides
 
Gestion de Windows 10 et des applications dans l'entreprise moderne
Gestion de Windows 10 et des applications dans l'entreprise moderneGestion de Windows 10 et des applications dans l'entreprise moderne
Gestion de Windows 10 et des applications dans l'entreprise moderne
 
Office 365 dans votre Système d'Informations
Office 365 dans votre Système d'InformationsOffice 365 dans votre Système d'Informations
Office 365 dans votre Système d'Informations
 

Bien passer le Store : Le respect des guidelines

  • 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
  • 21. NAVIGATION VIA APP BAR Design
  • 23. OUBLI DE LA SNAP VIEW ! Design
  • 24. PAS D’INDICATION DE LA NAVIGATION Design
  • 27. ZONES ET PAGES VIDES Design
  • 30.
  • 31.
  • 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
  • 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
  • 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
  • 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
  • 49. Recouper avec les valeurs de l’application APPLI FINALE Décliner le style sur différents écrans 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

Notes de l'éditeur

  1. SACHA
  2. SACHA
  3. AXEL
  4. SACHA
  5. AXEL
  6. 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é
  7. 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 ?
  8. 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
  9. AXEL
  10. SACHA
  11. SACHA
  12. SACHA
  13. SACHANon ce n’est pas une œuvre d’art de notre styliste
  14. SACHA
  15. 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)
  16. SACHA
  17. SACHA
  18. SACHA
  19. SACHA
  20. SACHA
  21. SACHA
  22. SACHA
  23. SACHA
  24. SACHA
  25. SACHA
  26. SACHA
  27. SACHAShowingStoryboarding PPT
  28. SACHA+AXEL
  29. AXELShowingStoryboarding PPT
  30. AXELShowingStoryboarding PPT
  31. AXEL
  32. AXEL
  33. 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
  34. AXEL
  35. 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
  36. 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
  37. AXEL+SACHA
  38. AXEL
  39. AXELExemple d’évolution des logos
  40. AXEL+SACHALogos final
  41. AXEL
  42. AXELFocus visuel par la couleur > le plus simple et plus efficace mais fonctionne que si peu de couleurs
  43. AXELFocus visuel par taille > attention toujours aligné sur la grille
  44. AXELFocus visuel typographique > le plus subtil mais apporte de la finesse au design
  45. 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é
  46. AXEL
  47. AXEL
  48. AXEL
  49. AXEL+SACHA
  50. AXEL+SACHA
  51. AXEL+SACHA
  52. SACHASatisfaction de l’utilisateur final > Satisfaction du client
  53. Notation