Catégories
IMeP-DW

Les canaux du diaporama commenté

Dans ce cours, vous allez identifier les différents éléments constitutifs d’un diaporama commenté (ou présentation visuelle et orale). Pour cela, je vous invite à envisager l’exposé accompagné de diapositives projetées sous l’angle des canaux de communication utilisés.

Identifier Visio, Audio et Gestuo

Quoiqu’il se dise et s’écrive en ligne sur le sujet, il est certain que la mise en œuvre d’une présentation visuelle, commentée en direct devant un public, passe par 2 canaux sensoriels (vue et ouïe) et 3 canaux de communication (visuel, auditif, gestuel).

Une présentation visuelle commentée est un produit de communication audio-visuelle. Le public observe — vision — cependant 2 choses bien distinctes : d’une part les images projetées (communication visuelle) et d’autre part la posture du commentateur (communication gestuelle). Le public prête aussi l’oreille — audition — aux commentaires (communication verbale) et aux intonations de voix du commentateur (communication paraverbale).

Pour donner un peu de vie à ces concepts, je vous propose de faire plus ample connaissance avec Visuo, Audio et Gestuo.

Utiliser tous les canaux et toutes les formes de communication

De nombreuses statistiques circulent sur l’importance du visuel par rapport à l’auditif, au vocal et au gestuel. Sont-elles fondées, vraies ou fausses (voir l’article de David Vellut sur les neuromythes). L’objectif visé est l’optimisation de la communication sous toutes ses formes.

Vous lirez sûrement des articles sur les travaux d’Albert Mehrabian. En voici un résumé visuel :

Les recherches menées par Albert Mehrabian datent de 1967. Elles ont souvent été remises en question ou très “librement” interprétées (lire l’article de Wikipedia à ce sujet). D’autres travaux ont été effectués depuis.

➜ Une recherche Google sur “intonation de voix et communication para verbale” permettra de vous faire une idée plus précise sur le sujet.

Retenez que l’important passe par le visuel et le paraverbal. Soignez donc vos compositions graphiques, choisissez vos couleurs et votre typographie avec soin. Lorsque vous commentez des diapositives, veillez sur votre gestuelle et sur le ton de votre voix !

Catégories
IMeP-DW

Construire et commenter un diaporama (DW)

Ce cours apporte quelques précisions sur le contenu à présenter dans le cadre du passage du titre pro Designer Web. Il vient en complément des parties générales du cours sur la construction et le commentaire d’un diaporama pour le titre pro IMeP.

Identifier les données du référentiel de certification DW

Le référentiel du titre pro Designer Web est téléchargeable sur le site de l’AFPA.

Voici ce qui est indiqué concernant la suite de l’entretien avec le jury (la première partie étant consacré à la production réalisée lors de la mise en situation professionnelle) :

Le candidat dispose de 25 minutes pour présenter au jury sur un poste
informatique :

  • un site Web adaptable à différents périphériques, qu’il a réalisé à partir
    d’un système de gestion de contenu (CMS) dans le cadre d’un projet
    professionnel ;
  • un dossier de conception du site Web réalisé ;
  • une animation destinée à promouvoir le(s) produit(s) ou service(s)
    proposé(s) dans le site Web réalisé. Cette animation est adaptée à une
    publication sur le Web.

Informations complémentaires concernant le questionnement à partir de production(s) :

  • Le site Web réalisé dans le cadre du projet ne doit pas être le press-book du candidat. Il peut être réalisé pour une association, ou tout type de structure ou organisation. Il doit avoir été testé pour tenir compte des retours utilisateurs
  • Le dossier de conception du site est présenté au jury sous forme numérique au format « .pdf ». Il doit comprendre de 10 à 20 pages-écrans. Sa mise en page doit privilégier la lisibilité et la hiérarchisation des informations. Il doit décrire l’objectif, la cible, et l’arborescence du site Web réalisé. Il doit contenir des schémas de type wireframe ou zoning, une charte graphique ou une planche de tendances.
  • Le press-book professionnel est à réaliser sous forme numérique. Il doit contenir des productions professionnelles complémentaires (entre 10 et 20) réalisées par le candidat (ex. : design de sites, sites Web, maquettes, illustrations). Le choix de ces productions est laissé libre au candidat. Le candidat peut choisir de proposer au jury de visualiser le press-book sur un poste informatique ou sur un périphérique mobile type tablette

