Salut,
En effet, les icônes et textes rendent mieux en gris, ça fait une couleur de moins et ça uniformise le texte avec le logo. De plus le gris est plus facile à reprendre sur le fond blanc, il passe partout et s'harmonisera plus facilement avec les différents éléments.
Rapidement, la Myriad est une police mac. Son équivalent Mac/Windows serait la Lucida (Lucida Grande sur mac, Lucida sans, Lucida sans unicode sur Windows… à vérifier). Cette police est plus élégante et efficace (web) que celle que vous avez appliqué sur le logo (les A trop pointus, le style trop "bureautique", le ORG en majuscule n'est pas beau et trop gros, le texte est trop haut dans la bande blanche et par rapport au dessin, du coup le texte du logo manque d'air [voir mon montage]).
L'idéal serait de se baser sur une police (avec un chargement variable sur mac et PC éventuel) et de l'appliquer partout, avec des variantes bold, italique…
La Myriad est bien adaptée à l'affichage web, aussi bien des titres/logos, que du texte courant. C'est la typo star chez Apple (avec un site web style Windows 8 ça ferait un juste équilibre ?
). La Lucida est très proche de la Myriad et peut s'afficher sur Mac ou PC en prenant soin de bien spécifier les variantes pour chaque plateforme. L'avantage serait d'adopter une seule police moderne, simple et efficace pour tout le site, du logo au mentions légales. L'Arial ou autre peuvent dégager.
Pas mal la bidouille sur la bulle avec les poissons, essayez de le refaire avec la forme de bulles arrondies (sadique inside
). Ça sera plus joli en plus d'être un excellent exercice au dessin vectoriel.
Oui, la case pub en orange est fait exprès. Histoire de mettre un peu de "désordre" ou de vie pour pigmenter la palette couleur par touches et en accentuent l'attention sur le pub ? Ça rend bien aussi en bleu comme vous avez fait. L'idée de cette case orange montre avant tout que cela fonctionne bien dans la palette actuelle et qu'en cas d'événement important sur le site, cette option pourra être utilisées sur une case au choix ou dans le site. Attention à des petits bugs (texte qui dépasse en dessous, en bas, pub mal centrée).
En vrac, dans les bons points ou ceux à améliorer, je note…
• Le menu principal passe bien mieux sur une ligne. Il est plus à sa place en haut, en cas de scroll il reste à sa place simplement. Ça faut le garder. Adieu l'usine à gaz !!
• Le sous menu sur la bande verte passe bien aussi. À tester avec les icônes de gauche un poil moins petits ? Là on est à la limite de la loupe. Sur la partie droite, les icônes sociaux sont un peu trop collés les uns sur les autres (voir mon montage). J'aime l'idée de passer aux couleurs originales des logos en hover, mais ça passerait avec une teinte grise à la base comme sur le logo et les textes. Colorer les pictos sociaux en bleu casse la logique du hover.
• Des gros bugs de textes coupés dans les cases, que ce soit sur les côtés au en bas. Ne jamais perdre de vue le contour tournant obligatoire sur les côtés, en haut et en bas. Non seulement le texte ne doit jamais toucher le bord (ça flingue la lecture), mais il doit respecter un espace de respiration minimum. C'est une des bases de la mise en page. Sans ça, tout le reste du travail tombe à l'eau. Mais il semble que ces mauvais calages soient ici imputables au site en travaux (Forum eau douce : texte tronché en bas, Un aquarium comme cloture : texte tronché sur les côtés, Édito : texte tronché en bas… ). Bref, il y a des calages dans l'air !
• Pour vous faciliter la tâche, ne gardez que 2 tailles de typos dans les cases (3 c'est déjà trop), 1 pour les titres (Édito, Forum… ), 1 pour le texte secondaire (présentation des membres… ; Notre association à caractère… ). La seconde taille peut être nettement plus petite, là par exemple dans l'édito le texte est beaucoup trop gros, du coup avec la justification, ça fait des trous entre les mots et c'est pas joli.
• Il manque toujours les accents sur les majuscules : ce sont des fautes ! (
Édito… )
• Pas de Grosse capitale en première lettre sur les mots déjà en capitale. C'est inutile et pas moderne.
• Dans les cases avec des photos et le bas en bleu foncé, le texte blanc me semble un peu gros (et gras). Sur la case "Paracheirodon… " le texte sur une ligne n'est pas centré en hauteur", à solutionner.
• Dans la case forum, en hover, certaines lignes ne tiennent pas et les ">>" passent à la ligne du dessous.
• Les titres de cases doivent rester affichés en cas de hover : Forum, Édito… Un peu comme "Aquascaping" ?
• Dans le footer, le texte est déséquilibré sur ces 3 colonnes disproportionnées (attention au "?" qui se retrouve à la ligne). Passer la rubrique "Rubriques" sur 2 colonnes aidera à rééquilibrer tout en réduisant la hauteur du footer (voir mon montage indicatif).
• Je vous le confirme, vous avez raison, les titres du footer en vert sont peu lisibles. En plus ça fait pas très moderne et ça ne se justifie pas. Cette police de caractère passe très moyennement avec le texte tout collé, les grosses capitales pour les premières lettres n'apportent rien, au contraire.
• Le filet vert en haut du footer, bof… Ce site est assez bariolé comme ça ? Inutile d'en rajouter surtout si c'est gratuit et pas cohérent. Il serait plus judicieux de décoller le footer du contenu en marquant un peu plus le blanc (ça aèrerait et serait plus logique avec le header). Aucun artifice n'est nécessaire.
• Les mentions légales en bas pourraient être écrites en regular (ici on dirait du bold), plus petites et décollées des listes du dessus ?
Pour la déclinaison sur smartphones, peut être modifier et simplifier/unifier encore la couleur de fond des blocs ? On peut voir que depuis votre première version web, le nombre de couleurs a été réduit pour plus d'efficacité et d'harmonie. Tout ce qui peut être supprimé ou simplifié sur smartphone doit l'être. Aussi, le footer peut changer de couleur (blanc) ou le filet vert passer en blanc, pour éviter de ne pas trop barioler un site déjà assez chargé. Les titres verts sont confusants sur la version smartphone.
En tout cas, ça avance et on commence à approcher du but.
En attendant la suite…
