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

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

Je vous remercie par avance pour vos réponses.

Bonne journée

Ola juste quelques réponses vite fait avec ma petite expérience (c'est vraiment très perso) :

Perso je ne passe plus trop par du maquettage papier. Ça m'arrive parfois en réunion sur un tableau blanc ou sur le coin d'une feuille mais je préfère poser mes idées directement dans mon logiciel de maquettage c'est tout aussi rapide.
Par contre pour avoir tester le prototypage en html/CSS c'est beaucoup trop chronophage je trouve. Même si on le fait "de façon a ce que le code soit réutilisable" c'est jamais vraiment le cas.
Maquettage -> validation par les clients ou en interne si projet interne -> intégration en collaboration avec les dev.

Pas de grille pour moi.

Préprocesseur CSS -> SASS (scss) partout, tout le temps. Apres avoir comparer avec Less et Stylus c'était celui qui nous a parru el plus pratique et complet.

Pas de framework CSS. Tout à la main.

Maquettage sous Adobe XD (gratuit). J'était sur Photoshop / Illustrator avant mais depuis la beta de XD j'en suis juste raide dingue. Je suis sur Windows donc Sketch c'est mort (il parrait que XD en est un copié-collé), Axure une machine a gaz a l'époque, et les autres outils jamais assez complet. Jamais testé Figma. Je te conseille vraiment de tester un peu XD il est ultra simple et commence a etre bien complet. + Possibilité de faire du protypage dynamique depui les maquette c'est super bien foutu. Partage en ligne etc...

Pour coder Visual Studio Code. Au top. Rien d'autre.

Pas de site sous CMS. Mais sinon j'aurais tendance a te dire non, ces CMS sont assez souple pour répondre a n'importe quel design.

Accessibilité poussée : pas trop chez nous. Nous n'avons pas d'appli grand public. Nous n'y accordons pas assez d"importance (priorité basse) mais nous faisons quand meme un minimum vital au niveau des contrastes, tailles de polices etc etc.. nous sommes attentifs aux retours utilisateurs mais pour le moment aucun dans ce sens.

C'est cool d'avoir cette démarche en tout cas.

Je te souhaites une bonne reprise et tout le meilleur pour la suite !

Bonjour,

je saute à la partie intégration
J'utilise (node et npm et Gulp et Sass et ) http://bretzel.alsacreations.com parce que les projets sont de la bonne taille pour ça. Ça m'arrive d'intégrer en CSS mais là ce qui manque c'est l'indispensable Autoprefixer (configuré avec Browserslist sinon c'est un peu dommage…). Doit y avoir moyen dans l'éditeur de texte.
edit1: Et git pour versionner, même si je suis seul sur un projet.
Ça fait beaucoup d'outils à prendre en main et ça s'est fait sur plusieurs mois / années… Mais 1/ jamais je ne reviendrai en arrière sans versionner même si j'ai galéré avec le concept de Git, les conflits àlc, etc 2/ c'est pas pour rien qu'on est nombreux à utiliser les autres outils. Loin d'être idéal : on télécharge nimp' depuis npm et tout le monde s'en fiche mais bah pas grave, c'est tellement pratique.
Bref jette un coup d'œil et attend si tu veux adopter tout ça d'un coup

Préprocesseurs > J'ai toujours eu une préférence pour LESS, plus facile à prendre en main je trouve mais bon "tout le monde" fait du Sass et on peut à 90% aller plus loin (les 10% que seul LESS sait faire, genre les types d'@import, arriveront un jour dans Sass).
PostCSS est intéressant si tu veux coller à la syntaxe CSS, bien plus rapide mais faut tout configurer à la main.

SVG est l'avenir depuis quelques années maintenant

edit2: VS Code est un bon choix si tu te sens d'utiliser des outils MS Sinon Atom.

Pour les quiches en intégration, utilisez Bootstrap pinaise ! (vraiment). C'est bien plus robuste que ce vous arriverez à faire, accessible aussi (la présence de P. H. Lauke dans le projet y est pour quelque chose). Y a un peu de JS et de CSS à charger mais on est loin d'un "vrai" site Angular/React /troll

Accessibilité > DÈS LE DÉBUT. Aucun projet n'a jamais changé ses contrastes après coup.
Supers ressources > https://disic.github.io/guide-integrateur/ et d'autres pour Concepteur, chef de projet dissailledor, développeur front
Tant que j'y suis, si tu cherches des scripts pour tel ou tel composant, commence par regarder https://van11y.net (par Nico3333fr, en JS et/ou jQuery selon les cas) et seulement après sur Google / GitHub
Modifié par Felipe (04 Sep 2019 - 14:07)