Web TV universitaire by Nicolas Lissarrague

SOMMAIRE

INTRODUCTION

notes d’intentions

CONCEPTION D’UN LOGOTYPE

p 10

p 12

charte formelle, typographique et chromatique

REFONTE GRAPHIQUE pages internes du site de l’UVHC

p 16

CRÉATION D’UN GÉNÉRIQUE

p 23

story board tests techniques (cd)

LES PERSPECTIVES DU PROJET entretients avec des professionnels

p 29

Les concepteurs du site de l’UVHC Mairie de Valenciennes

INTRODUCTION notes d’intentions

Depuis plusieurs années, le site de l’Université de Valenciennes et du Hainaut-Cambrésis met à disposition de ses internautes plusieurs reportages. Ils constituent une bibliothèque importante d’informations accessible par tous et à tout moment. Avant la refonte récente du site de l’UVHC, ces reportages n’étaient pas accessibles aussi rapidement et aussi facilement, ce qui nuisait à leurs visibilités. Dorénavant, il semble que l’Université souhaite mettre en avant ce moyen de communication et valoriser ces vidéos. Bien que la page de “l’université en images” (à l’adresse: http://www.univvalenciennes.fr/luniversite-en-images) soit vue en moyenne 2200 fois par semaine, il m’est impossible de savoir si ses consultants sont en majorité des étudiants, des professionnels ou des internautes lambdas.

Aujourd’hui, ses reportages ont besoin d’être fédérer au sein d’une web tv dans le but d’accroître davantage leurs visibilités. Dans cette perspective, je souhaite concevoir et promouvoir une web tv auprès des étudiants, du personnel et entourage de la faculté, en effectuant une campagne générale de communication. Elle donnera accès à divers reportages ayant pour sujets les activités et événements majeurs des sites de l’Université. Ces vidéos sont déjà existantes. Elles sont soumises à une mise à jour régulière en fonction des évènements à venir, grâce au CRAVN (le centre de ressources audio et vidéo numériques de l’université de Valenciennes). Dans le but d’informer le maximum de personnes sur son existence, plusieurs moyens de communication peuvent être employés.

INTRODUCTION notes d’intentions

Mon projet de réalisation professionnelle comprend :

La conception d’un logotype approprié pour présenter et témoigner de l’existence de cette web tv universitaire. (Elargissement possible de son identité visuelle en développant un support de communication supplémentaire, type flyer, PDF (intéractif ), email .) La refonte de l’interface graphique et le fonctionnement de pages web hébergeant les reportages de la future web tv. L’ensemble des vidéos est visionnable à l’adresse suivante : http://www.univ-valenciennes.fr/l’universite-enimages La conception d’un nouveau générique qui serait ajouté au début de chaque reportage déjà présent sur le site et en remplacement de l’ancien qui n’est plus en relation directe avec la nouvelle charte graphique et chromatique du site internet actuel.

LOGOTYPIE charte formelle

Pour représenter la webTV de l’Université, la création d’un logotype permettra de fédérer l’ensemble des reportages existants et à venir. Actuellement, l’icône présent sur le site de l’UVHC, ne mentionne aucunement la notion de web tv. On désigne généralement par “webTV” tout site Internet dont les contenus sont à dominante vidéo, ce qui est le cas pour une partie du site de l’Université.

SIMPLICITÉ SOBRIÉTÉ

L’UVHC en images

La forme du logotype a été très vite définie. Par l’emploi du dessin d’une bulle de dialogue, je souhaitais mettre en avant le fait que la webTV regroupait un ensemble de reportages et d’interviews, où les notions d’information et d’échange sont continuellement présentes. La forme rectangulaire faisant également référence à un écran de télévision. Pour plus d’esthétisme, les contours ont été travaillés, en arrondissant les bords et en optant pour un changement de graisse progressif qui amplifie le point de vue en perspective du logotype. Sa forme “ouverte” permet une meilleure lecture du contenu graphique et textuel car elle n’empêche pas l’oeil du lecteur de circuler librement. 10

LOGOTYPIE

charte typographique

Arial Dès la première lecture, le logotype se doit de renseigner le lecteur sur sa “fonction” . De ce fait, les termes “web-tv” et “UVHC” qui désigne l’université et ses différents pôles, se devait d’être présent au sein du logo. L’aspect formel du logotype, à la fois rectangulaire et aux bords arrondis à déterminé le choix typographique employé pour le contenu textuel de celui-ci. De plus, le logotype étant dans un premier temps destiné à l’affichage écran via sa présence au sein du site de l’UVHC, j’ai opté pour une typographie sobre, à la graisse ou largeur fixe et sans serif. Pour une bonne lisibilité à l’écran l’Arial est conseillé mais trop évidente.

Sansation Bitstream Vera sans Reznor Afin de styliser davantage l’ensemble du logotype et de mettre l’accent sur la notion du web, la lettre “e” a été retravaillée. “UVHC” est inscrit en majuscule pour mettre en avant le nom de l’Université car il s’agit de son identité propre.

Ces différentes remarques m’ont amené à opter pour la typographie suivante, intitulée “Reznor”.

web - tv 11

LOGOTYPIE

charte chromatique

Première hypothèse

Respect de la charte chromatique du site de l’UVHC, récemment renouvelée, pour une bonne intégration visuelle du logotype au sein de la page web. En accord avec la charte chromatique du site, le vert est une dominante qu’il fallait conserver pour la conception du logo.

o o o o

b - tv

vert : #C4e243 gris clair : #ECEAE8 gris médium : #d2cec2 gris foncé: #696969

Le choix d’un gris foncé, toujours en accord avec la charte web, contraste très bien avec le coloris de la forme et favorise une bonne lisibilité du texte sur écran.

w w b -btv- tv

b - tv

b - tv 12

b -t

LOGOTYPIE

charte chromatique

b - tv

Autres hypothèses

b - twv

Dans le but de rehausser le logo au sein de la page web et de capter l’attention de l’internaute, j’ai souhaité jouer sur la couleur et opter pour des coloris qui contraste davantage avec l’ambiance chromatique du site. (Emploi des complémentaires notamment.)

b - tv

w o o

w b - tv

rouge: #E23F20 violet : #5E127D

b - tv

Proposition retenue

wb - tv b - tv

b - tv

Finalement, mon choix c’est arrêté sur une gamme approchante, un bleu marine proche du gris - tv w b - tv foncé, pour ne pas dénaturer la charte du site et ainsi l’ensemblewde labpage. o

bleu: #2D1B51

b - tv

REFONTE GRAPHIQUE pages internes du site de l’UVHC

Actuellement, les différents vidéos-reportages qui constituent la webTV sont accessibles via deux liens différents. Le premier, visible directement sur la page d’accueil du site, sous forme de logotype et le second, accessible depuis l’ENT (l’Espace Numérique de Travail). Or, ce dernier lien est amené à disparaître selon les souhaits des concepteurs du site. Ma tâche sera donc de retravailler graphiquement une partie de l’arborescence du site qui inclue les pages annexes dédiées à la webTV et accessible depuis le logotype situé sur la page d’accueil. Pour concevoir le site de l’université, le CMS “DRUPAL 6” a été employé. Ce CMS est équivalent à Joomla mais à base plus php. Pour permette la mise en ligne des reportages vidéos, il a fallu installer le module « Flash Video » en complément.

espace à retravaillé

o o o o

vert : #C4e243 gris clair : #ECEAE8 gris texte : #696969 gris fond menu : #d2cec2

éléments statiques

Arborescence

1 Accueil

2 News

3 Toutes les vidéos

4 Player

REFONTE GRAPHIQUE pages internes du site de l’UVHC

1 Découvrez

l'Université

les facultés, les instituts et l'école

Les formations

La recherche

L'annuaire

A la une aujourd'hui

Vous êtes

breve is a free, open-source software package which makes it easy to build 3D simulations of multi-agent systems and artificial life. Using Python, or using a simple in a 3D world and observe how they interact. breve includes physical simulation and collision detection so

Accès direct

+ Catalogue des formations + Inscription

Votre Espace Numérique de Travail

+ L'apprentissage + L'université Recrute breve is a free, open-source software package which makes it easy to build 3D simulations of multi-agent systems and artificial life. Using Python, or using a simple in a 3D world and observe how they interact. breve includes physical simulation and collision detection so

+ Droit individuel à la formation

+ Modules transversaux d'accompagnement

b - tv

t Support for non-convex shapes. t Support for importing shapes from 3DS. t Improved support for writing simulations with Python. t Improved graphics and rendering. Inscription

3EMAINE DE LA MOBILITÏ s 09

Voir toutes les actualités

mentions légales

L'agenda de l'UVHC

contacter le webmaster

Le site de l’université de Valenciennes met à disposition de ses internautes une web tv, directement accessible depuis sa page d’accueil. L’emplacement du logotype est fixe et fonctionne comme un bouton d’entrée. 15

REFONTE GRAPHIQUE pages internes du site de l’UVHC

Le logotype à disparut, mais la notion de “web-tv” reste présente, reprenant le graphisme employé pour le texte du logo, qui fonctionne lui même comme une identité graphique à part entière.

Découvrez

l'Université

les facultés, les instituts et l'école accueil

+ comprendre le LMD à Valenciennes

+ choisir une formation + vivre sur le campus + financer mes études + m'inscrire + m'orienter et m'insérer

NEWS !

+ me documenter

+ ÏUVEJFS Ë MhÏUSBOHFS + connaître mon

environnement informatique

+ améliorer mes compétences

La recherche

Plan d'accès

L'annuaire

> Lycéen >

b - tv

w Lycéen

Les formations

b - tv

w b - tv

L'université en images

w /&84

t 4DJFODFT FU UFDIOPMPHJFT t -FUUSFT MBOHVFT BSUT FU TDJFODFT IVNBJOFT t %SPJU ÏDPOPNJF BENJOJTUSBUJPO t 4DJFODFT EV NBOBHFNFOU FU HFTUJPO

Titre de la vidé Titre de la vidéo selectionné

Voir toutes les vidéos

NEWS !

MJOHVJTUJRVFT

+ suivre des modules EhFOTFJHOFNFOU transversaux

NEWS !

Voir toutes les vidéos

Voir toutes les vidéos Voir toutes les vidéos NEWS !

Voir toutes les vidéos

“NEWS” : Cette rubrique signale les dernières vidéos mises en ligne. La seconde rubrique donne accès à la totalité des reportages.

NEWS !

t 4DJFODFT FU UFDIOPMPHJFT

16 t 4DJFODFT FU UFDIOPMPHJFT t -FUUSFT MBOHVFT BSUT FU TDJFODFT IVNBJOFT

REFONTE GRAPHIQUE pages internes du site de l’UVHC

Player Afin de consulter les dernières news mises en ligne ainsi que tous les autres reportages, un player est présent sur deux des pages de la web tv et est opérationnel (voir page 2 et 4). Dans la catégorie “News”, dès qu’une des vidéos est sélectionnée, la vidéo se charge et démarre automatiquement au sein du player.

Une icône permet de faire passer la vidéo en plein écran d’un seul clic.

PLAY

PAUSE

STOP

VOLUME

ECHELLE DE TEMPS DE LA VIDÉO

Lorsque la vidéo est lancée, le symbole Play est coloré ce qui le met en avant et renseigne l’internaute sur la fonction du player en temps réel. Le fonctionnement est identique pour les autres icônes. 17

REFONTE GRAPHIQUE

b - tv

pages internes du site de l’UVHC

Titre de la vidéo selectionnée NEWS !

NEWS !

w b - tv - tv de la vidéo selectionnée bTitre

Titre

NEW

Voir Des liens, symbolisés par une icône grise et marqués d’une flèche blanche, permettent NEWSà! l’internaute Titre NEWS ! Voir de revenir vers la page des “News” ainsi que celle regroupant l’ensemble des vidéos, intitulée “Voir NEWS ! NEW toutesNEWS les vidéos”. ! Voir toutes les vidéos Voir Ces liens cliquables, reprennent le graphisme (signalétique) déjà existant à la page d’accueil (voir NEWS ! t 4DJFODFT FU UFDIOPMPH NEWS ! page 2). Ce symbole symbolise une rubrique. Voir t -FUUSFT MBOHVFT BSUT F Voir toutes les vidéos t %SPJU ÏDPOPNJF BEN NEWS ! Au survol, l’icône se colorise et rehausse le lien àNEWS la vue! du lecteur. t 4DJFODFT EV NBOBHFN

Titre de la vidéo selectionnée

NEWS !

Voir toutes les vidéos

NEWS !

t 5JUSF EF MB WJEÏP

Voir toutes les vidéos t 4DJFODFT FU UFDIOPMPHJFT t -FUUSFT MBOHVFT BSUT FU TDJFODFT IVNBJOFT t 5JUSF EF MB WJEÏP Voir toutes les vidéos t %SPJU ÏDPOPNJF BENJOJTUSBUJPO t 5JUSF EF MB WJEÏP t 4DJFODFT EV NBOBHFNFOU FU HFTUJPO

NEWS ! NEWS !

NEWS ! Voir toutes les vidéos t 5JUSF EF MB WJEÏP

t 4DJFODFT FU UFDIOPMPH t 4DJFODFT FU UFDIOPMPH t -FUUSFT MBOHVFT BSUT F t -FUUSFT MBOHVFT BSUT F t %SPJU ÏDPOPNJF BEN t %SPJU ÏDPOPNJF BEN t 4DJFODFT EV NBOBHFN t 4DJFODFT EV NBOBHFN

t 4DJFODFT FU UFDIOPMPH t -FUUSFT MBOHVFT BSUT F t %SPJU ÏDPOPNJF BEN t 4DJFODFT EV NBOBHFN

t 4DJFODFT FU UFDIOPMPHJFT t 4DJFODFT FU UFDIOPMPHJFT t -FUUSFT MBOHVFT BSUT FU TDJFODFT IVNBJOFT t 4DJFODFT FU UFDIOPMPHJFT t -FUUSFT MBOHVFT BSUT FU TDJFODFT IVNBJOFT t %SPJU ÏDPOPNJF BENJOJTUSBUJPO Les vidéos sont consultables en t -FUUSFT MBOHVFT BSUT FU TDJFODFT IVNBJOFT t %SPJU ÏDPOPNJF BENJOJTUSBUJPO t 4DJFODFT EV NBOBHFNFOU FU HFTUJPO t %SPJU ÏDPOPNJF BENJOJTUSBUJPO sélectionnant un titre au choix. Ces titres t 4DJFODFT EV NBOBHFNFOU FU HFTUJPO t 4DJFODFT EV NBOBHFNFOU FU HFTUJPO sont tous cliquables et l’action de rollover t 4DJFODFT FU UFDIOPMPHJFTest signalé par un changement de couleur t -FUUSFT MBOHVFT BSUT FU TDJFODFT IVNBJOFT du texte. t 4DJFODFT FU UFDIOPMPHJFT t %SPJU ÏDPOPNJF BENJOJTUSBUJPO t -FUUSFT MBOHVFT BSUT FU TDJFODFT IVNBJOFT t 4DJFODFT EV NBOBHFNFOU FU HFTUJPO t %SPJU ÏDPOPNJF BENJOJTUSBUJPO t 4DJFODFT EV NBOBHFNFOU FU HFTUJPO Player

NEWS ! t 5JUSF EF MB WJEÏP t 5JUSF EF MB WJEÏP t 5JUSF EF MB WJEÏP EF MB WJEÏP t 5JUSF EF MB WJEÏP EF MB WJEÏP

Afin d’attirer l’internaute, j’ai employé un graphisme rétro et des formes qui rappel le logotype conçu. L’emploi d’une télévision n’est pas anodin compte tenu qu’il s’agit d’une web “TV”.

REFONTE GRAPHIQUE pages internes du site de l’UVHC

3 Découvrez

l'Université

les facultés, les instituts et l'école accueil

w Lycéen

Les formations

Plan d'accès

L'annuaire

b - tv

+ comprendre le LMD à

L'université en images

+ choisir une formation

Toutes les vidéos

Valenciennes

La recherche

> Lycéen >

+ vivre sur le campus + financer mes études + m'inscrire + m'orienter et m'insérer + me documenter + étudier à l'étranger + connaître mon

environnement informatique

+ améliorer mes compétences linguistiques

+ suivre des modules d'enseignement transversaux

Orientation et insertion t 4DJFODFT FU UFDIOPMPHJFT t -FUUSFT MBOHVFT BSUT FU TDJFODFT IVNBJOFT t %SPJU ÏDPOPNJF BENJOJTUSBUJPO t 4DJFODFT EV NBOBHFNFOU FU HFTUJPO

Recherche et transfert t 4DJFODFT FU UFDIOPMPHJFT t -FUUSFT MBOHVFT BSUT FU TDJFODFT IVNBJOFT t %SPJU ÏDPOPNJF BENJOJTUSBUJPO t 4DJFODFT EV NBOBHFNFOU FU HFTUJPO t 4DJFODFT FU UFDIOPMPHJFT t -FUUSFT MBOHVFT BSUT FU TDJFODFT IVNBJOFT t %SPJU ÏDPOPNJF BENJOJTUSBUJPO t 4DJFODFT EV NBOBHFNFOU FU HFTUJPO

Cérémonies et distinctions t 4DJFODFT FU UFDIOPMPHJFT t -FUUSFT MBOHVFT BSUT FU TDJFODFT IVNBJOFT t %SPJU ÏDPOPNJF BENJOJTUSBUJPO t 4DJFODFT EV NBOBHFNFOU FU HFTUJPO

/&84

Il fallait supprimer l’image d’archives qui résultait de l’ancienne page avec la présence d’une liste de reportages trop longue et visuellement découragent à consulter pour les internautes. C’est pourquoi, je souhaite mettre les vidéos à disposition des utilisateurs, sous la forme d’un ascenseur déroulant, lisible verticalement. La page, devenant plus aérée, est ornementé d’une télévision rétro, en adéquation avec l’univers précédemment définit. Celle-ci marque une nouvelle fois de manière imagée, le support employé pour la diffusion des reportages. 19

REFONTE GRAPHIQUE pages internes du site de l’UVHC

4 Découvrez

l'Université

les facultés, les instituts et l'école accueil

+ comprendre le LMD à

La recherche

Plan d'accès

L'annuaire

b - tv

w Lycéen

Les formations

> Lycéen >

Titre de la vidéo selectionnée

Valenciennes

+ choisir une formation

/&84

+ vivre sur le campus

Voir toutes les vidéos

+ financer mes études + m'inscrire + m'orienter et m'insérer + me documenter + étudier à l'étranger + connaître mon

environnement informatique

+ améliorer mes compétences linguistiques

+ suivre des modules d'enseignement transversaux

Souhait futur des concepteurs du site: la mise en place d’un serveur vidéo pour employer la technique du streaming sur chaque vidéo qui constitue la web tv actuelle. Pour cela, le serveur “RED 5” est souhaité par le webdesigner, Christophe Debail. Red5 est un serveur Flash gratuit qui reprend les fonctionnalités de Flash Media Server de Adobe. Il permet de faire du streaming audio ou vidéo et ses applications côté serveur peuvent être écrites en Java mais aussi avec d’autres langages de script comme JavaScript, Python, Ruby, … 20

GÉNÉRIQUE story board

Quelques informations Un entretient avec Michel Merlin, responsable du Centre de ressources audio et vidéo numériques de l’Université de Valenciennes, a orienté mes choix dans la conception d’un générique. Il s’avère qu’il est l’auteur des précédents génériques et qu’il m’a apporté de nombreuses informations concernant la création de mon générique qui introduira chacun des reportages. FORMAT en SD 720 par 576 px et en HD 1440 par 1080 px LOGICIEL After Effects CS3

DÉCLINAISON Un seul générique sera réalisé puis déclinable ensuite pour les brèves. En effet, actuellement, deux génériques coexistent, un pour les reportages et l’autre pour les brèves, intitulé “en bref”. Le générique que je suis amené à réaliser pourra être employé pour ces deux éléments, en modifiant uniquement le contenu textuel (titre) et en conservant l’habillage graphique et l’animation. Deux hypothèses sont envisageables...

Le logo de l’UVHC se devra d’être présent au sein du générique. 21

GÉNÉRIQUE story board

Hypothèse 01 Cette première hypothèse met en scène un espace graphique et formelle où les éléments apparaissent dans un premier temps, progressivement et de manière dynamique. Peu à peu se met en place quatre icônes, qui se révèlent être des écrans donnant accès à des vidéos ou des photographies ayant pour unique thématique l’UVHC.

GÉNÉRIQUE story board

Hypothèse 01 - suite Après “l’activation” du premier écran, celui ci s’éteint et laisse place au suivant, par un mouvement de rotation de l’ensemble des écrans. Le second panneau s’activera à son tour, laissant place au troisième et ainsi de suite... Ces écrans apportent, via des médias différents (vidéo, photographies) des informations sur l’UVHC. A savoir, l’ensemble des panneaux est en continuel mouvement.

GÉNÉRIQUE story board

Hypothèse 01 - suite Pour terminer, les notions de “reportages” et d’ “UVHC” apparaissent.

Pour les déclinaisons futures, le terme “reportage” pourra facilement être modifié par la notion “en bref”, afin de convenir aux différents reportages existants et déjà classés sous ces deux thématiques. MUSIQUE Une musique, libre de droits, pourra venir compléter et agrémenter le générique. Selon la demande de Michel Merlin, une musique électronique et, ou à percussions, serait plus en adéquation avec un générique d’introduction de ce type. TEMPS Le générique se doit d’être sobre et très court car il sert d’introduction au reportage et est accolé au début de chacun d’eux. Ils sont donc amenés à être visionné souvent et en optant pour un temps de diffusion très court, le lecteur ne se lasse pas de le visionner.

5 secondes

GÉNÉRIQUE story board

Hypothèse 02 Dans un esprit toujours très épuré, des éléments carrés apparaissent dans la scène et comblent peu à peu l’espace. Cet ensemble bascule, tel un jeu de carte laissant apparaître des éléments identiques aux précédents mais plus sombres. Ils s’animent progressivement, présentant ainsi au lecteur une banque d’images photographiques importantes reflétant l’Université. Chaque élément est animé indépendamment des autres et évolue donc différemment. (Enchainement de photographies numérique. Constitution d’une banque de donnée présente sur le cd à la fin du dossier.)

GÉNÉRIQUE story board

Hypothèse 02 - suite La scène s’élargit, tandis que les différents éléments sont toujours actifs. Progressivement, certains espaces changent de luminosité laissant apparaître le logo de l’Université ainsi que le terme de “reportages”.

PERSPECTIVES DU PROJET entretients avec des professionnels

Les concepteurs du site de l’UVHC Entretients avec Christophe Debail, Olivier Delville et Nathalie Vauquier o o o

Christophe Debail : responsable web Olivier Delville : responsable infographiste Nathalie Vauquier : responsable au service informatique et auteur du template à l’origine de la refonte récente du site de l’université.

Grâce à leur aide complémentaire, j’ai pu progresser plus rapidement au sein de mon projet. Au second semestre, je leur soumettrais mes propositions de pages web qu’ils soumettront à leur tour aux responsables du service communication, entre autres, en vue d’opérer des changements au sein du site de l’UVHC, si toutefois, mes propositions plaisent.

Mairie de Valenciennes Entretient dans les bureaux de la TV LOCALE à la MAIRIE VALENCIENNES. Née d’une volonté de la mairie, la tv locale existe aujourd’hui depuis le mois d’Octobre 2002. Depuis un an, consultable sur Internet puis depuis 2003, sur le câble. (Emissions ou reportages hebdomadaires qui changent le Mercredi.) Un logotype existe pour promouvoir cette tv. Son concepteur, un graphiste issu de l’agence «Tambour Bâtant». Société, qui se trouve être à la base de la tv locale de la mairie. Trois journalistes sont chargés du contenu éditorial de cette télévision. Deux en infos et un dans la catégorie sport en collaboration avec une production. Tous les ans, celle-ci est renouvelable. Durant 6 années, il s’agissait de la société «Tambour Bâtant» (aux Ateliers numériques de Valenciennes) et depuis Mai 2009, une nouvelle boîte sur Paris. Si je souhaite proposer mon générique, ils ne sont pas contre l’idée de le diffuser au sein de la tv locale de la mairie. Cela permettrait d’étendre la popularité des reportages de l’UVHC au sein de la ville, voir plus. 27

CONTENUS DU CD

CHARTE GRAPHIQUE DU LOGOTYPE

CHARTE GRAPHIQUE DU SITE DE L’UVHC

TESTS TECHNIQUES DU GÉNÉRIQUE