Fatima Azzahra Belkyal - Mémoire PFE - Nafas - ESAV 2021

Nafas : L'éducation pour une meilleure génération.

Mémoire de fin d'études (2020 - 2021) Réalisé par : Fatima Azzahra Belkyal.

Encadré par : Florence Robert-Vissy.

1 École Supérieure des Arts Visuels de Marrakech.

(Those who cannot remember the past are condemned to repeat it.)

- Georges Santayana -

Avant propos

1

Remerciements

3

Introduction

5

Analyse de l'état des lieux

6

Objectifs du projet

8

Présentation du projet

10

Tableau des illustrations

13

Sommaire 2

Mots clés

4

Communication du projet

6

Introduction

7

Moodboard

9

Développement de la problématique

12

Conclusion

Avant-propos

Le présent travail concerne une approche graphique d’une complexe et délicate période de l’histoire du Maroc ; celle de la période postcoloniale.

Ce projet est mené dans l’objectif de contribuer à une nouvelle vison et mise en scène de l’héritage multidimensionnel et multilinguistique de cette période.

6

Mots Clés

Data-visualisation , Infographics, UI/UX , Histoire , Patrimoine, Colonisation, Société, Pays, Jeunesse, Politique, Graphisme, Pourcentages, Culture, Design d’information , Multilinguisme, Arabe, Français, Maroc, Accessibilité à l’information, Site Web, Design Graphique.

7

Remerciements

Au terme de ce travail, je tiens à exprimer ma gratitude à toutes les personnes qui ont contribué de près ou de loin à sa réalisation.

L'élaboration de ce mémoire n’aurait pas été possible sans l'aide et la contribution de ces personnes, à qui j'aimerais exprimer tous mes remerciements et toute la reconnaissance que je leur dois.

Mes premiers remerciements s'adressent tout d’abord à mes chers parents, qui m'ont apporté leur soutien indéfectible, pour leur patience, leur amour, et leur foi en ma réussite tant scolaire que personnelle.

Ce travail est le résultat de leurs prières incessantes, de leur tendresse, et de leur affection. À mes grands-parents paternels défunts, que j'aime tant. Vous me manquez énormément et j'espère que vous seriez fières de moi, là-haut où vous êtes. À la marraine de notre promotion et notre encadrante Mme Chaymae Ejjakhch , à qui j'adresse mes sincères remerciements pour toute l'aide et le soutien qu'elle a bien voulu m'apporter , et aussi , pour son suivi continu , ses précieux conseils et recommandations qui m'ont permis d'enrichir et d'affiner mes connaissances. À Mme Florence Robert-Vissy, à qui je dois extrêmement de respect, et à qui j'adresse mes remerciements les plus profonds. Elle m'a guidée et m'a appris avec abnégation et professionnalisme tout au long de mes trois années d’études. À Mme Lola Duval, qui a été d'un support psychologique et émotionnel profond lors

8

de ma troisième année. Je la remercie pour tous les moments précieux passés à l’ESAV. À Mr François Cadoux , qui sans ses conseils précieux ; l'élaboration de ce mémoire n’aurait pu être possible.

Je le remercie pour sa gentillesse, sa compréhension, et sa patience. À Mr Yvon Langué , qui nous a rejoints cette dernière année. Il était la pièce manquante à notre développement en tant que créateurs , concepteurs et graphistes. À Mr Cedric Gatillon , mon professeur et chef de département de notre filière.

C’est l’une des personnes que j’admire et que je respecte le plus. Il a été pour moi une motivation tout au long ces dernières années. Il m'a tant aidé à comprendre notre métier, et à développer ma sensibilité graphique et visuelle. À tous mes amis et camarades de classe, qui m'ont toujours encouragé et soutenu, et à qui je souhaite plus de succès et de joie, dans leurs parcours personnels et professionnels.

Que l'occasion me soit donnée de remercier tous les professeurs de l'ESAV qui ont veillé à ma formation théorique et pratique.

Je remercie enfin tous ceux qui, à un moment ou un autre m'ont aidé au cours de mon cursus, qu'ils trouvent ici l'expression de ma gratitude.

9

Communication du projet

10

4. A - Problématique du projet.

4. B - Introduction.

4. C - Justification du nom du projet.

4. D - Analyse et critique

