Dév. et Fin. Projet Pro
-
Upload
maw-matthieu -
Category
Documents
-
view
225 -
download
1
description
Transcript of Dév. et Fin. Projet Pro
![Page 1: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/1.jpg)
developpementProjet professionnelMatthieu mawlanazada
![Page 2: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/2.jpg)
PROJET PROFESSIONNELdeveloppement
2developpementProjet professionnel
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.
Récapitulons
![Page 3: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/3.jpg)
PROJET PROFESSIONNELdeveloppement
3developpementProjet professionnel
5 rubriques+sous rubriques
![Page 4: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/4.jpg)
PROJET PROFESSIONNELdeveloppement
4developpementProjet professionnel
Repartir sur:La linéarité, comment évoquer la ligne d’une autre manière?
Axe créatif: Des Sensations Variées
![Page 5: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/5.jpg)
PROJET PROFESSIONNELdeveloppement
5developpementProjet professionnel
Pictogramme (rubrique)
![Page 6: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/6.jpg)
PROJET PROFESSIONNELdeveloppement
6developpementProjet professionnel
Portions de trajectoire - Déplacement suivant la ligne - Sur le chemin
Déplacement suivant les virages
Principe: Circuit Interface
menu circuit
menu motifAu passage de la souris le longboard
se magnétise à la souris.
Matali Crasset(même principe)
1
1
2
2
3
3
4
4
5
5
Utiliser le circuit comme moyen de navigation en se faisant rencontrer les différents types de glisses.
![Page 7: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/7.jpg)
PROJET PROFESSIONNELdeveloppement
7developpementProjet professionnel
Navigation qui parcourt le tracé - le fil conducteur
Déplacement horizontale - mouvement fluide(réf.nav:http://www.psynai.com)
Principe: Navigation: Parcourir Interface
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.
Utiliser la ligne de route comme fil conducteur du site, de la lecture et de la navigation.
![Page 8: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/8.jpg)
PROJET PROFESSIONNELdeveloppement
8developpementProjet professionnel
Évoquer le parcours à travers la typographie.Parcours le site par un cheminement typographique.
InterfacePrincipe: Typographique
Map de navigationLes boutons sont les mots.Les pages se mettent en place lorsque une rubrique est choisie.
Montrer la typographie comme un moyen d’exprimer des pistes et des sensations.
![Page 9: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/9.jpg)
PROJET PROFESSIONNELdeveloppement
9developpementProjet professionnel
D’un point A à un point B.
LogotypesLe parcours/La courbe/La linéarité/Le cheminement/Le tracé/Le circuit/La trajectoire
![Page 10: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/10.jpg)
PROJET PROFESSIONNELdeveloppement
10developpementProjet professionnel
La ligne continue dessine le circuit, trace la route.Le dégradé traduit la vitesse, (ac)/(dé)célération.
Logotypes
![Page 11: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/11.jpg)
PROJET PROFESSIONNELdeveloppement
11developpementProjet professionnel
Exprimer les notion de vitesse & de courbe
Formation de la page grâce au ligne qui la dessine.
Principe: Animation Interface
Évoquer plusieurs notions différentes en les traduisant par un traitement de la ligne. (formelle)
![Page 12: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/12.jpg)
PROJET PROFESSIONNELdeveloppement
12developpementProjet professionnel
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
Navigation
Interface
![Page 13: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/13.jpg)
PROJET PROFESSIONNELdeveloppement
13developpementProjet professionnel
Principe Interface
Utiliser des motifs qui serviront de repères, en allant puiser dans les sources rétro de la génération du longboard.
![Page 14: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/14.jpg)
PROJET PROFESSIONNELdeveloppement
14developpementProjet professionnel
Principe Interface
Interface
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.
![Page 15: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/15.jpg)
PROJET PROFESSIONNELdeveloppement
15developpementProjet professionnel
Principe: Graphique
![Page 16: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/16.jpg)
PROJET PROFESSIONNELdeveloppement
16developpementProjet professionnel
La ligne dessine la composition de la page.
Interface
Utiliser la ligne comme élément graphique et élément majeur de la navigation.
![Page 17: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/17.jpg)
PROJET PROFESSIONNELdeveloppement
17developpementProjet professionnel
La vitesse et le dynamisme par le roulement
Animation logo >
Logotypes
![Page 18: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/18.jpg)
PROJET PROFESSIONNELdeveloppement
18developpementProjet professionnel
Logotypesimplicite - rond:roulement & vue du dessus d’un longboard
![Page 19: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/19.jpg)
PROJET PROFESSIONNELdeveloppement
19developpementProjet professionnel
Logotypes
![Page 20: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/20.jpg)
PROJET PROFESSIONNELdeveloppement
20developpementProjet professionnel
Principe: Navigation
prolongement vers page rub
prolongement vers page rub
prolongement vers page rub
![Page 21: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/21.jpg)
PROJET PROFESSIONNELdeveloppement
21developpementProjet professionnel
Interface
Rendre la ligne de route implicite en naviguant en toute liberté.
inclinaison selon le mouvement de la souris >
![Page 22: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/22.jpg)
PROJET PROFESSIONNELdeveloppement
22developpementProjet professionnel
Essais
Motif (signifiant des sensations)
Contexte animé & sonore
Principe
(mélange des lettres comme les onglets de changements de pages du site de Mathieu Lehanneur)
Au carrefour des sensations: Utiliser des éléments graphiques comme point de rencontre d’éléments périphériques, tous en liens.
![Page 23: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/23.jpg)
23developpementProjet professionnel
FinalisationProjet professionnelMatthieu mawlanazada
![Page 24: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/24.jpg)
PROJET PROFESSIONNELFinalisation
Principe: Graphique Animation
Exprimer un tracé (route) implicite
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’ani-ment au survol avec le pointeur de la souris. ( + un son de planche à roulette)
Composition
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.
![Page 25: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/25.jpg)
PROJET PROFESSIONNELFinalisation
longboard.présentation.rubrique.01 longboard.lieux.rubrique.02
![Page 26: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/26.jpg)
PROJET PROFESSIONNELFinalisation
longboard.matériels.rubrique.03 longboard.médias.rubrique.04
![Page 27: Dév. et Fin. Projet Pro](https://reader031.fdocuments.net/reader031/viewer/2022020200/568bdda01a28ab2034b686c5/html5/thumbnails/27.jpg)
PROJET PROFESSIONNELrealisation
Par ici.