Catégories
FCS FCS1-cours

Les modes de publication en ligne

Dans ce cours vous allez inventorier et tester plusieurs modes de publication de contenus sur le Web. Il sera question de plateformes d’édition et de publication auto-hébergée, d’éditeurs WYSIWYG, de langage et d’éditeurs Markdown. Ce cours vous permettra d’avoir un premier aperçu des formes de publication en ligne les plus simples.

Pour tirer profit de ce cours, vous devez avoir suivi les cours intitulés Le fonctionnement du Web et Contenu d’un dossier de page Web.

Utiliser une plateforme d’édition en ligne

Le moyen le plus simple de publier des contenus sur le Web est d’utiliser les services clés en main de plateformes proposant à la fois des outils d’édition intuitifs et un hébergement automatique des contenus édités. Je vous propose d’en examiner deux plus attentivement : Netboard et Google Sites.

Ne vous illusionnez pas, il faut consacrer un peu de temps à la prise en main de ces plateformes. Pour réaliser des sites satisfaisants, il va vous falloir faire des essais, produire des contenus adaptés, choisir des images, etc. Vous gagnerez un peu de temps en utilisant les modèles proposés sans chercher, dans un premier temps, à les modifier.

Utiliser la plateforme Netboard

Netboard se présente comme un outil en ligne gratuit et facile à prendre en main pour collecter, organiser et partager tout contenu Web. Il s’agit de publier ses textes, images, liens, vidéos, documents annexes, etc. sous forme de blocs d’infos (fiches ou cartes) rangés dans des onglets.

Un site Netboard complet détaille le mode d’emploi de la plateforme : https://jmd85.netboard.me/presentation/?tab=132247

➜ Si vous souhaitez avoir un bon aperçu sur Netboard, je vous propose de visionner la vidéo ci-dessousun prof d’anglais explique à d’autres profs comment utiliser Netboard.

Netboard peut donc servir à :

  • regrouper et partager des collections de liens (veille informationelle)
  • organiser et structurer la présentation de contenus pédagogiques (en tant qu’apprenant ou en tant qu’enseignant)
  • regrouper en mode collaboratif des documents sur une thématique
  • rassembler et partager une documentation sur un sujet précis
  • maquetter un site Web en testant la répartition des contenus sous différents onglets
  • etc.

En utilisant des dispositions de contenus simplifiées et des « skins » sobres, vous pouvez donner à vos sites Netboard une apparence simple et fonctionnelle.

Utiliser Google Sites

Google Sites permet de publier des contenus sous une forme visuelle très différente des sites Netboard. Le résultat s’apparente davantage à un site « professionnel ». Le revers de la médaille est une multiplicité d’options de personnalisation pouvant paraître complexes de prime abord.

Il est nécessaire d’avoir bien préparé son projet de publication en amont pour tirer parti de toutes les fonctionnalités proposées. Google propose quelques modèles à personnaliser. N’hésitez pas à utiliser ces modèles pour mettre au point votre premier site.

Vous trouverez une documentation détaillée sur le centre d’aide de Google. La vidéo ci-dessous montre la réalisation d’un site de quelques pages en une vingtaine de minutes, résumées par l’auteure (Lou) en 6 minutes 30. Lou est habituée à la publication en ligne, l’interface de Google Sites lui est familier. De plus, elle a pris le temps de produire plusieurs autres sites avec Google Sites avant d’en faire la présentation sur YouTube.

➜ Google site mériterait qu’on lui consacre un cours entier. L’essentiel à retenir est qu’il existe des moyens de publier des contenus en ligne sans avoir à saisir une seule ligne de code ni à transférer manuellement des fichiers sur un serveur distant.

Vous trouverez en ligne des tutoriels plus détaillés (attention de bien sélectionner les articles les plus récents car l’éditeur classique n’est plus disponible depuis novembre 2020). Voici un exemple de tuto assez complet : https://fr.techtribune.net/google/google-sites-comment-utiliser-le-createur-de-site-web-de-google/102077/

Utiliser un éditeur WYSIWYG

À partir du moment où vous envisagez de mettre en ligne vos contenus en utilisant les services d’un hébergeur, vous aurez à produire des pages HTML. Il vous faudra ensuite transférer ces pages chez votre hébergeur. Vous utiliserez pour cela un outil (nommé client FTP) tel que Filezilla. Voyez le cours consacré à l’utilisation de Filezilla.