Définir le rôle de la présentation à commenter

Les données du référentiel du titre pro Designer Web permettent à l’équipe pédagogique du GRETA Clermont-Auvergne de proposer plusieurs mises en œuvre en fin de formation.

Les candidats à la validation du titre professionnel Designer Web sont invités à présenter un diaporama complet permettant aux membres du jury de prendre connaissance des éléments à évaluer. Il s’agit de présenter, par le biais de diapositives séquencées de manière structurée, les réalisations suivantes :

  • un site Web “responsive” réalisé avec un CMS (WordPress) dans le cadre d’un projet professionnel mené en autonomie — Ce site est mis en ligne par chaque candidat sur le serveur distant le plus adapté au projet ;
  • une animation de promotion d’un produit ou service du site réalisée avec AnimateL’utilisation d’un autre outil est envisageable, du moment que le format de diffusion de l’animation est adapté à l’intégration dans un site Web ou sur les réseaux sociaux ;
  • un dossier ou journal de conception du site, élaboré numériquement de manière à être présenté hors ligne, projeté, imprimé ou hébergé en ligne — L’impression du dossier est envisageable par reprographie (avec concertation préalable des acteurs concernés) dans le cadre de l’atelier d’imprimerie du Pôle Plurimédia du lycée La Fayette ;
  • un portfolio en ligne présentant divers produits de communication réalisés lors de la formation ou en dehors de celle-ci — La réalisation de ce portfolio est l’occasion de promouvoir les compétences attendues par des éventuels recruteurs ou partenaires du secteur.

La présentation visuelle à construire pour pouvoir la commenter face au jury est le ciment des quatre productions mentionnées plus haut.

Notez que les cibles visées par ces quatre produits de communication (auxquels s’ajoute la présentation visuelle commentée) sont différentes.

La cible du site Web et de l’animation intégrée est le public auquel le site est destiné. La cible du dossier de conception et de la présentation visuelle commentée est le jury du titre professionnel DW. La cible du portfolio est composée des recruteurs et partenaires futurs de chaque candidat.

Structurer la présentation visuelle et orale

Une présentation visuelle se conçoit et se finalise comme tout produit de communication. Les principales informations à ce sujet sont disponibles dans les chapitres dédiés du cours sur la construction et le commentaire d’un diaporama pour le titre pro IMeP.

La spécificité de la présentation à commenter devant le jury du titre pro Designer Web nécessite quelques aménagements supplémentaires.

Utiliser le plan type

Parmi les différents plans utilisables, dans le conteste de la validation du titre, un plan se dégage aisément du contenu à présenter :

  • Titre
  • Intro et/ou sommaire
  • La conception du site Web et la production de ses contenus
  • La présentation du site Web mis en ligne
  • Le portfolio personnel
  • Les perspectives professionelles
  • Conclusion et/ou remerciement

Optimiser le temps imparti

Le temps imparti (25 minutes en tout) laisse donc 4 minutes pour présenter chaque section et 1 minute pour la mise en route en projetant la diapo titre.

Il est habituel de prévoir 1 minute de commentaires par diapositive. Cela nous conduit à envisager 4 ou 5 diapositives par section (selon que nous comptons ou non la diapositive de sous-titrage présentant la section).

Prendre en compte les spécificités du contexte

La présentation d’un site Web ou d’un document accessible en ligne passe nécessairement par la consultation du site pendant la présentation.

Il est inutile de prévoir des diapositives montrant des captures d’écran d’un site auquel vous pouvez avoir accès depuis le poste utilisé.

Dans la présentation envisagée, 2 documents sont nécessairement en ligne : le site Web et le portfolio. Des liens, intégrés dans les diapositives, doivent permettre à l’orateur d’accéder au site à montrer et au portfolio à présenter rapidement.

Présenter le dossier de conception

La mise en ligne du dossier de conception est envisageable, dans la mesure où cela peut faciliter sa présentation. Ce dernier point n’est pas en contradiction avec la possibilité de permettre au jury de consulter une version papier du dossier de conception.

