TFA Case study

En cette fin d’année, il nous a été demandé de créer un « Side project » sur le thème de notre choix. J’ai décidé d’exploiter mes connaissances en histoire et donc de créer un site web documentaire sur : L’aviation de la Seconde Guerre mondiale.

Étant tombé dans une famille d’historiens/archéologues, je me suis moi-même intéressé à l’histoire en général. Mon site va présenter les 5 avions qui ont le plus marqué la Seconde Guerre mondiale. Et ce de manière entièrement illustrée, afin de valoriser mes compétences en illustration, le tout animé au possible.

Illustration

L’idée était donc d’illustrer l'entièreté mon site. j’ai donc commencé à faire des recherches en illustration. Dans un premier temps, je pensais faire quelque chose de relativement minimaliste.

Mais je trouvais cela peu convaincant. J’ai donc continué mes recherches vers quelque chose d’un peu plus réaliste. Je me suis alors inspiré du style des BD. En récupérant les formes de base et les couleurs de photos d’avions, le tout avec un contour noir. Ce qui donne quelque chose d’à la fois réaliste et très illustratif.

Premier avion test fleche Avion P-40

Le contenu

Aircraft Memory à pour but de s'adresser à un public large et pas forcément averti sur le sujet de l'aviation. L'idée n'est donc pas de parler de l'aspect technique de ces derniers mais plutôt de leurs histoires.

L'aviation a joué un rôle déterminant durant cette période il y a donc beaucoup de choses à raconter, tellement qu'on ne peut pas tout dire mais il est certain qu'il y a des épisodes aériens particulièrement décisifs dans le déroulement de la Guerre.

Avion Mustang-P51

Mon site présente donc 5 avions de cette période, et je raconte pour chacun d'entre eux une histoire, une anecdote, une explication afin d'apprendre quelque chose de nouveau à l'utilisateur. Les textes sont écrits afin que la lecture ne dépasse pas 10-15 minutes. Pour les plus intéressés, une vidéo explicative sur chaque sujet traité est présente sur chaque page.

Concrètement, je parle de la Bataille d’Angleterre, je vous ferai découvrir Normandie-Niemen et les Tuskegee Airmen, je me suis ensuite penché sur Pearl Harbor et enfin je vous explique la supériorité technologique des Allemands durant cette période.

Avion Mustang-P51

Le design

Les couleurs

Les premières recherches se sont tournées vers les couleurs. De nombreux essais ont été faits afin de déterminer lesquelles j’allais utiliser. Les avions ayant des couleurs qui peuvent aller du brun, vert, bleu jusqu'au gris, il y a l’embarras du choix.

Finalement je me suis inspiré d’un de mes livres sur l’aviation qui m'a d'ailleurs beaucoup servi à tous les niveaux (contenu, illustration, etc). Comme cet ouvrage donc, j’utilise des nuances donc de bleus et du blanc. Les deux ensemble permettent d’avoir un visuel assez sobre et agréable à regarder tout en rappelant bien l'aspect du ciel et des nuages. Le fond du texte possède un fond avec des motifs de nuages afin d'accompagner le texte et les illustrations.

Livre de l'encyclopédie des avions de combat

Le haut de page

Dans un premier temps il était question d’utiliser une illustration mettant en scène des avions en background, de placer le titre au centre, et la navigation au-dessus. La section en dessous était quant à elle une présentation du site. Le problème c’est que l’utilisateur ne peut pas deviner quelle est la nature du site avec si peu d'informations en arrivant. Pour répondre à ce problème j’ai donc fusionné ces deux parties ensemble comme ci-dessous.

Le selecteur de mon site fleche Le selecteur de mon site

Le sélecteur

Une fois que l'utilisateur connaît l'intention du site il est temps de lui présenter les engins ! J'ai donc conçu un sélecteur. Mes premiers essais se tournaient vers un slider avec quelques informations techniques sur l’avion et un bouton « découvrir ». Le problème était que cela n’aide en rien au choix de l’avion.

J'ai donc changé de système, au lieu de présenter un slider avec des informations « inutiles » j'ai présenté les 5 avions sous forme d'une liste. Les noms ne figurent pas non plus car celà non plus n'aide en rien au choix de ceux-ci. L'utilisateur sera invité à choisir l'un d'entre eux sur son seul aspect. Une fois son choix effectué, un court résumé de ce qu’il va apprendre sur l’avion apparaît, tel un résumé apéritif d’un livre. Là, il pourra déterminer si celà l'intéresse ou pas. Ce qui résout efficacement le problème du choix tout en ayant un petit aspect interactif.

Le selecteur de mon site fleche Le selecteur de mon site

Les pages

Après avoir effectué son choix, l’utilisateur arrive donc sur la page dédiée à l’avion. La première partie est un paragraphe qui décrit brièvement l’avion, dans quel contexte il a été construit etc...

Le selecteur de mon site

La seconde partie est dédiée à l'histoire que je raconte. C’est là aussi que les différentes illustrations entrent en scène au fur et à mesure que l’utilisateur lit la page. Une lecture ne dépasse pas les 10-15 minutes. Chaque histoire est résumée afin d’éviter d’avoir des paragraphes géants et désagréable à lire.

Enfin je mets à disposition des boutons cliquables pour voir les prochains avions afin d’éviter de devoir faire en retour en arrière sur la home page. Bien que la navigation soit toujours présente avec un onglet "avions" pour les mêmes raisons.

Conclusion

Aircraft Memory est une webdoc qui s’adresse à tous les intéressés d’histoire. La volonté de ce site est d’apprendre quelque chose à l'utilisateur et de proposer une expérience positive. Aussi, j’ai voulu faire en sorte que le site soit impactant visuellement à l’aide des illustrations et des animations.

Pour finir, grâce à ce site, j’aurai pu exprimer ma passion de l’illustration et mon intérêt pour l’histoire en général. En espérant la partager avec autrui.