[Amateur] logo pour mon site

(reprise du message précédent)

Bonsoir !

Nicolas-Asso a écrit :

Dans le menu du haut "NOS SERVICES" "NOS TARIFS" etc. la barre horizontale-centrale du R est comme dédoublé ... vous voyez la même chose ou c'est moi qui vois double ?

Vous ne voyez pas double - ne serait-ce pas embêtant pour un chauffeur ? - peut-être en changeant la taille de la police ? Les polices sont définies par des courbes vectorielles mais la surface d'un écran est faite de points. Cela peut causer des problèmes.

Je rejoins Basdufront sur la phrase citée, la construction de la phrase est sémantiquement incorrect : par exemple, on ne peut pas être en possession d'une discrétion des clients conduits.

Sur certaines images, "CHAUFFEUR PRIVE ORLEANS" disparait presque, une typo un peu plus grasse peut-être.

Vous dites 'nous' en laissant entendre qu'il y a plusieurs personnes mais une seule personne est présentée sur la photo, je trouve que cela laisse planer un mystère... Bref, je veux dire que vous ne parlez pas assez de 'vous', quel que puisse être ce 'vous'...

Je préfère le logo typo, plus 'classe' mais le favicon fait... étrange. Un détail je sais.

L'ensemble est pas mal du tout.

Mercedes-Benz Classe E
vitres teintées et toit panoramique pour votre confort
(Faudra relire...)

Merci pour vos conseils, c'est vrai que le texte cité n'est pas très bien formé. Je vais le modifier

Pour la favicon je ne sais pas quoi faire, trop petit pour voir le logo typo, ou alors juste les initiales : CP lol

Merci pour la correction orthographique

A bientôt,

Bonjour,

Rapidement, il y a des efforts de faits et des progrès. Mais certains points n'ont pas été jusqu'au bout ou doivent être adaptés/corrigés.

La police light, comme je le craignait, a été mal appliquée. Ça aurait pu avoir un effet sur un titre en grand ou une accroche, mais sur le logo et le menu, c'est juste illisible. Trop petit et inadapté.
Passez le logo en black, sur une seule ligne, sans espace entre Chauffeur et Pro et en mettant la couleur sur Pro. La partie Chauffeur doit rester en noir (ou plutôt un gris foncé).

Mettez du Roboto partout !!!
La le titre est dans une autre police. Il est toujours beaucoup trop gros et pas en black. Du coup comme c'est pas assez tranché dans la graisse, ça manque de style. Black, moins gros.
Le texte en dessous est trop gros aussi, mettez la même taille que dans les paragraphes. Raccourcissez ou sur 2 lignes, comme expliqué dans mon message précédent. Là il y a 98 signes sur 1 ligne (espaces incluses), c'est beaucoup, beaucoup trop !

_
On reconnait facilement la Roboto avec par exemple ses barres (R… ) droites. C'est une belle police, moderne, présente sur Google fonts, qui se décline du thin au black… En plus son côté sobre colle bien avec un style haut de gamme, au monde du transport, elle a un style web et lisible.
https://fonts.google.com/specimen/Roboto

