1. Gurilla Responsive Design Latelier qui vous fera aimer le
mobile (et le reste) Stphanie Walter - Flupa UX-Days 2015 Image
Jeremy Keith
2. www.inpixelitrust.fr @WalterStephanie Designer web et
mobile, spcialise en interface pense que le CSS est un outil de
design
3. En attente dune exprience similaire quelque soit lappareil
Des utilisateurs multi-cran Image Clemens Lcker
4. Et a cest juste Android en 2014. Je vous laisse imaginer la
suite Fragmentation des tailles dcran
5. Et puis le reste des zappareils des zinternets Illustration
par Rob Gill
6. Des outils de conception figs
7. Un processus pas adapt lintgration aux mdias
8. Les vrais points de rupture dans le mdia
9. Le Challenge en 1h30 Trouver des modes de conception plus
flexibles qui correspondent aux besoins des mdias modernes
10. Disclaimer(s)
11. 1. Inventaire de contenus
12. Partir sur des bases solides et identifier les potentiels
points bloquants pour lintgration Inventaire des contenus du
site
13. La thmatique Nous allons nous intresser une page
produit
14. 2. Priorisation des contenus
15. Priorisation de contenus Ces contenus seront-ils tous
prsents sur toutes les tailles dcran ? Ces contenus ont-ils la mme
priorit quelque soit la taille du mdia ? Image Nick Royer
16. Couleur de llment ( de fond/ de texte) Hirarchisation
visuelle des contenus
17. Taille de llment sur la page Hirarchisation visuelle des
contenus
18. Emplacement de llment sur la page Hirarchisation visuelle
des contenus
19. Gestion des blancs autour de llment Hirarchisation visuelle
des contenus
20. Choix typographiques (graisse, taille, couleur)
Hirarchisation visuelle des contenus
21. Proposer plus de contenu directement sur grand cran, la
demande sur mobile Priorisation par taille de mdia
22. On part des capacits du mdia le plus bas pour construire au
fur et mesure Priorisation par taille de mdia
23. Un accordon sur petits mdias, des onglets sur les plus
grands Priorisation par taille de mdia
24. Un post-it = un contenu, prioriser sur la page. Technique 1
: priorisation au post-it
25. Technique 2 : priorisation en tableau Plus linaire , moins
flexible, mais un peu plus rapide et permet la comparaison
26. 3. Cration dun graphique de points de rupture Poupe Russe
Via Shutterstock
27. Proposer des intervalles dcran provisoires et points de
rupture arbitraires Le graphique de points de rupture
28. Proposer en priorit des points de rupture primaires (mise
en page gnrale) Graphique de points de rupture primaires
29. Ajouter au fur et mesure des points de rupture secondaires
Graphique de points de rupture secondaires
30. Le gros du travail itratif commence ici pour le designer et
lintgrateur Et ce nest que le dbut
31. Partags sous licence Attribution - Pas dUtilisation
Commerciale - Pas de Modification 3.0 France www.inpixelitrust.fr
@WalterStephanie