Skip to main content
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