Pages :
Bonjour Smiley biggrin

Petit torture-test pour mon site ^^
C'est un site destiné à trouver le nom d'une chenille que vous avez croisé (ou écrasé Smiley bawling ).

Merci pour tous les retours que vous pourrez faire tant niveau code que graphique.

http://quelle-est-cette-chenille.com/


Mercii Smiley ravi


EDIT du 28/06/16 :

Suite aux nombreux retours d'Alsanautes aguerries, j'ai pu retravailler mon site et ainsi le rendre plus frais, fun et accessible Smiley ravi
Je vous laisse juger par vous même la transformation !

Avant :
http://img15.hostingpics.net/pics/564956351906avant.png

Après :
http://img15.hostingpics.net/pics/991592350130apres.png

Un grand merci à spongebrain, mais aussi _laurent, SolidSnake, alain_47 et Zelena Smiley biggrin
Modifié par vinula (28 Jun 2016 - 09:57)
Bonjour,

Tout d'abord, bravo pour ce site original et très instructif ! Smiley smile

Très rapidement, les codes graphiques et de couleurs sont très durs, voir agressifs.
Plutôt que ces couleurs au rendu métallique, pourquoi n'envisageriez vous pas des couleurs plus naturelles ? Un arrière plan vert frais lumineux, avec un dégradé qui rappelle le feuillage tout en douceur ? Plutôt que ces rayures hyper industrielles qui me semblent hors sujet. N'ayez pas peur de la simplicité. Aussi, pourquoi pas un fond photo de feuillage qui symboliserait le milieu dans lequel évoluent les chenilles, avec pourquoi pas quelques papillons, même si ce n'est pas le sujet central, ça donnerait un peu de hauteur et serait parfait pour le côté allégorique (une recherche dans les banques d'image libre de droit / recherche banques images gratuites sur google), quitte à flouter cette photo pour un rendu plus doux. L'idée est de repositionner l'ambiance dans quelque chose de plus cohérent et "nature". Une approche plus «nature et découverte», que l'ambiance actuelle qui fait trop industrielle.

Que dire de l'emoticon grisâtre et tout carré ? Mettez une petite chenille verte en dessin, qui pourrait être votre logo/mascotte (dessin simple et funky). Regardez par exemple la maquette et les couleurs de cette page, c'est sobre, mais frais. Smiley cligne

Et pour le fond du container, du blanc bien plus frais que ce gris duraille qui plombe l'ensemble ? Pour le texte, pas d'effets gratuits (ombres… ), faites simple et efficace, en hésitant pas à jouer sur la taille des caractères (2, 3 maxi pour bien structurer le contenu), la couleur (sur les titres), et la graisse (titres en gras). Une police un peu plus stylée pour les titres, pourquoi pas des lettres qui se tortillent un peu comme une chenille, pas trop quand même et que sur le titre (voir dans google fonts) ?

La grosse barre grise du menu en haut me semble austère, mettre de la couleur, un vert un peu anisé ou foncé pourrait rafraichir l'ensemble (vert anisé + vert feuillage) ? Plus une petite touche vive rouge orangée (titre, logo… ) en s'inspirant un peut des couleurs de certaines chenilles ?

Pas de texte redondant ou inutile du genre «Bienvenue sur Quelle est cette chenille !».
Le texte « Ce site a pour objectif de permettre l'identification… » peut être remplacé par quelque chose de plus direct, du genre «Découvrez quelle chenille…».
Pas fan du texte de contenu en serif (empattements) avec les titres sans serif (typo droite). J'aurai plutôt inversé, voir même choisi une police plus fantaisie pour les titres. Ce site a un potentiel intéressant pour les enfants, hors, le style actuel très froid risque de les effrayer un peu (tout en restant sobre, pour ne pas faire enfantin non plus).

Le bouton "commencer" me semble peu explicite. Commencer quoi ? Un texte plus proche de votre accroche (Quelle est cette chenille ?) serait plus engageant ? En veillant à éviter les redondances.

Pour le reste le fonctionnement semble simple et intuitif, un bon point. Je ne suis pas allé jusqu'au bout, j'espère que l'on voit les jolis papillons que deviennent ces chenilles ? Bon je suis allé au bout, et il y a aussi les papillons, dommage de passer à côté sur l'accueil. Je pense qu'il serait intéressant de jouer là dessus, dès la home (le côté "transformation" est très intéressant). Dans le contenu et aussi au niveau visuel (papillons qui virevoltent sur la photo de fond ?). Smiley smile