La trame gris clair sur le slider devrait plutôt passer en gris foncé ou noir transparent (trouver le bon dosage entre lisibilité et luminosité. Du coup le texte passe en couleur et la ligne en dessous en blanc. Et vous pouvez virer l'ombré noir partout. Ça fera plus propre et stylé.

La nouvelle photo d'aéroport est bien plus belle. Je virerai la photo du château gris (Chambord ?). Il y a déjà 2 autres photos de château. 2 c'est bien, 3 c'est trop !!

Les légendes sur le slider (en bas à droite) sont presque invisibles. Soit vous les supprimez, soit vous les mettez plus en valeur (centré… ).

NOS SERVICES : à virer/remplacer (voir explications dans mon message précédent).

L'apport d'une couleur, c'est bien vu. Ça fait moins "pompes funèbres" et plus moderne. Sauf si vous mettez du violet, et là on en est pas loin… D'autres avis sur ce point seraient intéressants. Avez-vous fait une recherche pour choisir une couleur web fraiche ? En 2016, on peut oser le rose, le vert, le rouge/rose, le bleu vert fluo…
Couleurs délicates : jaune (NY), orange (bas de gamme pour certains), violet (enterrement)…
La couleur que vous allez choisir, vous allez la garder longtemps, alors réfléchissez bien.

Photos coins carrés… ouf !!
Une seule photo de voiture par contre. Ce n'est pas le site de Mercedes. Comme vous avez fait en dessous avec la photo où vous posez.
Attention, les photos n'ont pas toutes les mêmes dimensions !!! Coolez leur toutes la même taille, quitte à recadrer si nécessaire.

J'ai l'impression que le contenu est moins large, surtout comparé au header. C'est une bonne idée. On respire mieux, c'est plus lisible et moderne. Très bien.

Pour les titres reprenez la Roboto Black.
Les filets latéraux sont plus fin, c'est plus élégant.

Pour la partie tarifs (aéroports), je suis pas fan de ce fond blanc transparent. À cause de la photo qui gène la lecture.
Laissez finalement un fond en aplat, comme pour les autres chapitres. Peut être pouvez-vous tester avec un gris un poil plus clair ou une illustration neutre (genre carte de france ou du monde en points… ). Peut être blanc, mais j'ai peur que ça foute trop le chantier dans la maquette et que ça implique de tout revoir. Histoire d'écrire les tarifs directement devant et de s'affranchir de ce rectangle blanc.

Sous la carte, il y a une photo en noir et blanc. Ce n'est pas cohérent vu que le reste est en couleurs et que ça ne s'explique pas. En plus on arrive pas à deviner ce qu'elle représente. Elle ne sert donc à rien et graphiquement, c'est zarbi. Ça y est, j'ai vu un bout de phare et j'ai deviner que c'est une voiture. Dommage qu'on voit surtout le carrelage. À remplacer par un fond gris ou neutre.

Dans le texte, certains mots sont en gras alors que ça n'apporte rien (hôtels, restaurant… ). Ne mettez en gras que de rares mots si vraiment c'est important. Sinon c'est contre productif.
Le texte non justifié comme avant est tout à coup bien plus agréable à lire. Ça apporte du cachet au site.

Je vais conclure avec une remarque qui risque d'être un peu plus difficile à solutionner si vous devez créer le contenu. Il me manque un visuel, soit dans le slider, soit dans les photos de contenu, où on voit le chauffeur en train de servir le client, ou bien des clients heureux… Ça serait vraiment sympa pour se projeter.
Si vraiment vous n'avez pas ça sous le coude, vous pouvez aller piocher sur une banque d'image grand public, style Fotolia. Vous en aurez pour quels euros. En choisissant un bon cadrage, des clients heureux dans une voiture de même couleur… Attention, si vous mettez une image bank, ça ne doit pas se percevoir. Il faut donc la choisir avec soin.

Je mettrais les icônes Facebook et Twitter aussi en haut (en petit) si vous voulez les faire vivre. Sauf si votre présence sur les réseaux est symbolique.


Modifié par spongebrain (22 Aug 2016 - 23:33)

Et pour le favicon, les initiales du logo, même police, même graisse (black) en reprenant la couleur de chaque partie du mot.

Soit, sur fond blanc, icône avec C gris et P couleur, sans espace (Roboto Black je pense).
Soit, sur fond gris, C blanc et P couleur, sans espace.

Plus ça sera simple, plus ça sera efficace.

Et pour votre logo, même en majuscule. Mettez le .fr en minuscule, pour ne pas qu'il ressorte trop. Voir, dans une taille un peu plus petite en moins gras.

Le fait de passer votre nom en black va lui donner un air plus "logo" et impactant, même en petite taille.

Pas fan du logo typo actuel. Ça le fait pas même si c'est déjà mieux que la carcasse. Le .fr en couleur, surtout pas. C'est pas ça le nom…
Le violet corbillard non plus (remarque, après la carcasse… ).

Très rapidement en rentrant, environ 2 minutes chrono, quelques pistes de logos typo, vite faits mais propres et qui peuvent se décliner facilement. Attention, si les polices du nom sont en black ou bold, celle du .fr peut être dans une graisse plus fine dans certains cas.

Les couleurs peuvent être optimisées mais j'ai essayé de donner dans des symboliques simples (or pour le chic, vert bleuté pour la sécurité, bleu mauve pour la sobriété, argent pour l'élégance (un peut terne, ou pour la version N&B en print)… ).

Attention à l'approche entre les lettres. Il faut parfois tricher un peu pour que l'espace entre le H et le A, le A et le U ne paraissent pas plus grands que les autres. Il faut donc les réduire d'un poil à l'œil. Là c'est pas bien fait, en qq secondes. Attention, une mauvaise approche, trop serré ou pas assez, ou pire, irrégulière à l'œil (donc pas en vrai), et c'est la cata !!

http://img15.hostingpics.net/pics/553087chauffeurProLogo.jpg

Cette image s'auto détruira dans peu de temps.

Dans l'orde :
1 : DIN Black (la police qui rend le mieux, très actuelle et pourtant intemporelle)
2 : Roboto Mono bold, graissé sur photoshop pour donner l'illusion du black, ça passe vu le style de la police (j'avais confondu avec Roboto. Autant pour moi, la version Mono a des barres droites, pas l'autre)
3 : Lato
4 : DIN Black
5 : DIN Black, DIN Light
6 : DIN Black
7 : DIN Black

En gras les polices que je préfère, indépendamment de la couleur. Roboto Mono et Lato sont dispos sur Google fonts, j'ai un gros doute pour DIN Black et DIN Light. Vous pouvez les acheter.
DIN et Roboto Mono se ressemblent beaucoup, mais la DIN est plus équilibrée, plus "typo", et donc plus élégante. La seconde est plus web, plus lisible en petit. À vous de voir si vous pouvez les associer (titres / textes)? La Roboto normale passe moins bien que la Mono à cause de ses courbes dans les barres et de son style trop convenu, moins stylé.

