Études·Designer graphiste

Conception web : site Total (propositions)

Il s’agit ici du dernier projet mener dans le cadre de ma formation de designer graphiste, s’inscrivant dans l’option web-design.

Le but de ce projet professionnel était de concevoir plusieurs pages d’un site corporate, celui de la marque Total. Tout en restant dans des codes précis, il fallait à la fois garantir l’ergonomie de la navigation de l’utilisation tout en se différenciant du classicisme des sites de même gabarit.
Dans un premier temps quelque peu déstabilisée par le thème de ce devoir, loin de mes valeurs et inspirations habituelles, c’était une fois encore un joli défi à relever pour amener ma touche graphique. Finalement, c’était aussi la manière de consolider toute la technique et les conseils que j’ai appris au fil des dernières années de formation.

Piste 1

PPWEB_sitecorporate_1

Cette piste repose sur un principe d’encadré blanc, soit plan, soit en contour suggéré. Le fait de donner un cadre défini aux informations permet une meilleure lisibilité et une accessibilité aisée. Ainsi, chaque catégorie est mise en forme dans un rectangle qui contient toutes les informations liées au sujet. Sur d’autres éléments, c’est seulement quelques lignes blanches qui suggèrent un contour, cela permet d’alléger la page et de casser un effet trop rigide et linéal.
Au niveau des couleurs, on retrouve principalement un duo de blanc et gris en aplat et seuls quelques éléments (le menu du header ou les boutons cliquables) passent en couleur au survol, ce qui permet de mieux signaler le lien cliquable). Les images apportent ainsi les couleurs qui permettent une mise en relief de la page.

Piste 2

PPWEB_sitecorporate_2.jpg
Cette proposition est axée sur un fond sobre pour faire une mise en avant des photographies de l’entreprise Total. Par un système de lignes, chaque thèmes est abordé les uns après les autres, avec une image qui illustre le sujet. Le fait d’avoir une lecture tout en longueur permet à l’œil d’être concentré sur le sujet et de ne pas naviguer sur des informations dispersées à droite et à gauche. De plus, les coupures nettes entre chaque ligne facilite un niveau de lecture par étape.
Ce sont d’ailleurs en grande partie les couleurs qui permettent de démarquer les thèmes, avec l’ensemble des teintes de la charte graphique qui sont très vives. Pour avoir un fondu qui fonctionne, les images sont au plus proche des teintes du sujet qu’elles illustrent.

Piste 3

PPWEB_sitecorporate_3.jpg
Dans un axe graphique et moderne, cette piste repose sur un jeu d’architecture de cadres. Les éléments sont placés en fonction d’une grille de 4 colonnes, qui gagne en lisibilité grâce aux rectangles pleins. Chaque thème a une image associé, soit en vis-à-vis, soit accessible par un survol de la souris. Cette mise en page ludique permet d’attirer l’attention et d’attiser la curiosité sur les autres pages.
L’ensemble des couleurs de la charte graphique est utilisé afin de renforcer la notion des rectangles, qui gagnent ainsi en consistance. De plus, on a des effets d’opacité au survol de la souris pour signifier les liens cliquables.

Note : 17

Commentaires :
Dans un premier temps, le rendu de votre devoir est très propre, très épuré et les maquettes sont bien finalisées. C’est très agréable et cela permet de mieux se projeter dans le projet. Un bel investissement de votre part.

Piste 1
HOME – Travail très épuré, à la limite d’un site artistique plus que d’un site corpo mais cette approche me plait beaucoup car on voit rarement de présentation de ce type. L’accueil est clair et bien posé.
PAGE PÉTROLE – On retrouve l’essence du site, du minimalisme mais il manque du contenu. Pensez vos pages verticales et non horizontales ; les pages web sont verticales
NEWSLETTER – Nickel

Piste 2
HOME – Présentation très sympa aussi ici. La présentation en sandwich est intéressante quand elle est animée ; un peu à la manière d’un accordéon.
PAGE PÉTROLE – Belle présentation du site, c’est très coloré et l’espace est bien agencé, sauf pour l’intégration de la vidéo, qui semble « posée » sans parti-pris.
NEWSLETTER – Nickel

Piste 3
HOME – Pour moi la présentation idéale, mêlant une interface simple et dynamique avec des couleurs bien tranchées.
PAGES – Une interface très tranchée, qui fonctionne très bien ; malgré une forte présence d’espace blancs – peut-être une disposition à revoir.
PAGES ÉNERGIES COMPLÉMENTAIRES – Bonne dynamique des blocs, proposition intéressante.
NEWSLETTER – Trop de blanc, mauvaise utilisation de l’espace

Très bon devoir, on ressent bien votre investissement. Continuez ainsi.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s