➜ Interrogez-vous sur la forme à donner à votre dossier de conception en fonction de la manière dont vous envisagez de le porter à la connaissance du jury.

  • Quel format numérique allez-vous adopter ?
  • Quelle orientation allez-vous choisir pour les pages ou les écrans
  • Quelle quantité d’information allez-vous présenter sur chaque page/écran
  • La consultation de votre dossier se fera-t-elle de manière fluide et intuitive ?

Présenter des planches imprimées

Imprimer en reprographie quelques unes des planches clés du dossier est vivement conseillé (planche de tendances — moodboard — ou planche de style — style tile).

Ces documents imprimés sont à remettre au jury en cours de présentation, au moment opportun.

Choisir l’outil de finalisation du diaporama

L’outil le plus simple à utiliser est celui avec lequel vous êtes le plus à l’aise pour créer des diaporamas.

Cela peut être Powerpoint ou Keynote, Prezi ou Focusky, ou n’importe quel autre éditeur de présentations visuelles.

Plusieurs plateformes permettent de créer directement en ligne des diaporamas très efficaces : canva.com, genial.ly, beautiful.ai, etc. Les services proposés ne sont pas entièrement gratuits. La plateforme la plus intéressante à utiliser dans sa version gratuite est probablement Canva. Son utilisation nécessite toutefois un apprentissage plus ou moins long selon les habitudes déjà prises.

Les designers graphiques, dont la formation privilégie l’utilisation professionnelle des logiciels Illustrator Photoshop et InDesign, choisissent généralement de réaliser leurs diaporamas avec ces outils.

Du fait de leurs compétences en intégration HTML-CSS-JS, les designers Web disposent d’un choix bien plus large. Il existe en effet des outils, mis au point dans le milieu des développeurs, faciles à prendre en main et souvent amplement satisfaisants. En voici une liste abrégée :

  • Reveals.js, le plus utilisé par les développeurs
  • Slide, la version en ligne du précédent (pour les débutants)
  • Shower, un framework très facile à prendre en main
  • Big, le plus surprenant de la liste (… à télécharger sur Github)

La qualité de votre présentation ne repose pas sur l’outil utilisé pour éditer vos diapositives ! C’est la qualité de votre structuration (plan global), la lisibilité de vos contenus (textes et images) et la qualité du commentaire qui les complète qui font de votre diaporama commenté un produit de communication efficace.

Vous trouverez une liste complète des outils de présentation visuelle, et un peu plus d’informations concernant les présentations visuelles commentées (PVC) sur y-goguely.netboard.me

Différencier slidedoc et diaporama commentée

Les nombreux gabarits de diaporama disponibles en ligne mélangent deux type de présentations visuelles : les diaporamas à lire sans commentaire et les diaporama à commenter devant un public.

Les premiers se nomment slidedocs. Ils sont présentés en détail par Nancy Duarte dans un diaporama disponible sur Slideshare. Ce sont des documents à lire à l’écran. Ils n’ont pas vocation à être projetés. Les diapositives sont chargées. Les texte sont longs. On approche ici du concept de livre électronique (e-book)… surtout quand le document fait plus de 150 pages !

Les seconds types de diaporamas sont des présentations visuelles commentées. Ces diaporamas sont destinés à être projetés et accompagnés d’un exposé oral. Les visionner sans le commentaire du présentateur prive le lecteur d’une grande partie de l’information. Les images sont impactantes, les textes sont brefs… mais il manque vraiment quelque chose !

Il est possible de se tenir à mi-chemin entre les 2 concepts. À condition toutefois de proposer des textes courts présentés de manière aérée.

Quelle formule allez-vous adopter pour la présentation de votre projet professionnel face au jury du titre pro ?

Mettez-vous à la place du jury, imaginez-vous en train de présenter votre travail, faites la présentation commentée que vous avez mise au point devant un public test (proches, parents, ami(e)s, etc.)… Vous trouverez ainsi, en acceptant les critiques constructives, des solutions pertinentes et convaincantes !

Catégories
CC3-exos Com-Créa