Fond blanc de préférence, couleur secondaire dans une moindre mesure (négatif) ou photo (à éviter). Jamais de fond transparent ou couleurs tierces. Ça abîme le logo, donc votre image. Un espace minimum vide autour du logo qui correspond à la hauteur du texte, de préférence 2 fois ou plus à la hauteur du texte (un logo étriqué perd de sa prestance).
Jamais sur 2 lignes ou déformé ! L'espace inter-lettres et les proportions ne doivent jamais varier, même si vous faites une version HTML/CSS. Pour le Favicon, initiales en reprenant la police et la couleur de chaque mot.
Jamais dans une trop petite taille qui rendrait le logo illisible, ça le flinguerait.
Pour vos titres, si vous reprenez la police, même traitement (espaces… ). Pour le texte d'accompagnement, là vous pouvez faire du standard (tester Roboto Mono, même avec DIN, pour voir ?).

Comme quoi, sans budget et sans graphiste, on peut avoir quelque chose de propre avec le système D. (même si j'ai aidé un peu en vous voyant galérer)
Modifié par spongebrain (24 Aug 2016 - 03:21)

Votre favicon actuel est juste illisible.
Appliquez les conseils qu'on vous donne. Par exemple, les photos d'illustrations doivent toutes avoir la même taille, pas de double photos (Mercedes)…

http://img15.hostingpics.net/pics/169415chauffeurProFavicon.jpg

Pas fan de la photo d'aéroport, il y a déjà beaucoup d'images.
Pour la zone géographique, 'est mieux sur toute la largeur, fond idem que le reste du site au dessus du plan.
Jamais de titre sur 2 lignes, en plus là ça bug avec le filet.

Pour le contact et laréservation, et si vous les placiez dans le slider du haut. Cette fonction clé est un peu perdue dans le scroll.
Le titre en gris/noir sur le slider c'est terne. Osez la couleur. Pourquoi pas une couleur vive, en fonction de vos choix pour le logo.

Une fois de plus, la trame blanche du slider fait laiteuse. Il faut trouver autre chose.
Les légendes sur chaque slide apportent-elles vraiment quelque chose? Pour moi ça fait doublon avec l'argumentaire et ça brouille le message.

Voili voilou pour moi.
Modifié par spongebrain (24 Aug 2016 - 03:47)

Bonjour,

ouaa ca fait beaucoup de conseils merci !

Couleur:
Je vais faire des tests avec des touches de couleur, j'ai déjà mis en ligne un bleu moins "violet".

Si j'ai bien compris vos conseils, le fond du site internet (et du logo) doivent être plutôt clair (blanc ou gris) car si je reprend vos premiers messages le noir est casse gueule !

Slide:
J'ai un soucis avec mon idée de mettre 6 photos en slide et background (je limite à 6 et ne veux pas en mettre +). J'y suis attaché car une belle image en fond d'écran accroche le regard et je trouva ca beau.
Faut aussi avoir un peu de dynamisme dans le site sinon ca vas être trop terne triste.
Le texte d'accueil (Chauffeur privé Orléans + Voiture de transport avec...) doit rester visible (premier truc que les visiteurs vont lire en arrivant sur le site), je suis obligé de mettre un pattern sur mon slide. Ce pattern est donc obligé d'être de couleur clair (soit une couleur blanc-transparent-laiteux soit un .png semi-transparent) pour que le texte sombre ressorte bien et soit lisible. Un vrai casse-tête
Pour la légende des slides, je peu les retirer mais je trouve que ca apporte un peu de contenu dans un site qui n'en possède volontairement pas beaucoup et puis notre amis google va apprécier quelques mots représentant mon activité dans des balises <h4>

Texte:
Le site est un one-page donc je dois faire passer un maximum d'infos avec un minimum de mots et phrases clefs (pour les clients mais aussi notre ami google) sans surcharger sinon ca deviens illisible ... encore un casse tête

Photo:
J'aime bien cette photo d'un avion dans le rétroviseur : ca vise une grande majorité de ma clientèle, avec cette photo je résume une parti de mon activité. Je vais peut-être la déplacer dans le slide à la place de l'hôtel Groslot. Je veux garder Chambord car c'est hyper-méga-touristique-international pour expliquer ce que je peux faire sur Orléans
Je suis toujours en attente d'autorisation pour avoir des photos plus "pro" et personnel avec des jolie sourire et arrières plans sympa.

Police:
Le soucis de la police: je ne peux charger qu'un seul fichier .ttf sinon google va me tuer et me dire que mon site est trop lent
Si je respecte vos précédents messages : la même police partout !
Auquel cas les polices de type Black bold ne peuvent pas être utilisé (sur la paragraphes ca serai pas beau)
Ou alors je conserve un belle police light ou normal (en ce moment Roboto-Light) et j'utilise simplement font-weight:bold sur les titres.
Petit souci avec la police Roboto: pourquoi le R s'affiche de différente façon ? Sur mon site il y a une patte qui est arrondie alors que sur Google Font c'est droit ?
https://www.chauffeurpro.fr/img/sans-titre2.jpg https://www.chauffeurpro.fr/img/sans-titre.jpg

Logo:
Dans tous les cas, le logo devra être une image (je pense SVG si ca bave pas). C'est dommage car un logo en pure texte sera toujours plus jolie et net sur l'affichage des écrans. Je ne peu pas charger un .ttf uniquement pour afficher le logo

Merci!
M'en vais appliquer et tester tout ca .... merci spongebrain pour votre aide juste avant de faire dodo

A bientôt,
Modifié par Nicolas-Asso (24 Aug 2016 - 12:03)

Relisez bien mes messages :

Robot > Roboto Mono ("Roboto Mono" est une version plus droite de Roboto (mais monospace, donc pas adapté pour les paragraphes).
Il y avait confusion de ma part et ça n'a rien à voir. Autant pour moi…
Pas de black pour le texte bien évidemment. J'ai jamais dit ça… Pour les titres, oui, y compris sur le slider.
En revanche pour le logo (et les titres), DIN black est très élégante.

Votre slider ne sera pas plus dynamique avec 36 slides de vieux châteaux, surtout qu'il y a beaucoup de contenu après. Au contraire, ça sera confusant.
En revanche, vous pouvez tester le texte blanc et une trame sombre, ou texte couleur sauf la baseline…
Et pas en énooorme avec des ombrés en veux tu en voilà, c'est moche et ça fait pas classe. Le site ne s'adresse pas aux aveugles et aux malvoyants. Là encore, regardez les sites en exemples.
Moins gros, plus gras (black) pour les titres, à commencer par le slider, et ça sera mieux (si bien appliqué).

Charger 2 polices ne pose AUCUN problème à google. Surtout si ces 2 polices sont des déclinaisons de la même. Regular et black, par ex.

Pour les images, ce qui est très gênant c'est d'avoir des vignettes de 36 formats. Ça fait pas structuré.
Et là encore, attention à ne pas surcharger en infos.
Pour le logo, SVG, GIF ou PNG, peu importe…

Fond blanc pour le site, oui c'est à tester bien évidemment. Ou fond gris très foncé, pourquoi pas. Mais le blanc peut alléger si bien appliqué… Ou pas.


Modifié par spongebrain (28 Aug 2016 - 19:34)

Bonjour,

J'ai appliqué plusieurs de vos remarques. Je n'ai pas encore fini mais voilà le résultat:
https://www.chauffeurpro.fr/
Je dois encore modifier le titre des chapitres.

Le nouveau logo ressemble à ca:
https://www.chauffeurpro.fr/img/chauffeurpro.png

Merci pour toutes vos idées

Bonjour Nicolas,

J'arrive en fin de bataille mais avec un regard neuf.

Je trouve le logo beaucoup trop petit dans le header.
Pour reprendre le conseil d'un grand directeur marketing d'une multinationale que j'ai eu la chance de voir plusieurs fois en conférence (moment j'me la pète ) : "VOYEZ GRAND".
Le logo si petit dans un si grand espace renvoi une image timide, non assumé.
Dans l'idée, je passerais le font-size de ton logo textuel en 27px ('.fr' en ~20px) et je diminuerais le padding vertical de l'élément nav du header à 10px.

Je trouve que les images de ton slider manque d'humain. Ce que tu vends est pourtant un service à la personne. Pour séduire, il est toujours préférable de permettre au futur client de se projeter (c'est pas Stéphane Plaza qui me contredira ). Une belle image de toi ouvrant la portière d'une belle voiture au pied d'un immeuble/maison ; une belle voiture réceptionnant des fêtards heureux en sortie de discothèque ; une personne en difficulté physique dont ont met les provisions dans le coffre de la belle voiture qui l'a accueillie après ses emplette ; etc. On doit comprendre avec ces images l'importance du service rendu. Ces image peuvent (conditionnel) conditionner la suite du parcours sur le site.

