Page 1 sur 1

De la maquette au code : Quelle est votre méthode/outils de travail ?

Publié : mar. 3 sept. 2019 23:44
par spip93
Bonjour à tous et à toutes,

Dans quelques semaines, je vais revenir à mon boulot initial : le webdesign.
Ça fait presque 10 ans que je n'en ai pas fait. Et encore, à l'époque, je l'ai fait en autodidacte et je ne faisais que les maquettes (sous Photoshop), je ne m'occupais pas de l'intégration; je laissais ça à mes collègues (beaucoup plus calés que moi sur le sujet).
Depuis, beaucoup de choses ont changé. On parle de "responsive design", de site "mobile first", on utilise des framework CSS, des préprocesseurs ...

Bref...
À la veille de me remettre dans le bain, je voulais savoir quelle était votre méthode de travail ? Par quelles étapes vous passez du papier => maquette => code HTML/CSS ? Quelle(s) page(s) vous designez ? Est-ce que vous passez par des grilles ? Est-ce que vous utilisez un préprocesseurs CSS ? Si oui lequel ? Pourquoi ? Est-ce que vous utilisez un framework CSS ? Si oui lequel ? (Là encore) Pourquoi ?

Autre question par rapport aux outils : Quel(s) logiciel(s)/site(s) utilisez-vous pour créer la maquette ? Perso, j'utilisais Photoshop, mais tout récemment, à travers les formations de Grafikart, j'ai découvert Figma qui a l'air de faire (en partie) le job.
Quel(s) logiciel(s)/site(s) utilisez-vous pour coder ? Perso, j'utilisais PHPDesigner 8 et au boulot DreamWeaver et Sublime Text, mais, là encore grâce aux formation de Grafikart, j'ai découvert VisualStudio Code.

Avant dernière question : est-ce que vous travaillez/créez une maquette différemment si le site tourne grâce à un CMS comme WordPress, Joomla ou Drupal ?

Dernière question : est-ce que vous vous souciez des questions d'accessibilité (pour les personnes mal/non voyantes par exemple) ? Si oui, à quel moment ? Dès le début du projet ? Au milieu ? Au moment des finitions ?

Excusez-moi pour toutes ces questions qui peuvent paraitre stupides et/ou avec des réponses évidentes, mais j'aimerai passer le moins possible pour un crétin de dinosaure aux yeux de mes (futurs) collègues et patrons :D

Je vous remercie par avance pour vos réponses.

Bonne journée ;)

Re: De la maquette au code : Quelle est votre méthode/outils de travail ?

Publié : lun. 9 sept. 2019 12:19
par Manami
Bonjour,

N'étant pas experte en maquette, je vais essayer de répondre à quelques questions mais ça sera à prendre avec des pincettes !


Depuis, beaucoup de choses ont changé. On parle de "responsive design", de site "mobile first",
Les deux sont liés : le responsive design, c'est un design qui s'adapte parfaitement au support sur lequel il est vu, ainsi il n'y a pas de problème d'affichage sur téléphone par exemple, et tout est optimisé pour que la navigation soit fluide etc. Dans cette optique, les sites mobile first sont ceux qui ont été d'abord pensé pour les plateformes mobiles avant les pc, afin d'être sûr que tous les éléments puissent être adaptés sans problème et sans difficulté.


Par quelles étapes vous passez du papier => maquette => code HTML/CSS ?
Souvent je gribouille vaguement sur du papier un wireframe (maquette fil de fer, avec juste les blocs de contenu) et ensuite je passe au mockup sur logiciel (maquette un peu plus poussée, avec les interactions, que je fais généralement sans trop de couleurs etc). A ce moment-là, j'essaie aussi de prévoir un peu les technologies qui seront utilisées (HTML, CSS, JavaScript, PHP etc), bien que ça ne soit pas mon domaine. Quand toutes ces étapes sont validées et revalidées pour bien déterminer tous les éléments, je passe à une maquette sur Photoshop (voir carrément à l'intégration, suivant la précision du mockup et l'organisation du projet). Personnellement, je travaille en même temps sur la version mobile et sur la version tablette et pc, afin d'être sûre de ne jamais oublier un élément. Ensuite je passe à l'intégration. Après, je décris ma façon de procéder assez généraliste : il faut bien sûr prendre en compte le type de projet, le support utilisé, l'organisation de la team etc.


