Le Bauhaus : Life for Art

Site culturel sur le mouvement BAUHAUS
Mickael ATTUIL - ITECOM ART DESIGN - Web design 2015

3
Trendboard.....................................................................................7
Charte graphique du site..............................................................35
Charte graphique du logo............................................................45
Charte graphique de la bannière................................................60
Avant-propos.................................................................................76
Présentation du Concept.............................................................77
Titre et accroche............................................................................78
Benchmark.....................................................................................79
Ergonomie et technologies..........................................................102
Architectures..................................................................................104

Sommaire
Dossier de présentation :............................... 5
Design book : .........................................................73

TRENDBOARD
Avant-propos..........................................9
Couleurs.....................................................10
Formes....................................................... 12
Textures......................................................13
Puces et pictogrammes.................. 14
Typographie............................................ 16
Identité visuelle.....................................18
Ambiances................................................20
Architectures...........................................24

9
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.

10
Couleurs

11
Couleurs
CMJN :
RVB :
TSL :
LAB :
HEX:
68% 62% 61% 51%
45 45 45
0° 0% 18%
25 0 0
2d2D2D
CMJN :
RVB :
TSL :
LAB :
HEX:
9% 7% 7% 0%
222 222 222
0° 0% 87%
91 0 0
dedede
CMJN :
RVB :
TSL :
LAB :
HEX:
29% 34% 48% 1%
1681 44 116
32° 31% 66%
68 5 17
a89074
DOMINANTE :
60%
SECONDAIRE :
40% :
TONIQUE :
10%:

12
Textures

13
Textures

14
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 :

15
Finalité des pictogrammes, puces et items re-désignés pour le site :
en hover
- pour le multimédia :
- pour les boutons :
- pour les contacts :
- pour les réseaux sociaux

16
Typographies

17
Typographies
Menu
Roboto 16px Medium
500
ABCDEFGHIJKLMNO-
PQRSTUVXYZ
abcdefghijklmnopqrstu-
Contenu
Titillium WEB 16 px thin 100
approche :50
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
Titres des rubriques
Roboto 22px BOLD 700
ABCDEFGHIJKLMNO-
PQRSTUVXYZ abcdefghi-
jklmnopqrstuvxyz
123456789,;:=ù`^$<>
Accroche haut de page
ABCDEFGHIJKLMNOPQRSTU-
VXYZ
123456789,;:=ù`^$<>
Légendes
12px Roboto THIN 100
VXYZ abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>

18
Identité visuelle
Quelques exemples de logo
trouvés sur le web :
A voir : A lire A lire et à voir :
Le logo officiel du Bauhaus

19
Identité visuelle
Le logo officiel du site :

20
Ambiances

21
Ambiances

22
Ambiances

23
Ambiances

24
Architecture
Exemple d’inspiration pour le portrait des maîtres.
Exemple d’inspiration pour la home.
(vidéo d’introduction)
Exemple d’inspiration
pour les rubriques cachées et slidées
Exemple d’inspiration pour le menu en scroll.
http://www.badassembly.com/work/#
http://www.bauhaus-movement.com/
http://www.eurosport.Fr http://www.oui.fm

25
Architecture
pour la rubrique portrait des maîtres.
pour la rubrique portrait des maitres.
Source d’inspiration
pour les hovers des portraits
de la rubrique portrait des maitres.
http://www.malabardesign.fr
http://www.dollybibble.com
http://www.newround.net

26
Maquette
Maquette Accueil Desktop

27
Maquette
Maquette Accueil Tablette landscape et portrait

28
Maquette

29
Maquette

30
Maquette
Maquette L’Ecole du Bauhaus Desktop

31
Maquette
Maquette L’Ecole du Bauhaus Desktop

32
Maquette
Maquette Ecole du Bauhaus tablette

33
Maquette
Maquette Ecole du Bauhaus mobile

34
Maquette
Maquette Portrait des maîtres Maquette Accueil mobile landscape et portrait

CHARTE GRAPHIQUE
DU SITE
Avant-propos..........................................36
Couleurs.....................................................37
Puces et pictogrammes.................. 38
Typographie............................................ 40
Accessibilité et lisibilité....................42
Ergonomie................................................44

36
Avant-propos
siècle.
dernité absolue. Il a joué un grand rôle dans le milieu ar-
tistique 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.