Nous reviendrons plus tard à cette étape incontournable et aux solutions alternatives qui permettent aux internautes de lire vos pages HTML via une adresse Web valide.
➜ En attendant vous vous contenterez de lire vos pages HTML directement sur vos postes de travail, avec votre navigateur préféré.

Pour produire une page HTML doté d’un code source propre, il existe depuis de nombreuses années des éditeurs dit WYSIWYG (What You See Is What You Get = Ce que vous voyez est ce que vous obtenez). Ces outils permettent de générer une page HTML en structurant et stylisant du texte par le biais de sélections et de clics sur des boutons (à la manière d’un traitement de texte).

Utiliser rakko.tools

Parmi les outils disponibles en ligne je vous propose d’utiliser rakko.tools, basé sur l’éditeur TinyMCE

Je vous invite à consulter cette page Web, réalisée avec rakko.tools : https://graphizm.fr/fcs/rakko-tools. Il a fallu en compléter le code source pour rendre le fichier conforme aux normes du Web. Le plus gros du travail avait toutefois été fait automatiquement au moment de l’export HTML.

Utiliser d’autres éditeurs WYSIWYG

Les éditeurs WYSIWYG grand public ne permettent pas de manipuler confortablement le code source et d’enrichir ainsi une page Web. Pour effectuer cela convenablement, il est nécessaire d’utiliser des éditeurs WYSIWYG plus élaborés comme BlueGriffon ou Dreamweaver. Leur prise en main est plus laborieuse et leur prix beaucoup plus élevé !

Utiliser un éditeur Markdown

Le langage Markdown est un langage de balisage léger permettant de structurer un texte avant de l’exporter sous forme de page HTML, de fichier PDF, DOC, TXT, etc.

Des éditeurs Mardown en ligne permettent de travailler rapidement à l’élaboration de pages Web simples et présentées sobrement. Voici à quoi ressemble une mise en page effectuée avec stackedit.io :

La page ci-dessus, exportée au format HTML (option page stylisée avec sommaire — HTML styled with TOC ), s’affiche dans une fenêtre de navigation de la manière suivante :

Vous pouvez visualiser cette page en ligne en cliquant sur ce lien : https://graphizm.fr/fcs/stackedit/langage-markdown-toc.html

Utiliser d’autres modes de publication en ligne

Je me contenterai de les mentionner, sans entrer dans les détails car ils requièrent des compétences plus avancées pour pouvoir être utilisées facilement. Ces compétences seront pour la plupart acquises au fil de la formation FCS (niveaux 2 et 3). La préparation au titre pro Designer Web permet de compléter utilement ces compétences.

Utiliser des frameworks CSS

Un framework CSS est une boîte à outils dans laquelle se trouvent des instructions de stylisation prêtes à l’emploi. Les frameworks CSS (nommés aussi kits CSS) font gagner beaucoup de temps lors de la conception de pages Web élégantes.

Le framework CSS le plus souvent cité est Bootstraap. Le framework w3.css, étudié pendant la formation, est un framework CSS utilisé pour s’initier au maniement de ce type de boîte à outils.

Utiliser des CMS sans base de données

Un CMS sans base de données (nommé aussi CMS flat-file) est un système de gestion de contenus en ligne enregistrant les contenus du site dans des fichiers indépendants. Ils sont plus simples à mettre en œuvre, plus sûrs et plus faciles à maintenir que les CMS avec base de données.

Pour en apprendre davantage sur le sujet, je vous invite à consulter mes ressources mises en ligne sur Netboard.

Utiliser des CMS classiques et des plateformes de création de sites

Le CMS le plus populaire est de loin WordPress. Viennent ensuite Shopify, Joomla, Squarespace, Drupal et Wix. Parmi ceux-ci, Squarespace et Wix sont des plateformes de création de sites offrant un service complet alliant l’usage du CMS à l’hébergement du site en passant par la réservation du nom de domaine.

Catégories
FCIL FCIL-cours

Personnaliser un dessin vectoriel

Dans ce cours, vous allez apprendre à utiliser des outils en ligne vous permettant de modifier un dessin vectoriel. Vous pourrez ainsi envisager de créer des animations simple image par image.

