[2ESCAPE] PROPOSITION MAQUETTE HOME

Sujet : Refonte du site d'un voyagiste en ligne
09/07/2011
Difficulté : Image
Compétences : Direction artistique, webdesign, intégration (opt), flash (opt), conception-rédaction (opt), ergonome (opt)

[2ESCAPE] PROPOSITION MAQUETTE HOME

Message 11/05/2011, à 18:56


Salut,

Voilà donc la v.1 de ma contribution, du moins pour ce qui est de la home page du site.
J'ai opté pour la création d'un site qui casserait un peu avec la rigidité et le côté pro que propose la concurrence.

Visuellement, l'utilisation de photos grand format sur la partie supérieur du site à pour but de donner une MEA de ce que propose l'agence en terme de destinations. Cette partie adopte le principe du slider et le visuel est amené à changer (à l'aide d'un fondu progressif) soit au fil du temps soit par le geste de l'utilisateur.


_Pour le développement, certains principes me semblent relativement compliqués à mettre en place et c'est pour cela qu'il est intéressant d'avoir votre avis. J'envisage principalement l'utilisation de javascript et de la bibliothèque Jquery. J'ai utilisé une grille pour faciliter la mise en page (http://960.gs/).
Le visuel du haut se redimensionnera selon le navigateur (toujours avec Javascript). Puis à part ça, Html5/CSS3. 8-)


Voilà j’espère que le reste de l'interactivité et du fonctionnement globale coulera de source et j’attends vos premiers retours.



Les 2 versions avec le visuel du haut qui change :

1: http://guillaumelanier.com/inc/maquettes/acm%C3%A9-HOME_slide1.jpg

Image

________________________________________________________________

2: http://guillaumelanier.com/inc/maquettes/acm%C3%A9-HOME_slide2.jpg

Image
Dernière édition par 2escape le 13/05/2011, à 01:16, édité 2 fois au total.
Avatar de l’utilisateur
2escape
 
Messages: 4
Inscrit le: 30/04/2011, à 16:55
Twitter: @Guilanier

Message 13/05/2011, à 00:41


C'pas bien ? Faut tout refaire ?

Bon je up quand même. :D
Avatar de l’utilisateur
2escape
 
Messages: 4
Inscrit le: 30/04/2011, à 16:55
Twitter: @Guilanier

Message 13/05/2011, à 09:53


Salut 2escape,

Je m'occupe de toi ce soir petit veinard. ;)

(et ça va en gros pas mal ressembler à ce que je disais à Jonk)
Vincent – HTML zen garden
Avatar de l’utilisateur
Vincent
La team
 
Messages: 17
Inscrit le: 01/03/2011, à 19:03
Twitter: @htmlzg

Message 13/05/2011, à 21:55


Alors donc !

Retours du point de vue de l'intégrateur une fois encore, mais c'est important de bien communiquer dès maintenant avec les autres corps de métier pour que le projet se passe dans les meilleures conditions. On fait comme en vrai donc.

Tu sembles bien au fait des possibilités en développement, c'est déjà un bon point. Petit bémol cependant : je ne serais pas aussi tranché que toi sur l'utilisation d'HTML5.

Pour réaliser un site de cette envergure, avec comme cible une population d'internautes très large, j'opterais plutôt pour la prudence. Vouloir jongler entre IE 6, la présence (ou non) de JavaScript, l'accessibilité du langage et une spécification toujours à l'état de recommandation, le tout sans réelle nécessité derrière : je ne suis pas sûr que ce soit pertinent.

Heureusement cela n'empêchera en rien de s'amuser avec CSS3, voir même de prévoir un affichage qui saura s'adapter à différentes résolutions d'écrans (bureau, tablette et mobile) à l'aide des media-queries.

Bravo aussi pour la grille verticale, 960 est un très bon choix avec de larges gouttières bien agréables. Tu pourrais te reposer dessus encore davantage, je note quelques éléments que tu pourrais facilement adapter si j'en crois mes tests : la colonne des « Top destinations », le éléments du carrousel « Actualités », les deux colonnes de la zone de recherche, etc.

Image

Par ailleurs 960 ne propose pas de grille horizontale, mais c'est un point qui permettrait d'améliorer la lisibilité de ta maquette.

Dans la partie haute de ta maquette (le carrousel principal), j’ai peur que la lisibilité soit également malmenée : on le voit d'ailleurs sur l'exemple des Maldives, le texte en dessous est mal contrasté avec le fond.

Même remarque que pour Jonk sinon concernant les champs de formulaires skinnés. Je sais bien que c'est possible et plus harmonieux avec ta création, mais les implications techniques que cela engendre sont trop importantes à mes yeux pour justifier ce choix graphique.

Tu gagnerais aussi en cohérence (entre autres) à sortir le champ « Adresse mail » de son input, tout comme tu l'as fait sur la partie « réservation ».

