exclu mondiale :)
formation UX design !
53h de vidéo
60 études de cas
150 livrables - 160 wireframes
places limitées

ux conception responsive

icone responsive
écrit en 2014
et révisé en 2016 par
Julien Muckensturm
Architecte de l'information
icone linkedin
icone viadeo

Enjeux de la conception responsive

Responsive et multi-écran

Et un site web desktop.
Et de deux, avec le site web mobile.
Et de trois avec l'appli mobile Iphone sous iOS.
Puis quatre avec l'appli mobile Android.
Et cinq avec l'appli mobile Windows Phone.
Et six avec le site web dédié aux tablettes.
Et sept, huit, neuf avec les applis IPAD, Android, Windows.
Et huit avec la version TV.
etc.

Bon ça fait beaucoup d'objets digitaux. Beaucoup d'interfaces à concevoir. Beaucoup d'expériences utilisateurs différentes. Une certaine fragmentation des parcours utilisateurs...

C'est cher à maintenir. Très couteux à créer. Hérétique à faire évoluer.

Finalement, avec une version centralisée des contenus, une gestion intelligente des CSS selon le terminal, le responsive, ben ça a quand même du bon, parfois, peut-être !

Exemples de conception responsive

conception responsive ERDF exemple de conception responsive
référence ux responsive ERDF espace client
2014 - esquissé par Julien MUCKENSTURM
conception responsive ERDF exemple de conception responsive
référence ux responsive ERDF espace client
2014 - esquissé par Julien MUCKENSTURM
conception responsive processus de commande Cdiscount exemple de conception responsive
référence ux responsive Cdiscount checkout
2013 - esquissé par Julien MUCKENSTURM
conception responsive processus de commande Cdiscount exemple de conception responsive
référence ux responsive Cdiscount checkout
2013 - esquissé par Julien MUCKENSTURM
conception responsive fiche produit Cdiscount exemple de conception responsive
référence ux responsive Cdiscount fiche produit
2013 - esquissé par Julien MUCKENSTURM
conception responsive fiche produit Cdiscount exemple de conception responsive
référence ux responsive Cdiscount fiche produit
2013 - esquissé par Julien MUCKENSTURM

Conception responsive : objectifs

Rationalisation et mutualisation des interfaces

1 site maître, des points de ruptures et une ventilation dynamique des éléments à l'écran, ça complique pas mal le travail de design d'information :).

Objectifs d'une conception responsive :

  • rationalisation du parc d'objets digitaux,
  • mutualisation des services, des fonctionnalités et des contenus,
  • économies d'échelles : investissement plus lourd au départ, mais moins coûteux que de créer puis de maintenir X objets digitaux,
  • uniformisation de l'expérience utilisateur à l'échelle du parc d'objets digitaux,
  • etc.

En bref, l'approche responsive est intéressante pour sa couverture d'une partie des problématiques multi-écrans, mais elle introduit son lot de complexité sur les plans techniques, fonctionnels et graphiques. Et oui, nos confrères architectes du réel n'ont pas encore à composer massivement avec les murs flexibles et amovibles... Quoique...

Méthode pour la conception responsive

Mobile last vs. Mobile first

plutôt mobile last, mais au fond, peu importe...

Notre approche en matière de conception consiste à proposer des interfaces élégantes, performantes et plutôt faciles à appréhender côté utilisateur.

On ne se pose la question de savoir s'il faut systématiquement initier le projet par la version mobile ou la version desktop. D'abord parce que l'économie réelle et l'ère du temps réel ne permettent pas toujours de faire ce choix. Ensuite, parce qu'il n'est pas toujours judicieux de modéliser la plus petite interface pour commencer...

Pourquoi pas "mobile first" ? Certes le livre et l'auteur sont remarquables, mais pourquoi tant de dogmatisme ? En sociologie déjà le débat fait rage depuis plus de 100 ans : holisme (le tout, la vue globale, la déduction) vs. individualisme méthodologique (l'individu, la partie, l'induction), partir du tout, ou de la partie ?