Créer une mascotte

Lors de cette activité pratique, vous allez réaliser une mascotte simplifiée en lien avec l’identité visuelle d’une entreprise. Vous effectuerez des recherches sur le sujet, guidés par les consignes données et les ressources mises à votre disposition sur Netboard et sur Pinterest.

Suivre un processus de design

La création d’une mascotte suit le même processus que la création d’un logo (voir niveau 2). Les étapes du processus sont celles du design graphique en général :

  • Brief et rédaction du cahier des charges
  • Documentation marketing et sectorielle
  • Planche de tendances
  • Arbre thématique
  • Planche de style (formes, proportions, couleurs, traitement graphique)
  • Recherches graphiques (premières esquisses)
  • Vectorisation et prototypage
  • Tests et affinage
  • Propositions au client
  • Finalisation et charte d’utilisation
  • Utilisation et retours sur l’utilisation
  • Débriefing avec l’équipe de design et le client
Processus du design thinking

Il s’agit dans un premier temps de s’immerger dans le projet, les besoins du client et des utilisateurs, les tendances du moment dans le domaine concerné (étape formalisée par le brief, la documentation au sens large, la rédaction du cahier des charges et la planche de tendances).

Dans un second temps, il s’agit de définir le ou les axes de création sur lesquels vont se baser les recherches graphiques (arbre thématique, planche de style, premières esquisses)

Dans un troisième temps, il s’agit de réaliser vectoriellement la ou les propositions au client, en prenant soin de les tester et de les affiner si nécessaire au préalable.

Enfin, la dernière série d’étapes concerne la finalisation de la mascotte en la déclinant pour les différents usages envisagés et en concevant sa charte d’utilisation (charte graphique).

Vous pouvez visionner un processus complet de création de mascotte sur behance.net, depuis les croquis préparatoires jusqu’aux intégrations en vidéo et sur salons promotionnels.

➜ Sans aller jusqu’à ce niveau de professionnalisme, vous êtes invités, au cours du niveau 3 de la formation Com-Créa, à réaliser une mascotte simple en suivant la démarche indiquée. Vous pouvez vous baser sur les projets de logo menés au niveau 2 de la formation ou entreprendre une création pour répondre aux besoins d’une marque que vous connaissez.

Incarner les caractéristiques d’une entreprise

La mascotte incarne des valeurs de l’entreprise, elle donne corps à tel ou tel aspect de la vie de l’entreprise (sa production, ses services, son point fort, sa raison d’être, etc.). Voici une liste de quelques éléments d’une entreprise “incarnables” par une mascotte :

  • Le nom de l’entreprise (ex : Miss Queen > mascotte reine)
  • Un produit créé par l’entreprise (ex : fruit > mascotte fruit)
  • Un ingrédient d’un produit (ex : chips aux crevettes > mascotte crevette )
  • Le bâtiment de l’entreprise (ex : tour Eiffel > mascotte tour Eiffel)
  • Les utilisateurs du service de l’entreprise (ex : le stade G. Guichard > mascotte footballeur)
  • Les bénéficiaires des services de l’entreprise (ex : société de protection des ours blancs > mascotte ours blanc)

Utiliser la symbolique animalière

Selon les cultures, les animaux sont dotés de traits de caractère qui leur permettent d’incarner des valeurs, des conduites à tenir. Dans la culture occidentale, je vous propose quelques repères.

Identifier les traits de caractères animaliers

  • Les nourriciers : vaches, pélicans
  • Les protecteurs : lions, tigres
  • Les voyageurs : hirondelles, oies
  • Les royaux : aigles, lions, cerfs
  • Les laborieux : abeilles, fourmis
  • Les donateurs : cigognes
  • Les bâtisseurs : castors, hirondelles
  • Les résistants au froid : ours polaires, manchots, pingoins
  • Les bavards : peroquet, maynate
  • Les sorciers et magiciens : hiboux, chouettes, corbeaux, chats noirs, araignées, chauve-souris
  • Les colériques : rhinocéros, bouledogues
  • Les économes : écureuils, fourmis
  • Les gourmands : ours
  • Les voraces : cochons, sangliers
  • Les météorologues : grenouilles
  • Les malins : renards, singes
  • Les méchants : loups, araignées, chauves-souris, guêpes, crocodiles
  • Les nonchalants : koalas, paresseux, gros ours
  • Les musiciens : cigales, grillons
  • Les prétentieux : coqs, paons
  • Les forts : chevaux, bœufs, taureaux
  • Les sages : hiboux, éléphants
  • Les doux : biches, brebis
  • Les indépendants : chats
  • Les fidèles : chiens, colombes
  • etc.

