guérilla responsive design - l’atelier qui vous fera aimer le mobile
Post on 12-Aug-2015
54 Views
Preview:
TRANSCRIPT
- 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
top related