Analysedel’existant Agence‘Imagine’___________________________________________________________________________

But de cette étude :

Voici notre analyse de l’existant, celle ci nous permet de comparer des produits déjà confectionnés au niveau du contenue et de l’ergonomie, et d’y apporter des améliorations afin d’en offrir un des meilleures qualités à notre client.

Voici la liste des sites que nous allons étudier :

N°1 : http://www.clubarchi.com

N°2 : http://www.architecture-studio.fr

N°3 : http://www.atelier-architecture.fr/simonteyssou.htm

N°4 : http://www.histoiredelart.net

N°5 : http://www.mahj.org/fr/index.php

N°6 : http://byc.ch/hga/art/index.htm

N°7 : http://www.atelier-d.fr/

N°8 : http://www.hallerarchitecture.com/

N°9 : http://caparchitecture.com/

Les différents points étudiés auront pour but de nous donner des idées dans la réalisation de notre site, nous verrons donc les points positifs de ces sites dont nous pourrons nous inspirer mais cela nous permettra aussi de voir les choses à ne pas faire.

Cette analyse nous aidera à choisir :

_ Le design _ Les couleurs _ La police _ Les onglets _ Le contenu

Nous ferons un bilan sur les points positifs des sites étudiés et les points négatifs, afin de faire des planches et des gabarits en aillant déjà des idées sur les couleurs, la présentation et le contenue du site.

N°1 : http://www.clubarchi.com/

Aspect visuel du site :

Ce site possède un menu situé dans une colonne à gauche du site, et un contenue dans une autre colonne plus grande, sur la droite. Le site est codé en html avec un petit peut de JavaScript.

Les couleurs présentent sont le bleu et le blanc simplement, le fond de la même couleur que la colonne de menu (bleu), ne délimite pas assez le site, mais le contenu sur fond blanc ressort très bien. La police est toujours en noir, mais celle ci est lisible et toujours de la même taille, c’est un bon point. Une bannière est présente en haut de la colonne de menu, le design est assez simple, le designer a peut être voulu faire de trop avec beaucoup d’arrondis etc mais le rendu n’est pas très esthétique et il n’y a pas d’images ou animations qui rappel le sujet du site.

• Navigation, contenu, rubriques

Le menu ne change pas en fonction de la page ouverte ou de notre évolution dans le site.

Beaucoup d’onglets sont présents dans la colonne de menu, avec des sous catégories, cela nous permet de naviguer rapidement dans la mesure où nous connaissons le contenu de chacun des onglets ; à l’inverse, il faut cliquer sur beaucoup de liens avant de trouver ce que l’on cherche.

Les catégories de liens présentés sont : « Club Archi », « E.N.A.U », « Clubs », « Projets d’atelier » et « cours »

N°2 : http://www.architecture-studio.fr

Aspect visuel

Ce site est très sobre et possède une bonne disposition vis à vis des onglets, du contenu, des images, etc…

Les onglets sont tous en haut, et des sous catégories se disposent à gauche en fonction de la page grâce à des animations flash. Aussi il apparaît un menu déroulant sur chaque sous onglet qui traduit celui ci en 6langues différentes. Il n’y a pas de bannière proprement dite mais une image propre à chaque page situé entre le contenue textuel et les onglets.

Le fond est noir, le texte de contenu est blanc ainsi que les onglets qui cependant se surlignent en rouge ou en fond gris au passage de la souris. Les images sont en couleurs non saturées ce qui donne une concordance avec le design du site qui est en nuance de gris avec une touche de rouge.

• Navigation, contenu, rubriques

Architecture-studio.fr possède une version pour 7 langues différentes ce qui offre la chance d’être ouvert à un très large public.

Il y a peut d’onglets ce qui permet de se souvenir des navigations précédentes, et les sous catégories qui s’affiche sur le coté est très utile et évite d’encombrer le site avec un grand nombre d’onglets.

« Agence », « Actualités », « Réalisations », « Etudes et chantiers », « Equipe »