Cette animation a été réalisée par Wilfried, un élève de la classe passerelle du lycée La Fayette.

Utiliser Vecta pour personnaliser un dessin

Dans le tuto ci-dessous, vous allez apprendre à utiliser Vecta, un éditeur vectoriel en ligne pour retoucher le dessin d’un avatar très simple.

Voici le personnage tel qu’il sera, une fois les retouches terminées :

Avant

Après

Le tutoriel complet

Un tutoriel en ligne vous permet, pas à pas, de prendre en main l’application Vecta.

Quand votre personnage sera prêt, vous pourrez créer des animations simples, ajouter des textes et plein d’autres effets. Nous verrons comment faire dans un prochain cours.

Catégories
FCS FCS1-exos

Coder sans coder

Dans les exercices qui suivent, vous allez manipuler des balises HTML virtuelles et reconstituer des structures simples par glisser-déposer (drag and drop).

Reconstituer une structure HTML simple

Le premier exercice est accessible à cette adresse : https://graphizm.fr/fcs/drag-and-drop-html/

➜ Il s’agit, en faisant glisser les balises de droite à gauche, de reconstituer schématiquement une structure HTML du type h1-intro-h2-p-p

Cliquez sur l’image pour faire l’exercice

L’introduction dont il est question est un simple paragraphe dont le contenu est affiché en gras.

Reconstituer une structure HTML plus complexe

Le second exercice développe la structure du premier exemple en ajoutant une feuille de style interne, un second titre h2 avec ses paragraphes puis un script d’animation.

Le premier exercice est accessible à cette adresse : https://graphizm.fr/fcs/drag-and-drop-html-css-js/

➜ Il s’agit cette fois, toujours en faisant glisser les balises de droite à gauche, de reconstituer schématiquement une structure HTML du type h1-intro-h2-p-p-h2-p-p intégrant les éléments ajoutés.

Cliquez sur l’image pour faire le second exercice
Catégories
CC1-exos Com-Créa

Un flyer dans Canva

Dans cet exercice, vous allez composer un flyer au format A4 en utilisant la plateforme d’édition en ligne Canva.

Vous allez utiliser une image de fond, une forme structurante et un bloc texte. Vous allez décliner le flyer et créer plusieurs variantes dans le même document, en testant diverses dispositions de la forme structurante et du texte.

Toutes les instructions nécessaires vous sont communiquées sur cette page Web.

Catégories
CC1-exos Com-Créa

Collecter des blocs dates

Dans cet exercice, vous allez repérer des blocs-dates composés de différentes manière et les collecter dans un tableau Pinterest.

L’ordonnancement visuel des éléments constitutifs d’un texte dans une page doit se faire en tenant compte de la nécessité de produire non pas une seule mise en page mais de nombreuses déclinaisons d’un même message.

Pour simplifier la mise en œuvre de ces déclinaisons sur divers supports ou produits de communication, il est souhaitable de constituer des blocs informatifs dont l’ordonnancement des éléments ne varie pas.

Sur l’image ci-dessus vous pouvez repérer plusieurs éléments typographiques constituant des blocs informatifs dont le bloc-titre et le bloc-date, ainsi que le bloc-url.

Vous découvrirez d’autres blocs typographiques en consultant la page Web intitulée Blocs typographiques – Exemples de composition.

Relever différentes formes de blocs-dates

Je vous invite à faire un relevé de blocs-dates sur plusieurs documents. Vous allez créer un tableau Pinterest regroupant des flyers, des affiches ou des encarts Web sur lesquels figurent des blocs-dates tous différents.

Catégories
FCS FCS1-cours

Le fonctionnement du Web

Dans ce cours vous allez découvrir comment fonctionne le Web et réaliser plusieurs activités en lien avec ce sujet. De nombreux liens vers des ressources externes vous seront proposés, vous pourrez les explorer tranquillement, le moment venu.

Utiliser une analogie pour comprendre le Web

Pour commencer, je vous invite à lire les trois premières partie de l’article intitulé “Le fonctionnement du Web”, sur le site developer.mozilla.org :

L’idée à laquelle je vous invite à être attentif est celle ci :

“Faisons un parallèle entre le Web et une rue. D’un côté de la rue, il y a une maison qui correspond au client. De l’autre côté,  un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.”

