CAT VOYAGES Habillage web v.2

Transcription

1 Habillage web v.2 Concept global 02 Sélection iconographique 03 Escapade raffinée Destination favorite Immersion immédiate Conseils, notes et remarques 15

2 Habillage web v.2 02 Concept global Site orienté agence conseil, pas cheap, mais raffiné. Elégant, pas routard (carnet de bord), pas ebookers (coloris promos, criard). La présentation et l apparence sont améliorées, afin de rafraîchir l image de marque et de la rendre plus attirante pour le visiteur. Lui inspirer confiance, dynamisme et modernité, afin qu il garde un souvenir agréable de sa visite et donc de l agence. Le pousser à rester sur le site, revenir et conseiller l agence. Recherche autour du champ sémantique du voyage afin de donner immédiatement des rêves, des idées, des envies au visiteur. Eléments retenus: (prop. 1 & 2) Eléments retenus: (prop. 3) Photos de vacances Bleu ciel (liberté, fraîcheur, eau) Etiquettes (de valises, etc.) Carte posée sur une table Gros plans (exotisme, évasion) Navigation ludique intégrée au design Carte posée sur une table Le format global, le header (têtière prop. 1 & 2) et le menu sont néanmoins conservés afin que le client fidèle ne perde pas ses repères. Le changement de l arrière plan selon les saisons est également conservé. Dynamisation de l iconographie. Têtière et arrière plan Ni simples couleurs, ni images figuratives, les images de la têtière (prop. 1 & 2) et de l arrière plan (prop. 3) sont une sélection de photos macros invitant au voyage. Sans prendre le pas sur le contenu, ces photos très graphiques donnent de l exotisme et de la vie au site, sans interférer avec les images des différents contenus. Fort impact visuel et renforcement de l image de marque. La fonction aléatoire est conservée (prop. 1 & 2). Menu central Le menu est simplifié, épuré: les textes qui accompagnent les photos sont incorporés à ces dernières. Les images sont plus grandes, plus envoûtantes et leur disposition évoquent des clichés de vacances. Mise en scène du visiteur, désir de renouvellement de ses meilleurs souvenirs. Les textes peuvent à choix, apparaître au survol de la souris (prop. 1). Les images apparaissent au survol de la souris afin de ne pas interférer avec la grande photo en fond (prop. 3). Le formulaire d abonnement à la newsletter, trop lourd visuellement, trouve désormais sa place dans «contact» ou peut à souhait disposer d un menu dédié. Légère ombre portée donnant au site l illusion d une carte posée sur une table, rend le site moins «technique», ajoute du réalisme.

3 CAT VOYAGES Habillage web v.2 Sélection iconographique du menu Hôtels Séjours et offres Billets d avion Location de voitures 03

4 Habillage web v.2 04 Escapade Raffinée Display dynamique, contemporain (photos «éparpillées») et raffiné (teintes dominantes élégantes et sensuelles). Grandes images pour une immersion immédiate. Navigation intuitive: images explicites dépourvues textes. Interactivité: au survol des images avec le curseur, le titre du contenu apparaît dans la couleur de contraste qui a pour but de faire ressortir les éléments cliquables. (Barre de menu et images au centre). Palettes de couleur Tons élégants: qualité. Camaïeu de beiges, pour la qualité et la finesse. Le bleu comme couleur de contraste dynamique, qui amène la touche vacances, découverte, fun. Logos Les couleurs des logos sont harmonisées et ils s inscrivent désormais sur des étiquettes à bagages en carton, qui procurent une touche écologique à la marque, tout en évitant de les faire flotter sur la bannière. Gain de lisibilité. Liberté: le hors-champ de la cordelette empêche le site «d étouffer» dans un cadre.

5 Habillage web v.2 05

6 CAT VOYAGES Habillage web v.2 06

7 Habillage web v.2 07 Logos Essais couleur et disposition. Tests de lisibilité. Liens-images survolés Possibilités de rendu des photos de menu lorsque le curseur les survole.

8 Habillage web v.2 08 Destination favorite Proposition alliant classicisme et voyage. L accent est porté sur le sérieux de l agence. Plus technique, avec un graphisme et des tons plus discrets, cette variante à la navigation formelle (titres déjà présents sur les images) inspire confiance et expérience. L imaginaire du voyage est subtilement présent à travers les images pouvant évoquer des Polaroïds annotés. Des photos vives et une faible inclinaison des «clichés» ajoutent le dynamisme nécessaire. Palettes de couleur Tons sobres et distingués. Nuances de gris et de blancs, agrémentés d un or en couleur de contraste. Un orange punchy est disponible dans les variantes pour une vision plus énergique. Logos Les logos sont placés de manière plus stricte, ils évoquent davantage «l agence conseil» que l aventure et la découverte.

9 Habillage web v.2 09

10 Habillage web v.2 10 Logos Essais couleur et disposition. Tests de lisibilité.

11 Habillage web v Immersion immédiate L objectif de cette proposition est de mettre le visiteur en situation dès son arrivée sur le site. En place et lieu d un fond habituel, le site se pare d un gros plan photographique. Ce choix original crée la différence de manière élégante, à mi-chemin entre l aplat de couleur et la photo figurative. Faisant la part belle à l exotisme et l évasion, le site devient à lui seul une invitation au voyage. Le gros plan peut varier, dans la continuation du fonctionnement actuel du site. Palettes de couleur Camaïeu de beiges: pour l élégance et la sensualité. Le bleu foncé pour le sérieux et comme couleur de contraste. Le blanc pour laisser respirer le contenu et donner le ton à l image de fond: simplicité, pureté. Au survol de la souris, c est tout le design du site qui entre en action; les gros boutons ludiques laissent apparaître l image idoine de chaque rubrique. Navigation et design ne font qu un, le but étant d apporter du plaisir au visiteur, qu il puisse «jouer» à sa guise avec les rubriques. Les différents titres reprennent le style des «departure boards», le client est paré pour le départ. Logos Raffinement et sérieux. Les logos trônent fièrement au centre de la têtière, un traitement «métallisé» ajoute de l élégance au bloc.

12 CAT VOYAGES Habillage web v.2 012

13 Habillage web v.2 013

14 CAT VOYAGES Habillage web v.2 Tests Essais avec une iconographie figurative. Différentes combinaisons colorimétriques. 014

15 Habillage web v.2 15 Conseils et remarques concernant la navigation du site. Croisières: déplacer les offres en ligne sur la page avec les photos de bateaux: économie d une page et d un clic. Menu: Formulaire newsletter lourd visuellement pour une homepage. Ajouter lien «newsletter» dans le menu, affichage de la newsletter directement sur le site et formulaire d inscription avec. Spécialiste de la Chine: Eventuellement remplacer par «Chine» dans barre menu, qui remplacerait le bouton «détail». Lien «retour» sur toutes les pages: alourdit la page alors que tous les navigateurs possèdent un bouton retour, très commode. Notes Le design sélectionné pour le menu sera appliqué sur toutes les pages du site. (Dans la mesure des fonctionnalités déjà présentes et des possibilités de reprise du codage.) Les images sont des aperçus pour l instant (basse résolution + watermark fotolia.com). Les images sélectionnées devront ensuite être achetées. Max: 50chf. Chaque proposition a été élaborée avec les meilleurs paramètres possibles. Cependant, des variantes sont associées à chacune d entre elles. Possibilité de combiner plusieurs éléments Dick Ho Pas de destinations à choix pour cette page: La supprimer ou seulement momentané?