[JONK] Proposition Webdesign

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)

[JONK] Proposition Webdesign

Message 07/05/2011, à 10:24


Salut,

Ayant bossé sur le logo, ça me démangeait de proposer qq chose pour le site. Je suis donc reparti de mon logo que j'ai un peu simplifié.

Par rapport au brief, j'ai repris les points importants et cherché à faire un site qui inspire le sérieux, qui soit pratique, fonctionnel, ludique et j'ai cherché à mettre en avant la proximité avec les clients.

Pour ça, dans un premier temps j'ai fait un tour de l’existant en observant les sites de gros "voyagistes en ligne" français et étrangers.
Leurs sites ont beaucoup de rubriques, de contenus mais qui sont indispensables pour donner envie et montrer la richesse de ce qu'on peut proposer aux clients. L'important est donc de faire les bons choix de rubriques, de bien les organiser et de faire en sorte que tout cela soit digeste et agréable à la navigation.

Pour l'organisation, j'ai décidé de faire un site en 3 colonnes, avec la première axée communication client (newsletter, compte, facebook...), une centrale, la plus importante avec la recherche et tout ce qui concerne les voyages et enfin une troisième pour la pub. Dessous on retrouve les différents sub-menu ainsi que les "partenaires" financiers, logo culturels du voyage...

Graphiquement j'ai volontairement chercher à privilégier la navigation et le fait que l'internaute soit à l'aise, qu'il se repère facilement, que la recherche soit simple et rapide (la recherche se modifie suivant la case cochée). Chaque profils de client doit pouvoir s'y retrouver.
Je n'ai pas voulu de gros slideshow ou de grand visuel en header. Du coup l'évasion ce fait par le fond du site, plusieurs visuels seraient dispo pour l'agence et selon les saisons, les tendances, ils le changerait à leur gré.

Juste une dernière précision sur la maquette, il s'agit de l'accueil, sur le menu on voit un roll over sur "Hôtel seul" et un onglet en cours avec "Vols secs", d'ailleurs en auto-critique je pense que dans le menu une partie "Accueil" serait un plus 'actuellement c'est le logo qui sert de retour à l'accueil)

Bon allez stop au blabla et passons à l'image avec 2 fonds différents :

Cliquez pour voir à l’échelle
Image

Image
------------------------------------------------------------------
Sébastien Joncour - Graphiste/Webdesigner freelance
www.jonk.fr
------------------------------------------------------------------
Avatar de l’utilisateur
Jonk
 
Messages: 25
Inscrit le: 08/03/2011, à 14:31

Message 07/05/2011, à 21:21


Salut Jonk.
Moi qui croyait gagner par défaut, chui foutu! :lol:

Je vais pas être très utile (j'aurais peut être mis un léger flou sur le background pour mettre en avant le site) mais on sent clairement l'expérience la dedans. Je vais bien étudier ça. :)
Avatar de l’utilisateur
David-Dante
 
Messages: 13
Inscrit le: 11/03/2011, à 12:31

Message 09/05/2011, à 12:34


Salut David et merci pour ton retour !

Pour le flou, étant donné que dans le contenu du site il n'y a pas de grands visuels "voyage", celui-ci dois donner envie si il est flouté c'est un peu dommage je pense à moins qu'il y ai un effet au passage de la souris pour le rendre net mais pas sur que l'intérêt soit énorme.

J'espère qu'il y aura d'autres avis histoire de savoir si ça colle au brief et si il y aurait des choses à revoir.
------------------------------------------------------------------
Sébastien Joncour - Graphiste/Webdesigner freelance
www.jonk.fr
------------------------------------------------------------------
Avatar de l’utilisateur
Jonk
 
Messages: 25
Inscrit le: 08/03/2011, à 14:31

Message 10/05/2011, à 08:39


rapido
c'est propre, c'est pro...au niveau de la conception je trouve pas grand chose a redire. Après on pourra toujours dire qu'ici ou là ça pourrait être modifié au niveau du positionnement des encarts. Mais ça fonctionne.

Reste néanmoins que l'ensemble est superbement rigide ! Bon je me doute qu'on doit avoir un certains nombres d'infos et qu'il faut les "caser".
Beaucoup de sites voyagistes sont tels quels assurement et on ne demande pas de faire un folio de graphiste...mais je ne sais pas...ça manque (passé la photo bien jolie du fond) de "souplesse", de qqchose d'aérien et donc d'évasif pour moi.

Même si je le redis et c'est là l'essentiel, ça reponds surement plus au brief et à la demande qu'on penserait qu'une agence de voyage puisse avoir !