Pour en savoir plus sur le sujet : https://www.wikiwand.com/fr/Symbolique_des_animaux

Choisir le style graphique d’une mascotte

Le choix du style graphique d’une mascotte est guidé par les recherches effectuées sur les tendances et les codes du secteur concerné. Les mascottes ci-dessus (guêpe et taureau) sont adaptées à l’identité visuelles de clubs sportifs. Un puissant contour, un relief contrasté mis en valeur par le trait, un traitement vectoriel franc et une expressivité agressive correspondent aux attendus des clubs et de leurs supporters.

Choisir un niveau de complexité et un mode de rendu

Le style graphique d’une mascotte repose pour une part sur le mode de rendu graphique et pour une autre part sur la complexité du dessin (le niveau de détail mis en œuvre). Le tableau ci-dessous vous aide à différencier trente styles graphiques combinant niveau de complexité (ou de réalisme) et modes de rendu (du simple tracé à la mise en œuvre d’un relief avec ombres et reflets).

Il est plus facile de créer une mascotte dans les styles des trois premières colonnes du tableau. Le choix du style “cartoon modulaire” permet la réalisation d’animations détaillées assez facilement.

Animer ou ne pas animer la mascotte

En tenant compte de votre niveau de technicité, tant en dessin qu’en PAO, choisissez un style graphique que vous pourrez exploiter sans difficulté dans la suite du projet. En effet, il importe de prendre en compte l’éventuelle animation de la mascotte et le nombre de dessins à réaliser pour cela.

Mascotte Kanabe – Création : Studio Ghibli
Mascotte du Queen’s Cafe à Hong Kong
Source : https://eepmon.com/2016/07/queens-cafe-branding-design/

Attention : l’expression “animer une mascotte” renvoie très souvent au fait d’utiliser un acteur costumé pour incarner la mascotte (lors d’un événement en lien avec la marque promue par la mascotte).

Associer un univers à la mascotte

Une mascotte est comme un héros de bande dessinée ou un personnage de dessin animé. Elle évolue dans un univers personnel, original, elle est porteuse d’une histoire et peut être accompagnée d’un(e) ou plusieurs ami(e)s ou partenaires.

Personnaliser des gabarits existants

Pour gagner du temps ou suppléer à des compétences de dessin insuffisantes, vous pouvez personnaliser des gabarits vectoriels proposés en ligne sur diverses plateformes.

Vous trouverez quelques gabarits gratuits sur freepik.com et de nombreux gabarits payants sur graphicmama.com. Graphic Mama propose quelques ressources gratuites sur son blog.

Mascotte créée en personnalisant une des poses de la planche précédente

Choisir l’angle de vue et la pose de la mascotte

Pour rendre la mascotte plus vivante aux yeux des utilisateurs de la marque, il est souhaitable de pouvoir la représenter sous plusieurs angles de vue. La plupart des créateurs de mascottes les représentent ainsi dans les planches de présentation du personnage.

Il est évidemment plus facile de proposer des poses et des angles de vue différents dans les styles graphiques les plus simples.

Charter le design de la mascotte

Une fois les tests d’utilisation effectués et les correctifs apportés au design du personnage, il convient de consigner les points clés du dessin de la mascotte dans une planche de synthèse ou une charte graphique plus complète.

Intégrer la mascotte sur plusieurs supports

Sur les sites mentionnés dans ce cours, vous avez pu voir les mascottes imprimés sur des badges, des magnets, des coques de téléphone, des supports de PLV (Publicité sur Lieu de Vente), etc. Animées à des degrés divers, elles sont aussi présentées sur les réseaux sociaux et sur les sites web des marques.

Catégories
CC2-cours Com-Créa

