Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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 »

Stéphanie Walter

June 11, 2015
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

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
  2. Et ça c’est « juste » Android en 2014. Je

    vous laisse imaginer la suite  Fragmentation des tailles d’écran
  3. Le Challenge en 1h30 Trouver des modes de conception plus

    flexibles qui correspondent aux besoins des médias modernes
  4. Partir sur des bases solides et identifier les potentiels points

    bloquants pour l’intégration Inventaire des contenus du site
  5. 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
  6. Proposer plus de contenu directement sur grand écran, à la

    demande sur mobile Priorisation par taille de média
  7. On part des capacités du média le plus bas pour

    construire au fur et à mesure Priorisation par taille de média
  8. Un accordéon sur petits médias, des onglets sur les plus

    grands Priorisation par taille de média
  9. Technique 2 : priorisation en tableau • Plus « linéaire

    », moins flexible, mais un peu plus rapide et permet la comparaison
  10. Proposer en priorité des points de rupture primaires (mise en

    page générale) Graphique de points de rupture primaires
  11. Ajouter au fur et à mesure des points de rupture

    secondaires Graphique de points de rupture secondaires
  12. Le gros du travail itératif commence ici pour le designer

    et l’intégrateur Et ce n’est que le début …
  13. Partagés sous licence Attribution - Pas d’Utilisation Commerciale - Pas

    de Modification 3.0 France www.inpixelitrust.fr @WalterStephanie