propre, pro...et un peu rigide ^^
Avatar de l’utilisateur
2m-at-work
 
Messages: 29
Inscrit le: 07/03/2011, à 09:52

Message 10/05/2011, à 09:15


Merci 2m,

COMMENT CA RIGIDE !

Ouaip, en fait je te rejoins pas mal là dessus et j'ai essayé plusieurs choses pour palier à ça mais on perd très vite en ergonomie/organisation et lisibilité ce qui reste primordial dans ce genre de webdesign je pense. Surtout qu'ici il s'agit d'un leader francais, je pense qu'ils transigeraient plus avec l'aspect "rigide" qu'avec l'ergonomie/contenu.
Par contre si tu vois des choses pour améliorer ça (sans refaire l'ensemble please) je suis open ou même des détails pour faire moins "rigide"^^
------------------------------------------------------------------
Sébastien Joncour - Graphiste/Webdesigner freelance
www.jonk.fr
------------------------------------------------------------------
Avatar de l’utilisateur
Jonk
 
Messages: 25
Inscrit le: 08/03/2011, à 14:31

Message 10/05/2011, à 11:01


Salut Jonk,

Bravo pour tes deux maquettes, c'est du travail bien clean. Rapidement, voici quelques remarques :

La partie têtière :
Le logo (bravo d'ailleurs pour cette réalisation) est bien mis en valeur et la barre de navigation est très claire. La baseline mériterait de gagner un peu plus en lisibilité (augmenter peut être d'un point la typo par exemple).Je trouve par contre que la taille de têtière est un peu trop haute, mise en rapport avec la partie contenu du site qui elle est très dense. Ça renforce l'effet d'écrasement (je trouve) de la partie contenu. Le champ de recherche est noyé dans la barre de navigation, il ne ressort pas assez.

Le partie contenu :
Cette partie est extrêmement dense. Pour un site d'agence de voyage, on a beaucoup d'éléments à placer, mais peut être faudrait il éviter d'utiliser des blocs systématiquement, ça alourdi considérablement l'ensemble. Cette densité fait que l'on est finalement un peu perdu dans toutes ces informations. Je trouve que la partie titre+filet mériterai d'être plus marqué, ça engage clairement les éléments qui suivent. Étant un fervent défenseur des boutons en volume, je trouve que ça manque ici. J'ai du mal à voir ce qui est cliquable, et c'est dommageable sur un site qui se veut grand public. Le bouton "recherche" fait plus penser à un titre qu'à un bouton, ce qui me fait dire qu'il faudrait espacer tes blocs, revoir la hierarchie des éléments par bloc en renforçant certains éléments, et espacer les différentes zones surtout sur la verticale ou tu es moins contraint que sur le reste.
Quand je vois cette partie du site, ce qui me saute aux yeux, c'est la pub à droite et le bloc Facebook à gauche alors que je devrais voir la partie voyage (dernière minute, promos) et la partie recherche. Je crois qu'il faut arriver à modifier cet effet pour arriver à quelque chose de plus équilibré. Peut être devrais tu essayer de faire des blocs "dernière minute" et promo l'un au dessus de l'autre, ce qui te permettrai de gagner de l'espace et de la visibilité (en mettant des vignette un peu plus grande, la on risque la rupture rétinienne). C'est à tester en tout cas (enfin je pense, tu fais comme tu le sens).

Le pied de page :
Les informations sont bien lisibles. Je le trouve un peu trop fort, peut être est ce du à la couleur qui crée un gros contraste. As tu tester des couleurs plus "douces"? En plus, la bande de logo crée une rupture pas forcément très agréable. En voyant ta maquette, je testerais bien une légère transparence sur cette partie.

En général :

Je trouve cette approche intéressante, le haut du site est bien aéré et agréable, dommage que l'on tombe "dans les embouteillages" sur la partie centrale du site. La pub m'arrache les yeux et finalement ce qui traite du voyage est un peu au second plan. Le fond photo ne suffit pas à l'immersion. Certaines partie essentielles mériteraient d'être plus lisibles, comme la recherche et "dernière minute" par exemple.Je pense que ça tient à peu de choses, des essais sur les titres et plus d'espaces par exemple.

J'espère que mes remarques vont t'aider, j'ai surement du passer sur des points que d'autres ne manqueront pas de te faire remarquer. A suivre .. :)
twitter : @ephfx
Avatar de l’utilisateur
ephfx
La team
 
Messages: 6
Inscrit le: 03/03/2011, à 00:24
Twitter: @ephfx

