Issuu on Google+

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



Dossier_EDAIC