Pour la partie 'confort', en plus de la vue extérieure de la voiture, il pourrait être bien d'afficher une vue intérieure. Finalement, c'est ça que le client verra le plus.

Concernant la photo du chauffeur... On le voit pas sur cette photo !
La voiture est présenté juste au dessus. Ce qu'on s'attends à voir à ce moment là c'est l'expression physique du chauffeur. On veut voir une bonne bouille sympathique et classe.

La dernière photo ne me semble pas avoir beaucoup d’intérêt. Je la supprimerais.

La partie 'tarifs' me parait confuse. Je pense qu'elle peut être retravaillé.
Un découpage en deux colonnes est une suggestions :
- 'Demande de devis' d'un coté avec un bouton 'Demandez votre devis'
- 'Formules aéroports' de l'autre avec la liste des options sélectionnables avec un input radio et un bouton submit
Au clic sur l'une ou l'autre des boutons, les étapes 2 respectives de ce qui se trouve actuellement dans la partie 'Contact réservation'.

Zone géographique en dernier... Regarde t-on où est prêt à se rendre le chauffeur après avoir réservé ? Voici mes suggestions concernant le parcours de la page.
- quoi : le slider de conditionnement à l'offre (appelons un chat 'un chat')
- qui : la voiture, le chauffeur (cette partie est longue au regard des autres : et si les images étaient placée à coté des textes afin de contrer cette linéarité ?)
- où : la zone de couverture géographique
- comment : les formulaires de réservation
- bonus : les réseaux sociaux et autres mentions légales

Voila, j'espère ne pas aller trop à l'encontre de ce qui a été dit avant.

Bonjour erwan21a,

