Le concepteur d'interface et le développeur frontend sont des spécialistes différents, mais leurs tâches sont étroitement liées. À tel point que les concepteurs intelligents comprennent les bases de la mise en page et que les programmeurs connaissent les principes d'une bonne conception. Cela permet d'éviter les malentendus et d'obtenir le résultat attendu. Les détails, explique Vladimir Sinitsyn, responsable du
design et de l'expérience utilisateur en netologie.
Salut Voici deux raisons principales pour lesquelles les développeurs front-end doivent connaître les bases de la conception.
La première raison. Frontender et designer résolvent un problème commun
Le concepteur fait la mise en page et le développeur front-end la transforme en une interface de site complète. Un produit de haute qualité est obtenu lorsque les deux spécialistes comprennent l'essence du travail de l'autre.
- Le concepteur doit comprendre les bases de la mise en page et du CMS (s'il fait une mise en page pour le système de contrôle). Cela permet de mieux définir les limites techniques et la difficulté pour le front-end de mettre en œuvre l'idée.
- Le développeur doit comprendre correctement la logique et la structure de la mise en page, comprendre quoi et comment cela fonctionne, comment l'animation est affichée, comment l'interaction entre les éléments de la page se produit. Parce que les idées des designers ne sont pas toujours évidentes à première vue.
Les concepteurs pensent souvent inhabituel et trouvent des solutions innovantes pour l'interface Web du site. Il est plus facile pour un développeur frontal de comprendre la logique du concepteur, de comprendre le flux de ses pensées.
Les systèmes de collaboration avec des mises en page ne simplifient pas toujours le travail. Maintenant, les systèmes de création de mises en page sont si développés que le concepteur peut transmettre au front-end toutes les informations nécessaires sans réunions et discussions personnelles - en organisant simplement un travail conjoint dans le programme. D'une part, cela fait gagner du temps à l'équipe. D'autre part, le développeur doit comprendre l'idée du collègue et comprendre comment fonctionne la conception de la mise en page. Sinon, de longues discussions et améliorations ne peuvent être évitées.
Comment établir une interaction entre un concepteur et un développeur: règles de base
Je vais vous donner quelques conseils d'expérience personnelle sur la façon d'établir une coopération et de rendre le travail d'équipe confortable.
Si vous êtes concepteur et préparez une mise en page, essayez de simplifier le travail du développeur front-end:
- Travaillez sur la grille. Oui, l'asymétrie en tant que technique est en train de devenir populaire, mais elle devrait également être inscrite dans la grille.
- Tapez les objets autant que possible dans la mise en page. La frappe facilite et accélère la mise en page.
- Affichez les états des objets dans l'interaction.
- Triez les calques et nommez-les avec des noms conviviaux. Par exemple, la couche d'en-tête est en-tête, la couche de boutons est des boutons. Ainsi, le développeur trouvera rapidement votre mise en page.
- Rassemblez toutes les images, icônes, polices et autres éléments en un seul endroit afin de ne pas perdre de temps à exporter ultérieurement des éléments de la mise en page.
- Créez un kit d'interface utilisateur sur une page séparée et affichez tous les états et éléments.
- Ne soyez pas trop paresseux pour commenter la disposition du prototype avant de la transmettre au fournisseur frontal - de cette façon, un collègue le découvrira plus rapidement.
Si vous êtes un fournisseur frontal et transformez la mise en page en interface de site Web:
- N'hésitez pas à poser une question au designer si quelque chose n'est pas clair.
- Si vous constatez par expérience que vous devez apporter des modifications à la mise en page, discutez-en d'abord avec le concepteur. Tout changement doit être convenu.
- Si le projet est un projet d'équipe, à la première étape du travail, discutez avec vos collègues des outils que vous prévoyez d'utiliser et de la meilleure façon de vous transférer la mise en page pour la mise en page.
- N'ayez pas peur de discuter du design et de faire des commentaires constructifs. Si vous voyez que quelque chose ne peut pas être réalisé, expliquez pourquoi et ce qui peut être remplacé.
Lorsque chaque membre de l'équipe comprend ce que font ses collègues et comment simplifier leurs tâches, le travail se déroule sans problème. Le résultat est une interface de qualité, livrée à temps.
La deuxième raison. Il est plus facile pour un développeur connaissant le design de trouver un emploi
Un développeur ayant une bonne connaissance du design peut devenir un spécialiste universel et fermer deux postes à la fois.
Là où les designers frontaux sont en demande
Les grandes entreprises sont prêtes à payer deux spécialistes distincts - un développeur et un designer. Dans d'autres segments du marché, la situation est différente - les entreprises préfèrent souvent embaucher des spécialistes universels qui seuls peuvent fermer un large éventail de tâches.
Les constructeurs de sites sont désormais populaires et la plupart des systèmes CMS fonctionnent comme des constructeurs. Avec leur aide, un programmeur peut créer une interface simple, mais pour créer une mise en page de haute qualité, vous avez toujours besoin des compétences d'un concepteur. Les concepteurs utilisent massivement les petites entreprises et les clients privés. Il est plus rentable pour eux d'engager un spécialiste universel qui réalisera l'aménagement et le transformera en interface avec ou sans constructeur. Une situation similaire est avec les pigistes.
Ce qu'il faut d'abord apprendre sur la conception si vous êtes un développeur front-end
Je me souviens immédiatement d'une bonne
illustration des 20 principes de conception de base. Je vous conseille de commencer à plonger avec elle.

A l'étape suivante, découvrez en pratique les outils de création d'interface: Figma, Adobe XD ou Sketch. Lisez, regardez les commentaires de chacun et choisissez celui qui est le plus proche de vous. L'essentiel n'est pas limité aux manuels. Regardez-les et pratiquez immédiatement vos compétences dans la pratique, directement dans l'outil.
À l'avenir, je recommande de comprendre les programmes 3D: Cinema 4D et Adobe Dimension; et animations d'interface: ProtoPie et Adobe After Effect.
Où étudier
À l'université. Je ne recommanderai pas les universités, elles donnent trop en plus pour un démarrage rapide et la formation elle-même est étirée. Si c'est votre première éducation, vous pouvez aller à l'université pour obtenir un diplôme. Ceux qui ont déjà une éducation devraient se tourner vers les intensités (elles sont enseignées même dans certaines universités) ou les cours en ligne.
Indépendamment. L'auto-éducation convient à ceux qui savent filtrer et structurer les informations, qui ont de la persévérance et de l'autodiscipline. Maintenant, dans le domaine public, il y a trop d'informations pas toujours vérifiées et utiles, vous pouvez y être confus et vous éloigner encore plus des compétences nécessaires.
Sur les cours en ligne. Une option pour ceux qui souhaitent obtenir des informations structurées, des instructions et des commentaires des enseignants.
Astuces
- Apprenez les bases de la conception afin de mieux comprendre les dispositions et les transformer en interfaces sans trop de discussion et de raffinement.
- Étudiez le design en profondeur pour devenir un spécialiste universel et postulez non seulement dans de grandes entreprises, mais aussi dans des agences numériques, des start-ups et recherchez des clients en freelance.
- Maîtrisez les outils du concepteur non pas par le manuel, mais manuellement - ouvrez le programme et comprenez-le.
- Si vous êtes prêt à filtrer les informations et à trouver des supports de formation utiles sur Internet, apprenez à concevoir vous-même. Si vous souhaitez accélérer le processus et étudier dans un programme structuré et pertinent, choisissez des cours.
Si vous êtes prêt à apprendre les bases de la conception Web, nous vous invitons à un nouveau cours de Netologie
Nous avons lancé le cours «
Web Design de zéro à intermédiaire » et nous invitons les développeurs front-end qui souhaitent maîtriser l'interface «du point de vue du concepteur».
Quatre mois et demi de formation en format vidéo, ateliers et analyse des devoirs. Nous consolidons la théorie avec la pratique, et maîtrisons également les principaux outils d'un web designer.