de l'existant.

4. E - Moodboard.

4. F - Objectifs du projet et public cible.

11

Il m'a été donné de consta d'intérêt et d'attention aup l'histoire de notre pays. No tellement influencés par la d'autres pays que nous av La plus haute forme de co peut acquérir est la conna A travers mon projet , j'ai l' valeur l’histoire postcolon rendre les informations di et attrayantes pour les jeu les initier et les encourage patrimoine historique et c La connaissance de l'histo favorisera notre sens de re engagement à développe En outre , la maîtrise de l'h les erreurs du passé.

12

ater un grand manque près des jeunes à ous sommes devenus a culture et l'histoire vons oublié la nôtre. onnaissance que l'on aissance de son histoire. 'intention de mettre en niale du Maroc , et de isponibles accessibles unes marocains , afin de er à s'intéresser à notre culturel. oire de notre pays esponsabilité et notre er la communauté. histoire permet d'éviter

13

4. A - Problématique du projet

14

(Comment le design d'information peut-il être un outil efficace pour une meilleure compréhension de l'histoire d'un pays aussi riche que le nôtre?

Et comment peut-il stimuler l'esprit de citoyenneté dans l'ensemble de la jeunesse marocaine?)

15

4. B - Introduction

On appelle colonialisme le mouvement des grandes puissances européennes entre le XVe et le XXe siècle pour assujettir des états sur tous les continents et les administrer.

1

Le présent projet de fin d’études consiste à concevoir un espace éducatif et interactif sur internet sous forme de site web, qui permettra à l'ensemble de la jeune génération marocaine de 18 ans à 25 ans de s'éduquer sur l'histoire du pays et de son passé, plus précisément sur la période postcoloniale (1956-2000).

Rendre l'information et les données disponibles accessibles aux jeunes de différents contextes linguistiques est l'un des axes centraux de ce projet.

En utilisant les deux langues dominantes dans le système linguistique marocain : l'arabe et le français, mon projet se sert de la documentation existante pour mettre en valeur les événements historiques les plus marquants de l'époque postcoloniale Française au Maroc.

En passant par les batailles d'Amgala, aux coups d'état militaires, ce projet de site internet a pour but d'informer et d'aider à l'apprentissage et à l'information sur notre histoire politique.

16

4. C - Justification du nom du projet Nafas, nom : mot arabe , signifiant une bouffée d'air, un souffle d'air frais.

Ce concept m'est venu lors de ma lecture du livre d'Olt Aicher « Le Monde comme Projet », où l'auteur, définissant le projet, explique que c'est un des éléments les plus ardus et complexes des structures produites par l'activité mentale. Il le décrit, à la fois, analytique et synthétique, spécifique et général, concret et hypothétique. Il lie ensuite cette définition et description à la liberté individuelle de l'Homme, en la définissant comment étant un état de réalisation et de conception.

On ne devient libre que lorsqu’on est en totale et parfaite compréhension de notre entourage, de notre histoire et de nos racines. Une bouffée d’air frais est nécessaire aujourd’hui pour accéder à la connaissance de l’histoire postcoloniale de notre pays, le Maroc.

17

(More knowledge

more air, m

e, more freedom, more nafas.)

4. D - Analyse de l'état des lieux 1. Site web autour de l'histoire du climat dans le monde, du 19ème jusqu'au 21ème siècle Point faible : consomme beaucoup d'énergie à cause des différentes animations qui existent sur la plateforme.

Et du coup rend l'exploration du site internet moins pratique et agréable pour l'utilisateur.

2-3. Site historiqueautour de l'histoire d'un refuge pour sans-abri dans la ville de Leeds en Angleterre.

Point fort : la simplicité du design mis en place rend l'accès à l'information facile et ludique.

20

1

2

3

21

4. E - Moodboard 1. The Berlage Survey , Isabelle Vaverka.

2. Wise Ram , Semiotik Design.

3. The Language of the Global Polis , Otto Neurath.

4. The Commonage , Massimiliano Audretsch.

5. Wise Ram Editorial , Semiotik Design.

6. Auteur Inconnu , Dribbble.

7. Always Curious , Mythical Entertainment.

8. History of Nothing , Valenciastudio.

1

2

22

3

4

5

6

7

8

23

