Le délicat équilibre entre créativité et structure guide tout projet de design, qu’il s’agisse d’une affiche, d’un meuble ou d’une application web. La manière dont nous concevons, nos habitudes, nos outils et les processus mis en place influencent autant le résultat que le talent créatif lui-même.
Bien que InDesign soit un logiciel de mise en page pour ordinateur, il constitue un excellent point de départ pour les esquisses initiales de wireframes web et d’agencement interactif. InDesign est mon outil préféré pour les esquisses de mise en page car l’édition sur bureau possède une compréhension plus mature de la structure derrière le design. Le cœur d’InDesign est construit autour des grilles et des outils typographiques et, si vous commencez à esquisser avec ces éléments tôt, votre design devient plus robuste.
J’anticipe souvent la manière dont le site sera construit. Dois-je utiliser un framework ? Quel CMS fonctionnera le mieux ? La tentation de prendre un modèle ou un framework et de modifier les polices et les couleurs peut conduire à des designs médiocres et banals.
Récemment, j’ai appris à freiner mes ardeurs et à démarrer le projet par des esquisses et des explorations de design/maquette.
Exploration précoce des mises en page
L’exploration initiale des mises en page est cruciale et peut éviter bien des soucis et reprises ultérieures. À long terme, cela fait gagner du temps et des ressources. InDesign permet d’examiner rapidement plusieurs options de grille et de déterminer l’importance des différents types de contenu.
Il est important de ne pas rester bloqué sur une seule mise en page. Produisez de nombreuses conceptions à ce stade et jouez avec les variations d’ordre, d’échelle et de position jusqu’à obtenir une disposition inspirante qui servira de point de départ.
Design d’une grille pour le contenu
L’étape la plus importante est de décider d’une grille adaptée au contenu plutôt que d’imposer votre contenu à une grille existante. Des approches comme les proportions d’or ou la règle des tiers existent pour concevoir une grille efficace. Les grilles modulaires avec plusieurs colonnes et des grilles de base auxquelles le texte peut se snaps sont particulièrement utiles pour le web. La conception d’une grille est un va-et-vient constant entre contenu, typographie et mathématiques.
Le système de grille est une aide, pas une garantie. Il permet de nombreuses utilisations et chaque designer peut trouver une solution adaptée à son style. Lamodèle demande toutefois de l’entraînement et de la pratique.
Grilles et typographie: la taille de la police body, l’espace entre les lignes et les marges influencent directement la lisibilité et la cohérence visuelle. Le choix des marges et des gouttières influence l’apparence générale et la facilité d’utilisation.
Largeur de colonne et largeur optimale des paragraphes: viser environ 60-80 caractères par paragraphe (ou 7-12 mots) selon le contenu.
Combien de colonnes ? Expérimentez avec plusieurs variations pour obtenir une grille modulable adaptée au contenu.
Transition vers le web et prototypage
La traduction des designs pour le web passe par des prototypes qui correspondent à vos maquettes. Prototyper tôt est essentiel, que vous testiez dans le navigateur vous-même ou avec un développeur.
Des outils comme Specctr s’intègrent à InDesign pour marquer les mesures et les styles de texte, facilitant la transition rapide vers le web. Voici une vue d’ensemble des capacités de Specctr et son rôle dans le prototypage et l’export CSS.
L’export CSS peut se faire automatiquement en nommant les couches, puis en sauvegardant dans le même dossier que le fichier InDesign. Simple et efficace, c’est une étape clé pour préserver la cohérence lors du passage du print au web.
Le principe fondamental demeure: simplicité ne signifie pas absence de structure, mais plutôt une structure cohérente et réutilisable qui crée une expérience interactive simple et utilisable. InDesign aide à établir cette forme et cette structure dès les premières étapes du projet print et interactif.
Prototypage et outils UX
Le prototypage est l’étape clé du développement itératif, où les prototypes horizontaux restituent l’apparence et les composants graphiques, et les prototypes verticaux mettent en œuvre des fonctionnalités réalisables. Le prototype horizontal offre l’interface graphique sans les commandes actives, afin d’évaluer la compréhension et la perception. Le prototype vertical inclut des fonctionnalités simulées pour réaliser des scénarios typiques d’utilisation.
Pour faciliter le prototypage et le partage, des outils comme Figma, Sketch, Adobe XD et Axure offrent différentes approches: collaboration en temps réel, export CSS, et possibilités de révision et de test utilisateur.
Wireframes vs Prototypes | Difference between Wireframe and Prototype
Figma, en particulier, permet de travailler en ligne, d’exporter du code et de partager facilement des prototypes via des liens web. Sketch reste populaire pour le wireframing et le design d’interface, avec l’avantage de générer du CSS rapidement. Adobe XD intègre des flux de prototypage et de révision et bénéficie des échanges avec les autres applications d’Adobe.
Axure, InVision, ProtoPie, Framer, Proto.io et d’autres outils offrent des capacités variées pour des prototypes interactifs et animés destinés aux sites web et aux applications mobiles. After Effects, souvent utilisé avec XD, permet des vidéos de démonstration et des simulations d’usage pour immerser le spectateur.
L’idée est de proposer un prototype testé par les utilisateurs finaux, afin d’orienter l’UX Design et d’améliorer l’expérience. Si nécessaire, les prototypes peuvent être publiés ou partagés avec des testeurs pour évaluer les interactions et les flux.
Pour les animations directement dans InDesign, il est possible d’animer des objets avec le panneau Animation (Fenêtre > Interactif > Animation). Les trajectoires, les durées et les déclencheurs peuvent être configurés, et les aperçus permettent de vérifier visuellement les mouvements avant export.
Bien que l’export PDF Interactif ne montre pas toujours les animations, le format EPUB Fixed Layout peut les prendre en charge, et des plugins Webpublication facilitent la publication sur le Web.