bien passer le store : le respect des guidelines

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

sacha.leroux@ai3.fr

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

axel.nemeth@ai3.fr

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

print

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