4. F - Objectifs du projet et public cible

24

Ce projet graphique vise la jeunesse, tranche d’âge la plus importante, non seulement en nombre, mais aussi en dynamisme et en promesse d'avenir pour le développement de la société. Elle représente plus que 12% de la population marocaine selon "Projections de la population urbaine du Maroc par âge simple et sexe 2014-2050" du Haut-Commissariat au Plan.

En outre, cette tranche d'âge est aussi la plus affectée par le manque de connaissance. Elle est plus branchée et plus présente sur les réseaux sociaux, et sur internet en général , que toutes les générations qui précèdent , et n'a accès qu'à très peu d’informations et de ressources sur l'histoire du pays, se limitant à Wikipedia , et à quelques publications du Haut-Commissariat au Plan.

Participer à la discussion qui se passe autour de l'histoire postcoloniale du Maroc , tout en rendant les informations disponibles accessibles aux jeunes est l'objectif le plus important de ce projet. Renforcer l'esprit de citoyenneté d'un pays multiculturel dans l'esprit des jeunes Marocains , par la création d'une plateforme multimédia où le patrimoine politique marocain serait célébré fait aussi partie des finalités que l'on veut atteindre à partir de ce projet graphique.

25

2

Développement de la problématique

26

9. A - La faisabilité technique.

9. B - Les aspects asthétiques.

9. C - L'approche graphique.

27

9. A - Faisabilité technique

28

Évaluation des besoins : Le matériel utilisé se définit dans l'ordre ci-après : Un ordinateur. Une tablette graphique. La suite de logiciels Adobe (XD, Illustrator, Photoshop), pour la création des infographies et la création de la grille du website. Logiciel « Sketch ». Logiciels « Principle » et « Framer » serviront à la création des animations et interactions du site web. Évaluation des compétences : Tout d'abord, la compréhension des informations et des données étudiées à mettre en valeur me semble nécessaire et primordiale à la réussite de ce projet.

En ce qui concerne la partie graphique du projet, l'appréhension et la capacité de travailler sur les différents logiciels utilisés est indispensable pour l'avancement graphique du projet. La compréhension du Design UI/UX, et comment la construction d'une grille et une interface adaptée au projet et à l'utilisateur font aussi partie des compétences que l'on doit avoir afin de transformer cette réflexion en projet graphique bien fait et réussi.

29

9. B - Les aspects esthétiques

3

4

5

L'inspiration du mouvement Design Suisse , également connu par Le Style Typographique International n'a pas été un choix arbitraire. L'insistance de ce mouvement sur la fonction du projet graphique , et l'utilisation d'une grille bien structurée vient offrir un contrôle et un ordre extrêmement précis et concis où l'information domine le design.

(Form follows Function.)

Le mouvement Suisse favorise la simplicité, la lisibilité et l'objectivité. Il s'appuie aussi sur la croyance en l'existence d'un seul style graphique universel et absolu, qui permet d'envelopper l'ensemble d'informations de la composition de manière efficace et rationnelle.

Ce mouvement s'inspire aussi du mouvement artistique " Nouvelle Objectivité" , actif entre 1918 et 1933.

Il est né en Allemagne et succède à l’expressionnisme. Il se développe principalement en Suisse grâce à deux graphistes, Otto Baumberger et Niklaus Stoeklin. Ce mouvement a pour but l’évocation froide et brute du réel, sans biais et sans artifice.

Le style typographique international contribue aussi à la notion d’un designer graphique en tant que constructeur de communication et à la pensée du monde en tant que projet. Cette réflexion a beaucoup influencé le sujet que j’ai choisi d’aborder dans mon PFE.

30

En ce qui concerne la partie Datavisualisation du projet, elle nous donne une idée claire sur l'information en lui donnant un contexte visuel. Cette spécialité peut se manifester sur différents formats et supports, notamment: cartes, infographies, rapports, présentations et tableaux de bord.

Le rôle principal que joue la datavisualisation est de rendre les données plus naturelles à comprendre pour l'esprit humain et facilite donc l'identification des tendances, des modèles et des valeurs aberrantes au sein de grands ensembles de données.

31

9. C - L'approche graphique 6

7

8

32

Dans le prolongement du mouvement de design suisse , l'identité visuelle de ce projet s'appuiera sur des typographies et sur des couleurs qui ont façonné et formé ce dernier.