Pour IAFACTORY, nous préférons considérer le mobile en dernier, "mobile last", parce que nous raisonnons davantage dans une logique d'ensemble, du tout vers la partie, de la complexité vers la déconstruction du complexe. Il nous semble plus judicieux de poser les bases du tout, de déployer la voile des possibilités pour appréhender le projet dans son acception la plus large. En bref, on préfère commencer par concevoir l'interface desktop. Un choix qui tient la route et qui fonctionne en mode projet, qui produit même d'excellents résultats. Alors halte au dogmatisme, s'il n'y avait qu'une seule façon de concevoir... nous aurions de belles maisons toutes uniformes.

Au delà de ces débats stériles sur la poule et les oeufs, nous travaillons vos interfaces dans une logique d'ensemble en portant attention à tous les détails, pour ventiler judicieusement toutes les composantes fonctionnelles et éditoriales de façon élégante dans l'interface, quel que soit le point de rupture et le terminal de consultation. C'est un travail complexe qui demande beaucoup de patience, de rigieur et de précision. Et l'alignement absolu, c'est ce qu'on préfère, ce site en témoigne :)...

Conception responsive, et après ?

Travaux complémentaires

responsive ou site spécifique pour le mobile ?

Il n'est pas rare, et nous l'avons observé avec plusieurs de nos clients, qu'un site responsive débouche sur une version spécifique mobile, ou inversement qu'un site mobile se contracte en un site responsive. A ce stade du monde, chaque modèle peut selon les cas, être viable économiquement.

Tout cela doit être étudié sur la base de données chiffrées pour faire les meilleurs arbitrages, et vous pouvez compter sur IAFACTORY pour vous aider dans ces travaux d'analyses...

Vous préférez concevoir vous-même ?

Téléchargez des modèles de conception

si vous n'êtes pas familier des problématiques de conception, ce sera délicat, mais à coeur vaillant, rien d'impossible !

Vous souhaitez internaliser la conception ?

IAFACTORY vous propose de nombreux modèles documentaires ainsi que des bibliothèques de formes à télécharger afin de concevoir par vous-même : ces documents sont disponibles et consultables au sein de notre site dédié aux modèles documentaires.

Suivez notre programme elearning IA - UX

mais oui, suivez "donc" notre programme de formation en ligne ! Vous saurez tout de l'IA - UX :).

Nous proposons également un programme elearning IA - UX (iafactory learn) en architecture de l'information et design d'expérience utilisateur super pragmatique et très complet autour de 50h de vidéos, incluant 150 modèles prêts à l'utilisation et 160 écrans de wireframes clés en main pour travailler sur vos projets !

Ressources conception responsive ?

Pour aller plus loin

Vidéos UX à visionner :

Livrables UX à télécharger :

Wireframes à télécharger :

Articles du bunker blog à méditer :

Etudes de cas UX à lire :

Travaux UX à visualiser :

Supports de cours (débutant) à étudier :

Livres UX à bouquiner :

Flux 2.0 à explorer :

Autres ressources sur le web :

  • Un logiciel pour concevoir rapidement : balsamiq
  • Un autre logiciel pour concevoir rapidement : mockingbird
  • Un logiciel complémentaire dédié au prototypage: axure
  • Un webservice pour transformer une page web en "wireframe" : wirify
  • Signalez nous des ressources sympas en utilisant les commentaires !
Vous souhaitez concevoir vous-même ?

Vous avez raison, on n'est jamais mieux servi que par soi-même...
Gagnez du temps en utilisant nos modèles conçus avec amour et surtout prêt à l'utilisation !

vignette modèles wireframes site business vitrine responsive
format Powerpoint .PPTX compatible MAC / PC

Wireframe site business responsive A TELECHARGER

Vous avez besoin de concevoir un site business - vitrine responsive ?

  • wireframe pour modéliser un site business vitrine responsive
  • 5 modèles responsive de wireframes prêts à être édités
  • énorme gain de temps dans la conception de votre projet
  • 100% personnalisable pour votre projet
  • rendu design, optimisé pour l'impression et la lecture à l'écran
