Logo HEPL
(W) Design Web

Informations générales sur l'unité d'enseignement : "(W) Design Web"

Cycle 1
Niveau du cadre francophone de certification 6
Code GRA-1-047 1.A.1
Crédits ECTS 14
Volume horaire (h/an) 165
Période Annuel
Implantation(s) TECHNIQUE - Seraing
Unité Orientation
Responsable de la fiche DUPONT, MYRIAM
Pondération 140
Composition de l'unité d'enseignement
Intitulé Nombre d'heures Pondération
Design Web - 1 30 EI
Design Web - 2 30 EI
Design Web - 3 15 EI
Design Web - 4 30 EI
Design Web - 5 30 EI
Design Web - 6 30 EI
Prérequis -
Corequis -
  • Contribution au profil d'enseignement

  • Communiquer et informer
    • Choisir et utiliser les moyens d’informations et de communication adaptés
    • Mener une discussion, argumenter et convaincre de manière constructive
    • Présenter des prototypes de solution et d’application techniques
    Collaborer à la conception, à l’amélioration et au développement de projets techniques
    • Elaborer une méthodologie de travail
    • Planifier des activités
    • Analyser une situation donnée sous ses aspects techniques et scientifiques
    • Rechercher et utiliser les ressources adéquates
    • Proposer des solutions qui tiennent compte des contraintes
    S’engager dans une démarche de développement professionnel
    • Prendre en compte les aspects éthiques et déontologiques
    • S’informer et s’inscrire dans une démarche de formation permanente
    • Développer une pensée critique
    S’inscrire dans une démarche de respect des réglementations
    • Participer à la démarche qualité
    • Respecter les normes, les procédures et les codes de bonne pratique
    • Intégrer les différents aspects du développement durable
    Développer sa créativité
    • Produire une communication graphique originale et innovante dans le respect des droits d’auteurs
    • Observer et Analyser des « œuvres » graphiques existantes
    • Se différencier
    • Identifier et s’adapter aux contraintes (économiques, techniques et communicationnelles) dépasser les contraintes
    Maîtriser les outils informatiques
    • Utiliser efficacement les environnements et systèmes d’exploitations informatiques spécifiques à l’infographie
    • Produire et traiter des images
    Concevoir et réaliser une communication interactive
    • Structurer et analyser la communication innovante dans le respect des droits d’auteurs
    • Définir les étapes, éléments et les outils graphiques et informatiques nécessaires à la réalisation de celle-ci
    • Prendre en compte les contraintes liées à l’utilisation d’un média interactif (ergonomie, accessibilité, caractéristique du public cible, …)
  • Acquis d'apprentissage spécifiques sanctionnés par l'évaluation

  • - Analyser et répondre aux besoins d’un client en matière de conception de sites web

    - Utiliser les méthodes de recherche, d’inspiration et de conception (moodboard, wireframe, priority guides)

    - Développer une attitude de veille, pouvoir utiliser une documentation technique et à monitorer son travail en utilisant des tests utilisateurs et outils d’audit

    - Concevoir le design d’un site Web (UX & UI) en appliquant les méthodes, bonnes pratiques et critères de qualité vus en cours (communication, typographie, navigabilité, ergonomie, accessibilité, responsiveness, atomic design, …)

    - Implémenter ce design de manière responsive en utilisant les langages HTML, CSS et JS dans le respect des bonnes pratiques

    - Appliquer dans son intégration les standards et bonnes pratiques en matière de typographie, ergonomie, accessibilité, référencement, optimisation des perfomances, maintenabilité du code

    - Utiliser les techniques CSS et JS appropriées pour animer, rendre réactifs les éléments de l'interface et enrichir l’expérience d’utilisation du site pour son utilisateur final

    - Rendre le site administrable en utilisant le système de gestion de contenu Wordpress selon les concepts vus en cours

    - Respecter un workflow guidé par les bonnes pratiques, notamment en matière de versionnement de la base de code et de collaboration sur la base de code

    - Déployer le site sur un serveur afin de le mettre en ligne

  • Objectifs

  • Maîtriser le workflow complet que doit habituellement suivre un professionnel du Web amené à répondre à une demande d’un client pour concevoir et réaliser un site web.

    Ce workflow couvre l’analyse de la demande et du cahier des charges, la phase de conception (analyse de la concurrence, recherche, inspiration), le design du site (UX et UI), le design de l’administration, l’implémentation technique full stack, la délivrance au client, la gestion du projet et des évolutions techniques.

  • Contenus

    • Sensibilisation aux méthodes de conception en matière de design UX et UI ;
    • Notions théoriques et exercices pratiques concernant les techniques avancées de CSS ;
    • Notions théoriques et exercices pratiques concernant l’utilisation de Wordpress ;
    • Sensibilisation au workflow de production ;
    • Réalisation d'audits et tests utilisateurs de sites existants ;
    • Conception et réalisation de projets :
      • un CV à la manière de… (HTML/CSS/JS) ;
      • un portfolio administrable en wordpress ;
      • un projet pour un client externe administrable en Wordpress.
  • Méthodes d'enseignement et d'apprentissage

  • Cours ex-cathedra
  • Activités interactives demandant une participation active de l’étudiant
  • Travaux de laboratoires
  • Activités de pratique professionnelle
  • Activités d’intégration professionnelle (séminaires, retours réflexifs, ateliers)
  • Evaluation

  • (W) Design Web
    • Examen Oral
  • Langue(s) de l'unité d'enseignement

  • Français
  • Supports de cours au format papier

  • Aucun support déposé pour cette unité d'enseignement
  • Autres supports de cours

  • Aucun autre support défini