Trendboards - Formation web design

Transcription

TRENDBOARDS
Site évènementiel
EXPOSITION SUR LES DIX PLUS GRANDS PHOTOGRAPHES DU XXE SIÈCLE
PALAIS DE LA MODE E T DU DESIGN - PARIS
Remy Laetitia_Web_Partiel_N2
AVANT-PROPOS
Il s’agit de la démarche créative destinée au site évènementiel one-page de l’exposition sur LES 10
PLUS GRANDS PHOTOGRAPHES DU 20E SIÈCLE : Henri Cartier- Bresson - Yann Arthus-Bertrand
- Philip Plisson - Philip-Lorca DiCorcia - Robert Doisneau - Robert Capa - David Seymour - David
Hamilton - Helmut Newton et Jean-Marie Périer. Cette exposition se déroulera à la Cité de la Mode
et du Design à Paris.
Le but de cette exposition est d’exposer leurs oeuvres photographiques afin de faire découvrir, ou
redécouvrir leur art.
3
SOMMAIRE
AVANT-PROPOS3
SOMMAIRE5
Planche couleur
Planche Formes
Planche textures
Recommandations réseaux sociaux
Planche typographique
Identités visuelles : logos concurrents
Identité visuelle : directions
Logo choisi
Planche Ambiance
Architecture globale
Architecture : fonctionnalités
Maquette de Home
Descriptif de la navigation
Maquette Rubrique
Descriptif navigation de la rubrique
Mise en situation de la home
4
6
8
9
10
12
14
16
17
18
28
29
30
31
32
33
34
5
PLANCHE COULEUR
Domi n ante
6
Toniq ue
Se con da i re
RVB
218 218 218
RVB
204 182 21
RVB
000
CMJN
0% 0% 0% 20%
CMJN
22% 22% 72% 5%
TSL
48° 0% 85%
TSL
48° 55% 80%
CMJN
100%
100%
Lab
84 0 -1
Lab
72 -1 42
Hexadécimal
# d1d3d4
Hexadécimal
# CCB65B
Pantone
427C
Pantone
617C
RVB
255 255 255
100%
TSL
48° 55% 0%
Lab
000
Hexadécimal
# 000000
Pantone
426C
100%
CMJN
0% 0% 0% 0%
TSL
48° 0% 100%
Lab
100 0 0
Hexadécimal
# FFFFFF
Pantone
Blanc
7
PLANCHE FORMES
8
PLANCHE TEXTURES
9
RECOMMANDATIONS RÉSEAUX SOCIAUX
10
11
PLANCHE TYPOGRAPHIQUE
TITRE
INTERTITRE
GIORGIO, REGULAR, 20 PTS, CAPITALES
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
ÀÂÄÉÈËÊÏÎÖÔÜÛ
@ # , . ; / : + = € $ * £ `
LÉGENDE
Giorgio, regular, 20 pts
abcdefghijklmnopqrstuvwxyz
0123456789
àâäéèëêïîöôüû
@ # , . ; / : + = € $ * £ `
ACCROCHE
12
Verdana, italic, 9 pts
REGENCIE ALT, LIGHT ALT, 12 PTS, CAPITALES
0123456789
0123456789
ÀÂÄÉÈËÊÏ ÎÖÔÜÛ
@ # , . ; / : + = €$ * £`
@#,.;/:+=€$*£`
TEXTE COURANT
FOOTER
NAVIGATION
Verdana, regular, 10 pts
Giorgio, regular, 10 pts
GIORGIO, REGULAR, 12 PTS
0123456789
0123456789
0123456789
@ # , . ; / : + = € $ * £ `
@#,.;/:+=€$*£`
@ # , . ; / : + = € $ * £ `
13
IDENTITÉS VISUELLES : LOGOS CONCURRENTS
Lo gos à li re et à voi r
14
Lo gos à li re
Lo gos à voi r
15
IDENTITÉ VISUELLE : DIRECTIONS
Lo go à li re
LOGO CHOISI
EXPOSITION
Lo go à li re et à voi r
Les
Le s
1
PHOTOGRAPHES
PLUS
GR A ND S
PHOTOGRAPHES
d u XXe siècle
La typographie est une typographie sans-serif fine, pour souligner le prestige
de l’évènement.
Le numéro 0 du 10 est sous la forme d’un objectif photo, un clin d’oeil au
thème de l’exposition.
16
10 p lu s g ra n d s
d u 20 e siècle
EXPOSITION
Les
10 p lu s g ra n d s
PHOTOGRAPHES
d u 20 e siècle
J’ai choisi cette identité visuelle car je trouve qu’elle est plus moderne, plus épurée et plus agréable
visuellement que le logo à lire.
La typographie est la même que celle utilisée dans le précédent logo, pour les
mêmes raisons. Elle est intégrée dans un appareil photo non terminé, l’exposition étant en rapport avec la photographie.
Les motifs illustrent la photographie, en effet, on peut voir un début d’appareil photo et son objectif.
Par ailleurs avec ce logo, nous savons que l’évènement proposé correspond à une exposition sur les
10 plus grands photographes du 20e siècle, information qu’on ne peut ajouter sur le précédent.
En ce qui concerne les couleurs j’ai choisi la couleur jaune d’or pour le prestige de l’évènement, le
gris 20%, le noir et le blanc sont en rapport avec les photos d’époques, elles peuvent également
rappeler la couleur de la plupart des appareils photos professionnels. Par ailleurs le noir est aussi
utilisé pour exprimer le sérieux et la sobriété.
17
PLANCHE AMBIANCE
18
19
PLANCHE AMBIANCE
20
21
PLANCHE AMBIANCE
22
23
PLANCHE AMBIANCE
24
25
PLANCHE AMBIANCE
26
27
ARCHITECTURE GLOBALE
ARCHITECTURE : FONCTIONNALITÉS
Apparition progressive du titre de la rubrique.
http://thethemelab.com/envato/FlatOne/
Parallaxe au niveau des fond coloré sur ce site.
http://www.fillet.com.br/
http://sonnetwp.themebucket.net/#
Parallaxe au niveau de chaque page.
http://thethemelab.com/envato/FlatOne/
Signalisation dans la barre de menu lorsqu’on change de catégorie par scroll.
http://demo.rocknrolladesigns.com/wp/versi-text/
http://www.pleiadesflorina.gr/
Parallaxe : décalage de défilement.
http://www.mp2013.fr/merci/#17
Grand footer avec adresse, contact et réseaux sociaux.
http://sonnetwp.themebucket.net/#
Slider horizontal avec possibilité de prendre la main.
http://www.theblacktruffle.com.au/
http://eric-huguenin.com/asimov/#asimov
28
http://www.theblacktruffle.com.au/
29
MAQUETTE DE HOME
DESCRIPTIF DE LA NAVIGATION
Sur la home un parallaxe sera mis en place au niveau des photos. Ainsi au bout de quelques
secondes les photos présentes seront remplacées par deux autres, qui représenteront deux autres
photographes parmi les dix photographes exposés. Ainsi celle de gauche glissera vers le haut, et
celle de droite vers le bas, comme si elles étaient « poussées » par les photos venant après.
Le design du site quant à lui tourne autour du gris, du noir, du blanc et du jaune d’or, pour un raccord
avec le logo de l’évènement. Le motif présent tout en bas à gauche de la page en faible opacité est
un clin d’oeil à la structure de la Cité de la mode et du Design, lieu d’exposition.
Le menu vertical à droite sera toujours présent sur toutes les pages et aucunes informations ne
changera. Lorsque l’on cliquera sur une rubrique, cela conduira l’internaute directement à la page
demandée.
Dans la rubrique à propos, nous décrirons le but de l’exposition, ce que l’on pourra y trouver.
Dans la rubrique Guerre, le photographe Capa sera mis en avant.
Dans la rubrique quotidienne, en rapport avec des photos prises sur le fait, nous y trouverons
Cartier-Bresson, Seymour et Doisneau.
En ce qui concerne la rubrique provocation, seront mis à l’honneur Newton et Hamilton.
Dans célébrités, on y trouvera Perrier, dans publicité, DiCorcia, et enfin dans nature, il y aura ArthusBertrand et Plisson.
30
31
MAQUETTE RUBRIQUE
DESCRIPTIF NAVIGATION DE LA RUBRIQUE
Dans chaque rubrique nous trouverons toujours le menu vertical et les mêmes informations que sur
la home.
Cependant, lorsque l’utilisateur cliquera sur une rubrique ou si au moment du scroll il change de
rubrique, l’intitulé de cette dernière sera habillée d’un contour doré, rappelant celui du logo.
L’internaute trouvera également le ou la photo des photographes mis en avant dans la dites rubrique
accompagné d’un léger descriptif. Une citation du photographe apparaîtra également de manière
progressive.
Le background de la rubrique sera constitué de plusieurs oeuvres du photographe présenté.
Cependant, elles n’apparaîtront qu’une par une. Par contre l’utilisateur pourra prendre la main s’il
souhaite passer à la photo suivante plus tôt.
Enfin un parallaxe sera également utilisé pour faire déplacer le poirtrait et le descriptif de manière
plus lente par rapport au fond.
32
33
MISE EN SITUATION DE LA HOME
Pour le smartphone, le design du site est réorganisé.
Le menu est un menu déroulant.
La home est cependant également constituée de photos
mais qui apparaîtront en slide et que l’utilisateur pourra
prendre en main. En légende de chaque photo, le nom
du photographe.
Par ailleurs les effets parallaxes sont annulés.
34
35

Trendboards - Formation web design

Transcription

Documents pareils

cc sud herault : l`amour vache - Culture et Sport Solidaires 34

TEJO REMY - ePressPack

par Patrick-Charles Renaud

Référence annonce : T612454

13 MARS 2016 SAINT REMY DE PROVENCE

Référence annonce : 1009614

Flyer Journée 29 juin Ecoles différentes

plan st remy pour le 23 octobre 2013

Fiche_Technique_files/Planning Salle 2015