J'aime beaucoup vos idées et en particulier celles sur le "parcours client". Je vais certainement réorganiser les rubriques en ce sens. Pour le formulaire de réservation, je vais essayer de l'améliorer mais cela fait appel à du javascript (clic sur bouton pour pré-remplir le formulaire, etc.) et je suis nul en JS

Pour les photos vous rejoignez les précédentes remarques et je suis à 100% d'accord : j'ai prévue d'avoir des photos (intérieur + ext. du VHL, avec et sans client qui monte-descend, gros plan sur ma tronche-avec-sourire, etc.) mais pour le moment mon photographe et ma "fausse" cliente-pinup sont en vacances et je n'ai toujours pas eu les accords de faire des photos devant quelques monuments ou musée d'Orléans.

Pour le logo du header, j'ai appliqué vos suggestions C'est vrai que c'est mieux un logo plus gros

Merci de votre aide !

Bonjour,

Je crois qu'on a dû vous le dire dans les commentaires précédents, mais le grillage sur les photos rend la vue trouble, ce qui est un problème à mon goût pour un chauffeur (le parallèle avec la vue trouble).
J'imagine que vous l'avez mis (les points) pour qu'on voit mieux les titres. Mais si vous l'enlevez, vous pouvez rendre le brand-heading lisible avec un simple :
text-shadow : 2px 2px rgba(0, 0, 0, 0.5); /* sur le h1, j'ai choisi l'ombre plate pour la modernité */
text-shadow : 1px 1px rgba(0, 0, 0, 0.5); /* sur le p */
et si vous trouvez encore que ça n'est pas lisible, vous pouvez utiliser une box shadow dispersée sur le paragraphe. J'ai déjà utilisé cette astuce et ça fonctionne assez bien :
box-shadow : inset 0 240px 150px rgba(0,0,0,0.25),0 0 150px 136px rgba(0,0,0,0.25);
Essayez, comparez, c'est peut-être une idée, peut-être pas.

Si par contre vous voulez conserver la grille pour l'aspect visuel qu'elle peut apporter, alors essayez peut-être un opacity: .5 sur .cb-slideshow:after : vous conservez la grille, mais vous réduisez son impact négatif. Essayez peut-être avant les ombres d'ailleurs.

Bonjour,

Petit à petit, ça avance dans le bon sens.

Mais…

• Le logo que vous présentez ici n'est pas le même que celui présent sur votre site. Le .fr est trop fin ici (je préfère sur le site. L'approche trop serrée (espace inter lettres). Le .fr est un peu petit sur le site, je mettrais un gris plus clair sur le .fr pour mettre en valeur le nom. Comme le logo LeMonde.fr par exemple…

Si vous galérez avec la police Roboto (barres des R pas droites dans la version normale, droites dans la version Mono mais monospace), vous pouvez vous rabattre sur OPEN SANS ou LATO (normal + black, ou normal + ultra bold). C'est de ma faute, je vous ai un peu perdu avec Roboto. Trop compliqué de jongler avec.
Pour vous aider, j'ai choisi des fontes gratuites sur Google.
https://fonts.google.com/
Vous pouvez aussi faire une recherche par critères sur Google Fonts (sans serif, droite, version normale et black (ou ultra-bold) disponible… ). Attention, le choix avec tous les critère est TRÈS limité.

J'adore la DIN, mais apparemment Google Fonts n'ont pas obtenu les droits, même sur une ou deux graisses. Si vous la choisissez, il faudra l'acheter pour un peu moins de 200€ (2 graisses), ce qui est un très bon prix et donnera du cachet à votre site.
https://www.myfonts.com/fonts/fontfont/ff-din/

Les polices de qualité complètes peuvent coûter plusieurs milliers d'euros (il faut choisir la graisse et le style dont on a besoin). C'est pourquoi la plupart ne sont pas dispo sur Google Fonts ou par défaut dans les OS. Il faudrait doubler le prix des PC.

• La couleur est trop violette. Noir + violet = deuil pour nombre d'utilisateurs. Et là on en est pas loin. Utiliser un bleu moins violet ou bien une couleur différente. N'hésitez pas à faire dans le vif, le frai ! (voir conseils précédents)
Le gris foncé en fond est un peu plat. Il aurait pu être coloré un poil pour lui donner un aspect moins dur, moins terne. Par exemple sur le site https://www.flickr.com/ , le gris de fond et légèrement coloré en vert (RVB : 33/39/39).
Testez plutôt en bleu ? En fonction de la couleur du texte…

• Je suis content que d'autres soulignent le manque d'humains dans vos visuels. Bonne idée que de vouloir remédier à cela. Aidez vous des visuels des sites cités ici.

• Le favicon est bien lisible ainsi.

• La trame sombre sur le slider est bien plus classe que la trame laiteuse. C'est bien mieux.

• La flèche sur le slider rend bien, mais en hover, c'est trop bariolé. Un petit effet de mouvement ou de décalage, ok. Le bric à brac actuel, bof.

