close

Se connecter

Se connecter avec OpenID

Attention fichier PDF un peu lourd 120 pages

IntégréTéléchargement
Site culturel sur le mouvement BAUHAUS
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Sommaire
Dossier de présentation :............................... 5
Trendboard..................................................................................... 7
Charte graphique du site..............................................................35
Charte graphique du logo............................................................ 45
Charte graphique de la bannière................................................60
Design book : .........................................................73
Avant-propos.................................................................................76
Présentation du Concept.............................................................77
Titre et accroche............................................................................78
Benchmark.....................................................................................79
Ergonomie et technologies..........................................................102
Architectures..................................................................................104
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
3
4
DOSSIER
DE
PRÉSENTATION
TRENDBOARD
Avant-propos..........................................9
Couleurs.....................................................10
Formes....................................................... 12
Textures...................................................... 13
Puces et pictogrammes.................. 14
Typographie............................................ 16
Identité visuelle..................................... 18
Ambiances................................................ 20
Architectures...........................................24
8
Avant-propos
Mon projet professionnel porte sur la réalisation d’un
site culturel sur le mouvement Bauhaus.
Le Bauhaus est un mouvement moderne qui fut une
source d’inspiration et d’émancipation artistiques pour de
nombreux designers et architectes de la moitié du XXéme
siècle.
Le Bauhaus est un art d’une innovation et d’une mo-
dernité absolue . Il a joué un grand rôle dans le milieu
artistique du 20éme siécle, et laisse encore aujourd’hui la
trace dans notre quotidien.
Donc ce site à pour vocation de promouvoir cet art, de
le démocratiser et de rendre hommage à ce mouvement
riche et intemporel.
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
9
Couleurs
10
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Couleurs
DOMINANTE :
60%
SECONDAIRE
40% :
TONIQUE
10%:
:
:
CMJN : 68% 62% 61% 51%
CMJN :
9% 7% 7% 0%
CMJN :
29% 34% 48% 1%
RVB :
45 45 45
RVB :
222 222 222
RVB :
1681 44 116
TSL :
0° 0% 18%
TSL :
0° 0% 87%
TSL :
32° 31% 66%
LAB :
25 0 0
LAB :
91 0 0
LAB :
68 5 17
HEX:
2d2D2D
HEX:
dedede
HEX:
a89074
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
11
Textures
12
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Textures
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
13
Puces et pictogrammes
Voici
les puces choisies pour le son et le multimedia :
Voici les puces choisies pour le social media,
ainsi que quelques déclinaisons :
Voici quelques items choisies pour les
boutons et les sliders :
14
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Puces et pictogrammes
Finalité des pictogrammes, puces et items re-désignés pour le site :
- pour les réseaux sociaux
en hover
- pour le multimédia :
- pour les boutons :
- pour les contacts :
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
15
Typographies
16
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Typographies
Titres des rubriques
Roboto 22px BOLD 700
ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
Menu
Roboto 16px Medium
500
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuLégendes
12px Roboto THIN 100
ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
Accroche haut de page
Titillium WEB 50 px thin 700
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
Contenu
Titillium WEB 16 px thin 100
approche :50
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
17
Identité visuelle
Quelques exemples de logo
trouvés sur le web :
A voir :
Le logo officiel du Bauhaus
18
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
A lire
A lire et à voir :
Identité visuelle
Le logo officiel du site :
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
19
Ambiances
20
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Ambiances
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
21
Ambiances
22
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Ambiances
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
23
Architecture
http://www.eurosport.Fr
http://www.oui.fm
Exemple d’inspiration pour le menu en scroll.
Exemple d’inspiration
pour les rubriques cachées et slidées
http://www.badassembly.com/work/#
http://www.bauhaus-movement.com/
Exemple d’inspiration pour le portrait des maîtres.
Exemple d’inspiration pour la home.
(vidéo d’introduction)
24
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Architecture
http://www.bauhaus-movement.com/
http://www.malabardesign.fr
Exemple d’inspiration
pour la rubrique portrait des maitres.
Exemple d’inspiration
pour la rubrique portrait des maîtres.
http://www.newround.net
http://www.dollybibble.com
Source d’inspiration
pour les hovers des portraits
de la rubrique portrait des maitres.
Exemple d’inspiration
pour les rubriques cachées et slidées
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
25
Maquette
26
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Maquette Accueil Desktop
Maquette
Maquette Accueil Tablette landscape et portrait
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
27
Maquette
28
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Maquette
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
29
Maquette
Maquette L’Ecole du Bauhaus Desktop
30
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Maquette
Maquette L’Ecole du Bauhaus Desktop
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
31
Maquette
32
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Maquette Ecole du Bauhaus tablette
Maquette
Maquette Ecole du Bauhaus mobile
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
33
Maquette
Maquette Portrait des maîtres
34
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Maquette Accueil mobile landscape et portrait
Avant-propos..........................................36
Couleurs.....................................................37
Puces et pictogrammes.................. 38
Typographie............................................ 40
Accessibilité et lisibilité.................... 42
Ergonomie................................................ 44
CHARTE GRAPHIQUE
DU SITE
Avant-propos
Mon projet professionnel porte sur la réalisation d’un
site culturel sur le mouvement Bauhaus.
Le Bauhaus est un mouvement moderne qui fut une
source d’inspiration et d’émancipation artistiques pour de
nombreux designers et architectes de la moitié du XXéme
siècle.
Le Bauhaus est un art d’une innovation et d’une mo-
dernité absolue. Il a joué un grand rôle dans le milieu artistique du 20e siécle, et laisse encore aujourd’hui la trace
dans notre quotidien.
La charte graphique du site est une déclinaison de la
charte papier qui regroupe les obligations et les éléments
à respecter dans le développement d’un site WEB. (visuels,
logos, couleurs, polices,...).
La charte du site web découle de la charte graphique
globale d’une entreprise.
36
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Couleurs
DOMINANTE :
SECONDAIRE : :
TONIQUE : :
CMJN : 68% 62% 61% 51%
CMJN :
9% 7% 7% 0%
CMJN :
29% 34% 48% 1%
RVB :
RVB :
222 222 222
RVB :
1681 44 116
TSL :
45 45 45
0° 0% 18%
TSL :
0° 0% 87%
TSL :
32° 31% 66%
LAB :
25 0 0
LAB :
91 0 0
LAB :
68 5 17
HEX:
2d2D2D
HEX:
dedede
HEX:
a89074
81
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
37
Puces et pictogrammes
Voici
les puces choisies pour le son et le multimedia :
Voici les puces choisies pour le social media,
ainsi que quelques déclinaisons :
Voici quelques items choisies pour les
boutons et les sliders :
38
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Puces et pictogrammes
Finalité des pictogrammes, puces et items re-désignés pour le site :
- pour les réseaux sociaux
en hover
- pour le multimédia :
- pour les boutons :
- pour les contacts :
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
39
Typographies
40
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Typographies
Titre des rubriques
Roboto 22px BOLD 700
ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
Menu
Roboto 16px Medium
500
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
Accroche haut de page
Titillium WEB 50 px thin 700
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
Légendes
12px Roboto THIN 100
ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
Contenu
Titillium WEB 16 px thin 100
approche :50
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
41
Accessibilité et lisibilité
Le référencement :
Le référencement naturel du site dépend
de plusieurs critères indépendants :
- La pureté du code
- La qualité du remplissage de la partie
head des pages HTML ( les méta )
- Les images doivent être libéllés et légendés de façon pertinente.
- La négociation de lien entrant sur le site.
Mais
aussi Une campagne publicitaire
sur le web avec la présence d’outils commerciaux tels que Add words (liens publicitaires) pour un référencement payant, un
plan pertinent de mon site, amélioreraient
la position de mon site dans les moteurs de
recherche.
42
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Le nom de domaine :
Le nom de domaine doit être facile à dif-
fuser, il est indispensable
de le choisir le plus simple possible.
C’est pour cette raison que mon site s’in-
titulera :
www.le-bauhaus-fr
Développement :
Les technologies utilisées pour le déve-
loppement et la construction du site sont :
HTML5, CSS3 et Jquery.
Ainsi que les logociels : Photoshop pour
la retouche d’image, Illustrator pour la création vectorielle, Dreamwaver et Brackets
pour l’intégration.
Accessibilité et lisibilité
Le logo :
Le
logo ou ID est une représentation
graphique d’une marque, d’une entreprise,
ou autres. Il permet de favoriser la reconnaissance de la marque et doit donc posséder des qualités évocatrices de l’activité
et de ses valeurs. Il doit être lisible et plaçé
judicieusement sur le site.
C’est pour toutes ces raisons que le logo
du site sera plaçé en évidence dans le menu.
Le contenu :
Le favicon :
Le site sous format multipages, sera composé de plusieurs rubriques avec des thématiques logiques et didactiques, à savoir :
- Une introduction au Bauhaus
- L’école sa création et ses idées forces.
- Les portraits du Bauhaus
- Son héritage culturel
Le favicon est une mini-image aux dimen-
sions 16 pixels sur 15 qui s’affiche à coté de
l’adresse url dans la fenêtre du navigateur.
Le Favicon est destiné à enjoliver le site ;
voici le favicon crée pour l’occasion :
Ainsi le contenu sera bien écrit et
structuré
pour que l’internaute ai un accès rapide, et
direct à l’information qu’il recherche.
La structure :
Le site du Bauhaus est une structure dite
simple et linéaire, comprenant un :
- Un header
- du contenu avec du visuel, du texte et des
animations.
- un footer.
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
43
Ergonomie
Temps de chargement :
Accès à l’information :
Le temps de chargement de chacune
La règle des 3 clics est respectée sur ce
des pages ne doit pas dépasser les 3
secondes au risque de perdre des internautes.
C’est pour ces raisons qu’il est opportun
d’alleger son code HTML, de supprimer les
fichiers inutiles, de bien placer ses appels
CSS et Jquery, mais aussi d’optimiser les
images.
Un bon rapport qualité/poids favorise le
temps de chargement de chaque page.
44
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
site, car l’information est directe ; rien ne
s’interpose entre l’information et l’internaute.
Le site est optimisé pour une validation
pour le W3C
Navigation et zoning :
Pour naviguer de manière utile et
confortable sur le site différents éléments
sont proposées à l’internaute pour se repérer sur la page.
Un menu qui est l’élément central, un
fil d’ariane (mais qui n’est pas utile dans
mon cas, car on est plus dans une navigation horizontale que verticale),le plan du
site ( Il permet à l’internaute d’avoir accès
au contenu du site), et un moteur de recherche, si le site est très étoffé.(inutile
pour mon site)
Avant-propos..........................................46
Principes généraux.............................47
Graphisme............................................... 48
Couleurs.................................................... 52
Typographies.......................................... 55
Zone de protection.............................. 56
Autorisations et interdits................ 58
CHARTE GRAPHIQUE
DU LOGO
Avant-propos
Mon projet professionnel porte sur la réalisation d’un
site culturel sur le mouvement Bauhaus.
Le Bauhaus est un mouvement moderne qui fut une
source d’inspiration et d’émancipation artistiques pour de
nombreux designers et architectes de la moitié du XXéme
siècle.
Le Bauhaus est un art d’une innovation et d’une mo-
dernité absolue. Il a joué un grand rôle dans le milieu artistique du 20e siécle, et laisse encore aujourd’hui la trace
dans notre quotidien.
L’identité
visuelle rassemble l’ensemble des signes
graphiques illustrant et symbolisant le nom, les valeurs,
l’ambition, la culture et les activités de l’entreprise.
Elle est véhiculée sur la totalité des outils qu’elle émet.
46
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Principes généraux
Ce logo est un logo à lire.
Les lettres A et U sont à moitié coupées et forment un
effet miroir avec la deuxième partie du logo.
Cet effet miroir est fait pour susciter l’imagination de
l’internaute, et ainsi l’aider à se projeter dans l’époque et
le mouvement.
Le choix de la typographie est expliqué à la rubrique
«typographie».
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
47
Graphisme
Le logo du site se présente sous la forme d’un logo à
lire, et conçu spécialement pour le site ;
Il
existe deux versions en trichromie présentées ciaprès.
48
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Graphisme
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
49
Logo et lignes
Le logo se compose de 3 couleurs, reprenant les couleurs
du site et sa signification (cf Annexes)
50
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Logo et lignes
POSITIF
Versions en quadrichromie :
NEGATIF
EN NUANCES DE GRIS
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
51
Couleurs
DOMINANTE :
SECONDAIRE : :
TONIQUE : :
CMJN : 68% 62% 61% 51%
CMJN :
9% 7% 7% 0%
CMJN :
29% 34% 48% 1%
RVB :
RVB :
222 222 222
RVB :
1681 44 116
TSL :
45 45 45
0° 0% 18%
TSL :
0° 0% 87%
TSL :
32° 31% 66%
LAB :
25 0 0
LAB :
91 0 0
LAB :
68 5 17
HEX:
2d2D2D
HEX:
dedede
HEX:
a89074
52
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
81
Couleurs
Le logo se compose de 3 couleurs, reprenant les couleurs
du site et sa signification (cf Annexes).
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
53
Fond
Fond sombre
Fond perturbé
Fond clair
54
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Typographies
ABCDEFGHijklmN
OPQRsTuvWXyz
123456789
Le choix de la typographie s’est fait sur plusieurs cri-
téres :
- sans sérif
- un corps étendu sur la longueur, et des lignes droites.
Rappelant ainsi la modernité du mouvement pour son
époque, et l’architecture des batîments linéaire du Bauhaus ; Cette dernière correspondait naturellement à ce que
je recherchais.
FONT : BigNoodleTitling GRAISSE : Regular
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
55
Zone de protection
x=
= La hauteur de la moitié de la taille du A
35mm
Version print
16 mm
60 px
27 px
56
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Version web
Zone de protection
Le
logo peut être disposé librement en respectant la
zone de protection.
L’espace minimum est représenté par la hauteur et la
largeur de la deuxieme lettre
Malgrè que le logo ait été conçu spécialement pour l’oc-
casion, et uniquement pour une utilisation Web, une version print est disponible ci-après.
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
57
Autorisations et intedits
Autorisé
L’agrandissement ou la réduction du logo est autorisée, si nécessaire.
58
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Autorisations et interdits
Interdit
De déformer le logo.
Changer la couleur du fond
Changer la couleur du texte
Mettre du contour au texte
Ecraser le logo
Rajouter une ombre portée
ou sur le cadre
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
59
CHARTE GRAPHIQUE
DE LA BANNIERE
Avant-propos..........................................62
Couleur....................................................... 63
Typographies.......................................... 65
Dimensions et technologies......... 66
StoryBoard............................................... 68
60
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
61
Avant-propos
Mon projet professionnel porte sur la réalisation d’un
site culturel sur le mouvement Bauhaus.
Le Bauhaus est un mouvement moderne qui fut une
source d’inspiration et d’émancipation artistiques pour de
nombreux designers et architectes de la moitié du XXéme
siècle.
Le Bauhaus est un art d’une innovation et d’une mo-
dernité absolue. Il a joué un grand rôle dans le milieu artistique du 20e siécle, et laisse encore aujourd’hui la trace
dans notre quotidien.
Les
bannières publicitaires sont là pour promouvoir
tout service que ce soit en permettant à l’utilisateur qui cilique dessus de se rendre directement sur l’espace du site
concerné.
62
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Couleurs
Noir
Gris
Beige foncé
CMJN : 68% 62% 61% 51%
CMJN :
9% 7% 7% 0%
CMJN :
29% 34% 48% 1%
RVB :
RVB :
222 222 222
RVB :
1681 44 116
TSL :
45 45 45
0° 0% 18%
TSL :
0° 0% 87%
81
TSL :
32° 31% 66%
LAB :
25 0 0
LAB :
91 0 0
LAB :
68 5 17
HEX:
2d2D2D
HEX:
dedede
HEX:
a89074
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
63
64
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Typographies
Portrait des maîtres
Titillium Semibold 15pt
ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz
Adresse URL
Roboto Light 14pt
ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
123456789,;:=ù`^$<>
Accroche
Roboto bold 20pt
ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
Citation
Titillium thin 20 pt
ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
65
Dimensions
66
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Dimensions
Dimensions :
300*250 pixels (pavé)
Durée :
10,5 sec
Réalisation :
Flash AS3 Photoshop Illustrator
Format :
.swf
Poids de l’animation :
60 ko
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
67
Story-board
L’animation se présente sous la forme de 4 séquences : 3 ayant la même fonction à savoir
présenter 3 maîtres de l’école et une citation de chacun d’entre eux ; et la dernière séquence
présentant le logo, l’accroche et l’adresse URL du site.
00:00 sec
00:00 sec
Temps de la séquence : 2 ,50 sec
01:00 sec
La séquence débute par un fond fixe avec le portrait de
Ludwig Mies Van Der Rohe
68
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
01:00 sec
02:50 sec
02:50 sec
Durant la séquence :
- Apparition dynamique de haut en bas du titre.(synchro)
- Apparition dynamique de gauche à droite de la citation
Story-board
02:50 sec
02:50 sec
Temps de la séquence : 2 ,50 sec
03:50 sec
La séquence débute par un fond fixe avec le portrait de
Wassily Kandinsky
03:50 sec
05:00 sec
05:00 sec
Durant la séquence :
- Apparition dynamique de haut en bas du titre.(synchro)
- Apparition dynamique de gauche à droite de la citation
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
69
Story-board
Temps de la séquence : 2 ,50 sec
05:00 sec
05:00 sec
06:00 sec
La séquence débute par un fond fixe avec le portrait de
Walter Gropius
70
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
06:00 sec
Durant la séquence :
07:50 sec
07:50 sec
- Apparition dynamique de haut en bas du titre.(synchro)
- Apparition dynamique de gauche à droite de la citation
Story-board
07:50 sec
07:50 sec
Fond fixe avec l’adresse URL
Temps de la séquence : 3,00 sec
08:50 sec
10:50 sec
08:50 sec
10:50 sec
Durant la séquence :
- Apparition du logo en fondu (1er temps)
- Apparition de l’accroche en fondu (2eme temps)
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
71
DESIGN
BOOK
Sommaire
Avant-propos..........................................76
Présentation du concept.................77
Titre et Accroche.................................. 78
Benchmark graphique..................... 79
Ergonomie et technologies............ 102
Architectures........................................... 104
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
75
Avant-propos
Mon projet professionnel porte sur la réalisation d’un
site culturel sur le mouvement Bauhaus.
Le Bauhaus est un mouvement moderne qui fut une
source d’inspiration et d’émancipation artistiques pour de
nombreux designers et architectes de la moitié du XXéme
siècle.
Le Bauhaus est un art d’une innovation et d’une mo-
dernité absolue. Il a joué un grand rôle dans le milieu artistique du 20éme siécle, et laisse encore aujourd’hui la trace
dans notre quotidien.
76
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Présentation du concept
Ce site à pour vocation de promouvoir cet art, de le dé-
mocratiser et de rendre hommage à ce mouvement riche
artistiquement et intemporel.
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
77
Titre et accroche
Le titre du site est : Le Bauhaus
L’accroche est : Life for Art
78
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Benchmark Graphique
Sommaire :
Avant propos.......................................................................80
La cible.....................................................................................81
Les mots clefs.................................................................... 82
Les concurrents..................................................................83
Les concurrents sérieux...............................................84
Benchmark graphique...................................................86
Bilan de la Benchmark..................................................94
Sources d’inspiration......................................................96
Positionnements et points forts.............................98
Proposition de rubriques.............................................99
Outils envisagés................................................................100
Maquette et Architectures..........................................104
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
79
Avant-propos
M on
projet professionnel est un site culturel, et
synthétique sur le mouvement Bauhaus. L e Bauhaus est un mouvement moderne celui-ci
fut une source d’inspiration et d’émancipation artistique pour les designers et les architectes de la moitié du XXe siecle.
80
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
La cible
Le cœur de cible :
Les passionnés du mouvement Bauhaus
et de son époque, du patrimoine et de son
héritage ; Des théoriciens de l’art, des typographes, des photographes, des professionnels de l’art.
La cible :
Les
La cible étendue :
étudiants en écoles d’art, architectes et designers, historiens, peintres, typographes.
Des curieux ou des amateurs d’art mo-
derne.
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
81
Mots-clés
Moteur de recherche
Mot cléf
Le Bauhaus de Weimar
9360000
203000
196000
Le Bauhaus de Weimar + L’école
du Bauhaus
78300
16000
16000
Le Bauhaus de Weimar + L’école
du Bauhaus + mouvement moderne
12400
6260
6280
Le Bauhaus de Weimar + L’école
du Bauhaus + mouvement moderne + Dessau
3760
9270
9270
La recherche la plus précise et susceptible de donner un résultat objectif à la requête est l’association des
groupes de mots : Le Bauhaus de Weimar + L’Ecole du Bauhaus + Mouvement moderne (+ Dessau) en fonction
du moteur de recherche.
82
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Concurrents
http://www.bauhaus-dessau.de/english/home.html
http://www.bauhaus-movement.com/en/index.
http://www.bauhaus.de/de/ (Archives-musée à Berlin).
http://www.bauhaus-center.com.
http://impuls-bauhaus.de/ (Site en Allemand)
http://www.moma.org/interactives/exhibitions/2009/bauhaus/Main.html#/Timeline
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
83
Concurrents sérieux
Concurrent principal
http://www.bauhaus-movement.com
Immersion dans le Bauhaus avec
un site trend.
http://www.bauhaus.de
Le Bauhaus archivé
84
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
http://www.bauhaus-dessau.de
Le site portail en Allemand et en
Anglais sur le Bauhaus
http://www.bauhaus-center.com
La référence du Bauhaus à Tel Aviv
Les concurrents sérieux et
leur référencement sur les
moteurs de recherche :
référencé
Non référencé
Non référencé
référencé
référencé
référencé
référencé
référencé
référencé
référencé
référencé
référencé
http://www.bauhaus-movement.com
http://www.bauhaus-center.com
http://www.bauhaus-dessau.de
http://www.bauhaus.de
Benchmark graphique
Bauhaus Dessau
http://www.bauhaus-dessau.de/english/home.html
Le site portail sur le Bauhaus
Ce site (lisible seulement en Anglais et en Allemand) sur la fondation est assez standard et conforme au standard du web dans sa
conception;
Il est constitué d’un menu avec ses différentes rubriques, des photos en mouseover (du noir et blanc vers la couleur), et du texte pour
illustrer les différentes œuvres du mouvement.Celui-ci est très représentatif de l’esprit Bauhaus.
Architecture de l’information :
Design :
Ergonomie:
Points positifs :
Points positifs :
Points positifs :
•
•
•
•
•
Les informations et le contnu sont aérés.
Sobre sans artifice, et efficace
Points négatifs :
Points négatifs :
•
•
•
•
•
•
Manque de différenciation et de hiérarchisation dans les informations.
Informations trop linéaires et mise au
même niveau.
Le menu est discret
86
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Design plat.
Pas d’accroche graphique.
Site pas assez reconnaissable et identifiable par une caractéristique.
Règle des 3 clics respectés
Uniformité des rubriques
Fil d’Ariane
Points négatifs :
•
Manque d’interaction.
Bauhaus Dessau
Benchmark graphique
http://www.bauhaus-center.com/
La référence du Bauhaus à Tel Aviv.
Site du centre Bauhaus à Tel Aviv ; Il est constitué d’un footer, du
contenu visuel (textes + images) et d’un footer.
Sa configuration, en fait un site simple et aéré, de qualité.
Architecture de l’information :
Points positifs :
•
•
•
•
•
•
L’espace entre les éléments graphiques.
Les légendes sous les photos.
Prise en main du site facile.
Les références extérieures.
Bonne hiérarchisation des informations.
La qualité de l’éditorial
Points négatifs :
•
•
88
•
Le menu et les titres légèrement trop
gros.
La police du contenu éditorial ne correspond pas avec un mouvement moderne.
Les paragraphes manquent d’accroche.
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Design :
Points positifs :
•
L’identité visuelle à lire et à voir, est facilement reconnaissable.
Points négatifs
•
•
Le design du site manque un peu de
caractère.
Manque d’accroche graphique.
Ergonomie:
Points positifs :
•
•
•
Les rubriques et les menus sont faciles
d’accès.
Site facile à lire.
La partie shop propose un large panel de
produits.
Points négatifs :
•
•
•
Pas de fil d’ariane.
Manque de profondeur
Très peu d’interaction, et animations
nulles
Benchmark graphique
http://www.bauhaus.de/de/
L’archive du Bauhaus
Ce site est le site d’archive du musée du Bauhaus situé à Berlin.
Il est constitué d’une page principale avec 4 colonnes disposées
en menu correspondant aux rubriques, composées d’un slideshow
automatique.
Le vrai plus de ce site est le menu qui s’affiche en latéral droit, dans
les rubriques en permanence ; Ce qui permet à l’internaute, de ne
jamais se perdre et assure un réel confort de navigation.
Architecture de l’information :
Points positifs :
• Le footer en fixed permet une navigation
aisée, et d’avoir en quelques clics accès a toutes
les fonctionnalités du site.
• Le menu sur le coté toujours présent lors de
la navigation sur les rubriques
•
L’agencement des rubriques et des articles.
Points négatifs :
• Une seule et unique police pour tout le
site
90
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Design :
Points positifs :
• Les rubriques et le menu sont bien mis
en valeur
Points négatifs :
•
L’identité visuelle est seulement à lire.
Ergonomie:
Points positifs :
• Le site est simple et peu chargé.
• Bonne lisibilité
• Règle des 3 clics respectèe
• Rapidité du temps d’affichage
• Le footer fixe avec du contenu
facilite l’échange
Points négatifs :
•
Aucune animation
Benchmark graphique
http://www.bauhaus-movement.com/en/index.html
Le site le plus trend sur le Bauhaus
Le site le plus trend actuellement sur le Bauhaus.
Une vidéo d’intro en plein écran, un site composé en one page avec
des points d’ancrage en effet smooth.
Architecture de l’information :
Points positifs :
•
•
Lien direct sur les réseaux sociaux et sa
répétition dans le site.
La lecture est facile.
Design :
Points positifs :
•
•
•
Site en one page
La vidéo en header
Le design simple et épuré dans le style
Bauhaus
Ergonomie:
Points positifs :
•
•
Le lien dans le footer qui te fait remonter tout en haut du site.
Prise en main du site facile.
Points négatifs
•
Points négatifs :
•
Le texte est un peu plat sans illustrations et
photos.
92
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Manque d’illustrations et de photos
Points négatifs :
Bilan
A près une analyse complète des mes 4 concur-
rents, je retiens que les conceptions des derniers
sont très variées et différents les uns par rapport
aux autres ;
G raphiquement
les sites sont peu chargés, il
manque un peu d’animations et d’intéractivité sur
certains qui dynamiseraient l’ensemble et donneraient des rendus graphiques moins plats.
A retenir :
A éviter :
La structure générale du
site aérée.
Le graphisme trop plat
du site.
La prise en main du site
Manque d’accroche
graphique
Concurrent 3 : http://www.bauhaus.de/de/
Le menu facilement
accessible
Manque d’animations
Concurrent 4 : http://www.bauhaus-movement.com/en/index.html
La vidéo d’intro, l’esprit
one page
Manque d’illustrations
et de photos.
Concurrent 1 : http://www.bauhaus-dessau.de/english/home.html
Concurrent 2 : http://www.bauhaus-center.com/
94
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Bilan
Globalement je retiens du bilan, les concepts graphiques
suivant pour mon site :
- des rubriques biens aérées, et structurées ;
- une prise en main du site facile ;
- un menu facilement bien visible ;
- une vidéo d’intro ;
- et de l’interactivité au clic, au scroll, au survol ;
A éviter un graphisme trop plat, ou sans accroche visuelle et graphique, et surtout une information non-directe.(passant par l’intermédiaire d’un lien ou d’une image)
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
95
Sources d’inspiration :
http://www.eurosport.Fr
http://www.oui.fm
Exemples d’inspiration pour le menu en scroll.
Exemple d’inspiration
pour les rubriques cachés et slidés
http://www.badassembly.com/work/#
http://www.bauhaus-movement.com/
Exemples d’inspiration pour le portrait des maîtres.
Exemples d’inspiration pour la home.
(vidéo d’introduction)
96
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Sources d’inspiration :
http://www.malabardesign.fr
Exemple d’inspiration
pour la rubrique portrait des maîtres.
http://www.newround.net
Source d’inspiration
pour les hovers des portraits
de la rubrique portrait des maîtres.
Exemple d’inspiration
pour la rubrique portrait des maîtres.
http://www.dollybibble.com
Exemple d’inspiration
pour les rubriques cachées et slidées
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
97
Positionnement et points forts
Le
site du Bauhaus se présentera sous la forme
d’un multipage. Seul et unique site dédié au Bauhaus
en Francais, ce dernier sera composé de plusieurs
rubriques, d’une sobriété particulière et un choix colorimétrique contrasté, de 3 grandes pages principales, et d’une vidéo d’introduction dans la home;
M ais
la particularité de ce site est d’être le seul
site en Français sur le mouvement, il est donc incontournable et une référence pour les gens qui rechercheraient des informations sur le Mouvement.
98
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Rubriques
L e site ce compose de 4 pages principales, mais seulement de 3 développées :
L’ accueil : cette page est l’introduction du site.
L’ Ecole du Bauhaus : cette rubrique décrit la création de l’Ecole, son organisation et ses idées forces .
L e portrait des maitres : cette rubrique expose les principaux maîtres et
élèves du Bauhaus.
E lles
mêmes comportant chacune un header, un contenu composé de rubriques, et un footer.
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
99
Outils
Les technologies employées pour la construction du site sont :
Outils et langages WEB
100
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Logiciels utlisés
Module
Inventaire du site :
La page d’Accueil comprends :
- 1 lecteur multimédia avec du son
- 1 rubrique texte
- 1 rubrique image
La navigation comprends :
- 1 menu
- 1 logo
Le footer comprends :
- 1 inscription à la newsletter
- 1 des pictogrammes de contact
- 7 boutons social media
- 1 géolocalisation
La page d’Ecole du Bauhaus comprends :
- 1 image fixe de présentation titrée ;
- 1 diaporama automatique avec 3 photos ;
- 1 photo d’un mobilier dans le style Bauhaus ;
- 1 galerie de photos visionnable en hover sur les vignettes intégrées dans un slider caché ;
- 1 diaporama automatique intégré dans un slider caché ;
- 1 photo du corps professoral ;
- 1 galerie d’image représentant la cité de Dessau Torten aujourd’hui visionnable au clic ;
- 1 photo commémorative du Bauhaus à Berlin ;
- 1 galerie d’image en fondu enchainé de 3 photos de l’atelier du Bauhaus ;
- 1 photo habillée du schéma représentatif de l’enseignement scolaire du Bauhaus ;
- 1 photo dynamique représentant la récréation pour les élèves du Bauhaus ;
- 1 photo d’un ballet d’oskar schlemmer ;
- 1 bouton de retour au top ;
- 7 blocs texte ;
La page Portrait des maîtres comprends:
- 1 image fixe de présentation titrée ;
- 1 portrait de Walter Gropius ;
- 2 photos dynamiques en rapport avec Walter Gropius ;
- 1 Bloc texte comprenant la biographie de Walter Gropius qui apparait au scroll ;
-1 portrait de Hannes Meyer ;
- 2 photos dynamiques en rapport avec Hannes Meyer ;
- 1 Bloc texte comprenant la biographie de Hannes Meyer qui apparait au scroll ;
-1 portrait de Ludwig mies Van der Rohe ;
- 2 photos dynamiques en rapport avec Ludwig mies Van der Rohe ;
- 1 Bloc texte comprenant la biographie de Ludwig mies Van der Rohe qui apparait au scroll ;
-1 portrait de Vassily Kandinski ;
- 2 photos dynamiques en rapport avec Vassily Kandinski ;
- 1 Bloc texte comprenant la biographie de Paul klee apparait au scroll ;
-1 portrait de Paul Klee;
- 2 photos dynamiques en rapport avec Paul Klee ;
- 1 Bloc texte comprenant la biographie de Vassily Kandinskiqui apparait au scroll ;
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
101
Médias, technologies , mise a jour et traitements visuels.
Vidéo :
La vidéo d’introduction est au format mp4,OGG et WebM pour une plus grande compatibilité.
Photos :
Les photos sont optimisées pour le web en RVB 72 dpi qui permet un temps de chargement optimisé.
Technologies :
Développement du site en HTML 5 CSS3 à l’aide du logiciel Brackets. Le site sera en partie responsive.
Mise à jour :
La mise à jour du site dépend des évenements culturels liés au Mouvement et du flux des réseaux sociaux.
102
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Ergonomie et navigation
Temps de chargement :
Accès à l’information :
Le temps de chargement de chacune
La règle des 3 clics est respectée sur ce
des pages ne doit pas dépasser les 3
secondes au risque de perdre des internautes.
C’est pour ces raisons qu’il est opportun
d’alleger son code HTML, de supprimer les
fichiers inutiles, de bien placer ses appels
CSS et Jquery, mais aussi d’optimiser les
images.
Un bon rapport qualité/poids favorise le
temps de chargement de chaque page.
Navigation et zoning :
site, car l’information est directe ; rien ne
s’interpose entre l’information et l’internaute.
Le site est optimisé pour une validation
par le W3C
Pour naviguer de manière utile et
confortable sur le site différents éléments
sont proposés à l’internaute pour se repérer sur la page.
Un menu qui est l’élément central, un
fil d’ariane (mais qui n’est pas utile dans
mon cas, car on est plus dans une navigation horizontale que verticale),le plan du
site ( Il permet à l’internaute d’avoir accès
au contenu du site), et un moteur de recherche, si le site est très étoffé.(inutile
pour mon site)
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
103
Architectures
Remarques :
Le site est strucuté pour une navigation horizontale, d’ou l’absence de plusieurs
niveaux.
104
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Architectures
Page d’accueil :
Zoning
Force visuelle
100%
75%
50%
25%
0%
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
105
Architectures
Page d’accueil :
Wireframe
106
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Architectures
Page d’accueil :
Gabarit
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
107
Architectures
Page d’accueil :
Design
108
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Architectures
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
109
Architectures
Page l’Ecole du Bauhaus :
Zoning
Force visuelle
100%
75%
50%
25%
0%
110
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Architectures
Page l’Ecole du Bauhaus :
Wireframe
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
111
Architectures
Page l’Ecole du Bauhaus :
Gabarit
112
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Architectures
Page l’Ecole du Bauhaus :
Design
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
113
Architectures
114
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Architectures
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
115
Architectures
Page Portrait des maitres :
Zoning
Force visuelle
100%
75%
50%
25%
0%
116
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Architectures
Page Portrait des maitres :
Wireframe
FOOTER
Footer
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
117
Architectures
Page Portrait des maitres :
Gabarit
118
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Architectures
Page Portrait des maitres :
Design
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
119
Architectures
120
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015
Auteur
Document
Catégorie
Uncategorized
Affichages
0
Taille du fichier
6 937 KB
Étiquettes
1/--Pages
signaler