Dév. et Fin. Projet Pro

Page 1

developpement Projet professionnel Matthieu mawlanazada


PROJET PROFESSIONNELdeveloppement Récapitulons

La demande: Concevoir l’identité visuelle du site Longboard: -Logo -Site Avant tout, quelle est l’utilité de ce site? La Fédération Française de Roller Skating, fédérant les sports de roues français, voudrait développer la pratique du longboard. Pour cela, elle demande la réalisation d’un site qui regroupera les informations essentiels sur la pratique. Enfin elle sera un pilier vers les autres destination du longboard sur le Web. Ton: - Énergique, entraînant - Informatif, et pédagogique Objectif de communication: Révéler la pratique du longboard comme étant au carrefour de différents style de glisses.

developpement Projet professionnel

2


PROJET PROFESSIONNELdeveloppement

5 rubriques+sous rubriques

developpement Projet professionnel

3


PROJET PROFESSIONNELdeveloppement Axe créatif: Des Sensations Variées

Repartir sur:

La linéarité, comment évoquer la ligne d’une autre manière?

developpement Projet professionnel

4


PROJET PROFESSIONNELdeveloppement Pictogramme (rubrique)

developpement Projet professionnel

5


PROJET PROFESSIONNELdeveloppement Utiliser le circuit comme moyen de navigation en se faisant rencontrer les différents types de glisses.

Principe: Circuit

Interface

1

2

3

4

5 Déplacement suivant les virages

menu circuit

3

1

2

4

5

Portions de trajectoire - Déplacement suivant la ligne - Sur le chemin

menu motif Au passage de la souris le longboard se magnétise à la souris.

Matali Crasset (même principe)

developpement Projet professionnel

6


PROJET PROFESSIONNELdeveloppement Utiliser la ligne de route comme fil conducteur du site, de la lecture et de la navigation.

Interface

Principe: Navigation: Parcourir

Déplacement horizontale - mouvement fluide (réf.nav:http://www.psynai.com)

Navigation qui parcourt le tracé - le fil conducteur

La page se compose en fonction de la ligne. Les éléments se placent en fonction de la logique du fil conducteur. De gauche à droite - sens de lecture - chemin.

developpement Projet professionnel

7


PROJET PROFESSIONNELdeveloppement Montrer la typographie comme un moyen d’exprimer des pistes et des sensations.

Principe: Typographique

Interface

Évoquer le parcours à travers la typographie. Parcours le site par un cheminement typographique.

Map de navigation Les boutons sont les mots. Les pages se mettent en place lorsque une rubrique est choisie.

developpement Projet professionnel

8


PROJET PROFESSIONNELdeveloppement Logotypes Le parcours/La courbe/La linéarité/Le cheminement/ Le tracé/Le circuit/La trajectoire

D’un point A à un point B.

developpement Projet professionnel

9


PROJET PROFESSIONNELdeveloppement Logotypes La ligne continue dessine le circuit, trace la route. Le dégradé traduit la vitesse, (ac)/(dé)célération.

developpement Projet professionnel

10


PROJET PROFESSIONNELdeveloppement Évoquer plusieurs notions différentes en les traduisant par un traitement de la ligne. (formelle)

Principe: Animation

Interface

Exprimer les notion de vitesse & de courbe

Formation de la page grâce au ligne qui la dessine.

developpement Projet professionnel

11


PROJET PROFESSIONNELdeveloppement Une pratique, le longboard, et tant de formes de planches différentes. Melting pot de planches = Les planches des différents gabarit forment un ensemble, une entité. Assemblage des planches par le moyen de la ligne.

Principe

Interface

Navigation

developpement Projet professionnel

12


PROJET PROFESSIONNELdeveloppement Utiliser des motifs qui serviront de repères, en allant puiser dans les sources rétro de la génération du longboard.

Principe

Interface

developpement Projet professionnel

13


PROJET PROFESSIONNELdeveloppement Montrer à la fois le matériels, les effets et les sensations à travers le longboard, en passant par un seul et même support: la board.

Principe

Interface

Interface

developpement Projet professionnel

14


PROJET PROFESSIONNELdeveloppement Principe: Graphique

developpement Projet professionnel

15


PROJET PROFESSIONNELdeveloppement Utiliser la ligne comme élément graphique et élément majeur de la navigation.

Interface

La ligne dessine la composition de la page.

developpement Projet professionnel

16


PROJET PROFESSIONNELdeveloppement Logotypes La vitesse et le dynamisme par le roulement

Animation logo >

developpement Projet professionnel

17


PROJET PROFESSIONNELdeveloppement Logotypes implicite - rond:roulement & vue du dessus d’un longboard

developpement Projet professionnel

18


PROJET PROFESSIONNELdeveloppement Logotypes

developpement Projet professionnel

19


PROJET PROFESSIONNELdeveloppement Principe: Navigation

prolongement vers page rub

prolongement vers page rub

prolongement vers page rub

developpement Projet professionnel

20


PROJET PROFESSIONNELdeveloppement Rendre la ligne de route implicite en naviguant en toute libertĂŠ.

Interface

inclinaison selon le mouvement de la souris >

developpement Projet professionnel

21


PROJET PROFESSIONNELdeveloppement Au carrefour des sensations: Utiliser des éléments graphiques comme point de rencontre d’éléments périphériques, tous en liens.

Principe

Motif (signifiant des sensations)

Contexte animé & sonore

Essais

(mélange des lettres comme les onglets de changements de pages du site de Mathieu Lehanneur)

developpement Projet professionnel

22


Finalisation Projet professionnel Matthieu mawlanazada

developpement Projet professionnel

23


PROJET PROFESSIONNELFinalisation Principe: Graphique

Animation

Composition

Les rectangles jaunes sont animés: /Ils composent dans un premier temps, la page. (en mode normal et produit) //Ils servent de bouton, ils s’animent au survol avec le pointeur de la souris. ( + un son de planche à roulette)

Exprimer un tracé (route) implicite

La composition de la page se fait de manière aléatoire d’une rubrique à l’autre, elle change, néanmoins, on ne s’y perd pas car les éléments qui composent la page sont récurrents. Seul leur position a changée.


PROJET PROFESSIONNELFinalisation longboard.prĂŠsentation.rubrique.01

longboard.lieux.rubrique.02


PROJET PROFESSIONNELFinalisation longboard.matériels.rubrique.03

longboard.médias.rubrique.04


PROJET PROFESSIONNELrealisation

Par ici.


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.