La typographie "Akzidenz Grotesk" est une police de caractères sans empattements.

Le dessin de caractères de cette dernière est inspiré de la typographie " Royal Grotesk " , qui a été conçue en 1880 pour définir le corps des publications scientifiques par le typographe Allemand Ferdinand Theinhardt.

Akzidenz Grotesk fut la première police linéale, sans empattement, largement utilisée. Elle marque l'histoire typographique et influence plusieurs typographies par la suite, notamment : Helvetica , Univers , Folio , Arial..

En ce qui concerne mon projet de fin d'études , Akzidenz Grotesk est utilisée dans la création de sa charte graphique et de son identité visuelle, aux côtés de la typographie " Suisse Intl ", conçue par la fonderie typographique Swiss Typefaces , dans ses différents poids et variations, pour le contenu du site web et les infographies crées pour la plateforme.

Quant à l'utilisation de la forme du triangle dans mon logo, ce choix a été fait en référence aux trois axes les plus importants et fondamentaux de ce projet : histoire , population , et colonisation.

Ces trois angles sont reliés par un rapport et une relation cruciale , indéniable même.

L'un fait l’autre, et l'un ne peut exister sans l'autre.

Le triangle est associé au chiffre 3, d'où 3 côtés et 3 angles différents. Le symbolisme du chiffre 3 est défini comme une troisième voie, ou encore la vérité. Ce chiffre est aussi connu pour réconcilier les opposés, et unir les contraires. Il semble porter la paix et l’Amour. C’est donc le retour du binaire à l’unité primordiale.

De plus, la direction du triangle joue un rôle crucial dans l’interprétation de ce dernier.

Lorsqu’il est tourné vers le haut, le triangle symbolise la stabilité, l’équilibre et la confiance.

33

la réussite e la direct détermi

(Cette éléva

la réussite e

et le progrès, tion et la ination.)

ation signifie et le progrès,

Atalas au tombeau, Anne-Louis Girodet, 1808.

36

Le code colorimétrique de l'entièreté de ce projet comporte une palette de couleurs simple, contrastée et homogène.

La couleur grise est une couleur fraîche, neutre et balancée. C'est une couleur intemporelle, elle vient apporter de l'équilibre et de la coordination à l'ensemble du projet, et modérer l'intensité de la couleur rose. Le gris est la couleur du professionnalisme et du conventionnel.

La couleur rose dans ce projet joue le rôle d'une couleur d’accent.

Loin des clichés du romantique et féminité qui n'apparaissent jusqu’aux années 19201930 , le rose est interprété comme couleur de la naissance , d'incarnation et de la transformation. Elle est à la fois nostalgique et vivante.

Utilisée dans le mouvement artistique néo-classicisme, le tableau "Atala aux tombeaux" est l'une de mes inspirations principales pour l'utilisation de cette couleur.

En première analyse , la scène nous semble triste et ténébreuse , dans une grotte au milieu de la nature et éclairée uniquement par une lumière presque irréelle qui vient de là-haut.

Toute de suite , le tissu autour de la taille de Chactas , à gauche , qu'il enserre avec désespoir les jambes d’Atala entre son buste , ses bras et ses jambes , et pose la tête sur ses genoux , vient réchauffer le tableau , et inspire un ressenti d’espoir et d'espérance au tableau.

9

La couleur rose est une allégorie de l'esprit et du concept de mon projet de fin d’études. La colonisation d'un pays peut se transformer en force , elle peut être une incarnation du pays; une chance pour se développer et s'améliorer. Et c'est exactement cette réflexion que je souhaite communiquer et exprimer à travers ce projet.

37

Présentation du projet

38

10. A - Analyse du projet : Points forts et points faibles.

39

10. A - Analyse du projet: Points forts et points faibles

10

11

40

