About the projectÀ propos du project

This graphic and web redesign is a fictitious project for my end of year project of BTS Graphic Design Digital Option (Bac+2).

Cette refonte graphique et web du site internet de l'AEJT, organisme qui délivre la méthode d'art Martial du Wa-jutsu, est un projet fictif qui fait l'objet de mon projet de fin d’année de BTS Design graphique option numérique (Bac+2).

Wa-jutsu is a martial art with self-defense methods in pairs based on breathing : the "ki". My web experience concept allows the user to realize the existence of his energy through interaction.

Le wa-jutsu est un art martial qui contient des méthodes self-défense en binôme basé sur la respiration, le “ki”. L’expérience web proposée permet de rendre compte chez l'utilisateur de l'existence de son énergie par l'interaction.

My skillsMes compétences

• Designing a logo and a graphic charter on Illustrator
• Layout on InDesign
• Restructuring the web site's tree structure
• Animated model on AfterEffect

• Concevoir un logo et une charte graphique sur Illustrator
• Mise en page sur InDesign
• Restructurer l'arborescence web du site
• Maquette animée sur AfterEffect

Design ProcessProcessus de Design

Graphic researchRecherche graphique

I first conceived a graphic chart which represent the ki, the energy through the breath.

J’ai d’abord conçu une charte graphique qui tente de représenter le ki, l'énergie au travers de la respiration.

I then explored the graphic possibilities: the photographic grain, the concentric density ratios. The particles of the aerosol can.

J’ai alors exploré les possibilités graphiques : le grain photographique, les rapports de densités concentriques. Les particules de la bombe aérosol.

Graphic charterCharte graphique

I chose to use the dithering effect to synthesize the notion of energy

J’ai choisi d’utiliser l'effet de tramage pour synthétiser la notion d’énergie

Pour ce projet, j'ai décidé de photographier et de prendre en vidéo les pratiquants pour enrichir ma maquette avec du vrai contenu. En voici quelques exemples :

For this project, I decided to photograph and video the practitioners to enrich my mockup with real content. Here are some examples:

Interactive intenionIntention interactive

This website is an interactive experience where the user will be able to feel and control his energy, just like the practice of wa-justu. The cursor becomes a body and influences the elements of the site by its movement and its click.

Ce site est une expérience interactive où l'utilisateur pourra ressentir et contrôler son énergie, à l’image de la pratique du wa-justu. Le curseur devient corps et influence les éléments du site par son mouvement et son clic.

PrototypePrototype

The site is prioritized according to 3 times:

Le site est hiérarchisé selon 3 temps :

The home page is a virtual setting in condition towards a peace of mind, like the ritual of greeting. The cursor allows the user to be engaged in a physical action thanks to the movement suggested by the interaction with the Logo. The rasterized transition to the headings evokes contemplation.

La page d'accueil est une mise en condition virtuelle vers un état d’esprit serein, à l’image du rituelle du salut. Le curseur permet à l'utilisateur d'être engagé dans une action corporelle grâce au mouvement que suggère l'interaction avec le logo. La transition tramée vers les rubriques évoque la contemplation.

Then the sections appear in fullscreen animation, which suggests a ceremonial effect. The slowed down videos of the practitioners with a dithering effect allows to glimpse the movements of the practitioners in a contemplative atmosphere.

Ensuite les rubriques apparaissent en animation fullscreen, ce qui suggère un effet cérémonial. Les vidéos ralenties des pratiquants avec un effet de tramage permet d'entrevoir les mouvements des pratiquants dans une atmosphère contemplative.

Finally, at the last level of the hierarchy, the pages accessible via "more" include a horizontal composition of texts and images in order to give rhythm to the user's reading path. The parallax of the scroll reinforces the feeling of power linked to the movement inflicted by the user.

Enfin, en dernier niveau de profondeur, les pages types accessible via "en savoir plus" comportent une composition horizontale de textes et d'images afin de rythmer le parcours de lecture de l’utilisateur. La parallaxe au scroll renforce le sentiment de puissance lié au mouvement infligé par l'utilisateur.

Get the Graphic charter of the logoVoir la charte graphique du logo Get the design documentVoir le document de design