Le contenu est lisible malgré la petite taille de police, aéré et avec un fort contraste avec le fond du site, celui ci se lit sans difficultés.

N°3 : http://www.atelier-architecture.fr/simonteyssou.htm

Aspect Visuel du site

Ce site possède beaucoup d’animations, et d’interaction avec la souris, tel que le soulignement des parties de bâtiments pour constituer le menu.

Le pointeur de la souris et personnalisé, cela est original et peut commun mais est peut être trop « gadget ».

A l’intérieur du site, les sous catégories sont positionné à gauche, et le contenu est aligné à droite.

• Navigation, contenu, rubriques

La taille du contenue est très bien, ni trop grosse ni trop petite ; Bien lisible grâce au contraste avec le fond du site blanc. Cependant, il y a la présence d’une barre de défilement dans certaines page ce qui romps le sentiment de fluidité de lecture.

Les onglets ne sont pas visibles directement, il faut survoler le bâtiment dessiné sur la page d’accueil pour les voir apparaître.

N°4 : http://www.histoiredelart.net

Aspect Visuel du site

Ce site est constitué de trois grandes parties, une bannière en haut, un contenu en bas et un menu entre les deux. Le site est construit en html avec du JavaScript.

On remarque que la bannière change en fonction de la page choisie et que le lien (dans le menu) de la partie parcourue se colore en blanc. Aussi, lors du survol des liens, celui-ci se souligne.

Au niveau des couleurs, cela s’intègre bien avec le thème ce qui renforce l’idée de « passé ». La police est lisible et simple avec 2 couleurs principales : noirs pour le texte et marron gras pour les titres.

• Navigation, contenu et rubriques

Le menu reste toujours à la même place et présente des titres explicites.

Le site possède une frise chronologique, il présente différents mouvements picturaux ainsi qu’une biographie des principaux artistes.

N°5 : http://www.mahj.org/fr/index.php

Aspect Visuel du site

On décompose le site en 4 parties : un menu en haut suivie d’une bannière animé, en dessus se trouver une deuxième menu suivie du contenue. Il y a beaucoup de couleurs.

Le site présente différentes polices avec des tailles différentes suivant la hiérarchie. Le fond est blanc, ce qui fait ressortir les informations mais c’est parfois trop chargé.

• Navigation et contenu

Sur le menu du haut, le liens se souligne au survole, sur celui du milieu, cela ouvre un cadre avec plusieurs liens à choisir. Une fois la partie choisie, les sous liens deviennent tous de la couleur de la partie sélectionnée et le sujet actif de la partie se change en noir avec une flèche sur la gauche.

Chaque couleur correspond à une partie. Le menu du haut ne reste pas tout le temps à la même place, ce qui peut être troublant. Le site possède une version anglaise (toujours avec le même aspect et contenu) toujours interchangeable avec le français en haut à gauche.

N°6 : http://byc.ch/hga/art/index.htm

Aspect visuel du site

Le site comporte deux menus, un en haut et un à gauche suivit du contenue de la page. Il y a 2 polices principale, une pour les menus et une pour le contenue. Les couleurs sont assez ternes avec une tonique violette.

Le site est aussi construit en html avec du javascript.

• Navigation et contenu

Chaque titre de la partie sélectionnée est écrit dans un cadre violet en haut de la page et le bouton actif se colore aussi en jaune plus foncé. Lorsque l’on navigue sur le menu du haut, on remarque que le deuxième menu disparaît et plaque le contenue de la page à gauche, ce n’est pas ergonomique. De plus, tout est écrit sans mise en page ( pas d’alinéa, paragraphe collés,…), ce qui ne donne pas vraiment pas envie de lire.

N°7 : http://www.atelier-d.fr/

Aspect visuel du site

Ce site possède deux structures différentes avec pour la page d’accueil un menu en bas, la bannière tout en haut et le bloc de contenu au milieu, et pour toutes les autres pages, la bannière toujours en haut, juste en dessous sur la droite et le bloc de contenu tout à gauche.