150 euros

téléchargement immédiat et sécurisé via notre shop / satisfait ou remboursé
vignette modèles wireframes site ecommerce responsive
format Powerpoint .PPTX compatible MAC / PC

Wireframe site ecommerce responsive A TELECHARGER

Vous avez besoin de concevoir un site ecommerce responsive ?

  • wireframe pour modéliser tout un site ecommerce responsive
  • plus de 20 modèles responsive de wireframes prêts à être édités
  • énorme gain de temps dans la conception de votre projet
  • 100% personnalisable pour votre projet
  • rendu design, optimisé pour l'impression et la lecture à l'écran
270 euros

téléchargement immédiat et sécurisé via notre shop / satisfait ou remboursé
vignette modèles wireframes processus commande responsive
format Powerpoint .PPTX compatible MAC / PC

Wireframe process responsive A TELECHARGER

Vous avez besoin de concevoir un processus de commande ?

  • wireframe pour modéliser tout un processus de commande responsive
  • 35 modèles responsive de wireframes prêts à être édités
  • énorme gain de temps dans la conception de votre projet
  • 100% personnalisable pour votre projet
  • rendu design, optimisé pour l'impression et la lecture à l'écran
270 euros

téléchargement immédiat et sécurisé via notre shop / satisfait ou remboursé
vignette modèles wireframes site crm espace client responsive
format Powerpoint .PPTX compatible MAC / PC

Wireframe espace client responsive A TELECHARGER

Vous avez besoin de concevoir un espace client responsive ?

  • wireframe pour modéliser un espace client responsive
  • environ 20 modèles responsive de wireframes prêts à être édités
  • énorme gain de temps dans la conception de votre projet
  • 100% personnalisable pour votre projet
  • rendu design, optimisé pour l'impression et la lecture à l'écran
270 euros

téléchargement immédiat et sécurisé via notre shop / satisfait ou remboursé
vignette modèles livrables wireframe
format Powerpoint .PPTX compatible MAC / PC

Modèle de livrable wireframing A TELECHARGER

Des modèles clés en main de grille de wireframing pour concevoir

  • concevez vos projets digitaux efficacement et simplement !
  • 16 modèles clés en main : grille de wireframes, responsive, composants d'interfaces...
  • facile à personnaliser et prêt à l'utilisation
  • rendu sobre et élégant
  • optimisé pour l'impression et la lecture à l'écran
72 euros

téléchargement immédiat et sécurisé via notre shop / satisfait ou remboursé
vignette kit wireframes
format Powerpoint .PPTX compatible MAC / PC

160 modèles de wireframes A TELECHARGER

Kit ultime de wireframes pour concevoir vos dispositifs !

  • 160 modèles de wireframes clés en main homogènes, cohérents et prêts à l'utilisation
  • matériel de wireframing personnalisable et flexible pour tout type de dispositifs digitaux !
  • concevez et adaptez vos wireframes rapidement, efficacement, proprement :)
  • outil facile à prendre en main et rendu design
  • optimisé pour l'impression et la lecture à l'écran
594 euros

téléchargement immédiat et sécurisé via notre shop / satisfait ou remboursé
vignette modèles livrables trame ux
format Powerpoint .PPTX compatible MAC / PC

25 modèles de livrable trame UX A TELECHARGER

Plus de 25 modèles pour concevoir un livrable UX sur-mesure !

  • concevez et personnalisez vos projets rapidement avec cette trame UX !
  • documentez efficacement les fondamentaux de la conception UX !
  • 25 modèles clés en main homogènes, cohérents et prêts à l'utilisation
  • outil facile à prendre en main et rendu design
  • optimisé pour l'impression et la lecture à l'écran
198 euros

téléchargement immédiat et sécurisé via notre shop / satisfait ou remboursé
vignette modèles wireframe iafactory shop
format Powerpoint .PPTX compatible MAC / PC

iafactory shop CENTRE DE TELECHARGEMENT

