Bonjour à toutes et à tous,

J’aimerais avoir vos avis et vos critiques sur mon site de cours particuliers d’arts plastiques :
http://www.coursartsplastiquesmarseille.fr/

La première version était réalisée avec WordPress, puis je me suis décidée à faire une refonte en html et css pour avoir un site tout neuf et responsive pour la rentrée scolaire.

Que pensez-vous du design et surtout du code (c’est le premier site que j’intègre toute seule)?

Merci pour vos réponses !
Modifié par trefle (16 Aug 2013 - 12:33)
Administrateur
Bonjour,

en vitesse 2 commentaires :
- galerie ne prend qu'un L
- si je n'avais pas cherché à savoir quelle hiérarchie de titres il y avait sur la page d'accueil (et je crois qu'elle est OK ce qui est une bonne surprise Smiley smile ), jamais je ne me serais aperçu qu'il y avait du contenu sous le fold sur mon moniteur 1920x1050 ou 80. Et aucun des liens dans la 1ère partie n'est une ancre vers la seconde partie alors que ça ressemble furieusement à du one page layout. Je pense que personne ne va lire le reste de la page (ce qui serait dommage vu que le contenu semble bon) et pencherais pour une erreur de design à moins que du JS soit cassé sur les liens ?
Bonjour,

Je trouve aussi que la ligne de flottaison est trop basse. Il faudrait remonter quelque peu les éléments pour que l'on sache qu'il y a quelque-chose à voir en dessous.

L'ensemble est très réussi du point de vue graphique, et très agréablement surpris en visitant d'abord le site sur mobile.

Accueil et non acceuil (dans menu responsive) Smiley smile
Merci pour vos réponses !
Les fautes à galerie et accueil sont corrigées et j’ai effectivement remonté un peu le contenu pour inviter l’internaute à scroller.

Sinon, je suis allée à la fnac pour tester le site sur différentes résolutions en conditions réelles. En dessous de 1024px de large, sur la page tarifs la propriété « flex-direction: column-reverse » qui permet de positionner le tableau au-dessus de l’exemple ne marche pas sous android-browser et ie10.
Une idée ?
- Le design est plaisant à regarder et va droit au but.

- Il manque peut être des liens sur ton menu de gauche pour atteindre les parties situées en bas de page. Tu devrais revoir ce menu en essayant de trouver une logique genre :
"Votre professeur", "Déroulement des cours" et "Contact". Ainsi quand le visiteur cliquera sur chaque lien, une transition progressive vers le bas affichera la partie correspondante. L'ajout d'un bouton "Top" serait alors idéal pour que le visiteur revienne en haut de page pour découvrir le menu de droite.

- Lorsque l'on clique sur "Contact", on arrive bien sur le formulaire mais il m'a fallu un certain temps avant de m'apercevoir que cette partie se situait en bas de page. D'où ma proposition de faire une transition progressive ci-dessus.

En espérant t'aider.

Smiley smile
Voilà, j'ai fait une transition progressive pour que l'on comprenne que "contact" est en bas de page. J'ai aussi ajouté le bouton "top", ce qui est très bien, notamment pour la galerie quand on la consulte depuis un mobile.
L'idée de revoir le menu de gauche est intéressante, mais ça m'obligerait à repenser l'architecture globale (mettre tarifs et galerie ailleurs, etc...) Puis je pense que maintenant on comprend mieux qu'il y a du contenu plus bas.

Par contre, ce matin le footer m'est apparu énorme… Je pense que je vais un peu le réduire en hauteur…
Modifié par trefle (19 Aug 2013 - 11:43)
Bonjour,

J'aime beaucoup les textures et les couleurs choisis. Un thème harmonieux et agréable à parcourir. J'apprécie les petites touches d'animations (notamment sur les hover) ce qui permet de rendre le site un peu plus dynamique et donc de l'épaisseur comme j'aime bien dire Smiley smile !

Comme l'on relevé d'autre avant moi ; il est vrai que l'on met un certains temps à comprendre qu'il faut descendre pour visualiser le contenu ; il est vrai que cette grande intro est agréable mais peut être que quelques astuces pourrait t'éviter ce désagrément :

pour l'accueil garde ton grand entête ; cependant lorsque tu cliques sur un menu réduit le avec un animation pour que l'on voit le début du contenu ; ensuite par instinct on descendra.

Bonne continuation Smiley smile !
- Pour le menu de gauche, c'est vrai que c'est délicat de changer sa structure.

- En fait en lisant ton menu "Dessin et peinture" je m'attendais à voir une galerie de dessin et de peinture Smiley langue . Mais ça le fait aussi vu que tu précises déjà un item "Galerie" sur l'autre menu.

- Le bouton "Top" est top!! Smiley biggrin
Bonjour,

Rapidement, si cela n'a pas été mentionné.

Un joli site convivial et efficace. Un style scolaire qui vise avant tout les juniors je pense. Je noterai des optimisations possibles au niveau des couleurs, ce gris bleuté verdâtre et le orange brique, bof, bof… C'est pas très frais. J'aurai vu des couleurs plus énergiques et web. Un bleu/vert plus électrique, du blanc (même cassé), du noir, etc. Choisir une bonne palette est très difficile.

Les textes dans les onglets (Galerie, Tarifs…) sont très gras et la défonce qui fait apparaitre ce gris bleu, je suis pas fan, surtout sur le orange. Il y a quelque chose qui ne fonctionne pas au niveau des couleurs. On a l'impression d'un voile bleu gris terne et d'une charte pas complètement aboutie…

Dans un registre graphique et couleurs proche de votre design, que pensez vous par exemple de la gamme couleur de ce site ? De l'utilisation qui en est faite ? Des titres et des sous-titres ? Des contrastes, le la fraîcheur des couleurs ? De la structuration et de la taille des textes, du formulaire de réponse ? …
http://fr.wix.com/website-template/view/html/843?originUrl=http%3A%2F%2Ffr.wix.com%2Fcreate%2Fwebsite%2Fhtml%2Fdesign-and-art%2Fweb%2F10&bookName=&galleryDocIndex=3

Et pourquoi pas un diaporama des travaux d'élèves ? Ou quelque chose dans le haut du site qui apporte du punch et de la vie ?

L'icône index à côté de Marseille n'est pas net avec des traces dessus, l'ombré ressemble à un trait. Faites le en PNG.

Tout est limite "trop gros", mais ça passe quand même, surtout que la partie responsive est une vraie réussite. Par contre sur moniteur de bureau, la partes "Contactez moi" et le formulaire, c'est juste énorme. Essayez d'uniformiser un peu toutes les tailles de typos. Là entre les vignettes de menu et le formulaire, c'est le grand écart. La partie header prend quand même beaucoup de place, jusqu'à effacer les travaux des élèves par exemple qui n'apparaissent pas, ou alors beaucoup trop bas dans les pages. Une règle en typo est de ne pas changer la taille de celle-ci, ça perturbe la lecture. On change la taille uniquement si cela s'impose et de façon marquée. C'est plus efficace et esthétique. Vous devez restructurer au niveau de la hiérarchisation et de la taille des typos, c'est optimisble, surtout que vous êtes partie sur 3 typos qui s'harmonisent assez moyennement.

Aussi, il aurait été sympa de donner un vrai nom à ce cours, dès le header, la dénomination "cours arts plastiques à Marseille" peut apparaitre dans la baseline et le tour est joué ?

Pour le reste, un site qui rempli bien sa mission malgré tout, avec une présentation relativement soignée, convaincante, argumentée de la part du professeur. Smiley cligne
Modifié par spongebrain (19 Aug 2013 - 20:39)