Message 10/05/2011, à 11:18


Bonjour à tous,
premier message ici, mais je vois qu'il y a toute la communauté cfsl donc je me sens pas trop perdu ^^

Je rejoins phillipe sur la pub qui est trop mise en avant, c'est aussi ce qui m'a sauté aux yeux.

Le contraste entre le gris et le noir dans les blocs en haut (recherche rapide / mon compte) me paraît trop fort et pas forcément justifié. Qu'est-ce qui devrait être en noir? les boutons? Pourtant juste en dessous ils sont en gris. Les textes? Ils sont en gris dans mon compte.
Les champs textes et listes déroulantes? La recherche est en gris...
Bref c'est un peu déroutant.

Pour les boutons aussi, je suis plutôt d'accord avec phillipe. Et avec les progrès en js et css on peut faire des jolis boutons accessibles.

Et aussi, je mettrai plutôt le bloc mon compte sous l'assistance téléphonique, on a la place et ça me paraît un peu vide.

Voilivoilou, bon boulot sinon ;)
BoraX
 
Messages: 1
Inscrit le: 10/05/2011, à 11:03

Message 10/05/2011, à 13:12


bon je vois que les collegues ont bien repondu et t'ont donné pas mal de pistes.

donc assez rigide oui. jevoyais bien ce qu'a dit Philippe avec les blocs qui deviendrait + des bandes avec des filets de séparations (enfin faut essayer). ^^

en passant "mon compte" et la "newsletter" sur le header pt etre que tu peux positionner l'ensemble differement et en bandes larges et plus aérées et switcher ailleurs les pubs :/ Du moins n'en avoir que sur un côté. C'est clair que là c'est tres present et un peu partout.

idem pour le "recherche" et le menu qui pourrait etre + visible.

idem le footer trop sombre (je plussoie le coup de la transparence à essayer). J'aurais plutot vu blanc pr que ça soit leger (avis perso)
Avatar de l’utilisateur
2m-at-work
 
Messages: 29
Inscrit le: 07/03/2011, à 09:52

Message 10/05/2011, à 20:42


Hop, je passe faire rapidement quelques retours d'un point de vue intégration et contraintes Web. Je note (un peu en vrac désolé) quelques point à éclaircir.

  • Tu utilises une police personnalisée pour le menu principal et ta titraille, est-elle disponible en font-face et sous quelles conditions ? Comment fait-on dans le cas contraire (images…) ?
  • Que se passe t-il sur des écrans très grand avec tes images de fond ? Prévois-tu une couleur unie en fond, une transition ou une répétition quelconque pour éviter une coupure peut-être trop abrupte ?
  • Ces images (potentiellement de très grande taille donc) ne vont-elles pas impacter fortement les performances du site ?
  • Tu utilises parfois un corps de texte très petit (du 9 il me semble), est-ce suffisamment lisible tu crois ?
  • Les éléments de tes formulaires (cases à cocher et listes déroulantes) sont présentés skinnés, c'est potentiellement quelque chose qui va sauter en phase d'inté pour des raisons techniques (à moins d'avoir un argumentaire béton pour justifier de leurs personnalisations) ; peut-être serait-il plus prudent de présenter au client quelque chose basé sur les caractéristiques de sa cible principale (système d'exploitation + navigateur).
  • Il me semble que tu n’as pas utilisé de grille pour composer ton travail. Celui-ci étant en grande partie composé de blocs séparés par de fines gouttières, ça pourrait être je pense une bonne piste. Cela permettrait aussi d'appliquer un rythme horizontal à ta création qui la rendrait je pense plus agréable à la lecture.
  • Le formulaire du bloc nos agences ne propose par de libellés associés aux champs. Par convention, les placeholders que tu as mis en place ne servent pas à les remplacer (ils disparaissent au click et l'utilisateur perd donc le contexte). À l'inverse c'est très bien fait sur la section de recherche.
  • Tu utilises beaucoup de « En savoir plus », ce qui hors-contexte n'est pas directement compréhensible. Tu pourrais peut-être revoir ton wording à ce niveau en proposant des accroches plus descriptives ?

Plus globalement (et en dehors de tout contexte technique) je note que tu as fait de gros efforts sur la legerté de la page. Certains poussent ce concept encore plus loin parfois, j'avoue que je suis assez fan :


D'autres liens pour étayer mes propos plus haut :


Bravo pour ta proposition en tout cas, c'est travaillé.
Vincent – HTML zen garden
Avatar de l’utilisateur
Vincent
La team
 
Messages: 17
Inscrit le: 01/03/2011, à 19:03
Twitter: @htmlzg

Message 11/05/2011, à 01:06


Et hop petit complément rapide-parce-qu'il-est-tard :
     
  • Certains de tes contrastes ne valident pas les règles d'accessibilité (les personnes souffrant d'un handicap sont concernées, mais pas seulement ! Imaginons que ce site soit perçu dans un cadre de luminosité élevée, le contraste devient primordiale pour la lisibilité).
  • Tes roll-hover n'ont pas tous le même comportement (couleur, effet de relief) : ce n'est pas un tord en soit, mais il faut maintenir une cohérence en fonction des actions attendues ;
  •  A mes yeux, le service est au même niveau que les promotions, et les pubs patatent très fort : il y a sans doute quelque chose à faire au niveau de la hiérarchie visuelle ;
  •  L'ensemble est assez neutre, hors le brief laissait sous-entendre une notion d'expérience utilisateur marquante (les voyagistes peuvent aussi être innovant ou travailler sur les problématique de design thinking qui les concernent : comment accompagner le temp d'attente des voyageurs lorsqu'il y a du retard par exemple, ou comment occuper les voyageurs durant leur trajet - cf. IDzap, IDzen qui sont très intéressant pour le coup) ;
  •  En plus de neutralité, je trouve qu'il y a un côté un peu discount alors que la marque souhaite toucher une cible plus jeune-cadre-dynamique-hypie-touch (dixit le brief logo ;-)
  • Le coup de l'application mobile, c'est tout à fait bien vu, aller hop on fait une web app et on se moque du terminal !
  • Mine de rien, c'est propre ce que tu as fait, et je chipote par plaisir de chipoter :-)
  • Vivement la V2 !