Des outils puissants prêts à l'utilisation pour vos projets digitaux

  • outils et modèles de livrables pour documenter toutes les étapes de vos projets
  • modèles de wireframes clés en main pour concevoir votre interface
  • ebook pratique pour progresser
  • outil facile à prendre en main et rendu design
  • modèles disponible à la carte ou en kit complet
30 euros

téléchargement immédiat et sécurisé via notre shop / satisfait ou remboursé

Pourquoi IAFACTORY propose des modèles ?

IAFACTORY est d’abord un cabinet de conseil en architecture de l’information. Notre métier consiste, principalement, à modéliser des solutions de conception.
Avec modestie. Avec haute précision.
Pour vous faire gagner du temps, nous avons modélisé, plus de 150 modèles prêts à l’utilisation.

Ces modèles, ce sont les outils que nous utilisons.
Pour la méthode. Et pour la rationalisation.
C’est aussi le framework qui constitue le socle de nos formations.
L’ensemble représente plusieurs années de formalisation.

Les modèles font gagner du temps à tous les acteurs du projet, parce qu’ils sont à la fois souples, pointus et diversifiés.
Nos produits sont exclusifs, faits mains, et garantis satisfaits ou remboursés.
C’est une pratique plutôt rare dans le métier.
Vous ne prenez donc aucun risque si vous achetez...

Partager ces modèles est une bonne idée.
Par vos avis, l’outil peut évoluer.
Par vos achats, vous contribuez à le financer.
Au final, tout le monde est satisfait :).

Découvrez notre programme de formation vidéo en ligne

10 années de pratique condensées dans un format digeste et ludique :)
Une solution innovante à moindre coûts pour progresser et acquérir rapidement les bases et les outils !

vignette conception interaction video à la demande vod Ux design
5H de vidéo format .MP4 compatible MAC / PC

Vidéo wireframes + livrables A TELECHARGER

Tout ce qu'il faut savoir sur la conception et le design d'interaction.

  • 1 vidéo "Scénaristion des interactions" - 92 minutes
  • 1 vidéo "Modélisation du zoning" - 84 minutes
  • 1 vidéo "Conception des écrans, wireframing" - 154 minutes
  • 26 cas d'étude illustrés
  • + 30 modèles inclus pour concevoir des wireframes
294 euros

téléchargement immédiat et sécurisé via notre shop / satisfait ou remboursé
vignette concevoir wireframing avec Powerpoint video à la demande vod Ux design
5H de vidéo format .MP4 compatible MAC / PC

Vidéo wireframing + livrables A TELECHARGER

Tout ce qu'il faut savoir pour réaliser des wireframes avec PowerPoint.

  • 1 vidéo "Concevoir des wireframes avec PowerPoint" - 141 minutes
  • 1 vidéo "Concevoir un storyboard animé avec PowerPoint " - 157 minutes
  • Des conseils techniques pour la réalisation
  • Des démonstrations pour la formalisation
  • 2 exercices à réaliser pour apprendre rapidement
294 euros

téléchargement immédiat et sécurisé via notre shop / satisfait ou remboursé
vignette prototypage avec axure video à la demande vod Ux design
3H de vidéo format .MP4 compatible MAC / PC

Vidéo prototypage avec Axure A TELECHARGER

Tout ce qu'il faut savoir pour réaliser un prototype avec Axure.

  • 1 vidéo "Prototypage, concevoir avec Axure" - 151 minutes
  • Des explications précises
  • Des conseils techniques pour la réalisation
  • Des démonstrations pour la formalisation
  • 1 exercice à réaliser pour apprendre rapidement
120 euros

téléchargement immédiat et sécurisé via notre shop / satisfait ou remboursé
vignette galaxie de sites video à la demande vod Ux design
2H de vidéo format .MP4 compatible MAC / PC

Vidéo galaxie de sites + livrables A TELECHARGER

Tout ce qu'il faut savoir pour travailler sur une galaxie de sites.

  • 1 vidéo "Inventaire et architecture d'écosystème de sites" - 133 minutes
  • 4 cas d'étude illustrés
  • Des explications précises sur les méthodes
  • Des conseils techniques et opérationnels
  • + 20 modèles inclus pour formaliser
