CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre à Prototyper - Sites Internet et application

Création de Pages Web Interactives

Retour à la formation
Chapitre 4 Leçon 15
Précédent
Suivant

Cet exercice couvre diverses fonctions de prototypage pour créer des pages interactives avec des onglets et un module de chat.

Détails de la leçon

Description de la leçon

Dans cette leçon, vous apprendrez à créer une interface web intégrant un système d'onglets et un module de chat dynamique. Nous commencerons par la mise en place du header avec une largeur de 960 pixels, en y intégrant un logo et un système de rubriques. Ensuite, nous configurerons les éléments de contenu de la page, incluant des carrousels et des lames, suivi d'un footer. Nous verrons comment centraliser le prototype et gérer les interactions pour naviguer entre les onglets en utilisant un master. Enfin, la leçon montrera comment créer et positionner un module de chat dynamique avec des états différents, le tout affixé en bas du navigateur avec l'option pin to browser. Cette leçon couvre également des concepts comme le rollover, les quick links, et la gestion des états de panneaux dynamiques.

Objectifs de cette leçon

Comprendre comment créer des interfaces web interactives, utiliser des panneaux dynamiques et gérer les interactions pour une navigation fluide.

Prérequis pour cette leçon

Connaissances de base en HTML, CSS et concepts de prototypage.

Métiers concernés

Les compétences acquises sont utiles pour les métiers de designer UI/UX, développeur front-end, et chef de projet digital.

Alternatives et ressources

Pour les alternatives aux outils de prototypage, envisagez d'utiliser Sketch, Figma ou Adobe XD.

Questions & Réponses

Pour centrer un prototype, il faut accéder aux paramètres de la page et choisir l'option de centrage au niveau des propriétés de l'affichage.
Un module de chat dynamique peut avoir au moins deux états : fermé et ouvert, permettant de basculer entre ces états via des interactions comme le clic ou le rollover.
L'utilisation d'un master permet de centraliser et de répliquer facilement les composants communs sur plusieurs pages, simplifiant la gestion des mises à jour et des interactions.