• Les légendes sur le slider sont enfin lisibles, mais c'est quoi ce délire sur les châteaux (voir commentaires précédents) ? Affirmer sa fibre locale, c'est bien. Avec lourdeur, c'est trop.
Vous me faites vraiment peur quand vous parlez de faire des photos avec la bagnole devant le château… Des danseuses folkloriques et des mecs en armures ont été prévus ??
Ce n'est pas l'office de tourisme (re) !! Mettez des commentaire en rapport avec votre activité, vos services, montrez des clients (pas forcément une pin up… ).

• Virez un château. (re)

• L'accroche sur le slider et la ligne en dessous sont enfin lisibles sur le slider (en black ça rend mieux).
En revanche, la phrase du dessous est écrite trop gros (Voiture de t… ). Mettez la même taille que le reste du texte. Ainsi vous aurez une meilleure cohésion avec le reste du site (le moins de tailles de polices possible). Aussi, le contraste entre le titre et la légende sera plus accentué et plus élégant.
Pour vous aidez, examinez ce site, comment ils on limité le nombre de tailles de polices, pas de police trop grosses, bouton d'action sur le slider, téléchargement des apps (réseaux sociaux pour vous ?)…
https://www.flickr.com/

• Je ne trouve pas le logo trop petit dans la barre de menu. Il pourrait même être réduit d'une taille.
En revanche, ce qui me dérange c'est le fond du menu qui est transparent avant le scroll. C'est moche et comme déjà dit, ça abime le logo. JAMAIS de fond transparent sous le logo (voir commentaires précédents).
Je n'ai pas testé votre site sur iPad et mobile. À faire.
(note : votre site sur les aquariums a des bugs sur iPad, des textes qui dépassent des blocs).

• Comme dit par les autres intervenants, il n'y a pas de trame pour les photos. Elles doivent toutes avoir la même taille. Vu la maquette actuelle, ça me semble non négociable.

• Un bug avec le filet latéral pour les titres intérieurs (Nos services… ). Dans certaines largeurs de fenêtres le filet se retrouve sur le texte.
Pas de titre sur deux lignes ! C'est vraiment très laid.

• La photo de la Mercedes est propre mais pas top. Le fond carrelage et impersonnel n'exprime rien. Un bel extérieur aurait été préférable.
Mettez des majuscules en début de phrases. Et des points dans les légendes.
Pas de légendes sous les photos de 3 lignes !! 1 ligne.

• Globalement, sur grand écran, je trouve le texte des paragraphes un chouilla trop gros. Regardez sur le site flickr en lien ci-dessus.

• Les titres sont parfois plats (voir commentaires précédents). Un tire comme "NOS SERVICES" est d'une tristesse à pleurer, ça n'exprime rien. Les gens ne sont pas cons au point de ne pas comprendre que vous présentez vos services. Emportez-les !!!
Regardez les titres sur le site https://www.flickr.com/ , c'est vivant, informatif, engageant, stylé… C'est comme ça qu'on attrape les prospects. Surtout que je vous avait indiqué des pistes…

• Erreur classique, les textes en gras dans les paragraphes ne ressortent pas. Pour le gras, optez pour le Black direct, pas le bold.
Vous avez besoin de 2 graisses pour TOUT votre site, normal et black (ultra bold dans certaines polices). Le reste doit être supprimé.

• Contrairement à d'autres avis, ici, pas d'ombres et d'effets halo sous les textes. Si ça n'est pas lisible c'est que la maquette, le fond ou les couleurs doivent être optimisés. Inutile d'ajouter des ombres qui font office de "béquilles".

• Le fond gris plus clair (tarifs) est trop clair. Testez aussi avec un fond photo tramé ou coloré discret, une couleur ?…

• Le titre zone géographique tombe dans la rubrique précédente.

• Des fautes d'orthographe : À bord de notre voiture…

Voilou.




Edit le 29/08 :
Un exemple de menu fixed réussi avec la taille du logo qui s'adapte (Lato). Notez la taille et la graisse des caractères des paragraphes. Ni trop gros, ni trop petit, ni trop light, ni trop bold, et pourtant bien lisibles. (Le fond gris clair, peut être à tester ? Sur la partie tarifs ? Ou à adapter en fonction de vos choix de couleurs ?)
https://exeo.ca/the-various-types-of-u-s-visas/

Vous avez 2 tailles de texte de légendes (Mercedes-Benz Classe E… ) et (Les prix sont indiqués en Euros… ). Ne choisissez qu'une taille, en petit ça devrait bien passer (pas trop quand même).

Sympa la photo avec le théâtre et la légende qui va avec. C'est plus vivant qu'une vieille carte postale de château. Bye bye Chambord ! Enfin !!
Certaines légendes ne collent pas avec les visuels. Pour la photo "route", parlez de confort ? Les légendes sous les photo Jeanne d'Arc et l'Hôtel machin sont hors sujet. Parlez uniquement de vos services. Si un visuel n'implique aucun service, c'est qu'il est de trop.
Le cadrage de la photo d'aéroport est un peu bas au niveau de la ligne d'horizon, ça coupe la photo sur le titre (moniteur de bureau).


@ Manhattan : si le texte est moyennement lisible sur certaines photos du slider, il me semble qu'il soit préférable d'adapter ce qui gêne (fond) plutôt que de bricoler ce qui fonctionne (la typo), ce qui donnerait au final un style graphique moins clair.
En revanche, l'idée d'une grille un peu plus transparente sur le slider est à tester en effet.
Modifié par spongebrain (29 Aug 2016 - 03:07)

