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 Smiley lol

Je vous remercie par avance pour vos réponses.

Bonne journée Smiley cligne
Modérateur
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 !
Smiley cligne
Modérateur
Bonjour, aucune question n'est «stupide», et surtout, aucune des tiennes n'a de réponse évidente Smiley smile

Par quelles étapes vous passez du papier => maquette => code HTML/CSS ?
Pour la création de la maquette, je la fais sous Illustrator. Parfois XD, qui est beaucoup plus limité mais intéressant pour montrer les enchaînements, ça dépend du projet, un site vitrine => Illustrator, une app => XD. Figma je ne connaissais pas mais ça ressemble à XD. Photoshop pour les maquettes il faut oublier, juste pour du traitement d'images lorsque c'est nécessaire (Le web est vectoriel, un logiciel vectoriel sera toujours mieux adapté).
Pour le code, Netbeans

Quelle(s) page(s) vous designez ?
Dépend du projet et des budgets, ça va de 3 (Homepage mobile, Homepage desktop, page de contenu lambda) à plusieurs dizaines.

Est-ce que vous utilisez un préprocesseurs CSS
Oui, LESS, dans tous les projets.
Avec Gruntjs qui crée différents builds (dev, prod, etc.), (la dernière mode étant plutôt Gulp)

Est-ce que vous passez par des grilles ?
Dans le design, parfois oui, parfois non. Dans les CSS parfois oui, parfois non. Des grilles à 5 colonnes ou des grilles asymétriques aussi parfois. Une grille dans la conception ne sera pas forcément résolu par un système de grilles CSS non plus. Je n'ai aucune règles absolue, une grille est un outil pratique qui résous certains problèmes et en apporte d'autres.

Est-ce que vous utilisez un framework CSS ? Si oui lequel ?
Quasi-jamais. Je fais principalement du CMS, et overrider tous les templates du framework pour y appliquer les classes d'une feuille de base m'a toujours paru absurde. Parfois sur des projets plus «backend» j'utilise des CSS prêtes-à-l'emploi comme Bootstrap ou Materializecss.

est-ce que vous travaillez/créez une maquette différemment si le site tourne grâce à un CMS comme WordPress, Joomla ou Drupal
Non, mais nous faisons des visuels sur mesure. Y être plus attentif est important si on veut réduire les coûts (et la marge de manœuvre).

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 ?
Oui, à toutes les étapes. Mais sans en faire une maladie, sans que cela ne génère de surcouts, sauf si le client paie (ce qui est rare).
Modifié par kustolovic (04 Sep 2019 - 11:58)
Je vous remercie beaucoup pour vos réponses. Smiley merci
Je les survole au boulot, mais je les lirai plus en détails, chez moi, à tête reposée.
Encore merci. Smiley biggthumpup
Bonne journée Smiley cligne
Administrateur
Bonjour,

je saute à la partie intégration Smiley biggrin
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 Smiley lol

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 Smiley smile

edit2: VS Code est un bon choix si tu te sens d'utiliser des outils MS Smiley smile 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 Smiley smile
Modifié par Felipe (04 Sep 2019 - 14:07)