Avatar de l’utilisateur
ncatherin
 
Messages: 13
Inscrit le: 07/03/2011, à 14:29

Message 11/05/2011, à 22:57


Merci à tous pour ces remarques pertinentes et constructives, je les ai toutes bien lues avec attention. Je ne vais pas revenir point par point avec chacun, mais je devrais rapidement vous proposer une maquette avec plusieurs des remarques qui reviennent le plus (et avec lesquelles je suis d'accord^^) : Baseline plus lisible, partie recherche plus identifiable, contenu moins "rigide", Pub moins en avant, boutons, réorganisation de certaines parties...

Après je ne perds pas de vu le brief et l'idée que j'ai de ce que pourrai attendre un "leader français" du voyage en ligne qui souhaite devenir incontournable, je pense qu'il y a des impondérables comme élargir la cible (la cible jeunes cadres, familiers d'internet ils l'ont déjà mais par contre je veux la fidéliser avec des idées comme proposait ncatherine) je ne cherche pas forcément à faire un webdesign "innovant" ou "ultra moderne" ici mais surtout efficace et sérieux que ce soit pour les internautes (de tout âges) ou le client (ici acmé).

Vincent quand j'aurais un moment je reviendrai répondre à tes questions sur l'intégration (pour la majorités ce ne sont pas de gros problèmes à surmonter) mais sur certains points je vais poser la question à un développeur avec qui je bosse.

Si j'arrive à trouver le temps de finir, normalement demain je vous montre quelque chose.

;)
------------------------------------------------------------------
Sébastien Joncour - Graphiste/Webdesigner freelance
www.jonk.fr
------------------------------------------------------------------
Avatar de l’utilisateur
Jonk
 
Messages: 25
Inscrit le: 08/03/2011, à 14:31

Message 12/05/2011, à 14:14


Comme prévu, voilà la nouvelle version avec 2 fonds différents.

- L'ensemble est plus aéré, moins de cadres
- Réorganisation des blocs, la pub passe en bas de la colonne de droite, du coup "dernières minutes" et "promos" passe au dessus.
- Un bloc supplémentaire "Partageons PLUS" axé accompagnement et accupation du voyageur.
- Footer plus light
- Les boutons ont été revus (+ homogènes).
- La recherche est séparée du menu principal.
- Baseline du logo + 1pt
- ...

Image

Image
------------------------------------------------------------------
Sébastien Joncour - Graphiste/Webdesigner freelance
www.jonk.fr
------------------------------------------------------------------
Avatar de l’utilisateur
Jonk
 
Messages: 25
Inscrit le: 08/03/2011, à 14:31

Message 12/05/2011, à 22:18


Hop la