Oui je suis d'accord, les ombres seraient des béquilles. Mais je trouve vraiment l'assemblage photos+grille+textes illisible sur certaines photos. On dirait la vision embrumée d'un type qui roule bourré. En fait, il s'agit uniquement de la tagline, le titre reste lisible lui.
Ensuite, faut ptêtre juste que j'arrête le rhum ^^

Bonjour,

J'ai un soucis avec le rendu couleur. J'ai essayé de régler les couleurs de mon écran portable HP mais le problème persiste.
Le premier bleu choisi #7f92ff était de couleur ciel très jolie mais en regardant depuis mon smartphone j'ai remarqué que ce bleu était plutôt violet - c'est pour ca que je ne comprenais pas votre remarque sur la couleur bleu-violet.

J'ai donc choisi la couleur #7fc9ff qui apparait un peu trop pastel clair sur mon PC mais sur mon smartphone cette couleur à un rendu plus foncé et semble être plus lisible

Je vais tenir compte de vos dernières remarques et ajustements mais en ce moment je suis moins dispo

A bientôt,

P.S. : merci spongebrain pour le signalement de bug sur aquariophilie.org je l'ajoute à liste des choses à faire
Modifié par Nicolas-Asso (02 Sep 2016 - 09:44)

D'où l'intérêt de travailler sur un écran à peu près calibré ou relativement fiables. Les écrans lambdas affichent souvent des couleurs et contraste fantaisistes. Le beau pull bleu que vous commandez vous sera livré violet et ça sera de votre faute…

Les écrans Apple sont correctement calibrés à la base (ordis et devices). On trouve des écrans à prix abordables adaptés à la maquette, assez fiables, chez Asus, comme le PB248 par exemple.
Chez Dell ou ViewSonic, on peut trouver des références intéressantes. Eizo est très bien, mais les prix peuvent grimper très haut.
Il y a des marques que je ne connais pas qui semblent proposer des modèles intéressants (mais attention, d'une référence à l'autre, elles peuvent proposer le pire ET le meilleur, passez les tests à la loupe) : AOC, ProLite

Les marques à fuir : Acer, HP, Iiyama et la plupart des marques low cost. Les écrans sont souvent passables, voir exécrables. On trouve les pires dalles sur les portables (technologie TN). De préférence, favoriser une dalle de type IPS (meilleurs couleurs et champs de vision).

La fidélité des couleurs se mesure en Delta E (à surveiller dans les tests). Autour de 2 c'est bien, autour de 3 c'est assez bien, sous les 5 c'est bof, au dessus de 5 c'est la cata. Certains écrans grimpent à 10, autant dire que les couleurs sont complètement fausses et qu'il n'est pas possible de travailler avec.

Il semblerait que pour la couleur, votre smartphone soit plus juste, et que pour les contrastes, votre PC soit meilleur. Pas top pour travailler.