Faites un dessin commenté (façon sketchnoting) en vous inspirant de l’analogie développée dans la deuxième partie de l’article mentionné ci-dessus.

Votre dessin commenté sera partagé pour en contrôler l’exactitude (mais non la qualité graphique) 😉

Créer une infographie

Pour fixer davantage dans la réalité les concepts abordés à l’étape précédente, je vous propose de réaliser vous même une infographie en utilisant des éléments graphiques mis à votre disposition (cliquez sur l’image ci-dessous).

Si vous ne parvenez pas à faire glisser les éléments de la zone de droite vers la zone de gauche, rafraîchissez la page (ctrl/cmd-R).

➜ Voici les consignes à respecter pour positionner les différents éléments constitutifs d’un large réseau informatique.

Pour connecter les éléments du réseau entre eux, je vous invite à utiliser (en présentiel, sur Mac) l’application Aperçu. En effet, cette application dispose d’une fonctionnalité permettant de simuler un cable de liaison entre 2 box. Il vous faudra pour cela effectuer une capture d’écran de votre “réseau”.

Vous pourrez légender votre infographie en utilisant Aperçu ou l’application Skitch, disponible sur votre poste de travail en présentiel.

Avant de passer au chapitre suivant, je vous invite à terminer la lecture de l’article publié sur developer.mozilla.org. Vous allez en effet avoir besoin de quelques informations supplémentaires pour bien comprendre les vidéos proposées plus bas.

Visionner quelques vidéos

La première vidéo que je vous propose de visionner survole le sujet mais sans oublier aucun point essentiel.

Vidéo de 3 minutes et 4 secondes

La seconde vidéo offre un panorama complet de ce qui se passe lorsque vous regardez une vidéo en ligne. Pour éclairer leur propos, les auteurs abordent tous les points avec lesquels vous vous êtes déjà familiarisés (plus quelques autres dont je vous ai peut-être déjà parlé…).

Je vous invite à regarder cette vidéo chez-vous, tranquillement, pour approfondir le sujet.

Vidéo de 9 minutes et 26 secondes

Compléter une carte heuristique

Toutes les réalités dont il est question sont abondamment documentées sur le Web. Vous allez rassembler sur une carte mentale numérique toutes les références que vous pourrez trouver sur les différents points abordés jusqu’à maintenant.

Téléchargez la carte heuristique au format .xmind pour pouvoir l’éditer en utilisant l’application XMind, disponible sur votre poste de travail. Si vous êtes chez vous, téléchargez la version gratuite de XMind8 et installez-la sur votre ordinateur.

Les explications concernant la prise en main de XMind et la manière de procéder pour compléter cette carte vous sont apportées de vive voix, en présentiel ou en distanciel.

Faire un peu d’histoire

L’histoire du Web est pleines d’anecdotes amusantes ou dramatiques. Elle commence beaucoup plus tôt qu’on se l’imagine et connait des rebondissements inattendus. Voici quelques ressources disponibles pour parfaire votre culture Web.

Liens sur l’histoire d’Internet

Liens vers Wikipedia

Catégories
IMeP-DW

Formations IMeP et DW

Au fil de cette présentation vous allez découvrir comment se découpent les formations pour la préparation aux Titres Professionnels Infographiste Metteur en Page (IMeP) et Designer Web (DW).

Il sera également question de communication et de processus éditorial. En effet, les formations IMeP et DW s’insèrent dans une réalité professionnelle en lien direct avec l’édition et la communication visuelle.

Vous découvrirez ici le fonctionnement de la roue des moulins de la com, la farine de concept et les autres ingrédients du pain du savoir

Repérer les articulations entre IMeP et DW

Deux niveaux différents et une succession logique

Les 2 titres professionnels visés correspondent chacun à un diplôme de niveau distinct. Le Titre Pro IMeP est un diplôme équivalent à un Bac Pro. Le Titre Pro DW est un diplôme équivalent à un BTS. Les compétences nécessaires pour valider le premier sont des pré-requis pour envisager de valider le second.

Des modules en commun