Présenter ses propositions graphiques

Dans ce cours, vous allez apprendre à présenter professionnellement vos propositions graphiques. Il s’agit du développement de la phase finale du travail de création. Les indications données dans ce cours s’appliquent en premier lieu à la création d’un logo mais aussi de tout produit de communication (affiche, flyer, site Web, etc.).

Ce cours vise l’acquisition de compétences professionnelles avancées.

Le premier chapitre en dit assez pour les débutant-e-s. Celles ou ceux qui souhaitent aller plus loin tireront profit des données partagées dans la suite du cours. De nombreux liens sont proposés pour approfondir les sujet.

Présenter visuellement et oralement ses travaux

La présentation des propositions d’un designer graphique au(x) commanditaire(s) est le résultat d’une véritable démarche de communication visuelle. Le produit de communication le plus utilisé est une présentation visuelle, la plupart du temps commentée oralement.

➜ Vous trouverez des indications sur ce média particulier dans le cours Construire et commenter un diaporama

➜  Pour situer l’étape de la proposition au (à la) client-e dans la démarche globale de création graphique, lisez La commande graphique, du brief au BAT

Comme tout produit de communication, un diaporama doit être envisagé comme le fruit d’une interaction entre 4 éléments indissociables :

  • La production de contenus (rédaction, illustration, commentaires)
  • Le contexte de communication (les modalités de lecture)
  • Le style de présentation des contenus (couleurs, typos, formes, séparateurs, motifs, textures, visuels)
  • La structuration des contenus (plan rédactionnel, découpage, hiérarchisation, ordonnancement sur une grille)

Cela se traduit par la nécessité d’accorder contenus, styles et structure au public visé, dans le contexte de lecture du message à transmettre.

Concrètement, il s’agit de :

  • regrouper les visuels les plus significatifs de l’ensemble du travail réalisé
  • choisir un plan de présentation (chronologique, méthodologique, SPRI, etc.)
  • mettre au point ou collecter un gabarit de diaporama adapté à l’outil de présentation envisagé
  • rédiger les textes et les commentaires prévus pour accompagner les visuels

Les décideur-euse(s) à qui sont présentées les propositions graphiques doivent être informé-e(s) le plus clairement possible sur les critères pris en compte pour parvenir aux solutions présentées. Il s’agit donc de veiller à mettre en œuvre les opérations suivantes :

  • expliquer la démarche suivie, centrée sur les besoins de l’utilisateur-trice final
  • immerger les participant-e(s) dans l’univers graphique envisagé en tenant compte de toutes les données collectées
  • recueillir les remarques éventuelles pour la suite du travail à fournir.

Suivre des recommandations

Voici une liste de documents ou d’articles traitant de la proposition des solutions graphiques au client :

Se mettre dans la peau du client

Déployer le plan B (B comme BlideDoc)

Il n’est pas toujours possible de défendre son projet de vive voix. Le plan B consiste alors à envoyer le diaporama au client (sous forme de pdf, le plus souvent), en inscrivant les commentaire dans les diapositives, sans oublier les détails pratiques comme vos coordonnées sur chaque diapo, le foliotage des diapositives, etc.

Voici comment procède Balo, un jeune graphiste et youtubeur belge. Sans doute envoie-t-il une loupe virtuelle avec son pdf pour permettre à ses clients de lire ses commentaires 😉

La solution détaillée dans cette vidéo est plus simple à mettre en œuvre qu’un diaporama commentée oralement !

Suivre les conseils d’un pro

➜ Voici ce qu’affirme Jean-Philippe Cabaroc, designer graphique stéphanois, concernant la présentation du design d’un site Web. Les principes énoncés s’appliquent en grande partie pour d’autres produits de communication.

Contextualisation des conseils de Jean-P. Cabaroc

