Guérilla Responsive Design - L’atelier qui vous fera aimer le mobile

Concevoir et designer des interfaces multi-support en responsive est un véritable challenge. La plupart de nos outils de conception nous forcent à choisir une ou plusieurs tailles fixes au départ, alors que l’on essaie justement de designer en faisant abstraction de la taille de l’appareil où sera affiché notre site. Designer, ergonomes et concepteurs webs, tous dans la même galère, nous tâtonnons et revoyons nos méthodes de conception au quotidien pour nous adapter à ces nouvelles contraintes.
Je n’ai pas la solution magique. Dans cet atelier, je vous proposerai un retour d’expérience sur des techniques de conceptions et astuces testées sur mes propres projets qui m’ont permis d’avancer et d’avoir un processus plus flexible que le sempiternel « design de maquettes en 320 768 et 1024 »

Transcript

1. Guérilla Responsive Design
   L’atelier qui vous fera aimer le mobile
   (et le reste)
   Stéphanie Walter - Flupa UX-Days 2015
   Image Jeremy Keith
   

   View Slide

2. www.inpixelitrust.fr @WalterStephanie
   Designer web et mobile, spécialisée en interface – pense
   que le CSS est un outil de design
   

   View Slide

3. En attente d’une expérience similaire quelque soit l’appareil
   Des utilisateurs multi-écran
   Image Clemens Löcker
   

   View Slide

4. Et ça c’est « juste » Android en 2014. Je vous laisse imaginer la suite 
   Fragmentation des tailles d’écran
   

   View Slide

5. Et puis le reste des zappareils des zinternets
   Illustration par Rob Gill
   

   View Slide

6. Des outils de conception « figés »
   

   View Slide

7. Un processus pas adapté à l’intégration aux médias
   

   View Slide

8. Les « vrais » points de rupture dans le média
   

   View Slide

9. Le Challenge en 1h30
   Trouver des modes de conception plus flexibles qui
   correspondent aux besoins des médias modernes
   

   View Slide

10. Disclaimer(s)
    

    View Slide

11. 1. Inventaire de contenus
    

    View Slide

12. Partir sur des bases solides et identifier les potentiels points bloquants pour
    l’intégration
    Inventaire des contenus du site
    

    View Slide

13. La thématique
    Nous allons nous intéresser à une page produit
    

    View Slide

14. 2. Priorisation des
    contenus
    

    View Slide

15. Priorisation de contenus
    • Ces contenus seront-ils tous présents sur toutes les tailles
    d’écran ?
    • Ces contenus ont-ils la même priorité quelque soit la taille du
    média ?
    Image Nick Royer
    

    View Slide

16. Couleur de l’élément ( de fond/ de texte)
    Hiérarchisation visuelle des contenus
    

    View Slide

17. Taille de l’élément sur la page
    Hiérarchisation visuelle des contenus
    

    View Slide

18. Emplacement de l’élément sur la page
    Hiérarchisation visuelle des contenus
    

    View Slide

19. Gestion des blancs autour de l’élément
    Hiérarchisation visuelle des contenus
    

    View Slide

20. Choix typographiques (graisse, taille, couleur)
    Hiérarchisation visuelle des contenus
    

    View Slide

21. Proposer plus de contenu directement sur grand écran, à la demande sur mobile
    Priorisation par taille de média
    

    View Slide

22. On part des capacités du média le plus bas pour construire au fur et à mesure
    Priorisation par taille de média
    

    View Slide

23. Un accordéon sur petits médias, des onglets sur les plus grands
    Priorisation par taille de média
    

    View Slide

24. Un post-it = un contenu, prioriser sur la page.
    Technique 1 : priorisation au post-it
    

    View Slide

25. Technique 2 :
    priorisation en tableau
    • Plus « linéaire », moins
    flexible, mais un peu plus
    rapide et permet la
    comparaison
    

    View Slide

26. 3. Création d’un graphique de
    points de rupture
    Poupée Russe Via Shutterstock
    

    View Slide

27. Proposer des intervalles d’écran provisoires et points de rupture arbitraires
    Le graphique de points de rupture
    

    View Slide

28. Proposer en priorité des points de rupture primaires (mise en page générale)
    Graphique de points de rupture primaires
    

    View Slide

29. Ajouter au fur et à mesure des points de rupture secondaires
    Graphique de points de rupture secondaires
    

    View Slide

30. Le gros du travail itératif commence ici pour le designer et l’intégrateur
    Et ce n’est que le début …
    

    View Slide

31. Partagés sous licence Attribution - Pas d’Utilisation Commerciale - Pas de
    Modification 3.0 France
    www.inpixelitrust.fr @WalterStephanie
    

    View Slide