Bonjour,
juste pour avoir vos impressions, critiques sur mon site.
http://www.cabinet-focus.fr
merci
Fanny
juste pour avoir vos impressions, critiques sur mon site.
http://www.cabinet-focus.fr
merci
Fanny
3246 sujets
Critiques de vos sites: code et design
Bonjour fanny64,
A l'ouverture je trouve que la disposition est agréable mais les teintes me dérangent.
Aussi bien le vert que le taupe sont en demi-ton, pas francs, un peu ternes.
L'iconographie et les effets sont globalement passés de mode. Globalement c'est l'ombrage qui ne passe pas. Depuis quelques années la tendance est à la simplicité voir au dépouillement.
Au sein des pages je me heurte à nouveau au couleurs. Je découvre par exemple que le vert en demi-ton est utilisé en ton plus fort pour des encadrés dans les articles. D'une manière générale le contenu du site ne respire pas suffisamment. Ce sentiment est donc après quelques seconde de navigation l'inverse de ce que j'avais ressentie à l'ouverture.
En conclusion :
Je pense que la charte couleur est à revoir. Les deux teintes choisies ne se marient pas au mieux.
Je conseillerais de composer cette charte avec une teinte d'identité et une teinte de contraste. La teinte d'identité représentera la personnalité du site tandis que la teinte de contraste la mettra en valeur et permettra de structurer visuellement l'espace.
Par exemple, en me basant sur le header existant, voici une combinaison de teintes qui me semble plus adéquate :
- un vert plus vivant mais sobre : #92cdb9
- un gris foncé à la place du taupe : #595959
Au niveau du style démodé je recommanderais un réglage plus discret des text-shadow.
Par exemple, sur l'élément ".page-description" de la page "Rédaction", le réglage est le suivant :
Je le passerais à une valeur de ce type :
Les icônes seront aussi à revoir - elles sont trop marquées sur le contour - mais ça peut se faire dans un second temps.
Pour aérer l’intérieur des pages, ne pas hésiter à ajouter sur le ".main-container" un padding en top et bottom (sur mon grand écran j'ai testé avec une valeur de 50px et ça me semble un minimum). Ne pas hésiter non plus à définir une hauteur minimum (attention au responsive) à cet élément afin d'éviter que le footer ne remonte trop lorsqu'il y a peu de contenu.
Enfin, je me demande si l'en-tête avec image apporte quelque chose sur ces pages... Lorsqu'on l'enlève le contenu de la page prend plus d'importance.
Voila ce qui me saute aux yeux le plus vite
Modifié par erwan21a (15 Sep 2016 - 10:08)
A l'ouverture je trouve que la disposition est agréable mais les teintes me dérangent.
Aussi bien le vert que le taupe sont en demi-ton, pas francs, un peu ternes.
L'iconographie et les effets sont globalement passés de mode. Globalement c'est l'ombrage qui ne passe pas. Depuis quelques années la tendance est à la simplicité voir au dépouillement.
Au sein des pages je me heurte à nouveau au couleurs. Je découvre par exemple que le vert en demi-ton est utilisé en ton plus fort pour des encadrés dans les articles. D'une manière générale le contenu du site ne respire pas suffisamment. Ce sentiment est donc après quelques seconde de navigation l'inverse de ce que j'avais ressentie à l'ouverture.
En conclusion :
Je pense que la charte couleur est à revoir. Les deux teintes choisies ne se marient pas au mieux.
Je conseillerais de composer cette charte avec une teinte d'identité et une teinte de contraste. La teinte d'identité représentera la personnalité du site tandis que la teinte de contraste la mettra en valeur et permettra de structurer visuellement l'espace.
Par exemple, en me basant sur le header existant, voici une combinaison de teintes qui me semble plus adéquate :
- un vert plus vivant mais sobre : #92cdb9
- un gris foncé à la place du taupe : #595959
Au niveau du style démodé je recommanderais un réglage plus discret des text-shadow.
Par exemple, sur l'élément ".page-description" de la page "Rédaction", le réglage est le suivant :
text-shadow: 2px 2px 1px #000;
Je le passerais à une valeur de ce type :
text-shadow: 0px 1px 10px rgba(0,0,0,0.5);
Les icônes seront aussi à revoir - elles sont trop marquées sur le contour - mais ça peut se faire dans un second temps.
Pour aérer l’intérieur des pages, ne pas hésiter à ajouter sur le ".main-container" un padding en top et bottom (sur mon grand écran j'ai testé avec une valeur de 50px et ça me semble un minimum). Ne pas hésiter non plus à définir une hauteur minimum (attention au responsive) à cet élément afin d'éviter que le footer ne remonte trop lorsqu'il y a peu de contenu.
Enfin, je me demande si l'en-tête avec image apporte quelque chose sur ces pages... Lorsqu'on l'enlève le contenu de la page prend plus d'importance.
Voila ce qui me saute aux yeux le plus vite
Modifié par erwan21a (15 Sep 2016 - 10:08)
merci de tes critiques, cependant, je suis une femme...et les couleurs que tu m'as donné sont très masculine. ( j'ai testé tes couleurs).
quand tu dis " Pour aérer l’intérieur des pages, ne pas hésiter à ajouter sur le ".main-container" un padding en top et bottom (sur mon grand écran j'ai testé avec une valeur de 50px et ça me semble un minimum)." , là je suis larguée.....
Fanny
quand tu dis " Pour aérer l’intérieur des pages, ne pas hésiter à ajouter sur le ".main-container" un padding en top et bottom (sur mon grand écran j'ai testé avec une valeur de 50px et ça me semble un minimum)." , là je suis larguée.....
Fanny
Bonjour,
Je trouve l'avis de erwan21a plutôt bien vu.
Pas fan des 2 couleurs non plus. Masculin ou féminin, ça manque de fraîcheur. Aucun contraste (imaginez en noir et blanc). Il faut aussi penser aux daltoniens (7% des hommes) qui ont besoin de contrastes appuyés.
Sur la home page, tout est tassé, enfermé dans des rectangles (un peu oui, mais pour tout non) et il y a des bugs d'affichage, les textes et boutons dépassent (sur desktop) :
http://img4.hostingpics.net/pics/278033Capturedecran20160915a000951.png
Un bug aussi par rapport au menu qui réagit de façon innexpliquée au scroll, il disparait et apparait bizarrement… Il n'est pas affiché quand on en a besoin (chrome/mac/desktop).
Pas de texte justifié, pas comme ça !!! C'est la faute qui revient dans presque tous les sujets. C'est vilain si ce n'est pas maîtrisé et compris et c'est pas moderne. En plus ça fait des trous dans le texte et on a pas de gris typo. Attention aussi aux césures pour éviter les veuves en fins de paragraphes (pas évident pour le web).
Pour apporter modernité et élégance, inspirez-vous de ça :
https://fr.wikipedia.org/wiki/Style_typographique_international
En typo, un paragraphe doit produire un gris typo :
https://fr.wikipedia.org/wiki/Gris_typographique
Ça manque de blanc tournant (marges autour des textes dans un bloc).
Les icônes n'ont pas le même style. Simplifiez le graphisme.
Plutôt que des gros blocs photo pour "QUI SUIS-JE ?" et "FOCUS OU PAS ?" assez lourds et qui enferment le contenu, mettez le dans la page sur fond blanc, ça apportera de la respiration. C'est l'occasion aussi de synthétiser le texte que je ne trouve pas très adapté au web.
Des formules du style «Contactez-moi, je serai heureuse de mettre ces qualités au service des écrits que vous me confierez!», c'est scolaire et ampoulé. Faites simple, direct, efficace. Ceci dit, c'est peut être subjectif ?
Le footer est lourd avec ces 2 couleurs ternes qui ne fonctionnent pas. Texte gris, fond blanc, le plus simple possible, ça sera plus élégant je pense. Tous les contenus de votre site sont enfermés dans des rectangles, ce qui contribue à cette impression de manque de respiration.
Sur les pages secondaires (par exemple "RÉÉCRITURE"), on voit que votre charte ne fonctionne pas. Le contenu est moins important que le footer qui écrase tout. En plus avec ces couleurs ternes et ces bandes bicolores, on ne voit plus que ça. Sans parler du bloc texte de la même couleur. Blanc avec un filet gris fin, c'est suffisant.
Je n'aime pas le logo qui fait daté. Avec ces polices un peu datés à l'anglaise et la loupe, ça fait clairement cabinet de détective. Faits simple.
Les coordonnées dans la petite bande du haut, c'est parce que vous ne saviez pas où les caser ? Mettez les dans le contenu avec une ancre éventuelle depuis le menu.
Trop de menus et sous menus, ça saucissonne votre site. Par exemple pour "CORRECTION" regroupez tout sur une page bien claire, avec des espaces entre les paragraphes et des titres biens marqués. Un site pour une association d'écrivains amateurs avait eu le même problème ici il y a quelques mois.
Idem pour les onglets un peu partout, au lieu d'aider je trouve que ça complexifie. Faites sobre…
Le slider défile trop vite. Pas fan des textes qui tressautent.
Voilà pour moi. Un site qui malgré des optimisations souhaitables est propre et consultable.
PS : Je n'ai pas regardé sur mobile.
Modifié par spongebrain (15 Sep 2016 - 01:03)
Je trouve l'avis de erwan21a plutôt bien vu.
Pas fan des 2 couleurs non plus. Masculin ou féminin, ça manque de fraîcheur. Aucun contraste (imaginez en noir et blanc). Il faut aussi penser aux daltoniens (7% des hommes) qui ont besoin de contrastes appuyés.
Sur la home page, tout est tassé, enfermé dans des rectangles (un peu oui, mais pour tout non) et il y a des bugs d'affichage, les textes et boutons dépassent (sur desktop) :
http://img4.hostingpics.net/pics/278033Capturedecran20160915a000951.png
Un bug aussi par rapport au menu qui réagit de façon innexpliquée au scroll, il disparait et apparait bizarrement… Il n'est pas affiché quand on en a besoin (chrome/mac/desktop).
Pas de texte justifié, pas comme ça !!! C'est la faute qui revient dans presque tous les sujets. C'est vilain si ce n'est pas maîtrisé et compris et c'est pas moderne. En plus ça fait des trous dans le texte et on a pas de gris typo. Attention aussi aux césures pour éviter les veuves en fins de paragraphes (pas évident pour le web).
Pour apporter modernité et élégance, inspirez-vous de ça :
https://fr.wikipedia.org/wiki/Style_typographique_international
En typo, un paragraphe doit produire un gris typo :
https://fr.wikipedia.org/wiki/Gris_typographique
Ça manque de blanc tournant (marges autour des textes dans un bloc).
Les icônes n'ont pas le même style. Simplifiez le graphisme.
Plutôt que des gros blocs photo pour "QUI SUIS-JE ?" et "FOCUS OU PAS ?" assez lourds et qui enferment le contenu, mettez le dans la page sur fond blanc, ça apportera de la respiration. C'est l'occasion aussi de synthétiser le texte que je ne trouve pas très adapté au web.
Des formules du style «Contactez-moi, je serai heureuse de mettre ces qualités au service des écrits que vous me confierez!», c'est scolaire et ampoulé. Faites simple, direct, efficace. Ceci dit, c'est peut être subjectif ?
Le footer est lourd avec ces 2 couleurs ternes qui ne fonctionnent pas. Texte gris, fond blanc, le plus simple possible, ça sera plus élégant je pense. Tous les contenus de votre site sont enfermés dans des rectangles, ce qui contribue à cette impression de manque de respiration.
Sur les pages secondaires (par exemple "RÉÉCRITURE"), on voit que votre charte ne fonctionne pas. Le contenu est moins important que le footer qui écrase tout. En plus avec ces couleurs ternes et ces bandes bicolores, on ne voit plus que ça. Sans parler du bloc texte de la même couleur. Blanc avec un filet gris fin, c'est suffisant.
Je n'aime pas le logo qui fait daté. Avec ces polices un peu datés à l'anglaise et la loupe, ça fait clairement cabinet de détective. Faits simple.
Les coordonnées dans la petite bande du haut, c'est parce que vous ne saviez pas où les caser ? Mettez les dans le contenu avec une ancre éventuelle depuis le menu.
Trop de menus et sous menus, ça saucissonne votre site. Par exemple pour "CORRECTION" regroupez tout sur une page bien claire, avec des espaces entre les paragraphes et des titres biens marqués. Un site pour une association d'écrivains amateurs avait eu le même problème ici il y a quelques mois.
Idem pour les onglets un peu partout, au lieu d'aider je trouve que ça complexifie. Faites sobre…
Le slider défile trop vite. Pas fan des textes qui tressautent.
Voilà pour moi. Un site qui malgré des optimisations souhaitables est propre et consultable.
PS : Je n'ai pas regardé sur mobile.
Modifié par spongebrain (15 Sep 2016 - 01:03)
Bonjour,
Alors moi ce qui m'a choqué, c'est que vous ne respectez pas les règles typographiques relatives à la ponctuation. Ce n'est pas au bon vouloir du rédacteur que de laisser un·e espace ou non avant un point d'interrogation en français. En l'occurrence, les signes doubles (point d'exclamation, point d'interrogation, deux points, point-virgule) doivent être précédés d'un·e espace. S'il s'agissait d'anglais, ce serait l'inverse. Si je tique, d'autres tiqueront et Lyme n'est pas loin ^^
Alors moi ce qui m'a choqué, c'est que vous ne respectez pas les règles typographiques relatives à la ponctuation. Ce n'est pas au bon vouloir du rédacteur que de laisser un·e espace ou non avant un point d'interrogation en français. En l'occurrence, les signes doubles (point d'exclamation, point d'interrogation, deux points, point-virgule) doivent être précédés d'un·e espace. S'il s'agissait d'anglais, ce serait l'inverse. Si je tique, d'autres tiqueront et Lyme n'est pas loin ^^
Même observation que Manhattan en ce qui concerne l'absence d'espace insécable devant les signes de ponctuation qui en requièrent une.
Cet oubli étant, apparemment, systématique sur le site, je trouve que cela décrédibilise de fait la qualité du travail de correction que ledit site est censé promouvoir...
À rectifier de toute urgence.
Concernant la présentation et d'un point de vue strictement utilisateur, l'abondance de pavés à fond coloré nuit à l'ensemble de la page d'accueil. Passer simplement l'arrière-plan desdits pavés en blanc ou transparent suffirait déjà à améliorer l'aspect général et la lisibilité.
Cet oubli étant, apparemment, systématique sur le site, je trouve que cela décrédibilise de fait la qualité du travail de correction que ledit site est censé promouvoir...
À rectifier de toute urgence.
Concernant la présentation et d'un point de vue strictement utilisateur, l'abondance de pavés à fond coloré nuit à l'ensemble de la page d'accueil. Passer simplement l'arrière-plan desdits pavés en blanc ou transparent suffirait déjà à améliorer l'aspect général et la lisibilité.
Manhattan a écrit :
Bonjour,
Alors moi ce qui m'a choqué, c'est que vous ne respectez pas les règles typographiques relatives à la ponctuation. Ce n'est pas au bon vouloir du rédacteur que de laisser un·e espace ou non avant un point d'interrogation en français. En l'occurrence, les signes doubles (point d'exclamation, point d'interrogation, deux points, point-virgule) doivent être précédés d'un·e espace. S'il s'agissait d'anglais, ce serait l'inverse. Si je tique, d'autres tiqueront et Lyme n'est pas loin ^^
Merci de tes remarques et tu as complètement raison sur les espaces insécables ou pas...Je fais cela de suite !
sepecat a écrit :
Même observation que Manhattan en ce qui concerne l'absence d'espace insécable devant les signes de ponctuation qui en requièrent une.
Cet oubli étant, apparemment, systématique sur le site, je trouve que cela décrédibilise de fait la qualité du travail de correction que ledit site est censé promouvoir...
À rectifier de toute urgence.
Concernant la présentation et d'un point de vue strictement utilisateur, l'abondance de pavés à fond coloré nuit à l'ensemble de la page d'accueil. Passer simplement l'arrière-plan desdits pavés en blanc ou transparent suffirait déjà à améliorer l'aspect général et la lisibilité.
Merci de tes remarques, je corrige les erreurs de ponctuations de suite.
Au niveau de la page d'accueil, je vais tenter de trouver d'autres icones, de modifier les bugs d'affichage, de centrer le texte et non justifier dans le 'qui suis-je ' et ' focus' ...
fanny64 a écrit :
merci de tes critiques, cependant, je suis une femme...et les couleurs que tu m'as donné sont très masculine. ( j'ai testé tes couleurs).
Quelles sont tes attentes concernant l'esthétique de ce site ?
Que souhaites-tu qu'il véhicule comme idée, comme univers, comme atmosphère ?
fanny64 a écrit :
quand tu dis " Pour aérer l’intérieur des pages, ne pas hésiter à ajouter sur le ".main-container" un padding en top et bottom (sur mon grand écran j'ai testé avec une valeur de 50px et ça me semble un minimum)." , là je suis larguée.....
Fanny
Peux-tu nous indiquer ton niveau technique afin que nous adaptions notre langage ?
Je vois que tu utilises Bootstrap pour le style du site.
A l'origine ce framework n'a pas été conçu pour faire de "jolis" sites mais afin que les développeurs (beaucoup sont à la ramasse au niveau design) puissent créer seul des interfaces "utilisables" à usage interne.
Aujourd'hui tout le monde l'utilise pour des sites publics (donc tu n'as pas fait un mauvais choix) mais ce framework possède quelques insuffisances qu'il est nécessaire de combler avec un peu de style perso (dont le padding que j'ai évoqué).
Quelque soit ton niveau de connaissances en CSS, rien de bien compliqué ne sera nécessaire pour ajouter ce style perso permettant de passer d'un style Bootstrap un peu étriqué à un style Bootstrap pimpé.
fanny64 a écrit :
Merci de tes remarques, je corrige les erreurs de ponctuations de suite.
Au niveau de la page d'accueil, je vais tenter de trouver d'autres icones, de modifier les bugs d'affichage, de centrer le texte et non justifier dans le 'qui suis-je ' et ' focus' ...
À propos des zones "Qui suis-je" et "Focus", il semble qu'elles ne soient pas fonctionnelles et ne comportent pas de liens cliquables conduisant aux pages correspondantes.
Est-ce un comportement normal ou un dysfonctionnement (test effectué depuis un téléphone portable Nokia / Windows 8) ?
Les zones "en savoir plus" fonctionnent correctement par contre.
Pour les titres de pages, l'effet appliqué sur le texte n'est pas top, à mon sens, mais cet avis est très subjectif et dépend des goûts de chacun. Perso, j'aurais plutôt opté pour un léger "text Shadow" (ombre portée en bon français) mais là aussi les avis peuvent diverger.
Bonne continuation en tout cas.
a écrit :
Merci de tes remarques et tu as complètement raison sur les espaces insécables ou pas...Je fais cela de suite !
Malheureuse enfant ! Quels terribles propos tiens-tu là ! Les espaces précédant les signes de ponctuation doubles doivent toujours être insécables pour que ces signes ne se retrouvent pas tout seuls en début de ligne.
Pour les espaces insécables, tu peux soit utiliser l'entité HTML , soit utiliser le (la en typographie, mais, bon) véritable espace insécable, disponible via les utilitaires ad hoc (Table des caractères pour Windows), mais attention, cet espace insécable peut ou non être affiché différemment de l'espace normal selon l'éditeur de code. Il est donc souhaitable de savoir précisément où tu les insères.
Sinon, je trouve peu élégant le "saut" de tes menus vers le bas à leur ouverture, et tous tes blocs "En savoir plus" devraient avoir le même alignement vertical.
Concernant le texte justifié, je ne le trouve inesthétique que quand les espaces intermots sont trop hétérogènes. On peut envisager diverses approches pour éviter cela : trouver les mots adéquats pour avoir des espaces intermots homogènes, ajuster le word-spacing du bloc, reste à voir ce que ça donne sous différentes résolutions.
Sinon, on peut aussi activer la coupure de mots grâce à la propriété + valeur CSS hyphens: auto; (https://developer.mozilla.org/fr/docs/Web/CSS/hyphens), mais elle n'est supportée que par les navigateurs Gecko (Firefox, SeaMonkey) et, partiellement, par les dernières versions d'IE et MS Edge (si je ne me trompe pas pour ces deux derniers).
Inutilisable en l'état présent, donc, sur tous les navigateurs majeurs, mais à surveiller.
Modifié par thierry (15 Sep 2016 - 23:24)
thierry a écrit :
Sinon, on peut aussi activer la coupure de mots grâce à la propriété + valeur CSS hyphens: auto; (https://developer.mozilla.org/fr/docs/Web/CSS/hyphens), mais elle n'est supportée que par les navigateurs Gecko (Firefox, SeaMonkey) et, partiellement, par les dernières versions d'IE et MS Edge (si je ne me trompe pas pour ces deux derniers).
Inutilisable en l'état présent, donc, sur tous les navigateurs majeurs, mais à surveiller.
Ne pas oublier la possibilité d'utiliser l'entité SHY permettant d'introduire une césure conditionnelle.
Tâche manuelle, parfois fastidieuse, mais efficace pour gérer au mieux les points de rupture, notamment sur les périphériques de taille réduite.