Pour moi, la première couleur (bleu violet) était trop mauve et pas assez saturée (ne ressort pas sur le gris et terne par ailleurs). La seconde couleur est trop fade et désaturée (triste sur blanc ou gris foncé, invisible sur gris moyen, pensez à l'accessibilité des personnes daltoniennes > contrastes).

À tester un bleu vert (couleur de l'espoir). En revanche, pour éviter le côté terne de vos choix précédents, optez pour une couleur plus saturée, vous pouvez tester bien vif (voir sur mon guide PDF). Ce n'est pas pour rien si les couleurs vives, fraîches, ou même fluo ont la cote. C'est parce qu'elles passent partout, même avec des variations liées aux écrans mal calibrés.

En plus une couleur fraîche donnera une image moderne et dynamique, contrairement à une teinte éteinte.


Écrans :
Une page explicative avec les atouts et faiblesses de chaque technologie. Les IPS récents ont amélioré leurs contrastes et c'est ce qu'on trouve de mieux pour le graphisme et la photo. Pour un rendu encore meilleur, il faut choisir une dalle matte, car le brillant fausse les contrastes et la saturation. On trouve aussi des IPS sur les iMac et les iPad :
http://www.focus-numerique.com/test-1834/ecrans-tablette-graphique-choisir-ecran-art-graphique-photo-video-presentation-caracteristiques-1.html

Je suis en train de faire des tests de couleur.

Je m'aide aussi de cet outil https://snook.ca/technical/colour_contrast/colour.html pour voir si c'est conforme et lisible pour un max d'utilisateur.

Ci-dessous mes différents tests effectué :

Le fond retenu depuis quelques temps est un gris foncé (#272727), le texte est de couleur blanc. Les titres et quelques icones sont actuellement de couleur #7FC9FF je test avec le bleu #005AFF

Chez monsieur google j'ai trouvé de jolie palettes de couleur : https://material.google.com/style/color.html#color-color-palette je pense m'orienter vers le cyan car le bleu canard est difficile à intégrer lol

Quand vous dites "couleur plus saturé" ca veux bien dire une couleur qui s'éloigne du gris ... c'est bien ca ?

A bientôt
Modifié par Nicolas-Asso (03 Sep 2016 - 20:24)

Cool l'outil pour régler les couleurs, je le connaissais pas. Et hop dans les favoris !

Pour le gris, faut voir en place, je vous avais suggéré un gris légèrement coloré (voir dans mes posts précédents… )…
Pour le bleu, le premier sort un peu du lot, mais il fait un peu bureautique, le bleu 2 trop primaire. Les 3 et 4, j'ai l'impression que ce sont les couleurs testées précédemment. Avez-vous testé un peu plus vert ?


Quelques couleurs intéressantes dans Material design

Gris foncé (légèrement coloré pour le réveiller) :
#263238

Couleur de complément :
#64FFDA
#00BCD4
#1DE9B6
#00E676
#8BC34A
#FF1744
#26A69A
…
À tester. Il peut y avoir de bonnes et des mauvaises surprises. C'est indicatif, à vous de voir.

Peut être aussi un "or" du genre #D3AC6A. Attention, ça peu vite faire "old school" si la maquette n'est pas moderne. Mais pourquoi pas ?

Essayez de privilégier une couleur qui raconte une histoire, par rapport à votre marque, le message que vous voulez passer… Une couleur n'est pas qu'un dosage RVB.
Modifié par spongebrain (03 Sep 2016 - 17:10)

Bonjour,

J'aime bien ce gris #263238, je le trouve plus sympa que le #272727 : je l'adopte

J'ai fait plusieurs tests pour les couleurs mais j'ai du mal à me décider surtout avec mon écran qui déforme les couleurs . J'ai quand même retenu 3 ambiances :

bleu : https://www.chauffeurpro.fr/img/essai-00bcd4.png
or : https://www.chauffeurpro.fr/img/essai-d3ac6a.png
rouge : https://www.chauffeurpro.fr/img/essai-ff1744.png

J'ai éliminé la couleur de l'espoir car trop difficile à rendre compatible en même temps avec un fond sombre et clair. Ou alors avec un vert terne qui déprime J'ai une petite préférence pour la couleur or (un rapport avec les codes du luxe de mon entreprise) ou alors un bleu plus classique et prudent sur les sites internet.

A bientôt,

Dommage de ne pas avoir essayé avec un bleu vert. Il y en avait des pêchus dans la liste. Mais ce sont vos choix et je m'incline.

Par ordre de préférence :

Or : attention de l'utiliser avec parcimonie pour ne pas faire "boite de chocolat de Noël". Le fond gris coloré s'accorde bien avec cette teinte. Ça reste moderne et chic.
Attention si vous choisissez le doré. Pas de cartes de visites avec effet or à chaud ou de vernis sélectif des années 80 !! Je les vois venir les imprimeurs pour faire grimper la facture avec des idées à la con… Un or mat ou en couleur or (ton direct Pantone), ça sera très bien sur un papier mat. Ils doivent faire ça chez Moo (ils ont du bon papier, même en qualité normale)…

Bleu : apaisant, mais un peu banal. Donne en effet un style moins "premium" que l'or. Comme quoi les grosses ficelles fonctionnent encore (même l'iPhone est passé en doré… ). Là aussi, à utiliser avec parcimonie. Donner l'avantage au blanc et gris pour le texte, et mettre l'accent sur les photos (qui sont encore dans 36 tailles différentes malgré les conseils… ).

Rouge : là c'est une mauvaise surprise. Il claque trop et agresse. Du coup, ça fait pas super classe, voir discount. À écarter je pense.


Pour le fond gris plus clair qui n'est pas très heureux dans la version actuelle du site (tarifs), vous pouvez essayer un fond photo estompé, avec un effet filtre/calque de la couleur de complément (or ou bleu).
Par exemple comme ici (un vert bleuté pas terne du tout, mais un peu modasse… ) :
https://branded.me
(inspectez l'élément pour voir comment c'est fait)
Notez la simplicité de la typographie (dépouillé et moderne), les espaces entre les paragraphes, la taille de caractère des paragraphes (inutile d'écrire gros). La police utilisée est Lato (gratuit sur Google fonts en normal et black). À tester pour votre site, pour voir ce que donnerait une police droite. Leur logo, ça ressemble à une Helvetica (mais ils n'ont pas de majuscules, donc pas de pattes courbées).
Notez aussi l'élégance et la simplicité de la flèche dans le rond. Je trouve ça plus élégant que l'accumulation d'effets en hover sur votre flèche actuelle. Même si le dessin outline passe bien.

Je note que le texte de votre menu en haut est tout maigrichon. En plus avec votre anti aliasing Microsoft, c'est tout abîmé et encore plus vilain que sur mac. Il faut passer une graisse au dessus je pense.

Bonjour,

J'ai fais plusieurs tests en changeant la police par Roboto-Regular et Lato-Light au lieu de Roboto-Light. La police Lato est plus légère mais j'aime pas trop certains caractères comme le g et le texte semble plus "condensé". Je comprend pas trop pourquoi windows lisse certaine police comme Roboto light et ne le fais pas pour Lato-Light ?

J'ai aussi essayé avec le vert #1de9b6

https://www.chauffeurpro.fr/

A bientôt,
Modifié par Nicolas-Asso (15 Sep 2016 - 12:05)