Plusieurs formations spécifiques ou modules particuliers sont communs aux 2 parcours.

  • Les compétences requises en PAO sont acquises au cours de premiers modules communs. Les premiers TP d’évaluation des compétences professionnelles sont communs aux 2 parcours.
  • Des cours de droit sont dispensés dans les 2 formations.
  • Un cours sur la manière de mener une veille informationnelle et technologique (VIT) est commun aux 2 formation, même s’il est dispensé à un moment différent pour les uns et les autres
  • La formation permettant à chacun de construire un diaporama numérique (PVN) afin de présenter son projet professionnel devant le jury du Titre pro est dispensée à tous.
  • Un module dédié à la gestion de projet professionnel est proposé à chacun dans les 2 parcours.
  • Les modules 1 et 2 de la formation FCS (Fondamentaux de la Création de Site – Parcours IMeP) abordent des thématiques approfondies sur le parcours DW.

Comme vous le constatez, il n’est pas envisageable de faire du design graphique à un niveau professionnel sans avoir des compétences dans l’édition plurimédia.

Des formateurs polyvalents

Plusieurs formateurs animent des formations pour la préparation des deux Titres Professionnels.

  • Vert clair : Benoit BARBE
  • Magenta : Yves GOGUELY
  • Jaune : David GOUINEAU
  • Vert foncé : Intervenante
  • Brun rouge : Isabelle NORDMANN et Karine MARGUERITE
  • Violet : Etienne RODDIER
  • Bleu foncé : Jérôme CRECY
  • Bleu clair : Marcel GOUTTE

L’édition plurimédia

L’édition plurimédia est le secteur professionnel sur lequel s’appuie les deux parcours IMeP et DW. Pour cerner plus précisemment ce secteur professionnel, je vous propose de prendre connaissance de ce qu’on nomme le cycle ou le processus éditorial.

La roue des 8 P

Il s’agit des étapes par lesquelles sont éditées tous les contenus, quel que soit le média utilisé pour communiquer ces contenus au public. Toutes ces étapes peuvent être désignées par un mot commençant par la lettre P (… P comme Plurimédia).

Les opérations menées à chaque étape du processus

Pour approfondir la question, je vous propose de réfléchir à toutes les opérations à mettre en œuvre lors de chaque étape du processus éditorial.

➜ Notez ces opérations sur les pages d’un livret réalisé avec une feuille A4, en suivant le découpage et le pliage indiqué sur ce mode d’emploi.

Vous constaterez que ces opérations doivent être menées aussi bien quand il s’agit de produire des imprimés que lorsqu’il s’agit de produire des sites à mettre en ligne.

Les moulins de la com et la farine de concept

➜ Les 8 P forment une roue de moulin. Ce type de roue actionne les moulins de la communication. Ceux-ci, comme tout moulin, produisent de la farine, livrée dans divers emballages (pages, écrans, diapositives numériques, etc.).

Sur le schéma de la roue, l’ordre des opérations du processus est inversé, de manière à ce que l’eau qui actionne le moulin exerce sa pression dans l’ordre chronologique du cycle.

Cette farine est essentiellement de la farine de concept ou de la farine d’idée (2 variétés de céréales cérébrales couramment cultivées)

L’énergie qui actionne la roue est celle de la connaissance et de l’expérience acquise. “5% d’inspiration et 95% de transpiration…”, certains auteurs sont plus réalistes et affirment produire leurs œuvres avec 1% d’inspiration créative et 99% d’efforts persévérants ! L’édition plurimédia est avant tout une méthode de travail rodée et expérimentée.

Les formations aux titres pros IMeP et DW apportent aux participants toutes les compétences requises pour produire de la farine d’idée et la livrer au(x) commanditaire(s) dans de solides et superbes emballages.

Les formateurs-trices et les intervenant(e)s extérieur(e)s transmettent aux formé(e)s, stagiaires ou apprenant(e)s de la farine de concept, emballée soigneusement dans divers types de contenants.

Les ingrédients du pain du savoir

La farine de concept n’est pas très digeste en l’état. Elle se consomme mélangée à de l’eau, du sel et divers ingrédients. La pâte obtenue doit ensuite être cuite au four ou sur une plaque chaude.

Il appartient aux formés de faire leur pain ! Avoir appris à apprendre est un prérequis, n’est-ce pas ? Les pédagogues rappellent (ou apprennent…) aux formés comment fabriquer le pain du savoir et comment le faire cuire dans le four de la mise en pratique.

