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
Phone 5’’360x240 px
laptop 13’’1366x768 px
Pour Photoshop
Tablet 8’’1024x640 px
De nouveaux contrôles sont disponibles
si vous en avez besoin
Le flyout de settings
disparait
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
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