Avant de commencer à coder un projet, une première étape consiste à faire une maquette avec un logiciel de dessin adapté (Sketch, Adobe XD et leur clone) ou l’outil que vous maitrisez le mieux (Photophop, Illustrator, InDesign et leur clone).
Une fois la maquette finalisée, il est indispensable de faire son export en bitmap. Ce qui donne un certain avantage à travailler avec un logiciel comme Sketch ou Photoshop par rapport à InDesign.
Il est aussi conseillé de commencer par la version mobile et de choisir l’écran adapté à cette déclinaison, par exemple une maquette pour mobile entre 320 et 640 px.
Dans la vidéo ci-dessous, j’ai ciblé un modèle précis, le Nexus 5, j’ai donc créé une image bitmap de 412 pixels de large (mais je garde en tête qu’il existe des smartphones de 320 px).
Application
Par étapes :
- premièrement, je réalise une image à la bonne taille, avec le bon nombre de pixels (retina ou pas) ;
- je la glisse dans Chrome (dans la barre d’url) ;
- je passe en mode responsive via l’inspecteur ;
- je rafraichis la page (pour les problèmes de zoom) ;
- enfin, j’ajuste les options.