120 euros

téléchargement immédiat et sécurisé via notre shop / satisfait ou remboursé
vignette formation video UX
53H de vidéo + 150 livrables + 160 wireframes !

Formation elearning IA-UX design ACCES 1AN

Programme vidéo complet de 53H d'auto-formation en UX design.

  • découvrez iafactory learn : 50 vidéos soit plus de 53h de vidéo en streaming illimité
  • 150 modèles de livrables prêts à l'utilisation et 160 wireframes pour vos projets
  • formation illustrée par 60 exemples de projets UX
  • 7 exercices pratiques, 1 étude de cas UX à réaliser
  • support de formation inclus de 1350 pages
720 euros

accès immédiat via iafactory learn / on croit en nos formations : satisfait ou remboursé

Pourquoi IAFACTORY propose des formations ?

D’abord nous aimons notre métier.
Pour être à la pointe, nous faisons tout pour progresser.
Naturellement, nous avons aussi envie de partager...

Ces formations représentent un important travail de capitlisation.
Mais aussi de formalisation.
Depuis plusieurs années, nous les améliorons.
En vidéo nous les mettons à votre disposition.

2 formules au choix pour progresser.
Formule VOD pour les plus pressés...
Formule ELEARNING pour un programme complet...

Nous réalisons parallèlement des formations professionnelles en design d’expérience utilisateur et architecture de l’information.
D’ailleurs, auprès de la région Alsace, IAFACTORY est déclaré comme organisme de formation.
Nous sommes également partenaire de l’université de Strasbourg et intervenons auprès d’étudiants en voie de professionnalisation.

Les formations sont conçues pour vous faire progresser. Nous fournissons le matériel adéquat pour vous y coller...
Nos formations sont originales, artisanales, humaines, et garantis satisfaits ou remboursés.
C’est une pratique plutôt rare dans le métier.
Vous ne prenez donc aucun risque si vous essayez...

Partager ces formations est, nous en sommes convaincus, une bonne idée.
Par vos avis, les formations peuvent évoluer.
Par vos achats, vous contribuez à la financer.

Vous avez un projet en tête ?

IAFACTORY vous aide à concevoir votre projet,
architecture de l'information, design d'interaction, design d'information...

Conception responsive : références

Conception responsive : la prestation IAFACTORY

Concrètement ce que nous faisons

Prestation de conception d'interface responsive avec IAFACTORY :

  • analyse des dispositifs existants lorsqu'ils existent,
  • études des données analytiques et des statistiques de fréquentation,
  • identification des points de ruptures (breakpoint),
  • détermination des étalons de conception (aspect de l'interface souhaité pour tout ou partie des points de ruptures identifiés),
  • architecture de l'information et principes de navigation flexibles,
  • élaboration de zoning et de grille modulaire,
  • modélisation des écrans structurants du projet pour tout ou partie des points de ruptures,
  • commentaires et spécifications des règles d'affichage,
  • prototype fonctionnel,
  • déclinaison de la conception fonctionnelle en mode responsive,

Autant le dire, la conception d'un dispositif digital de taille critique en mode responsive n'est pas une mince affaire en conception, chaque projet amène son lots de défis, et nous serons ravis de les relever pour vous :).

Vos projets conçus par un artisan.

Responsive, pas peur !
Pas de sous-traitance aux US :).
Pas la peine.

Objectif : une bonne conception !
Si vous souhaitez vous faire accompagner en phase de conception

A partir de là, les internautes lisent aussi

CONCEPTION D'INTERFACE
Conception fonctionnelle de vos interfaces mobiles : web mobile, application mobile, logiciel mobile...
conception mobile
CONCEPTION D'INTERFACE
Conception de vos interfaces dédiées aux tablettes : web, applications et logiciels dédiés aux tablettes...
conception tablette
CONCEPTION D'INTERFACE
Conception fonctionnelle de vos sites web : e-commerce, corporate, transactionnel, portail...<
conception web