Pour le code, plutôt que de vous induire en erreur, je préfère que d'autres alsanautes plus compétents apportent leur contribution. Smiley lol

Voilou pour moi, en gros. Smiley smile
Modifié par spongebrain (01 May 2016 - 19:15)
Merci pour ce retour instructif ^^

J'avais plutôt bossé sur le contenu du site jusqu'à présent et à force d'avoir le nez dedans on s'habitue à tout Smiley lol

a écrit :
Que dire de l'emoticon grisâtre et tout carré ?


Vous parlez du favicon ?
vinula a écrit :
Vous parlez du favicon ?

Merci pour la correction. Je fais l'erreur systématiquement, un peu dyslexique ? Mais si vous avez compris, c'est le principal. Smiley smile
Modifié par spongebrain (01 May 2016 - 19:56)
J'ai fais des tests couleurs, cette palette irait ?

palette

Merci pour les remarques et encouragements, ça reboost ^^
Modifié par vinula (02 May 2016 - 09:38)
Bonjour vinula,

Je suis d'accord avec spongebrain sur a peu près tout ce qu'il a dit !
C'est très sombre, ça n'inspire pas du tout la nature au contraire (et en plus écrire en noir sur du gris foncé c'est pas très lisible / accessible). Pour moi c'est clair que le design graphique est a revoir, du coté lumineux de la force ! Smiley ravi

Pour ce qui est du code j'ai pas regardé en profondeur, ça à pas l'air trop mal. Une choses m'a choqué par contre c'est l'utilisation de <h2> vide et l'enchainement <h2> <h6> <h10>. Les balise h ne vont que de h1 à h6 et il faut préférer une hiérarchie qui se suis :
h1
   h2
      h3
      h3
      h3
   h2
      h3
      h3

quitte à re-styler les titres en CSS si les tailles ne te conviennent pas que de passer du h2 à h6 à h10 sans raison.

spongebrain a écrit :
Le bouton "commencer" me semble peu explicite. Commencer quoi ? Un texte plus proche de votre accroche (Quelle est cette chenille ?) serait plus engageant ? En veillant à éviter les redondances.
Je suis aussi d'accord avec ça. Pourquoi ne pas mettre directement la première étape (choix de la chenille) sur la page d'accueil ?
Modifié par _laurent (02 May 2016 - 10:18)
Bonjour _laurent,

Merci pour ton retour !
Je suis ni designer ni webmaster, juste un passionné de lépidoptère Smiley ravi

Va y avoir du boulot Smiley sweatdrop
vinula a écrit :
Je suis ni designer ni webmaster, juste un passionné de lépidoptère Smiley ravi
Va y avoir du boulot Smiley sweatdrop
Et c'est parfait ainsi ! Ne te décourage surtout pas c'est super ce que tu fais. On est là pour t'épauler aussi Smiley cligne

Si jamais ça t'intéresse, voila un très bon article (en anglais, sorry) que j'ai eu grâce à Stéphanie Walter il me semble (bref) et qui explique un peu comment créer un palette de couleur : https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

Et sinon tu peux en trouver des déjà prête un peu partout sur le web. Je ne sais pas encore très bien utiliser les outils du genre "color scheme designer" ou celui d'adobe mais il servent essentiellement a trouver une couleur de base et des couleurs qui s'accordent avec. Il ne faut pas oublier d'ajouter du blanc / gris et autres variation neutre avec ! Il ne faut pas utiliser QUE les couleurs données par l'outil sinon c'est beaucoup trop chargé Smiley smile

Ah oui et n'hésite pas à aller fouiner sur l'internet ! Rien de mieux que de chercher des exemples pour t'inspirer (une simple recherche dans google image peut suffire : "design web nature", "design web chenille", "design web vert", etc...)
Modifié par _laurent (02 May 2016 - 11:21)
Alors là ça mérite une capture d'écran avant/après pour montrer l'impact que peuvent avoir les couleurs ! Smiley cligne

D'un seul coup, on respire !! Bien entendu, je valide cette direction, même si pour le moment la photo du fond m'évoque un peu une feuille exotique et la teinte me semble un poil fluo. C'est une base de départ, voir maintenant si vous réussissez à trouver un fond plus bucolique.

Quelques pistes pour trouver la bonne photo (si vous n'avez pas ça dans vos images perso, genre un joli paysage ou feuillage vert ? ) :
http://blog-fr.orson.io/blog/64/top-12-des-banques-d-images-gratuites-et-libres-de-droits

La police pour les titres est impeccable. En revanche, unifiez la police du menu et du contenu, de préférence sans serif. Vous de devez pas dépassez 2 polices pour tout le site (titres + texte). Ensuite, libre à vous de jouer sur les tailles (2 maxi) et les graisses.

Pourquoi picto facebook en doublon ? Des pictos verts et ronds à tester ? (le "t" de twitter a été remplacé par l'oiseau en forme de virgule).

En attendant la suite ? Smiley smile
Modifié par spongebrain (02 May 2016 - 14:43)
vinula a écrit :
J'ai fais un rapide montage pour savoir si je vais dans la bonne direction ^^ Alors ?

Smiley biggthumpup
Bonjour,

C'est beaucoup plus frais que le template de départ. Un grand pas a été fait !

Sur grand écran, le container pourrait prendre plus de hauteur.

J'aimais bien l'idée de _laurent qui consiste à commencer de sélectionner des photos dès la home (les 4 visuels). C'est plus parlant et didactique. De plus vous pouvez y laisser le texte d'intention, histoire de conjuguer l'utile à l'agréable.

Dommage d'avoir supprimé la police sympa pour les titres (façon script/chenille). Le titre principal (Quelle est cette chenille ? Bienvenue !) est mal centré verticalement (moniteur 23"). Idem pour les paragraphes.
Est-il nécessaire de souhaiter la bienvenue ? Non. Sauf si c'est une mascotte/chenille qui s'adresse à nous. Smiley lol

Certains caractères serif sont encore présent. Ça manque encore de cohérence point de vue typo.
Vous pourriez utiliser la police script pour les légendes ? À tester. Histoire de jouer sur 2 polices ?

Le fond est mieux que le précédent, mais ce n'est pas encore ça. Les feuilles fanées/rongées envoient un message négatif (tout est beau dans le monde des chenilles… ). Pas encore assez frais/bucolique. Avez-vous testé avec un joli paysage dans lequel virevoltent quelques papillons ? Smiley cligne
Attention, la recherche du bon visuel peut demander du temps, sauf coup de chance… Voyez avec le lien de banques d'images que je vous ai indiqué précédemment. Entre autres…

À régler, les pictos des réseaux sociaux, très/trop nombreux. Des doublons et un affichage sur 2 lignes. C'est bizarre. Avez-vous testé avec des pictos ronds ou qui reprennent une couleur plus fraiche (vert ) ? Certains pictos sociaux sont obsolètes (Google+, Twitter), référez-vous aux versions actuelles pour bien montrer que votre site est bien à jour.

Le favicon reste à revoir.

En tout cas, ça a bien avancé pour devenir un site de référence pour ceux qui veulent s'instruire et découvrir la nature ! Smiley smile
Modifié par spongebrain (06 May 2016 - 22:07)
Bonjour,

Très joli site.

Cependant, côté ergonomie, je suis obligé d'utiliser l'ascenseur (je suis sur un portable 17 pouces).

Si je reprends l'image écran que vous avez diffusé le 2 mai, voilà ce que ca donne sur mon écran :

upload/61012-chenille.JPG

Peut-être serait-il possible d'utiliser davantage la largeur de l'écran.

Autre petit détail (mais c'est très minime), avoir le bandeau "bienvenue" à chaque page, tout le long de l'identification, peut etre que cela pourrait être évité.

A part ces petits détails, site très instructif. Smiley smile
Merci pour vos retour ! Smiley biggrin
Je me fais une liste des choses à travailler (en plus du contenu à ajouter).
Il reste beaucoup de boulot...

alain_47 a écrit :
Cependant, côté ergonomie, je suis obligé d'utiliser l'ascenseur (je suis sur un portable 17 pouces).

Ah bon ? Je code sur un 15" et un 17" mais je n'ai pas ce problème. Smiley eek

spongebrain a écrit :
Pour supporter les différentes tailles d'écrans et s'adapter aux mobiles, l'utilisation des media queries permettra de rendre le site responsive.

Il l'est (normalement Smiley confus )


spongebrain a écrit :
Avez-vous testé avec des pictos ronds ou qui reprennent une couleur plus fraiche (vert ) ?

J'ai essayé, c'est beaucoup mieux ! Smiley biggrin Le problème c'est que je suis très nul en graphisme donc le test que j'ai fais n'est pas exploitable Smiley cligne