Close
J'ai déjà un compte
Je n’ai pas de compte
J'en crée un :
Inscription
ou
Je me connecte avec :
Téléchargez des Mock-ups originaux et de qualité
Forum des créatifs professionnels freelance & salariés

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

Bienvenue sur le forum à destination des webdesigners et designers multimédia UX/UI ! Secteur en pleine expansion et en constant changement depuis le début du 21ème, il suscite ses dernières années un élan d'intérêt de la jeune génération. A ce titre, les écoles et centres de formation proposant des diplômes de webdesigner et designer multimédia UX/UI se multiplient. Vous en trouverez aisément dans l'ensemble des grandes villes sur le territoire. Selon les dernières estimations disponibles, la croissance de ce marché professionnel ne devrait pas subir de une baisse dans la décennie à venir.

Vous êtes un salarié ou freelance webdesigner ou designer multimédia UX/UI ? Vous vous retrouvez actuellement en pleine incertitude sur un sujet, une tâche ou obligation en rapport avec votre métier ? Au contraire, vous êtes un novice en pleine recherche de votre voie d'étude ou en reconversion professionnelle et visez ce secteur ? Dans chacun des cas présentés ci-dessus, ce forum est fait pour vous ! Plusieurs centaines de salariés et freelances webdesigners ou designers multimédia UX/UI actifs vous attendent pour répondre à l'ensemble de vos questions. Une fonction recherche est intégrée au forum afin de vous aider à découvrir rapidement si votre question a déjà été posée. Ce n'est pas le cas ? N'attendez pas un instant, rédigez-là et attendez que pleuvent les réponses !

Quelles sont les recours pour bénéficier d'une formation UX/UI dans le cadre d'une reconversion professionnelle ? Quelles aides sont disponibles pour le financement d'une formation webdesigner et designer multimédia ? Comment bien choisir ses tarifs lorsque l'on est freelance selon son ancienneté et niveau de formation ? Quelle est la journée type d'un webdesigner ? Voici quelques questions que vous pouvez visiter dés à présent sur le forum. En attendant de pouvoir lire les vôtres, toute l'équipe ainsi que la communauté de ce forum vous souhaitent la bienvenue !

Vous avez un projet de design de site web? Vous cherchez un webdesigner freelance ? Déposez gratuitement une offre d'emploi ou demande de devis dans notre rubrique "Jobs".
Avatar de l’utilisateur
spip93
Rang 2
Rang 2
Messages : 13
Inscription : lun. 14 mai 2012 13:52

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

Message par spip93 » mar. 3 sept. 2019 23:44

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 ;)

Manami
Rang 1
Rang 1
Messages : 6
Inscription : lun. 1 avr. 2019 17:20

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

Message par Manami » lun. 9 sept. 2019 12:19

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é !

Avatar de l’utilisateur
spip93
Rang 2
Rang 2
Messages : 13
Inscription : lun. 14 mai 2012 13:52

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

Message par spip93 » mar. 10 sept. 2019 22:37

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 ;)

Répondre
250 cartes de visite gaufrées gratuites
OFFRE DE NOTRE PARTENAIRE EXAPRINT
Gratuit 250 cartes de visite gaufrées pelliculage mat, recto seul Exa-Bigfoot-Gauffrage_250_GRATUIT
Je crée mon compte
Combien vendre la création d’un flyer
Outils et Services freelances
KobOne-calculflyer
Utilisez notre calculette pour estimer au plus juste combien vendre votre création de flyer
Faire une simulation
Close
Connexion