conseil en ergonomie

Développeur web front end fiche métier

icone fiche métier du web

Le développeur front end assure les développements HTML & CSS de la partie front-office de l'interface utilisateur. Il a un rôle clé dans l'UX puisqu'il est le garant du design fonctionnel à travers sa mise en oeuvre technique. Cette fiche de poste du métier d'intégrateur web est issue des fiches métiers web.

Définition du métier de développeur front end

fiche métier développeur front end
Révisé en Octobre 2020

Mission du développeur front end

Un projet web exige des développements qui sont de deux natures : les développements front et les développements back, auxquels on associe les métiers spécifiques de développeur front end et développeur back end. La distinction porte généralement sur le fait que le développement front (intégration HTML & CSS, plus javascript) concerne les interactions de surface et le développement de la partie visible pour l'utilisateur quand le développement back (PHP, .NET...) s'attache à la programmation des interactions entre l'interface d'administration et la base de donnée. A ces développements back end s'ajoutent tous les échanges de données entre le système d'information (ERP, progiciel de gestion intégré, logiciel CRM) et le site web...

Sur le plan technique, le développeur front cherche à minifier les styles qu'il affecte au sein du balisage HTML dans la lignée de la charte graphique définit par le directeur artistique digital. Les premiers développeurs front end étaient appelés intégrateurs car une partie importante du travail consistait à intégrer les médias au sein des pages HTML (multimédia) avec un temps important consacré au découpage et à l'optimisation des visuels. Aujourd'hui, l'intégrateur est davantage un développeur, il se concentre plus sur le code que sur la partie intégration qui revient au graphiste web en ce qui concerne l'optimisation des éléments graphiques.

On parle de développeur full stack pour caractériser les profils confirmés les plus polyvalents capables de programmer le front et le back et donc de posséder les deux compétences de développement front end et back end. A l'heure du responsive, le développement front end suppose beaucoup plus de travail d'optimisation, notamment des tâches préparatoires portant sur le grid system (grille modulaire web) et la rationalisation des styles.

Fiche métier développeur front end

  • Rôle du développeur front end : intervient après le graphiste pour intégrer les PSD en page html. Le développeur front end est chargé d’intégrer des pages en html, css, et javascript et d’apporter une expertise métier en matière de faisabilité. L’intégrateur récupère les maquettes graphiques réalisées par le directeur artistique, définit une grille et codes les pages à l'aide du balisage HTML & CSS.
  • Intervention dans le projet digital : découpage et intégration des pages HTML
  • Gestion : autogestion.
  • Tâche quotidiennes : montage de pages html, css et javascript, ajax, expertise, technique, webmastering, newsletters.
  • Qualités du développeur front end : autonomie, rigoureux, carré, efficace, rigoureux, efficace, codeur parfois (javascript, Ajax avancé).
  • Perspectives d’évolutions : chef de projet technique Front, manager de pôle intégration.
  • Outils de prédilection : html, css, javascript, photoshop, dreamweaver.
  • Tarif du développeur frond end, facturation jour/homme : entre 500 et 700 € HT
  • Rémunération, salaire du développeur : junior 20 à 25K € annuel - sénior 28 à 32K €
  • Profil et formation du développeur front end : entre 20 et 30 ans, DUT services et réseaux de communication, université de communication, autodidactes. Ecole d'informatique. Ecole de design.

Rôle et valeur ajoutée de l'intégrateur HTML

Le HTML est un code de balisage front-office (directement interprétable par le navigateur). C'est le langage universel du WEB. Quel que soit le langage dynamique choisi, la présence ou non de flash, d’Ajax ou autres, le support est TOUJOURS une page HTML. On parle d’intégrateur HTML mais on peut aussi parler de développer front-office puisse qu’il utilise les langages de programmation front : html/XHTML, CSS, Javascript.

Rôles du développeur front :

  • Découper et Intégrer les créations graphiques dans des fichiers html interprétables par les navigateurs.
  • Optimiser le code HTML et les javascript pour l’accessibilité, le référencement, l’interopérabilité entre les plateformes.
  • méthodologie de travail est basé sur les standards du W3c; organisme qui définit les standards de programmation et les best practices du web.
  • Code XHTML valide et sémantique (référencement et accessibilité).
  • Utilisation de CSS (garanti d’un site stable, flexible lors des mises à jour ou d’événementiel et accessible).
  • Javascript non intrusif (accessibilité).
  • Séparation des états : le Fond la forme et le comportement.

Quand faire appel au développeur intégrateur ?

  • Pré-production HTML : Pendant la phase de création pour une analyse de faisabilité.
  • Production HTML : Suite à la validation par le client des maquettes graphiques.
  • Post-Production HTML : Prévoir deux jours à l’issue de la dynamisation de pages pour les derniers calages.

Comment travailler avec un développeur front end ?

  • Inclure le développeur front end le plus en amont possible du projet, lui poser des questions et lui demander son avis.
  • Fournir à l'intégrateur tous les éléments nécessaires à la compréhension du projet.
  • Un bon brief projet, et un accompagnement lors du projet.
auteur Julien Muckensturm iafactory
linked in julien muckensturm

Technique développeur front end

CONCEPTION D'INTERFACE

définition de l'interface

Définition des principes d'interface, identification des contraintes et priorisation des informations.
définition de l'interface
CONCEPTION D'INTERFACE

conception du zoning

Clarification de la structure du site, des modèles de gabarits et des fonctions attribuées aux zones.
zoning
ENVERGURE FONCTIONNELLE

arborescence fonctionnelle

Visualisation de l'organisation des gabarits et projection de la structure fonctionnelle.
arborescence fonctionnelle
ENVERGURE FONCTIONNELLE

inventaire fonctionnel

Identification et listing des gabarits dans une optique de maitrise et de rationalisation du fonctionnement.
inventaire fonctionnel
ENVERGURE FONCTIONNELLE

conception des processus

Visualisation détaillée des interactions impliquées dans un processus : inscription, commande.
conception des processus
OPTIMISATION DES CONTENUS

flux d'information

Matérialisation des flux sous forme de diagramme et cartographie des interactions front-back.
flux d'informations

Ressources autour de l'intégrateur front end

APPROFONDIR
l'intégration

Livre : Intégration les bonnes pratiques
intégration les bonnes pratiques

Approfondir la fonction de développeur front end

Formation vidéo à visionner :

Livrables à télécharger :

Travaux à visualiser :

Compétences et expertise métier du développeur front end :

Autres fiches métier rattachées :

Autres ressources sur le web :

Plus de métiers web
METIER WEB DU DESIGN

UI designer

Conception d'interface utilisateur, expertise en design fonctionnel, user interface design.
ui designer
METIER WEB DU DESIGN

directeur artistique

Direction de la ligne graphique, orientation esthétique et homogénéisation du design.
directeur artistique
METIER WEB DU DESIGN

graphiste web

Exécution et production graphique, recherche iconographique, montage, webmastering.
graphiste web