En résumé, il s’agit de poser des critères d’évaluation pour tous :

  • le contexte de communication
  • le prétexte de la réalisation d’un nouveau produit de communication — voir le site pretextedecom.com
  • les caractéristiques du public visé (CSP, centres d’intérêt, besoins, persona, etc)
  • l’objectif ou les objectifs de communication (faire voir, faire aimer, faire comprendre, faire agir, etc.) — voir aussi la page dédiée à la communication sur le site du Studio Benziv
  • la promesse faite à la cible (les réponses apportées aux attentes de l’utilisateur-trice)
  • les bénéfices à retirer pour la cible en utilisant le produit
  • le ton adopté en fonction du contenu, de la cible et du média choisis — Voir le dossier “Communication” sur manager-go.com
  • la mission du (de la) designer graphique (élaborer une solution centrée sur les attentes de l’utilisateur-trice final-e du produit) — Lire les articles de Geoffrey Dorne et celui de Tancrède d’Aspremont Lynden

Il s’agit de présenter l’univers visuel choisi :

  • planches de tendances (moodboards ou tableaux Pinterest) — Découvrir les alternatives à Polyvore
  • planches de style (ébauches de planches de marque ou guides de style montrant le parti pris du designer graphique)
  • planches de recherches manuscrites et assistées numériquement
  • planches de propositions

Pour terminer, il s’agit de s’assurer que :

  • l’ (les) interlocuteur-trice(s) a (ont) bien compris ce qui a été énoncé et montré
  • les remarques effectuées par les participant-ante-s ont bien été collectées
  • les besoins de l’utilisateur-trice final-e demeurent au centre des travaux de finalisation à venir

La mise en œuvre d’un tel argumentaire relève de la fiction dans le cadre des attendus de la préparation au titre pro Infographiste Metteur en Page. Cet exposé met cependant en relief le niveau de professionnalisme des designers graphiques exerçant depuis de nombreuses années ou ayant suivi des études poussées dans de grandes écoles de design.

Élargir son champ de compétences

L’exercice du métier de designer graphique nécessite des compétences allant bien au delà de la maîtrise des outils de PAO et des méthodes de création graphique. La défense d’un projet de design graphique s’inscrit dans une stratégie marketing touchant à la fois le graphiste et son client. Le lexique utilisé par jean-Philippe Cabaroc est celui des stratèges de la mercatique.

Simplifier sa présentation

➜ Ayant pris connaissance des avis des professionnels du secteur, je vous invite à trouver le moyen le plus adapté pour défendre vos propositions graphiques.

La gamme des réalisations possibles va de la simple planche de proposition (voir les propositions au client, dans le cours sur le design d’un logo) au diaporama détaillé destiné à être commenté oralement face à des décisionnaires expérimentés.

Le facteur temps entre aussi en ligne de compte dans le cadre de la formation suivie au Greta. La finalisation d’un diaporama complet est en effet particulièrement chronophage.

Catégories
W3CSS W3CSS-exos

Utiliser des kits w3.css

Voici une série de lien pour exploiter le potentiel du framework W3.CSS en utilisant les ressources mises à votre disposition sur w3schools;com.

Suivre des tutoriels pas à pas

Le site w3schools.com propose des tutoriels pour construire des sites en utilisant le framework W3.CSS. En voici la liste.

Utiliser des templates à personnaliser

Des templates sont disponibles en ligne sur le site de w3schools.com. Vous les trouverez sur le page W3.CSS templates.

Le code source est disponible dans l’application Try-it. Il peut être copié et collé dans un éditeur de texte. Cependant, les liens vers les images des modèles seront rompus.

J’ai regroupé quelques templates en reconstituant les dossiers des sites en local. Utilisez ces modèles pour les personnaliser selon vos besoins;

Simplifier un template global

Vous trouverez sur le site w3schools un template intégrant un très grand nombre de fonctionnalités mises en œuvre grâce aux classes de W3.CSS. Ce template utilise un thème coloré monochromatique.

➜ Trois thèmes chromatiques sont proposées sur le site, sur la base du même template :

Supprimez les fonctionnalités dont vous n’avez pas besoin et diversifiez vos pages pour créer des sites pleinement fonctionnels.

Utiliser les thèmes chromatiques de w3.css

Il est très facile de modifier la couleur principale du template en changeant l’appel du thème coloré dans l’entête de la page (appel du thème via un link dans le header.

Présentation du thème Blue

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.

https://www.youtube.com/watch?v=uLiw4tpUkis

➜ 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.