Le choix du format a été pour moi l'un des choix les plus difficiles à mener. La notion d'interactivité entre le format et l'utilisateur est essentielle. Le processus d'apprentissage doit être une expérience amusante et intéressante. C'est une des contraintes les plus importantes de ma réflexion graphique. Ça a tout d’abord commencé par l'idée de présenter mon projet sous la forme d'un livre d'illustrations pour les enfants de 4 à 10 ans , dans la pensée que les années d'enfance sont les années où nous apprenons le plus. Cela présentait de nombreuses faiblesses, telles que l'accessibilité des enfants au livre limitée par l'utilisation individuelle de ce dernier, la quantité d'informations que je peux transmettre à travers une illustration , et aussi les limites que je devrais respecter dans les données présentées , compte tenu de la sensibilité et de la délicatesse d'un jeune enfant. Cela influencerait directement jusqu'où je pouvais mener mon projet en termes de sujets et de données présentés.

Cette pensée m'a mené vers l'idée de présenter mon projet sous forme d’un court film d'animation , en utilisant la technique de "stop-motion". Ce format s'est très vite avéré difficile , presque impossible à réaliser , à cause du temps très limité dont nous disposons pour la réalisation de ce projet.

En outre , ce format ne permet pas l'interactivité avec l'utilisateur , ce qui constitue un axe principal de ce projet.

Par la suite, le design UI/UX design me semblait être la voie à suivre. En passant par les formats les plus réputés, le choix de l'application mobile s'est présenté comme l'un des plus forts concurrents, pour son expérience utilisateur plus développée, et son intégration des options de téléphone.

Par contre, ce format se présentent avec plusieurs iconvénients, comme la difficultés de se démarquer et de transmettre une image de marque, en plus de ne être facilement actualisée.

La rapidité de la plateforme, l'actualisation facile, la visibilité mondiale, et la liberté de consulter la plateforme 24h/24 et 7j/7, sont quelques uns des plusieus points forts du format Site Web. En revanche, la consommation de l'énergie de chaque utilisation, accompagné du coût de réalisation élevé pour une qualité professionnelle, sont des incovénients de ce format.

41

Conclusion

42

Ce projet ambitieux se propose de servir la société marocaine et particulièrement la population des jeunes.

Il se veut adapté à une société plurielle marquée par le multilinguisme et la coexistence de différentes cultures, contribuant ainsi à l'éducation d'une génération fière de son pays et de son héritage historique, moyennant le design graphique.

43

Tableau des illustrations

44

1

Daniel Tremblay , un monde transnational est possible

2010

https://www.memoireonline.com/02/17/9606/m_Projets-culturels-transnationaux-enjeux-et-perspectives5.html

2

Haut-Commussariat au Plan , Projections de la population urbaine du Maroc par âge simple et sexe 2014-2050

2014

https://www.hcp.ma/Projections-de-la-population-urbaine-du-Maroc-par-agesimple-et-sexe-2014-2050_a2207.html

3

Architechte Louis Sullivan

1930

4

Ateliers Sud , Le graphisme suisse , une référence à échelle internationale

1930

https://atelierssud.ch/graphisme-suisse-ou-style-international/

5

Wikipedia , Nouvelle objectivité

2021

https://fr.wikipedia.org/wiki/Nouvelle_Objectivité

6

Wikipedia , Akzidenz Grotesk

2021

https://fr.wikipedia.org/wiki/Nouvelle_Objectivité Klim Type Foundry , New details about the origins of Akzidenz-Grotesk https://klim.co.nz/blog/new-details-about-origins-akzidenz-grotesk/

7

JePense.org , Le symbolisme du chiffre 3

2019

https://www.jepense.org/symbolisme-chiffre-3/

8

JePense.org , Le triangle et son symbolisme https://www.jepense.org/triangle-symbolisme/

45

2020

9

Graphiste.com , Symbolique des formes : que signifie un logo triangulaire ?

2018

https://graphiste.com/blog/symbolique-forme-logo-triangle

10

99designs.fr , La signification des couleurs et comment s’en servir

2018

https://99designs.fr/blog/conseils-design/signification-couleurs/ Evolutiongraphique.com , La signification cachée des couleurs en communication visuelle

2016

https://evolutiongraphique.com/la-signification-cachee-des-couleursen-communication-visuelle/

11

Taktilcommunication.com , Application mobile Vs site mobile : Avantages et inconvénients https://www.taktilcommunication.com/blog/applications-mobile/sitemobile-vs-application-mobile-avantages-et-inconvenients.html Creerunoutil.be , Avantages et inconvénients de différents supports http://www.creerunoutil.be/-Fiche-11-Avantages-et-

46

2016

Notes

47