Design de chatroom personnalisé

Principe & Fonctionnement

Quand je dois afficher une chatroom sur un overlay, j’évite les services tout prêts car je trouve les visuels de base pas très beau et cela manque de personnalisation.

Ainsi, au lieu d’utiliser le widget “Chatroom” de base de StreamElements, j’ai pris l’habitude de créer le mien de zéro, ce qui me donne l’occasion de vraiment travailler l’aspect graphique pour l’intégrer dans une DA.

J’ai d’ailleurs appris cette technique en suivant ce super tuto de **Grafikart.fr.**

Quelques exemples…

Chatroom dans le style de Persona 5

Pour un prototype d’overlay dans le style de Persona 5, j’ai essayé de coder une chatroom similaire.

La direction artistique du jeu est très marqué et j’ai essayé de retranscrire ici les aspects “bulle de dialogue” et le contourage blanc et rouge.

Poster un message sur la chatroom fait apparaitre le même sur l’overlay, avec le design de Persona 5
Affichage des messages dans le style de Persona 5
Affichage des messages dans le style de Persona 5

Chatroom type boîte de dialogue

Un essai rapide pour tester le visuel global de la chatroom, que j’ai jamais vraiment utilisé par la suite. Il est largement inspiré d’un Codepen que je ne retrouve pas à l’heure actuelle.

Chaque message apparait dans une petite boîte de dialogue flottante

Outils & technologies