½ {$title}
{$author} of {$slidecount}

Web developer VS Web Designer

Web Designer
VS
web Developer

À propos de… cette présentation

Je vous propose ma vision d’une équipe web, des compétences qui la compose. En présentant de manière un peu détaillé le rôle du Web designer.

Cette présentation fera l’impasse sur les spécialités suivantes :

  • Consultant référencement
  • Animateur Flash
  • Développeur Flash
  • Motion designer
  • Designer sonore
  • Administrateur système (hébergement)
  • Comptables
  • Réceptionnistes
  • Commerciaux
  • …

Différentes étapes d'un projet Web

shéma projet web

Gestion de projet / Conduite de projet 01

scrum-board

Gestion de projet / Conduite de projet 02

Le client a un problème / un besoin

  • Faire connaissance avec le Client / le Produit
    • -> Audit client
      • Son activité
      • Ses clients (sa cible)
      • Ses concurrents
      • Ses spécificités (démarquation de la concurrence)
      • Ses concurrents
      • Sa communication actuelle
      • La communication de ses concurrents
  • analyser les besoins du client / du produit
    • Besoin en communication
    • Besoins en fonctionnalités
  • Sélectionne des prestataires ou freelance (monte l’équipe)
  • Management de l’équipe
  • Respect du budget
  • Calendrier
  • Suivi et attribution des taches
  • Relation avec le client (le ROI du projet)

Compétences

  • Gestion d’équipe, certification ScrumMaster, méthode Agile

Métiers

  • Chef de projet interactif
  • Chargé de projet

Structure du projet 01

wireframe

Structure du projet 02

Créer des interfaces utiles, intuitives et utilisables

  • Analyses concurrentielles
  • Défini la structure, élabore l’arborscence / Architecture de l’information
  • la taxonomie (tags, classification) / Architecture de l’information, SEO
  • le wireframe (story-board) / Architecture de l’information, ergonomie
  • systèmes de navigations / Ergonomie
  • tests utilisateurs / Ergonomie
  • normes d’accessibilité / Accessibilité, SEO

Il fournit

  • spécifications fonctionnels
  • Conventions de l’interface utilisateur.
  • Charte ergonomique.

Compétences

  • Ergonomie, architecture de l’information, SEO, sémantique html, accessibilité.

Métiers

  • Architecte de l’information
  • Consultant ergonome

Contenus 01

Bien rédiger pour le web

Contenus 02

Objectifs

  • Conseil client
    • ligne éditorial (adapté à la cible)
    • découpage sémantique d’un texte
    • Catégorisation des contenus
  • Écriture Web
    • Améliorer le référencement naturel (SEO)
    • Favoriser la lisibilité
    • Mise en emphase des mots clefs d’un texte
  • Taxonomie
  • Sémantique HTML

Métiers

  • Rédacteur web
  • Chef de projet éditorial web

Design 01

“Content precedes design. Design in the absence of content is not design, it’s decoration.”

Jeffrey Zeldman

En aucun cas être web designer ne se réduit à la maîtrise technique d’une suite logicielle.

Design 02

Un site internet est un support de communication pour le client.

Objectifs

  • Analyser l’univers graphique de la cible
  • Analyser les support de communication existant du client
  • Analyser les support des communications existant de la concurrence
  • Produire un design interactif à l’image du client, se démarquant de la concurrence et séduisant la cible

Métiers

  • Directeur de création interactif
  • Directeur artistique interactif
  • Web designer

Compétences

  • création d’images (logos, pictos, illustration, photographie, photomontage, etc.)
  • création typographique (choix typographies, dessin de caractères)
  • colorimétrie
  • faire cohabiter textes et l’images (règles de compositions)
  • maîtriser les contraintes d’une interface web (contraintes du code, possibilité des moteurs de rendu)

Il fournit

  • Maquette par page gabarit
  • Charte graphique

Création d'images 01

Création d'images 02

  • règles compositions (lignes force)
  • gestion des plans d’une images
  • colorimétrie
  • Créer des images qui apportent du sens (figures de styles : métaphore, métonymie, elipse,…)

Création d'images / exemple 01

Création d'images / exemple 02

Typographie 01

Typographie 02

  • Connaitre les différentes familles de typo et leurs caractéristiques
    • polices de titrages
    • polices de labeur
    • chasse
    • l’oeil de la lettre, etc.
  • maitriser les règles de macrotypographie
    • marges
    • colonnes
    • goutières
    • interlignage, etc.
  • maitriser les règles de microtypographie
    • accentuation des capitales
    • abréviations
    • unités
    • règles de ponctuations
    • espaces insécables  , etc.

Composition 01

Typographie exemple 01

Composition 02

Marier le texte et l’image

  • Fondamentaux (équilibre, déséquilibre, compensation des masses, Champ, hors champs)
  • proportions (harmonie, nombre d’or, règle du 1/3)
  • colorimétrie
  • hiérarchie de l’information
  • grilles de mise en page
  • style graphique cohérent, qui support le contenu.

Composition exemple 01

Composition exemple 02

Front-office 01

Objectifs

  • ́transforme maquette en page web.
  • Garant du comportement d’un produit sur une plateforme (CrossBrowser) (mobile, Android, iOS, Mac windows, linux, etc.)
  • Sémantique html
  • Optimisation côté client (légerté html – css – js, minimiser requêtes http, etc.)
  • Méthodologie de travail avec designer

Compétences

  • html
  • css screen, css print,
  • Javascript

Mais bientôt

  • Canvas
  • Aria, microformats, (RDFa),
  • svg

Métiers

  • Vilain intégrateur devient “développeur front-office”

Back-office 01

Objectifs

  • Spécifications/analyses fonctionnelles
  • Langages côté serveur
    • php, asp, ruby, Java, etc.
  • Créer une interface client pour ajouter, modifier, supprimer des éléments de la BDD (formulaire, formulaire, formulaire)
  • Méthodologie de travail avec intégrateur
  • interface entre BDD et Front
  • Livrables de développement
  • Question de sécurité

Métiers

  • Développeur web
  • Développeur d’applications