projet professionnel prĂŠsentĂŠ par camille moine edaic session 2012-2013
SOMMAIRE Qui est SVD ? -----------------------------------------------Métiers -------------------------------------------------------Mon rôle chez SVD --------------------------------------A propos de ce dossier ----------------------------------
4 5 6 7
-- Identité visuelle -Texture -------------------------------------------------------Visuel générique -----------------------------------------Logotype ---------------------------------------------------Colorimétrie ------------------------------------------------Icotypes -----------------------------------------------------Typographie -----------------------------------------------Cartes de visite -------------------------------------------Plaquettes commerciales -----------------------------
10 16 17 22 23 25 26 30
-- Webdesign -Newsletter // Nouvelle identité ----------------------- 34 Newsletter // Flux thématiques ----------------------- 36 Mini site vitrine ---------------------------------------------- 38 -- Motion design -Qu’est-ce qu’un flux thématique ? ----------------Processus ---------------------------------------------------Refonte maquette flux thématique --------------Interlude créatif ----------------------------------------Transitions ----------------------------------------------------
50 51 52 55 56
Note personnelle ------------------------------------------ 62
QUI EST SVD ? SVD est une agence dédiée à 100% à l’affichage dynamique pour la diffusion sur écrans d’informations dans les lieux de passage et d’accueil des salariés, du grand public, et des consommateurs. L’affichage dynamique peut prendre la forme de vidéos, de photos, d’animations Flash, de flux RSS ou XML.
1. 2. 3. 4. 5.
1
1
1
3
3
3
Ecrans vidéos Serveur Player de diffusion Internet Client
Reliés en réseau, les écrans diffusent des informations animées, paramétrables et mises à jour en temps réel depuis un serveur interne ou externe.
4 5
2
2
2
4
MÉTIERS
Création de journal dynamique
Création de journaux d’information dynamique pour les entreprises
Création TV de marque
• •
Programme digital de la marque en magasin Promotion des ventes
Edition de flux thématiques
Création et livraison de flux d’informations : actualités, météo, trafic, divertissement, sport, cuisine...
Administrations réseaux d’écrans
Conseils et préconisations matériels
5
MON RÔLE CHEZ SVD Communication interne A l’origine, SVD avait un besoin de se positionner sur le marché en s’appuyant sur une image de marque qui mettrait en avant son domaine : l’affichage dynamique. Suite à des réunions de groupe et multiples réflexions sur le positionnement de SVD, nous avons mis en place un cahier des charges. Il m’a donc été confié la mise en place d’un système de codes graphiques véhiculant les valeurs de l’entreprise, dans une logique de pérennité. Ce travail d’identité visuelle s’est déroulé sous la tutelle du secteur marketing.
Communication externe Ma principale mission a été la refonte graphique du catalogue de flux thématique (rubriques distractives sous formes d’informations animées), ce travail à long terme va permettre d’enrichir le catalogue produit et de me perfectionner sur les outils de motion-design (Flash, After Effects). Divers travaux ponctuels arrivaient dans mon cahier des charges, principalement des créations de vidéos destinées à la PLV.
Toujours dans une perspective de déploiement de l’image de marque, j’ai travaillé sur la construction du site www.svd-flux.fr en partenariat avec une équipe de développeurs/intégrateurs. A la suite de ce projet, j’assure la présence de SVD sur les réseaux sociaux, pour faire vivre l’identité visuelle au quotidien.
6
a propos de ce dossier J’ai choisi de présenter ce dossier dans l’ordre chronologique des projets qui m’ont été confiés afin de mieux appréhender l’évolution de mon travail. Il m’a semblé important de décomposer les étapes de construction de chaque projet, pour avoir une vision globale de ces projets. J’ai donc expliqué le cheminement de la matière première jusqu’au produit fini. Des annotations viendront compléter mon discours tout au long du dossier.
7
IdentitĂŠ visuelle
identité visuelle Texture // arrière-plan
La texture a permis de mettre en place les fondations de l’identité visuelle. Elle est composée d’une profusion de triangles qui donne à voir la diversité et le bouillonnement créatif. Elle est à fond perdu pour accentuer sa présence dans l’imaginaire du spectateur. J’ai cherché à lui donner un aspect cristallin, qui renvoie aux notions de pureté, onirisme et forme originelle. Le cristal est symbole du travail accompli. La notion de transparence m’a été imposé (transparence dans les faits et gestes), c’est aussi une des connotations de cette texture, qui détermine une des valeurs de SVD.
10
Logiciel : Illustrator
1. 2. 3. 4.
Créer document vierge Créer un symbole en forme de triangle Sélectionner l’outil «Pulvérisation de symboles» Pulvériser le symbole de manière aléatoire afin de créer une illusion de cristallisation.
11
5. Paramétrer les réglages de pulvérisation en rotation, taille et opacité pour accentuer l’aspect aléatoire afin de créer une illusion de cristallisation. 6. Décomposer les formes (Objet > Décomposer) 7. Dégrouper les formes (Objet > Dissocier) 8. Procéder manuellement aux derniers détails.
12
13
14
15
Identité visuelle Visuel générique
Ce visuel s’inspire de la texture précédemment construite. La demande était de mettre en image le domaine de l’affichage dynamique. J’ai accentué l’idée de bouillonnement créatif par l’explosion de formes géométriques, qui tend à donner vie à l’écran. Technique : Illustrator (Outil 3D Extrusion) & Photoshop (Lueur interne et ombrage).
16
LOGOTYPE Identité visuelle Logotype contraintes • Illustrer le domaine du Digital Média • Donner à voir les valeurs de SVD (convivialité, rigueur, réactivité). • Prévoir une taille minimum • Prévoir une zone tournante de sécurité • Fonctionnel en réserve, sur fond sombre et clair
17
Identité visuelle Logotype Construction
Rond
Carré
Dégrade
Découpe
Dégrade triangle
Effet creux + lueur
Finition lueur
18
IdentitĂŠ visuelle Logotype Fond gris
19
IdentitĂŠ visuelle Logotype Fond blanc
20
IdentitĂŠ visuelle Logotype Normes
20 %
100 %
20 mm
20 %
21
COLORIMÉTRIE
Web : #d59227
Web : #3a7abe
Web : #7f2a82
Web : #111718
RVB : 213 / 146 / 39
RVB : 58 / 122 / 190
RVB : 127 / 42 / 130
RVB : 17/ 23 / 24
CMJN : 13 / 44 / 99 / 3
CMJN : 78 / 48 / 0 / 0
CMJN : 60 / 99 / 10 / 2
CMJN : 75 / 64 / 63 / 81
22
Identité visuelle icotypes
J’ai désigné comme icotypes les éléments issus du logotype. Ainsi, l’identité visuelle assure sa pérennité par de multiples déclinaisons. 23
Identité visuelle Visuel générique
Ces icotypes serviront par la suite à représenter les différents pôles de SVD, en leur associant une couleur et un pictogramme.
24
TYPOGRAPHIE helvetica neue lt std Mon pauvre zébu ankylosé choque deux fois ton wagon jaune
Mon pauvre zébu ankylosé choque deux fois ton wagon jaune
Mon pauvre zébu ankylosé choque deux fois ton wagon jaune Ga. Ut optat. Offictur mosa ipsae est es intetur aut quis enimodi dolorrum volore consendebis aliquiat. Maximaio testis conseditem. Abo. Nam volorep eruntis nos et et et as atior mosam, adis el es de eicidia nus, ut quoditi optionse suntio con perrovidem voluptate id eos molesti doluptatios volorem asperibusam net hitiist iusam, versperciur, sim esectem haria as quiae con exerumq uatur, si volo volorunt.
Avenir lt 85 heavy Mon pauvre zébu ankylosé choque deux fois ton wagon jaune
Mon pauvre zébu ankylosé choque deux fois ton wagon jaune
Mon pauvre zébu ankylosé choque deux fois ton wagon jaune Ga. Ut optat. Offictur mosa ipsae est es intetur aut quis enimodi dolorrum volore consendebis aliquiat. Maximaio testis conseditem. Abo. Nam volorep eruntis nos et et et as atior mosam, adis el es de eicidia nus, ut quoditi optionse suntio con perrovidem voluptate id eos molesti doluptatios volorem asperibusam net hitiist iusam, versperciur, sim esectem haria as quiae con exerumq uatur, si volo volorunt.
25
CARTES DE VISITE identité visuelle Cartes de visite Contraintes • Format 90x60 mm • Marge de sécurité : 5 mm • Fond perdu : 5 mm • Mode colorimétrique CMJN • Reprendre les codes graphiques précédemment mis en place (texture, couleurs, typographies). • Identité discrète et élégante • Optimiser la lecture.
26
27
Cartes de visite - construction IdentitĂŠ visuelle Recto
28
cartes de visite - construction Cartes identitĂŠ visuelle IdentitĂŠ recto Recto
29
PLAQUETTES COMMERCIALES identité visuelle Plaquettes commerciales contraintes • Format A4 orientation Portait • Optimiser la lecture. • Marge de sécurité : 5 mm • Fond perdu : 5 mm • Mode colorimétrique CMJN • Doit contenir l’ensemble des informations essen- tielles à la compréhension du client • Créer un parcours visuel qui amène aux mes- sages principaux • Créer un visuel représentant la PLV dynamique résume la principale activité (parmi tant d’autres). • Reprendre les codes graphiques précédemment mis en place (texture, couleurs, typographies). • Identité discrète et élégante
30
Repères de construction
+
Texture // illustration // logo
+
Bloc informatif // accroche
+
Services
31
webdesign
NEWSLETTER - NOUVELLE IDENTITÉ webdesign newsletter - nouvelle identité contraintes • Largeur maximum : 600 px maximum. • Utilisation de fonts standards pour le Web • Compatibilité Boîte Mail (HTML + CSS) • Zone d’illustration attractive • Communiquer sur un message fort : Informer l’in- ternaute du changement d’identité • Zones stratégiques (liens en masse vers réseaux sociaux)
34
600 px
Repères de construction
+
Bandeau logotype
+
Bloc illustratif
+
Bloc ĂŠditorial
35
NEWSLETTER - FLUX THÉMATIQUES webdesign newsletter - flux thématiques Contraintes • Largeur maximum : 600 px maximum. • Utilisation de fonts standards pour le Web • Optimiser la lecture • Donner à voir le choix des produits • Esprit attrayant • Zones stratégiques (liens en masse vers réseaux sociaux)
36
600 px
Repères de construction
+
Bandeau logotype
+
Bloc illustratif + site web
+
Produits + Services + infos divers
37
MINI SITE VITRINE webdesign www.svd-flux.fr - mini site vitrine contraintes • Site optimisé pour une résolution 1280x768 px et conçu pour : . Récupérer les données du catalogue . Envoyer les données pour une prise de contact • Menu généré dynamiquement • Gestion d’un « Panier » • Présentation des flux via des images et des vidéos • Menu généré dynamiquement • Formulaire de prise de contact • Aucune animation Flash pour être compatible tablette • Basé sur les technologies HTML5, CSS3, JQUERY (UI). Si besoin PHP 5.3 et Mysql. • Le serveur Internet propose un service web avec lequel le catalogue doit s’interfacer : la communi cation avec ce service s’effectue via des messages au format XML (Encodés en utf-8 et envoyé via HTTP POST). 38
webdesign Page accueil repères construction 1280 px 960 px
730 px
39
webdesign Page accueil Grille construction
Grille de 12 colonnes
40
webdesign Page accueil Construction
8 px
Menu position fixe
8 px
ACTUALITÉS
html>body .header {position: fixed;}
ACTUALITÉS Effet survol
Effet survol
#rond:link { background-image:url(image1.png); background-repeat:no-repeat; text-decoration:none;}
a:link a:visited a:hover a:active
#header {background-image:url(‘carbon.png’); background-repeat:repeat;
{color:white;} {color:white;} {color:#d8902e;} {color:#d8902e;}
Intégration font non-standart @font-face {font-family: ‘‘Helvetica Neue Lt Std‘‘; src: url(‘Helvetica Neue Lt Std.ttf’);}
41
webdesign Page accueil Construction Intégration image de fond #bloc2 { backgound-color:#d8902e; background-image:url(‘texture.png’); background-repeat:no-repeat;
Un flux (vidéo) est sélectionné aléatoirement toutes les X secondes. Un clic sur l’image redirige vers la page « Bouquets Thématiques ». Une option existe pour afficher en 1er, une image d’accueil avant d’afficher X secondes plus tard un flux thématique. (Utile pour passer une information commerciale)
42
webdesign Page accueil Construction
Liens vers réseaux sociaux <href=‘‘http://www.facebook.fr‘‘><img src=‘‘facebook.png‘‘></a> <href=‘‘http://www.twitter.com‘‘><img src=‘‘twitter.png‘‘></a>
43
webdesign page accueil Construction Panier Panier avec le nombre de flux sélectionnés. Lien vers l’écran « Devis »
44
webdesign page de contenu média Construction
Ajouter au panier Le bouton « Ajouter à mon devis » ajoute le flux au panier
Ajouter au panier Player vidéo (fourni et à intégrer avec une base iframe.) <iframe src=‘‘https://www.source.com‘‘ style=‘‘width: 600px; height: 500px; border: 0‘‘> </iframe>
Vignettes • Liste des flux pour la famille / groupe sélectionné. • Présentation sous forme d’images. Au survol, l’image passe en surbrillance + affichage du nom + affichage du bouton Play. • Un clic sur une image charge les données du flux avec scrolling automatique vers le Player vidéo
45
webdesign Page de contenu textuel Construction
Intégration font non-standart @font-face {font-family: «Helvetica Neue Lt Std»;src: url(‘Helvetica Neue Lt Std.ttf’);}
Souligner texte .rubrique ccm {text-decoration: underline;}
46
webdesign Formulaire de contact Construction
Lightbox • Effet d’opacité : 50% Noir • Langage javascript • Champs obligatoires : société, nom, téléphone, email > Vérificateur HTML5
Formulaire de contact • Formulaire de contact / devis (fenêtre modale) • Les flux sélectionnés apparaissent dans la zone dédiée sous la forme « Famille / Nom Flux ». • Champs obligatoires : société, nom, téléphone, email > Vérificateur HTML5
47
motion design
QU’EST-CE QU’UN FLUX THÉMATIQUE ? Un flux thématique est une page d’information qui a pour vocation d’être distractif, il agrémente la vie quotidienne des clients. SVD propose une large gamme de rubriques informatives pour enrichir les boucles vidéo au quotidien : • Des rubriques quotidiennes : météo, éphéméride… • Des rubriques Live : actualité sport, news Reuters,... • Des rubriques hebdomadaires : sorties ciné de la semaine, insolite… • Des rubriques spécifiques : Roland Garros, festival de Cannes… Ces pages peuvent contenir tous types de médias : des vidéos, des photos, des animations Flash, des flux RSS ou XML... SVD propose également des flux thématiques en adéquation avec la charte graphique du client.
1024 x 768 px
Création de journaux d’information dynamique pour les entreprises
1280 x 768 px
• •
Programme digital de la marque en magasin Promotion des ventes
1920 x 1080 px
Création et livraison de flux d’informations : actualités, météo, trafic, divertissement, sport, cuisine...
1080 x 1920 px
Conseils et préconisations matériels
50
PROCESSUS
Script AS3
zone dâ&#x20AC;&#x2122;image
zone de texte
Script XML
Les langages ActionScript et XML communiquent pour remplir les zones de contenu.
Script AS3
texte
51
REFONTE MAQUETTES FLUX THÉMATIQUES motion design Refonte maquettes flux thématiques contraintes • Trouver des univers graphiques permettant d’illus- trer des thématiques telles que : sport, vie quo- tidienne, alimentation, voyages, environnement, musique...etc • Prévoir une zone d’image dynamique • Prévoir une zone dédiée au texte • Décliner sur 4 résolutions d’écrans : 1024x768 ; 1280x768 ; 1920x1080 ; 1080x1920 • Travail sur la suite adobe • Format final : SWF
52
motion design Flux thĂŠmatiques - rubrique environnement
Piste 1
Piste 2
Piste 3
Piste 4 - RETENUE
Logiciels : Photoshop // Illustrator
53
motion design Flux thĂŠmatiques - rubriques environnement
54
motion design Flux thématiques - interlude créative Nuages 1. 2. 3. 4. 5. 6.
Créer plusieurs ellipses (Raccourci L) Les positionner les unes sur les autres Les fusionner > outil Pathfinder Réunion Dessiner un rectangle Positionner le rectangle au premier plan Sélectionner toutes les formes et appliquer l’outil Pathfinder soustraction
Sapin 1. Sélectionner l’outil Etoile et dessiner un triangle en tenant appuyer la flèche du bas (afin de contraindre la forme à 3 côtés). 2. Appuyer simultanément sur Alt + MAJ pour contraindre l’orientation et la taille. 3. Dupliquer et déplacer ce triangle en dessous de celui-ci en tenant ALT appuyé puis relâcher pour le positionner. 4. Ajouter 20% (+20%) à la largeur de ce triangle 5. Répéter 7 fois les étapes 3 et 4. 6. Sélectionner le dernier triangle en bas et lui appliquer une rotation de 180°. 7. Tout sélectionner (Ctrl+A) 8. Appliquer l’outil Pathfinder Réunion
55
TRANSITIONS Motion design Transitions contraintes • Trouver un principe permettant de catégoriser les flux existants • Animation de 3 secondes maximum • Décliner une palette de couleurs par flux • Décliner sur 4 résolutions d’écrans : 1024x768 ; 1280x768 ; 1920x1080 ; 1080x1920 • Format exportation : FLV avec ou sans couche alpha (si besoin est de conserver l’opacité).
56
Motion design
1 sec
3 sec
Transitions - rubriques bien-être & forme Principes du store vénitien Etape 1 Apparition du bloc titre en montée progressive
Etape 3 Le Store vénitien se dévoile en haut et en bas en dévoilant des couches de titre
Etape 2 De-zoom progressif jusqu’à apparition du titre entier
Etape 4 Le Store vénitien se dévoile entièrement en couche alpha pour laisser place à la vidéo suivante
57
Timeline 1 sec
3 sec
motion design transitions - pack culture principes du store vénitien
Etape 1 Apparition du bloc titre en montée progressive
Etape 3 Le Store vénitien se dévoile en haut et en bas en dévoilant des couches de titres
Etape 2 De-zoom progressif jusqu’à apparition du titre entier
Etape 4 Le Store vénitien se dévoile entièrement en couche alpha pour laisser place à la vidéo suivante
58
Timeline
motion design
1 sec
3 sec
transitions - rubriques environnement principes du store vénitien Etape 1 Apparition du bloc titre en montée progressive
Etape 3 Le Store vénitien se dévoile en haut et en bas en dévoilant des couches de titres
Etape 2 De-zoom progressif jusqu’à apparition du titre entier
Etape 4 Le Store vénitien se dévoile entièrement en couche alpha pour laisser place à la vidéo suivante
59
Timeline 1 sec
3 sec
motion design transitions - pack culture principes du store vénitien
Etape 1 Apparition du bloc titre en montée progressive
Etape 3 Le Store vénitien se dévoile à gauche et à droite en dévoilant des couches de titres
Etape 2 De-zoom progressive jusqu’à apparition du titre entier
Etape 4 Le Store vénitien se dévoile entièrement en couche alpha pour laisser place à la vidéo suivante
60
Timeline
motion design
1 sec
3 sec
transitions - rubriques ephemeride principes du store vénitien Etape 1 Apparition du bloc titre en montée progressive
Etape 3 Le Store vénitien se dévoile en haut et en bas en dévoilant des couches de titres
Etape 2 De-zoom progressif jusqu’à apparition du titre entier
Etape 4 Le Store vénitien se dévoile entièrement en couche alpha pour laisser place à la vidéo suivante
61
NOTE PERSONNELLE bilan Cette expérience m’a permis une de fois de plus de me rapprocher de ma passion pour le graphisme multimédia. Ces projets m’ont appris à gérer mon temps de production et à être toujours plus à l’écoute des conseils de l’équipe afin d’optimiser ce précieux temps. Une exploration plus approfondie de la suite Adobe m’a été indispensable pour répondre à la demande et aux exigences technologiques liées au domaine de l’affichage dynamique. La formation à l’Edaic a pris son sens au cours de certains projets qui m’ont été confiés afin d’acquérir une bonne autonomie sur les logiciels en appliquant les procédures qui m’ont été instruites.
remerciements Je tiens à remercier toutes les personnes de près ou de loin qui ont participé à ce jour à mon amélioration permanente, à mon évolution, par la diversité des projets qui m’ont été confiés, par les compétences qui étaient requises et pour lesquelles je suis en éternel apprentissage tant la technique est sans limite. Et pour vous qui aurez parcouru mon portfolio.
Ainsi que des exigences dans l’organisation des fichiers et dossiers de travail qui contribuent à la bonne entente de l’équipe.
62