salut tout le monde
Très rapide, je trouve ta réalisation très réussie.
Je ne vais pas rentrer dans le détail car je n'ai pas le temps, mais ça envoie du lourd ;)
Joris Gaigne - Directeur artistique Web + Print
http://www.taktdesign.fr
Avatar de l’utilisateur
Joris
La team
 
Messages: 40
Inscrit le: 07/03/2011, à 15:06

Message 13/05/2011, à 15:41


Tatillons bien, tatillons vite :

  • tous les textes blanc sur orange (version foncée y compris) ne passent pas la validation wcag 2.0 AA,
  • certains textes gris sur blancs (texte de contenu) ne passent pas la validation wcag 2.0 AA.

Je trouve également que les boutons manquent de finesse dans cet effet de relief !
Et heu, question, la typo utilisée pour les titres (navigation principale, et titres des différents encarts) est-elle compatible @font-face ?

Certains textes sont hyper tout petit alors qu'ils ont une grande importance (toutes les destinations, toutes nos offres de dernière minute, toutes nos promos…).

Peut-être qu'il pourrait aussi y avoir une organisation différente : « nos agences » est mis en avant alors qu'il s'agit d'un élément fonctionnel multi-canal. Est-ce très important, moyennement important ou peu important pour ACME d'inciter l'internaute à se rendre en agence ? Dans ce positionnement et dans cette valorisation, on part en « top destinations » comme on se rend dans une agence ;-)
Avatar de l’utilisateur
ncatherin
 
Messages: 13
Inscrit le: 07/03/2011, à 14:29

Message 16/05/2011, à 11:25


Comme promis je reviens vers toi Vincent pour les questions d'intégrations :

1 // Tu utilises une police personnalisée pour le menu principal et ta titraille, est-elle disponible en font-face et sous quelles conditions ? Comment fait-on dans le cas contraire (images…) ?
Oui c'est gérable, tu peux utilisé SIFR pour ça: http://wiki.novemberborn.net/sifr/How+to+use

2 et 3 // Que se passe t-il sur des écrans très grand avec tes images de fond ? Prévois-tu une couleur unie en fond, une transition ou une répétition quelconque pour éviter une coupure peut-être trop abrupte ?
Ces images (potentiellement de très grande taille donc) ne vont-elles pas impacter fortement les performances du site ?
Oui je pense qu' il y a des moyens de le faire en optimisant le poids, le format PNG est à la mode en ce moment sur le WEB, et le taux de compression est assez intéressant.

4 // Tu utilises parfois un corps de texte très petit (du 9 il me semble), est-ce suffisamment lisible tu crois ?
Oui c'est de l'info secondaire voir de troisième niveau.

5 // Les éléments de tes formulaires (cases à cocher et listes déroulantes) sont présentés skinnés, c'est potentiellement quelque chose qui va sauter en phase d'inté pour des raisons techniques (à moins d'avoir un argumentaire béton pour justifier de leurs personnalisations) ; peut-être serait-il plus prudent de présenter au client quelque chose basé sur les caractéristiques de sa cible principale (système d'exploitation + navigateur).
Sur un projet pour un leader du voyage en ligne ça me parait intéressant de le proposer mais c'est je pense une chose qui pourrait facilement sauter à l'intégration effectivement.

6 // Il me semble que tu n’as pas utilisé de grille pour composer ton travail. Celui-ci étant en grande partie composé de blocs séparés par de fines gouttières, ça pourrait être je pense une bonne piste. Cela permettrait aussi d'appliquer un rythme horizontal à ta création qui la rendrait je pense plus agréable à la lecture.
Non je n'ai pas utilisé de grille, donc à voir c'est difficile à dire.

7 // Le formulaire du bloc nos agences ne propose par de libellés associés aux champs. Par convention, les placeholders que tu as mis en place ne servent pas à les remplacer (ils disparaissent au click et l'utilisateur perd donc le contexte). À l'inverse c'est très bien fait sur la section de recherche.
Tu as raison c'est corrigé.

8 // Tu utilises beaucoup de « En savoir plus », ce qui hors-contexte n'est pas directement compréhensible. Tu pourrais peut-être revoir ton wording à ce niveau en proposant des accroches plus descriptives ?
Sur la première maquette il y en avait 2, sur la dernière il y en a 1.
------------------------------------------------------------------
Sébastien Joncour - Graphiste/Webdesigner freelance
www.jonk.fr
------------------------------------------------------------------
Avatar de l’utilisateur
Jonk
 
Messages: 25
Inscrit le: 08/03/2011, à 14:31

Retour vers [Refonte web] Agence de voyage



cron

Connexion

Rechercher