Quelle(s) page(s) vous designez ?
Une fois que l'architecture du site est bien définie, je fais un petit parcours utilisateur (storybord) pour déterminer les pages les plus importantes. Là bien sûr, ça va dépendre du type de projet. La page d'accueil est bien sûr un passage obligatoire. Dans le cas d'un site e-commerce, il est essentiel selon moi de designer au moins une page catégorie, une page produit et le tunnel de commande. Ensuite ça varie selon le type de site. Pour exemple, un projet d'école consistait à créer le site d'une compagnie aérienne. Face au grand nombre de questions qu'un utilisateur peut se poser (poids des bagages, objets interdits, heure d'arrivé etc), on a aussi décidé de designer la FAQ, ce qui n'est pas toujours utile si le nombre potentiel de question est faible.


Quel(s) logiciel(s)/site(s) utilisez-vous pour créer la maquette ?
Pour faire des mockup, j'aime beaucoup le logiciel Axure RP, malheureusement payant, mais qui permet de mettre en place un rendu interactif, plus ou moins détaillé selon les préférences (avec des hover, des liens, de la couleur, des images etc), avec la possibilité d'exporter en HTML pour faire des démo, la collaboration pour la version team, etc. Après y a pas mal d'autres trucs qui existent en ligne ou en logiciel etc. J'utilise aussi parfois Framebox ou Mockflow pour des mockup rapide et pas trop détaillés. Pour une maquette ressemblant à un prototype, je passe sur Photoshop.


Quel(s) logiciel(s)/site(s) utilisez-vous pour coder ?
J'ai été formé sur Dreamviewer et j'ai jamais trop accroché. Je comprends ce qu'on peut lui trouver mais je préfère coder en dur, avec NotePad ++, qui ressemble beaucoup à Sublim Text


est-ce que vous travaillez/créez une maquette différemment si le site tourne grâce à un CMS comme WordPress, Joomla ou Drupal ?
Oui et non. Ca dépend si la finalité c'est que le client puisse mettre à jour tout seul le site (ce qui est souvent le cas si un CMS est utilisé) ou si le site a vocation à ne plus changer une fois fini. Faut prendre en compte que les CMS vont beaucoup fonctionner avec des plugings (pour que l'utilisateur / le client puisse s'en servir facilement) et que donc tu peux facilement être limité sur certaines choses, bien qu'il en existe quand même énormément qui font tout et n'importe quoi. Après généralement tu peux ajouter du code au CMS pour aller plus loin, mais si le client doit pouvoir être autonome sur le site et qu'il connait rien en code, ça peut être plus ou moins problématique. Même si de nos jours, la majorité des sites sont fait avec des CMS de toute façon, pour un gain de temps.


est-ce que vous vous souciez des questions d'accessibilité (pour les personnes mal/non voyantes par exemple) ? Si oui, à quel moment ? Dès le début du projet ? Au milieu ? Au moment des finitions ?
Bien sûr ! C'est important pour toucher un maximum de personnes, mais en plus ça aide aussi pour le SEO. Je te conseille cet article assez complet sur le sujet lafabriquedunetfr/creation-site-vitrine/articles/guide-accessibilite-site-web/ (mets un point avant le fr, je ne suis pas autorisé à poser de liens) ainsi que les liens qui y sont. Pour "quand?", je dirais que ça commence à se prendre en compte pour une maquette qui prend forme avec des couleurs, des images précises, des picto etc. Et bien sûr une partie va être faite au moment de l'intégration, où il faudra bien compléter les balises title, métadesc, alt etc. Attention à bien penser à traduire toutes ces petites choses-là en cas de site multilingue !



Voilà pour mon retour personnelle (qui n'est peut-être pas la meilleure solution), mais s'il y a bien une chose a retenir : la méthode de travail dépend de l'organisation de l'équipe (je travaille seule, directement avec les patrons / clients, ce qui est très différent de travailler en équipe dans une agence par exemple) ainsi que des détails du projet.

En espérant d'avoir au moins un peu éclairé !

Re: De la maquette au code : Quelle est votre méthode/outils de travail ?

Publié : mar. 10 sept. 2019 22:37
par spip93
MERCI BEAUCOUP Manami pour cette réponse qui complète très bien les réponses que j'ai pu avoir sur d'autres forums.
Ça m'aide beaucoup, notamment le processus de création via les Wireframes.
Encore merci et bonne continuation ;)