Windows 10Le design responsif

Michel ROUSSEAUMicrosoft

@rousseau_michel

‘Nantes

Copier l’identité Microsoft n’est aucunement une garantie de

succès

Powerpoint pour les wireframes

Blend pour les designers / intégrateurs

Adobe Illustrator pour les assets

Adobe Photoshop pour les layouts (dpi !!)

Nous proposons des templates Illustrator

https://dev.windows.com/en-US/design/assets

On ne designe plus en pixels,On designe en inches.

Ou en millimètres.

Phone 5’’15/9

tablet 8’’16/9

laptop 13’’16/9

TV 40’’16/9

Phone 5’’360x240 px

laptop 13’’1366x768 px

Pour Photoshop

Tablet 8’’1024x640 px

TV 40’’1080p

De nouveaux contrôles sont disponibles

si vous en avez besoin

Le flyout de settings

disparait

Split view

Appbars

Pivot control

Relative panel

A

B

+adaptive triggers

A B

L’ihm devient multiple.Ainsi que les usages.

Les applications modernes s’exécutent sur tous les

devices Windows 10

Option 1 : le responsive design

Option 2 : le design spécifique

Option 3 : le design spécifique et responsive

Les stratégies responsives

1. Le re-positionnement

A

B

A B

2. Le re-dimensionnement

A

B

A

B

3. Le reflow

4. Le masquage / l’apparition

5. La substitution de contrôles

Item 1

Item 2

Item 3

Item 4

tab 1 tab 2 tab 3 tab 4

6. Le réagencement

Windows 10Le design responsif

‘Nantes