Et pour finir, peux-tu préciser la police utilisée pour les titres principaux ? Je note que tu joues un peu avec l'interlettrage de celle-ci. Idéalement il faudrait tester cela en conditions réelles en utilisant une police compatible font-face (et utilisable librement sur le Web) pour s'assurer que son support est correct dans la plupart des navigateurs.

Voilà pour moi en tout cas. Je ne doute pas que d'autres auront des retours plus pertinents à te faire sur des aspects plus graphiques. Certe, c'est un peu technique et plein de contraintes en apparence, mais il faut en passer par là.

Et bravo pour ton travail 2escape !
Vincent – HTML zen garden
Avatar de l’utilisateur
Vincent
La team
 
Messages: 17
Inscrit le: 01/03/2011, à 19:03
Twitter: @htmlzg

Message 16/05/2011, à 13:10


c'est important de bien communiquer dès maintenant avec les autres corps de métier pour que le projet se passe dans les meilleures conditions.

Sale hippie ;)

Au niveau du site :
Pour moi le graphisme s'annonce pas mal, mais ça manque carrément de structure et tout flotte dans tous les sens, fait des calages et reviens après :)
Directeur artistique web : judbd.com | @judbd
Le blog : mariejulien.com | @mariejulien / L'asso : Métiers Graphiques | @MGAsso
Avatar de l’utilisateur
Julien
La team
 
Messages: 104
Inscrit le: 01/11/2010, à 12:30
Twitter: @judbd

Message 17/05/2011, à 09:08


Et pour ma part, j'ajoute que la gamme de couleurs choisies n'est pas très joyeuse. Le gris et le bleu sont très institutionnels, peu expressifs. Le jaune seul ne réussi pas, à mon sens, à apporter le pep's nécessaire de la façon dont tu l'utilises.

Pour t'aider, tu peux éventuellement partir sur un champ sémantique relatif au voyage pour piocher dans des couleurs plus ou moins vives, plus ou moins chaleureuses, plus ou moins expressives et captivantes en fonction du positionnement d'ACME.

Pour illustrer tout ça, je dirai que voyage-sncf a un parti pris très pop, limite arc-en-ciel ce qui peut être un choix intéressant ; tout comme le Petit Prince m'évoque des couleurs d'ocre, de terres brûlées, de bleu avec un touche de vert et de rouge orangé qui sont également des couleurs très intéressantes.
Avatar de l’utilisateur
ncatherin
 
Messages: 13
Inscrit le: 07/03/2011, à 14:29

Message 09/06/2011, à 21:29


Hello everybody,

J'ai pas eu vraiment l'occasion de continuer le projet dernièrement rapport aux concours, aux entretiens,... Bref on s'en fout mais j'ai enfin pris le temps de poursuivre un peu le truc car sa aurait été dommage de laisser tomber.

Du coup merci à tous pour vos retours, j'ai pris le temps de revenir un peu sur chacun d'entre eux et donc de modifier ma maquette en conséquence.
______________________________________________________________________

@Vincent : Super tes conseils concernant le développement, je ne connaissais pas les media-queries mais je trouve ça vraiment top pour ce qui est de la déclinaison sur différents supports. En revanche je reste un peu sceptique sur le fait de porter un grand intérêt au dev IE6, je trouve que c'est une beaucoup d'investissement pour pas grand chose surtout à l'approche de IE9.

Autrement je suis revenu sur quasiment tous les points que tu as cité, comme retirer le skin des formulaires ou encore pour ce qui est de la typo des titres (helvetica neue) qui est compatible avec la plupart des scripts d'adaptation.
______________________________________________________________________

@Julien : Suivant tes conseils j'ai revu un peu le zoning de la maquette et j'ai modifier la position des blocs et l'architecture générale.
Sa serait cool de me dire si c'est plus raccord concernant la structure.
________________________________________________________________

@ncatherin : Concernant le choix de la gamme je me suis surtout calqué sur la charte graphique qui nous a été fournis. J'ai quand même tenu compte de tes remarques en utilisant des couleurs un peu moins ternes pour l'aspect générale (- de gris et plus de nuance de jaune/sépia).


Voilà j'éspère pouvoir avoir d'autre retour de votre part par rapport à ma MAJ :

http://f.cl.ly/items/2N1k452v2u3O0K223n3N/Acm%C3%A9_0000_slide1.png
Image

http://f.cl.ly/items/2E1n1r3q0C0r242l3l2l/Acm%C3%A9_0001_slide2.png
Image
Avatar de l’utilisateur
2escape
 
Messages: 4
Inscrit le: 30/04/2011, à 16:55
Twitter: @Guilanier

Retour vers [Refonte web] Agence de voyage



cron

Connexion

Rechercher