M1205P - INFOGRAPHIE. TD4 et TD5 - ÉVALUATION FINALE GREEN MONSTERS FESTIVAL

Transcription

1 M1205P - INFOGRAPHIE TD4 et TD5 - ÉVALUATION FINALE GREEN MONSTERS FESTIVAL Vous allez dans cet exercice être amenés à réaliser le modèle graphique de la page d accueil du site du festival Green Monsters pour lequel une planche de tendance a déjà été réalisée. PDF - SYNTHÈSE DES COMPÉTENCES ACQUISES DANS PHOTOSHOP ET ILLUSTRATOR Le modèle graphique finalisé sera livré via LE BUREAU VIRTUEL sous la rubrique M1205P infographie - PRIME pour le 30 Mai 2014 Vous veillerez une nouvelle fois à respecter les conventions de nommage comme : FINAL_NOM.pdf ATTENTION : LE PDF FINALSERA UN DOSSIER COMPLET ET COMPORTERA UN SOMMAIRE AVEC LES ÉLÈMENTS SUIVANTS. LISEZ BIEN LE SUJET POUR COMPRENDRE. I - RECHERCHES a. Moodboard (Déjà réalisée vous devrez l intégrer au PDF final) b. Analyse de l existant III - DOCUMENT DE SUIVI AVANT / APRÈS pour chaque image utilisée (Faire une sorte de tableau avec l image lorsque vous la téléchargez - de base - et l image finalisée après retouches) (Analyse de deux sites de festival, au choix) c. Recherches graphiques, croquis, Mind Map (Scannez vos recherches papier et intégrez une mind map, expliquez vos choix) II- RÉALISATION a. Zoning (Organisation visuelle de la page d accueil) b. Gabarit (Mise en page préformatée, vide de contenu, modèle structure) c. Modèle graphique (La maquette finale dans sa totalité avec tous les élèments attendus)

2 1 CONTENU À CRÉER Le LOGOTYPE En guise de logo, vous utiliserez le titre «Green Monsters Festival» qui fera l objet d un traitement typographique spécifique dans Illustrator et si vous le désirez, un picto travaillé également sous Illustrator. Commencez d abord les recherches graphiques (couleurs, choix typo, grasse de la typo, croquis, lignes de constructions, revoyez vos cours d arts pour mieux appréhender le sujet) Vous commencerez à créer votre logo sous Illustrator après avoir eu les deux TPs d introduction à Illustrator. Ne perdez pas du temps à essayer de le créer maintenant, vous avez du temps pour la création. Outils d aide : Adobe Kuler SOIGNEZ VOTRE TRAVAIL, UN LOGO DOIT ÊTRE SIMPLE / MINIMALISTE ET À LA FOIS EXPLICITE. IL EST INDISPENSABLE DE PORTER VOS CHOIX VERS LES TENDANCES ACTUELLES. LeS IMAGES Les images peuvent être récupérées en ligne sans contraintes particulières. Elles seront choisies pour leur pertinence et leur qualité et seront librement retravaillées dans Photoshop ou Illustrator pour montrer ce que vous avez appris lors des différents TP et TD. Redimensionnement, colorimétrie, retouche, détourage... Vous garderez trace de l état d origine de l image sur le document de suivi afin que je me rende compte du travail effectué. Le DOCUMENT DE SUIVI Le document de suivi sera une sorte de tableau composé de l image de base et de l image une fois transformée. Ça vaut pour CHAQUE image utilisée et modifiée LeS TEXTES Quelques textes seront intégrés à la page du modèle graphique pour une présentation du festival, quels artistes, où, date... etc

3 DOCUMENT DE SUIVI (EXEMPLE) AVANT APRES

4 2 ÉLÉMENTS À RETROUVER DANS LE MODÈLE GRAPHIQUE le menu - HOME - LINE-UP - TICKETS - CAMPING - GALERIE - INFORMATIONS - CONTACT LeS RÉSEAUX SOCIAUX Comme tout bon festival qui se respecte, vous veillerez à intégrer les réseaux sociaux dans la page d accueil à l aide d icônes. PARTAGER / FACEBOOK / TWITTER / FORUM / CONTACT MAIL FONCTIONNALITÉS Inscription à la newsletter - Barre de recherche - lecteur musique - Un choix de langue FR / EN MISE EN PAGE HEADER Une bannière photo full width de très bonne qualité avec texte, quelques noms d artistes et dates et lieu du festival + Menu + Barre de recherche + Réseaux sociaux CONTENT des news avec le bouton «LIRE PLUS» et une photo, les artistes principaux en galerie photo + mini texte de présentation en dessous, Un bouton «acheter les tickets pour le festival», l inscription à la newsletter

5 FOOTER 3 catégories : NAVIGATION home line-up tickets camping galerie informations contact CONNECTEZ-VOUS Newsletter Contact Facebook Twitter LEGAL Conditions d utilisation Politique et confidentialité et les logos des partenaires intégrés dans le footer! + Green Monsters Festival - All Rights Reserved Vous vous assurerez de la cohérence de la mise en page grâce à l emploi de la grille 960 (vous n êtes toutefois pas limités à ce format une mise en page plein écran est à privilégier), et de la grille typographique. N oubliez pas d utiliser la grille et les repères afin que tout soit bien aligné. CHARTE GRAPHIQUE Vous avez toute latitude pour ce travail de conception graphique qui fera l objet de l évaluation de fin de semestre. Toutefois, comme en situation réelle, vous devrez vous appuyez sur un zoning et un gabarit réalisés sur papier et éventuellement sur Mockflow (vous devez les scanner et les inclure au PDF final), et respecter certaines contraintes : 1. Il vous faudra dans un premier temps opter pour une ligne graphique, une tendance qui soit compatible avec la thématique du site. Vous vous appuierez sur la planche de tendance réalisée préalablement dans le cadre de ce module. 2. Vous concevrez un visuel riche, mais sans surcharge. 3. Vous serez attentifs aux espaces de respiration et à la cohérence des marges et des alignements, de la distribution verticale ou horizontale des différents éléments. Vous devrez pour un résultat optimal utiliser tour à tour la grille 960 et la grille typographique.

6 4. Votre modèle graphique devra conjuguer au mieux l emploi de la photographie et d éléments graphiques de type illustratif ou typographique. 5. Vous veillerez également à exploiter au mieux la typographie tant pour le rendu visuel que pour la lisibilité. 6. Vous serez attentifs à l harmonie de l ensemble en évitant de combiner des couleurs ne pouvant s accorder, des ingrédients relevant de styles incompatibles, des polices renvoyant à des univers graphiques trop différents, voire opposés. 7. Enfin, donnez libre cours à votre créativité! Ceci reste avant tout un exercice d infographie. Dans Photoshop se fera tout l assemblage, le travail de mise en page et bien sûr le traitement des images. Dans Illustrator se fera la création du logo typographique, la création d éléments graphiques (pictogrammes, illustrations...). CRITÈRES DE NOTATION RICHESSE ET PERTINENCE DE LA MOODBOARD PRÉSENCE DU DOCUMENT DE SUIVI RESPECT DU SOMMAIRE IMAGES UTILISÉES MISE EN PAGE ZONING / GABARIT RESPECT DES CONSIGNES NAVIGATION UTILISATION DE LA GRID ET DES REPÈRES LOGO RETOUCHES D IMAGES TYPOGRAPHIE CHOISIE TEXTE CHOISI PRÉSENCE DES PICTOGRAMMES PRÉSENCE DES RECHERCHES NOMMAGE, DÉLAI ET FORMAT PDF Bon courage :)