Le langage utilisé est le HTML 4.01.

Le fond du site est en blanc, avec un menu en noir, les polices sont soit en noir soit en orange. Il n’y a rien de vraiment créatif, ce qui est dommage.

• Navigation, Contenu et Rubrique

Le menu reste toujours le même, avec pour principale rubrique « l’équipe » qui présente l’équipe d’architectes de cette agence avec leur photo, « l’engagement » expliquent leur engagement envers le développement durable, « les projets » présentant tous les projets du plus récent au plus vieux, « l’actualité » qui regroupe les actualités marquantes des quatre dernières années et « contact » qui permet de joindre de quelconque manière l’agence, ce qui rend la navigation plus aisée. Cependant cela reste simple.

N°8 : http://www.hallerarchitecture.com/

Aspect visuel du site.

Ce site possède une structure uniforme avec la bannière en haut à gauche, le menu juste en dessous toujours à gauche et le bloc de contenu au milieu pouvant s’étirer vers le bas suivant la longueur des textes. Le langage utilisé est le html et le JavaScript.

Le fond du site est en blanc lui aussi, avec une police de couleur grise pour le menu et bleu pour le texte du bloc de contenu. À chaque rubrique correspond une image illustrant cette rubrique au mieux, ce qui donne un bon effet visuel.

• Navigation, Contenu et Rubrique

Le menu est toujours le même et ne comporte seulement que quatre rubriques, ce qui permet de ne pas se perdre dans le site, la rubrique « agence » évoque les architectes mis en œuvre dans l’agence ainsi que leur compétence, les collaborateurs, les missions, les moyens et les spécificités de l’agence, la rubrique « réalisation » retrace tous les projets finis, la rubrique « marchés » explique sur quels marchés se porte cette agence et les garantis qu’elle propose à leur investisseurs et la rubrique « contacts » qui permet de joindre l’agence, elle comporte une carte ce qui est vraiment appréciable.

N°9 : http://caparchitecture.com/

Aspect visuel du site

Ce site est un site en flash qui possède une structure bien définie et qui ne change pas du tout suivant les rubriques, il comporte une bannière tout en haut, un menu tout en bas regroupant des sous-menus au passage de la souris, et un bloc de contenu au milieu qui peut comporter des images, du texte, des liens.

Pour ce qui est des couleurs le site présente des dégradés de vert et surtout une dominance pour les couleurs kaki.

• Navigation, Contenu et Rubrique

Le menu ne comporte que trois rubriques qui ont chacune plusieurs sous rubriques : la rubrique « accueil » fait descendre la sous rubrique « présentation » qui est en fait la page d’accueil, la rubrique « projets » possèdes trois sous rubriques séparant ses projets avec les projets « en cours », les projets « tourisme » et les projets « logement », la rubrique « contact » quant à elle renvoi à deux sous rubriques qui sont « liens » qui regroupe tous les partenaires de cette agence et « contact » qui renvoi à une carte et à des coordonnées.

• Tableau comparatif :

Site Couleurs Design Menu Contenu

N°1 0 2 4,5 3

N°2 4 5 4 4

N°3 3 4 2 3

N°4 3 3 3 4

N°5 2 3,5 3 4

N°6 3 2 2 3

N°7 2 2 3 2

N°8 3 4 4 3

N°9 4 5 4 4

(Note sur 5points)

Apres avoir analyser ces 9 sites, nous avons une première approche de ce a quoi doit ressemble notre site. Celui ci ne devra pas présenter trop de couleurs différentes ni des couleurs trop saturées.

Le design devra être sobre et assez structuré et rectangulaire ; sans trop d’animation, juste des interactions avec la souris.

Les onglets devront être peut nombreux, quitte à faire plusieurs sous catégories, afin que le visiteur du site ne soit pas perdu en cherchant une information précise.

Le contenu devra être claire, et parfaitement lisible, aéré et avec un fort contraste avec le fond du site.