bien passer le store : le respect des guidelines
DESCRIPTION
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…TRANSCRIPT
BIEN PASSER LE STORE
LE RESPECT DES GUIDELINESSachaLEROUX & AxelNEMETH
Design
Design
SachaLEROUX (El conceptor)
PRO
Directeur des opérations Bewise by Ai3
Consultant Front-end
IL AIME
Tout ce qui possède une interface
Jouer à WoW avec des amis
Les meubles de designers super chers
qu’il ne peut pas payer
Les feux de bois quand il neige
@SachaLeroux
www.bewise.fr
Design
AxelNEMETH (El designor)
PRO
Consultant Design & DA Bewise by Ai3
Spécialiste UI design et graphic design
IL AIME
Le sport (escalade, roller derby, VTT…)
La bonne bouffe
Les meubles et lampes de designers
super chers qu’il ne peut pas payer
Le cuir… sur des chaussures ou des vestes
@AxelNemeth
Behance.net/Axel-Nemeth
Qui sommes-nous ?
22/04/2013 Société Ai34
Forte Culture
du Service
+120
AiCubiens
CA
2010 :
3,2M€
2011 :
5,8M€
2012 :
10M€
CHAP1
LES
BASES
DE
MODERN
UI
Design
01CHAP2
LES
BASES
DE LA
CCU
02CHAP3
ERGO
DES
APPLIS
MODERN
UI
03CHAP4
GRAPHIC
DESIGN
04
CHAP1LES BASES
DE MODERN UI
Design
Design
Chrome : éléments visuels
permettant d’interagir avec
l’application
Consommation de contenus
Immersion totale
Attention à la productivité et la
création
CONTEN
T
BEFORE
CHROME
1
2
Design
Swiss Design
Existe depuis longtemps dans le
Typographique et minimaliste
Less is more, L. Mies Van Der Rohe
God is in the details, L. Mies Van Der
Rohe
FLAT
DESIGN
All pictures are the property of their owners
CHAP2LES BASES DE LA
CONCEPTION CENTREE
UTILISATEUR
Design
Design
Philosophie et démarche
de conception , où les besoins, les
attentes et les caractéristiques
propres des utilisateurs finaux
sont pris en compte à chaque étape
du processus de développement
d'un produit
LA
CCU
Design
Je ne suis pas un bon exemple
d’utilisateur
Quelle est ma cible ?
Qui sont mes utilisateurs ?
Qu’aiment-ils ?
Qu’attendent-ils ?
L’utilisateur final est-il mon client ?
VOS
UTILISA-
TEURS
Design
Incertitude Certitude
Recherche Création - itérations Mise en œuvre
* Représentation de Damien Newman - Central
CHAP3L’ERGONOMIE
DES APPS MODERN UI
Design
Design
Comprendre vos utilisateurs
Mock-up
Créer des scenarios d’utilisations
L’ERGO DE
VOTRE
APPLI
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
Utiliser les charms
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
POINTS
IMP.
CHAP4GRAPHIC DESIGN
Design
Design
Partie visuelle de la création
Pas au « petit bonheur la chance »
Cible utilisateur / Placement produit
Trending
FCM
Intégration/dév
C’EST
QUOI ?
Design
SIMPLE
SESTHETIQUE
EMEMORISABLE
MUNIQUE
UINTEMPOREL
I
Design
Design
Branding
Identification visuelle de votre appli
Doit respecter la règle SEMUI
Un logo n’est pas une photo une
icône…
VOTRE
LOGO
Design
Design
Design
Hiérarchisation visuelle
Evite la monotonie
Facilite la lecture
FOCUS
VISUEL
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
VISUEL VISUEL VISUELVISUELFOCUSVISUEL
VISUEL
VISUEL VISUEL VISUEL VISUEL VISUAL VISUEL
Design
Pas trop de couleurs
Camaïeux
Couleurs complémentaires
Pas de RVB en extrême
(Valeur à 255 ou 0)
https://kuler.adobe.com/#
LES
COULEURS
Design
Attention au Serif
Jamais de 4 polices
Privilégier la simplicité
ToUjours le Même CHOIX
poUR la casSE
LES
POLICES
Design
Design
Recouper avec les valeurs de
l’application
Décliner le style sur différents écrans
APPLI
FINALE
Design
Design
Design
Design
Content before chrome0
1
Hub & Spoke02
Charms & App bar03
Responsive Design04
Grid Design05
White Space06
Typographie07
Branding08
Flat Design09
Utilisateur10
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
Formez-vous en ligne
Retrouvez nos évènements
Faites-vous accompagner
gratuitement
Essayer gratuitement nos
solutions IT
Retrouver nos experts
Microsoft
Pros de l’ITDéveloppeurs
www.microsoftvirtualacademy.comhttp://aka.ms/generation-app
http://aka.ms/evenements-
developpeurshttp://aka.ms/itcamps-france
Les accélérateurs
Windows Azure, Windows Phone,
Windows 8
http://aka.ms/telechargements
La Dev’Team sur MSDN
http://aka.ms/devteam
L’IT Team sur TechNet
http://aka.ms/itteam