Les ingrédients du pain du savoir

Le public visé par vos actions de communication doit lui aussi produire son pain. La farine dans un bel emballage n’est pas encore du pain… et sans farine, pas de pain !

Le pain du savoir se pétrit avec les mains du bon sens, dans le pétrin du contexte de production 😉

Le four de la mise en pratique est alimenté par les contraintes du projet de communication (les spécifications du cahier des charges).

Apprendre à apprendre

Pour esquisser le sujet, voici une note graphique faisant l’inventaire de 10 manières d’apprendre (pour tous les publics d’apprenants).

sketchnote de Bénédicte Vallette d’Osia (https://www.pinterest.fr/BenedicteValdo/_saved/)

Les outils d’aide à l’apprentissage

Outil de collecte de favoris

Outils de mind mapping

Outils d’épinglage

Catégories
IMeP-DW

Infographies – bilans

Pour vous aider à faire le point sur les formations CC et FCS, j’ai réalisé quelques infographies à imprimer et à compléter par vos soins. Ces bilans peuvent être réalisés à tout moment, pendant ou après la (ou les) formation(s).

Ces infographies sont des outils de pensée visuelle. Complétez les avec soin et conservez une trace de votre travail car cela vous aidera à préparer votre entretien professionnel avec le jury du Titre Pro.

L’expédition en montagne

À partir du camp de base, vous avez entrepris l’escalade de la montagne du design graphique ou/et de la publication en ligne. Un premier camp a été monté à l’altitude du niveau 1, puis un second au niveau 2. Un dernier camp intermédiaire a été monté à l’altitude du niveau 3. La dernière partie de l’itinéraire menant au titre professionnel reste à parcourir. La reconnaissance par les pairs, les partenaires et les clients seront également à conquérir.

L’ascension de la montagne du design graphique et/ou de la publication en ligne

Les espaces de commentaires peuvent être divisés en 2 parties, une partie pour les points positifs, une autre pour les points négatifs.

Vous pouvez aussi mettre en place 2 parties, l’une pour la formation Com-Créa et l’autre pour la formation FCS (Fondamentaux de la Création de Site).
Des commentaires peuvent être ajoutés en dehors des cadres.

La progression linéaire

Les remarques effectuées plus haut concernent également cette infographie. La progression indiquée mentionne les 3 niveaux des formations CC et/ou FCS.

La progression en 3 étapes principales

Le nom abrégé de la formation est à mentionner dans la banderolle.

La carte mentale

Entre carte heuristique et parcours en 3 étapes, cette infographie est à commenter librement. D’autres cercles peuvent se raccrocher à ceux figurant sur la carte.

La carte mentale et le parcours en 3 étapes

L’analyse SWOT

Cette infographie s’inspire des matrices d’analyse SWOT ou FFOM : Strengths (Forces), Weaknesses (Faiblesses), Opportunities (Opportunités), Threats (Menaces). Outil d’analyse stratégique utilisé en entreprise, ce type de matrice permet d’évaluer la pertinence d’une action.

Dans la perspective de continuer ou non votre formation, de rechercher un poste de salarié ou d’envisager sérieusement de créer votre entreprise, mener une analyse de ce type est indispensable.

Les termes utilisés ont été légèrement modifiés pour vous faciliter une première approche.

  • Facilités extérieures : appuis et opportunités
  • Facilités intérieures : forces et accélérateurs
  • Difficultés extérieures : obstacles et contrariétés
  • Difficultés intérieures : faiblesses et freins
Matrice d’analyse des appuis, des forces, des obstacles et des faiblesses

N’hésitez pas à faire des recherches en ligne sur les matrices d’analyse SWOT et la manière de les utiliser.

Catégories
CC3-cours Com-Créa

Schémas de synthèse

Ce cours présente une série de schémas de synthèse, conçus dans le but de vous permettre d’avoir un aperçu global de l’ensemble des sujets abordés en formation Com-Créa.

La plupart des schémas présentés mettent en évidence une relation chronologique entre des opération de design graphique. La manière dont ces opérations se succèdent dans la pratique est souvent itérative. C’est à dire qu’une suite d’opérations est répétée avant de passer à la suite du processus.

Améliorer une mise en page – niv 1

Le cycle éditorial

Le cycle éditorial peut se résumer en 6 étapes désignées chacune par un terme commençant par la lettre P :

  • Préparation
  • Production de contenus
  • Présentation
  • Publication
  • Post-publication
  • Préservation

Les opérations de création graphique

Les 3 premières étapes de la création graphique (production de contenus et présentation) se résument en 3 opérations :

  • Structuration
  • Stylisation
  • Composition

Chacune de ces étapes se résume à son tour par une série d’opérations primordiales. La structuration combine 3 opérations clés, la stylisation combine 7 choix (dont 3 choix primordiaux) et la composition combine 3 choix importants (de nombreux autres s’ajoutant à ces derniers).

Concevoir, présenter et finaliser un logo – niv 2

Le brief

Tout projet de communication visuelle commence par un brief. Les lettres BRIEF synthétisent le déroulement de la première étape de tout processus de design graphique :

  • Brief — questionnement
  • Recherches — documentation thématique
  • Information — prise en compte du contexte d’utilisation
  • Empathie — prise en compte de l’expérience des utilisateurs
  • Formulation — rédaction d’un cahier des charges précis (avec reformulation des attentes du commanditaire ou du client)

Les étapes de création d’un logo

La création d’un logo suit une série de 8 étapes, du brief à la finalisation de la charte graphique ou de la planche de marque :

  • Brief (rédaction d’un cahier des charges)
  • Tendances (réalisation d’une moodboard)
  • Styles (mise au point d’une planche de synthèse avec nuancier, combo typo, formes, etc.)
  • Recherches (production d’une planche manuscrite et d’une planche vectorielle)
  • Propositions (présentation de 3 propositions : 1 sûre, 1 originale et 1 créative)
  • Validation (acceptation d’une seule proposition ou d’une combinaison de plusieurs propositions)
  • Déclinaisons (développement d’une véritable identité visuelle)
  • Charte graphique (livraison d’une planche de marque plus ou moins détaillée)

Dans un contexte de production où il s’agit avant tout de gagner du temps, un processus court est envisageable (fléchage ocre ci-dessus) :

  • Brief
  • Recherches
  • Propositions
  • Validation

Lors des mises en situation professionnelles ou TP, en fin de niveaux 2 et 3, le processus mis en place est le suivant :

  • Brief
  • Planche de tendances
  • Recherches manuscrites et vectorielles
  • Validation
  • Planche de marque

Illustrer des produits de communication – niv 3

La mise en œuvre d’un projet de communication visuelle suit les mêmes étapes que la création d’un logo. La dernière étape est remplacée par la livraison des éléments attendus pour l’impression ou la publication en ligne.

Les points abordés au niveau 3 dans le cadre d’un projet d’illustration de produits de communication se résument en 3 opérations dont les premières lettres forment l’acronyme MDR :

  • Modularisation
  • Développement
  • Rationalisation
Catégories
IMeP-DW

Questionnaires

Vous voici arrivés au bout de la formation et du ou des module(s) suivis dans le cadre du GRETA Clermont-Auvergne. Les questionnaires qui suivent concernent :

  • les formations Com-Créa (CC) et Fondamentaux de la Création de Site (FCS) dispensées dans le cadre de la préparation à la validation du Titre Pro IMeP ;
  • la formation Rédaction Web et Référencement Naturel (RWRN) et la formation à l’utilisation du framework w3.css (W3CSS), dispensées dans le cadre de la préparation à la validation du Titre Pro Designer Web.

Le but de ces questionnaires est de recueillir votre avis concernant les moyens déployés en ligne pour vous apporter le soutien documentaire nécessaire lors de votre formation professionnelle.
En effet, la forme des supports pédagogiques est en constante évolution et il me semble important de l’adapter aux besoins effectifs des apprenants, tout en prenant en compte les objectifs pédagogiques visés et ma propre conception de l’accompagnement digital en formation.

Je vous invite à répondre aux questionnaires en toute franchise, sans chercher à ménager ni votre formateur ni l’encadrement administratif. Soyez objectifs et factuels, cela permettra d’améliorer les cours en ligne en toute connaissance de causes.

Les champs marqués par un astérisque rouge doivent être obligatoirement remplis.

Lecture des cours (sondage)

Utilisation des cours (formulaire)