37
CMJN :
RVB :
TSL :
LAB :
HEX:
68% 62% 61% 51%
45 45 45
0° 0% 18%
25 0 0
2d2D2D
CMJN :
RVB :
TSL :
LAB :
HEX:
9% 7% 7% 0%
222 222 222
0° 0% 87%
91 0 0
dedede
CMJN :
RVB :
TSL :
LAB :
HEX:
29% 34% 48% 1%
1681 44 116
32° 31% 66%
68 5 17
a89074
81
DOMINANTE : SECONDAIRE : : TONIQUE : :
Couleurs

38
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 :

39
Finalité des pictogrammes, puces et items re-désignés pour le site :
en hover
- pour le multimédia :
- pour les boutons :
- pour les contacts :
- pour les réseaux sociaux

40
Typographies

41
Typographies
Menu
Roboto 16px Medium
500
ABCDEFGHIJKLMNO-
PQRSTUVXYZ
abcdefghijklmnopqrstu-
vxyz
123456789,;:=ù`^$<>
Contenu
approche :50
ABCDEFGHIJKLMNOPQRSTUVXYZ
123456789,;:=ù`^$<>
Titre des rubriques
Roboto 22px BOLD 700
A B C D E F G H I J K L M N O -
PQRSTUVXYZ abcdefghi-
jklmnopqrstuvxyz
123456789,;:=ù`^$<>
Accroche haut de page
VXYZ
123456789,;:=ù`^$<>
Légendes
12px Roboto THIN 100
VXYZ abcdefghijklmnopqrstuvxyz
123456789,;:=ù`^$<>

42
Accessibilité et lisibilité
Le référencement : Le nom de domaine : Développement :
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égen-
dé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 com-
merciaux tels que Add words (liens publi-
citaires) pour un référencement payant, un
plan pertinent de mon site, amélioreraient
la position de mon site dans les moteurs de
recherche.
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
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éa-
tion vectorielle, Dreamwaver et Brackets
pour l’intégration.

43
Accessibilité et lisibilité
Le logo : Le contenu : Le favicon :
La structure :
Le logo ou ID est une représentation
graphique d’une marque, d’une entreprise,
ou autres. Il permet de favoriser la recon-
naissance de la marque et doit donc pos-
sé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 site sous format multipages, sera com-
posé 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
Ainsi le contenu sera bien écrit et structuré
pour que l’internaute ai un accès rapide, et
direct à l’information qu’il recherche.
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 :

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.

44
Ergonomie
Temps de chargement : Accès à l’information : Navigation et zoning :
Le temps de chargement de chacune
des pages ne doit pas dépasser les 3
secondes au risque de perdre des inter-
nautes.
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.
La règle des 3 clics est respectée sur ce
site, car l’information est directe ; rien ne
s’interpose entre l’information et l’inter-
naute.
Le site est optimisé pour une validation
pour le W3C
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 naviga-
tion horizontale que verticale),le plan du
site ( Il permet à l’internaute d’avoir accès
au contenu du site), et un moteur de re-
cherche, si le site est très étoffé.(inutile
pour mon site)

CHARTE GRAPHIQUE
DU LOGO
Avant-propos..........................................46
Principes généraux.............................47
Graphisme............................................... 48
Couleurs.................................................... 52
Typographies..........................................55
Zone de protection..............................56
Autorisations et interdits................58

46
Avant-propos
siècle.
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.

47
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».

48
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 ci-
après.

49
Graphisme

50
Logo et lignes
Le logo se compose de 3 couleurs, reprenant les couleurs
du site et sa signification (cf Annexes)

51
Logo et lignes
POSITIF
EN NUANCES DE GRIS
NEGATIF
Versions en quadrichromie :

52
CMJN :
RVB :
TSL :
LAB :
HEX:
68% 62% 61% 51%
45 45 45
0° 0% 18%
25 0 0
2d2D2D
CMJN :
RVB :
TSL :
LAB :
HEX:
9% 7% 7% 0%
222 222 222
0° 0% 87%
91 0 0
dedede
CMJN :
RVB :
TSL :
LAB :
HEX:
29% 34% 48% 1%
1681 44 116
32° 31% 66%
68 5 17
a89074
81
DOMINANTE : SECONDAIRE : : TONIQUE : :
Couleurs

53
Couleurs
Le logo se compose de 3 couleurs, reprenant les couleurs
du site et sa signification (cf Annexes).

54
Fond
Fond sombre
Fond clair
Fond perturbé

55
Typographies
ABCDEFGHijklmN
OPQRsTuvWXyz
123456789
FONT : BigNoodleTitling
GRAISSE : Regular
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 Bau-
haus ; Cette dernière correspondait naturellement à ce que
je recherchais.

56
x = = La hauteur de la moitié
de la taille du A
Version print
Version web
35mm
16 mm
60 px
27 px
Zone de protection

57
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 ver-
sion print est disponible ci-après.

58
Autorisations et intedits
L’agrandissement ou la réduction du logo est autorisée, si nécessaire.
Autorisé

59
Autorisations et interdits
Interdit
De déformer le logo. Changer la couleur du fond Changer la couleur du texte
Rajouter une ombre portéeEcraser le logoMettre du contour au texte
ou sur le cadre

60
Avant-propos..........................................62
Couleur....................................................... 63
Typographies..........................................65
Dimensions et technologies.........66
StoryBoard...............................................68
CHARTE GRAPHIQUE
DE LA BANNIERE

61

62
Avant-propos
siècle.
Les bannières publicitaires sont là pour promouvoir
tout service que ce soit en permettant à l’utilisateur qui ci-
lique dessus de se rendre directement sur l’espace du site
concerné.

63
Couleurs
81
CMJN :
RVB :
TSL :
LAB :
HEX:
68% 62% 61% 51%
45 45 45
0° 0% 18%
25 0 0
2d2D2D
CMJN :
RVB :
TSL :
LAB :
HEX:
9% 7% 7% 0%
222 222 222
0° 0% 87%
91 0 0
dedede
CMJN :
RVB :
TSL :
LAB :
HEX:
29% 34% 48% 1%
1681 44 116
32° 31% 66%
68 5 17
a89074
Noir Gris Beige foncé

64

65
Typographies
Portrait des maîtres
Titillium Semibold 15pt
ABCDEFGHIJKLMNOPQRSTUVXYZ abc-
defghijklmnopqrstuvxyz
123456789,;:=ù`^$<>
Accroche
Roboto bold 20pt
ABCDEFGHIJKLMNOPQRS-
TUVXYZ abcdefghijklmno-
pqrstuvxyz
123456789,;:=ù`^$<>
Citation
Titillium thin 20 pt
VXYZ abcdefghijklmnopqrstu-
vxyz
123456789,;:=ù`^$<>
Adresse URL
Roboto Light 14pt
ABCDEFGHIJKLMNOPQRSTUVXYZ abc-
defghijklmnopqrstuvxyz
123456789,;:=ù`^$<>

66
Dimensions

67
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

68
Story-board
00:00 sec
00:00 sec 01:00 sec 01:00 sec 02:50 sec
02:50 sec
Temps de la séquence : 2 ,50 sec
La séquence débute par un fond fixe avec le portrait de
Ludwig Mies Van Der Rohe
Durant la séquence :
- Apparition dynamique de haut en bas du titre.(synchro)
- Apparition dynamique de gauche à droite de la citation
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.

69
Story-board
02:50 sec 03:50 sec03:50 sec 05:00 sec
02:50 sec 05:00 sec
Wassily Kandinsky

70
Story-board
05:00 sec 07:50 sec
05:00 sec 06:00 sec06:00 sec 07:50 sec
Walter Gropius

71
Story-board
07:50 sec 10:50 sec
07:50 sec 08:50 sec08:50 sec 10:50 sec
Temps de la séquence : 3,00 sec
Fond fixe avec l’adresse URL Durant la séquence :
- Apparition du logo en fondu (1er temps)
- Apparition de l’accroche en fondu (2eme temps)

75
Avant-propos..........................................76
Présentation du concept.................77
Titre et Accroche.................................. 78
Benchmark graphique..................... 79
Ergonomie et technologies............102
Architectures...........................................104
Sommaire

76
Avant-propos
siècle.
dernité absolue. Il a joué un grand rôle dans le milieu artis-
tique du 20éme siécle, et laisse encore aujourd’hui la trace

77
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.

78
Titre et accroche
Le titre du site est : Le Bauhaus
L’accroche est : Life for Art

79
Benchmark Graphique
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
Sommaire :

80
Avant-propos
Mon projet professionnel est un site culturel, et
synthétique sur le mouvement Bauhaus.

Le Bauhaus est un mouvement moderne celui-ci
fut une source d’inspiration et d’émancipation artis-
tique pour les designers et les architectes de la moi-
tié du XXe siecle.

81
La cible
La cible : La cible étendue :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 ty-
pographes, des photographes, des profes-
sionnels de l’art.
Les étudiants en écoles d’art, archi-
tectes et designers, historiens, peintres, ty-
pographes.
Des curieux ou des amateurs d’art mo-
derne.

82
Le Bauhaus de Weimar 9360000 203000 196000
Le Bauhaus de Weimar + L’école
du Bauhaus
78300 16000 16000
du Bauhaus + mouvement mo-
derne
12400 6260 6280
du Bauhaus + mouvement mo-
derne + Dessau
3760 9270 9270
Mot cléf
Moteur de recherche
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.
Mots-clés

83
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
Concurrents

84
http://www.bauhaus-movement.com
http://www.bauhaus-center.com
http://www.bauhaus-dessau.de
http://www.bauhaus.de
Le site portail en Allemand et en
Anglais sur le Bauhaus
La référence du Bauhaus à Tel Aviv
Le Bauhaus archivé
Immersion dans le Bauhaus avec
un site trend.
Concurrent principal
Concurrents sérieux

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é
http://www.bauhaus-movement.com
http://www.bauhaus-center.com
http://www.bauhaus-dessau.de
http://www.bauhaus.de

86
http://www.bauhaus-dessau.de/english/home.html
Ce site (lisible seulement en Anglais et en Allemand) sur la fonda-
tion est assez standard et conforme au standard du web dans sa
conception;
Il est constitué d’un menu avec ses différentes rubriques, des pho-
tos 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 re-
présentatif de l’esprit Bauhaus.
• Sobre sans artifice, et efficace
• Design plat.
• Pas d’accroche graphique.
• Site pas assez reconnaissable et identi-
fiable par une caractéristique.
• Règle des 3 clics respectés
• Uniformité des rubriques
• Fil d’Ariane
• Manque d’interaction.
• Manque de différenciation et de hiérarchi-
sation dans les informations.
• Informations trop linéaires et mise au
même niveau.
• Le menu est discret
Architecture de l’information : Ergonomie:Design :
Points positifs : Points positifs : Points positifs :
Points négatifs :
Points négatifs :Points négatifs :
• Les informations et le contnu sont aérés.
Bauhaus Dessau
Le site portail sur le Bauhaus
Benchmark graphique

88
Points négatifs :
Points négatifs
Points négatifs :
http://www.bauhaus-center.com/
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é.
• 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
• Le menu et les titres légèrement trop
gros.
• La police du contenu éditorial ne corres-
pond pas avec un mouvement moderne.
• Les paragraphes manquent d’accroche.
• L’identité visuelle à lire et à voir, est facile-
ment reconnaissable.
• Le design du site manque un peu de
caractère.
• Manque d’accroche graphique.
• Pas de fil d’ariane.
• Manque de profondeur
• Très peu d’interaction, et animations
nulles
• Les rubriques et les menus sont faciles
d’accès.
• Site facile à lire.
• La partie shop propose un large panel de
produits.
La référence du Bauhaus à Tel Aviv.
Benchmark graphique

90
Benchmark graphique
http://www.bauhaus.de/de/
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.
L’archive du Bauhaus
Points négatifs :
Points négatifs :
Points négatifs :
• L’identité visuelle est seulement à lire.
• Les rubriques et le menu sont bien mis
en valeur• 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
• Une seule et unique police pour tout le
site
• L’agencement des rubriques et des articles.
• Le site est simple et peu chargé.
• Aucune animation
• Bonne lisibilité
• Règle des 3 clics respectèe
• Rapidité du temps d’affichage
• Le footer fixe avec du contenu
facilite l’échange

92
http://www.bauhaus-movement.com/en/index.html
• Site en one page
• La vidéo en header
• Le design simple et épuré dans le style
Bauhaus
• Lien direct sur les réseaux sociaux et sa
répétition dans le site.
• La lecture est facile.
• Le texte est un peu plat sans illustrations et
photos.
• Le lien dans le footer qui te fait remon-
ter tout en haut du site.
• Prise en main du site facile.
• Manque d’illustrations et de photos
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.
Points négatifs :
Points négatifs
Points négatifs :
Le site le plus trend sur le Bauhaus
Benchmark graphique

94
Bilan
Aprè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 ;
Graphiquement les sites sont peu chargés, il
manque un peu d’animations et d’intéractivité sur
certains qui dynamiseraient l’ensemble et donne-
raient des rendus graphiques moins plats.
A retenir : A éviter :
Concurrent 1 : http://www.bauhaus-dessau.de/english/home.html
Concurrent 2 : http://www.bauhaus-center.com/
Concurrent 3 : http://www.bauhaus.de/de/
Concurrent 4 : http://www.bauhaus-movement.com/en/index.html
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
Le menu facilement
accessible
La vidéo d’intro, l’esprit
one page
Manque d’illustrations
et de photos.
Manque d’animations

95
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 vi-
suelle et graphique, et surtout une information non-di-
recte.(passant par l’intermédiaire d’un lien ou d’une image)

96
Sources d’inspiration :
Exemples d’inspiration pour le portrait des maîtres.
Exemples d’inspiration pour la home.
(vidéo d’introduction)
pour les rubriques cachés et slidés
Exemples d’inspiration pour le menu en scroll.
http://www.badassembly.com/work/#
http://www.eurosport.Fr http://www.oui.fm

97
Sources d’inspiration :
Source d’inspiration
pour les hovers des portraits
de la rubrique portrait des maîtres.
http://www.malabardesign.fr
http://www.newround.net
http://www.dollybibble.com

98
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 co-
lorimétrique contrasté, de 3 grandes pages princi-
pales, et d’une vidéo d’introduction dans la home;
Mais la particularité de ce site est d’être le seul
site en Français sur le mouvement, il est donc incon-
tournable et une référence pour les gens qui recher-
cheraient des informations sur le Mouvement.

99
Rubriques
Le 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 orga-
nisation et ses idées forces.
Le portrait des maitres : cette rubrique expose les principaux maîtres et
élèves du Bauhaus.
Elles mêmes comportant chacune un header, un contenu composé de ru-
briques, et un footer.

100
Outils
Les technologies employées pour la construction du site sont :
Outils et langages WEB Logiciels utlisés

101
Module
La page d’Accueil comprends :
- 1 lecteur multimédia avec du son
- 1 rubrique texte
- 1 rubrique image
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 ;
Inventaire du site :
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 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 ;

102
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.

103
Ergonomie et navigation
Temps de chargement : Accès à l’information : Navigation et zoning :
Le temps de chargement de chacune
des pages ne doit pas dépasser les 3
secondes au risque de perdre des inter-
nautes.
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.
La règle des 3 clics est respectée sur ce
site, car l’information est directe ; rien ne
s’interpose entre l’information et l’inter-
naute.
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 naviga-
tion horizontale que verticale),le plan du
site ( Il permet à l’internaute d’avoir accès
au contenu du site), et un moteur de re-
cherche, si le site est très étoffé.(inutile
pour mon site)

104
Architectures
Le site est strucuté pour une navigation horizontale, d’ou l’absence de plusieurs
niveaux.
Remarques :

105
Architectures
Page d’accueil :
Zoning
Force visuelle
100%
75%
50%
25%
0%

106
Architectures
Page d’accueil :
Wireframe

107
Architectures
Page d’accueil :
Gabarit

108
Architectures
Page d’accueil :
Design

109
Architectures

110
Architectures
Page l’Ecole du Bauhaus :
Zoning

Force visuelle
100%
75%
50%
25%
0%

111
Architectures
Wireframe

112
Architectures
Gabarit

113
Architectures
Design

114
Architectures

115
Architectures

116
Architectures
Page Portrait des maitres :
Zoning

Force visuelle
100%
75%
50%
25%
0%

117
Architectures
Wireframe

Footer
FOOTER

118
Architectures
Gabarit

119
Architectures
Design

120
Architectures

Le Bauhaus : Life for Art

Recommandé

Recommandé

Contenu connexe

Similaire à Le Bauhaus : Life for Art

Similaire à Le Bauhaus : Life for Art (20)

Le Bauhaus : Life for Art