Salut Johan !
Je ne suis pas intervenu dans ton post depuis quelques jours afin de laisser d'autres personnes participer. La diversité des idées est toujours intéressante et constructive. Dommage que les conseils soient si rares.
Tes deux dernières pages postées sont cohérentes et complémentaires. Elles démontrent que ta mise en page fonctionne bien et se décline en fonction de tes besoins. Il reste quelques petits réglages pas bien méchants. D'autres suivront lors de l'intégration.
Pour la première page, la home, quelques petites améliorations sont envisageables :
• Le nom de la station n'a pas besoin d'être inscrit sur un fond bleu. Écris le directement sur le fond couleur de la station.
• Sur le fond de briquettes, tu as appliqué un léger flou et un peu de grain, ce qui adouci le côté "fait sur ordi". J'aurai quand même aimé voir le résultat avec un rendu un peu plus réaliste, mais c'est moins simple qu'il n'y parait et ça demande un minimum d'expérience sur Photoshop. Ceci dit, le fond actuel est déjà propre et efficace. Tu pourras l'optimiser dans un second temps si tu le juges nécessaire.
• Il y a toujours un léger déséquilibre entre l'espace blanc au dessus et celui en dessous du visuel photo/ligne 4. À tester le même espace, juste pour voir si c'est mieux, ou pas.
• Le bord droit de l'aplat mauve n'est toujours pas calé avec le bord droit du bloc gris du dessous. À tester là aussi.
• Le gris du bloc d'information sous les lignes de métro semble légèrement teinté. En vérifiant avec la pipette de "Colorimètre numérique" (gratuit sur l'App Store), j'ai R:47 / V:43 / B:37. Ton gris tire donc sur le rouge orangé, un gris chaud, du coup les parties éclaircies (les boutons) tirent sur le marron. As tu testé avec un gris neutre (les mêmes valeurs RVB) ? Ou un poil plus clair ?
Tu as déjà de la couleur avec le bleu foncé informatif et les lignes de métro. Pour le reste tu peux rester neutre. Surtout que le gris de ton footer est neutre R:35 / V:35 / B:35. C'est plus joli en neutre, et ça valorise les couleurs des lignes et de la signalétique. Ou bien le bleu foncé de la signalétique (à tester même si j'ai un gros doute) ??
• Dans le footer les pictos twitter et facebook sont différents de ceux de la page 2 (dans la bande bleue). Je réfère comme sur la page 2.
• Pour les pictos du haut de page, je ne suis toujours pas fan de l'enveloppe (il manque les plis du bas) et de la loupe toute fine. La flèche carrée de gauche n'a pas besoin d'être dans un rond et ça fonctionne bien. Je pense que tu peux tester de mettre ces pictos directement sans rond, comme le ferait la RATP sur ces panneaux signalétiques (les ronds sont réservés aux lignes métro et RER). Seul le M de Métro doit rester dans un rond bien évidemment.
• Dans le footer tu pourrais aligner les lignes du haut à la même hauteur (nom et première ligne contact, connexion…). Quitte à donner la même hauteur au footer et à la bande bleue du haut ? Les pictos twitter et facebook ne devraient-ils pas être de la même taille ou moins gros que le rond de ton logo et le rond M (métro) du haut ?
Pour la seconde page (l'article), ça se passe pas mal. On reste cohérent avec la home. Quelques remarques cependant :
• Le rond de la station tape dans la barre bleue du haut.
• Tout est centré dans la colonne du milieu, du coup les marges blanches latérales font redondantes avec le fond. Peut-être faudrait-il conserver une présentation asymétrique sur le haut du visuel, comme sur la home ? Tout en trouvant un truc qui marque la différence. Même centrés, le bloc du haut pourrait toucher les bords de la colonne avec le rond de station qui dépasse sur le mur de briquettes, cet effet est très joli.
• Les marges blanches verticales sont à optimiser. Il faut marquer les différentes parties et en rapprocher d'autres en fonction de leurs liens.
• Pour la partie contenu, il faut nettoyer le texte. Avant de le moderniser et de la rendre plus "web".
Supprime les lettrines (le gros "L" devant "Lorem ipsum…" sur le premier paragraphe.
Suprime les puces "•" qui n'ont rien à faire dans les titres. Conserve les uniquement pour du contenu, si vraiment tu ne peux pas faire autrement.
Tes interlignes dans les paragraphes sont trop collés, aère un peu, ça donnera plus de lisibilité à ton texte.
Dans la partie "sommaire" enlève les puces "<", c'est pas typographique et n'apporte rien.
Pour marquer tes titres et tes premières parties de paragraphes tu as déjà tous les outils dont tu as besoin dans la charte de ton site.
Écris tes titres en bleu foncé et en bold, ça devrait amplement suffire (le texte doit rester en gris, peut être plus clair). Pas de puces, de lettrines et de "bitonios" qui n'apportent rien.
En jouant uniquement sur la couleur de la typo, sa taille, et la graisse (l'épaisseur) de celle-ci, tu dois pouvoir organiser et hiérarchiser tes mises en page de texte. Simple et efficace.
L'espace vertical entre le titre et le paragraphe qui suit doit être moins important qu'avec le paragraphe qui précède. Le paragraphe qui suit est en lien avec le titre il faut donc l'indiquer de cette façon.
Tu peux garder des textes soulignés simplement (comme "sommaire"), mais uniquement si ce sont des liens. On est sur le web, ne l'oublions pas.
Pour le reste c'est nickel pour moi. Du bon travail.
Comme tu peux le voir, mes remarques portent essentiellement sur des détails. Mais mis bout à bout, ce sont ces détails qui feront toute la différence.
Voilà, en attendant la suite !
Philippe
... Ce ne sera pas fini de si tôt, je dois apprendre le JS pour faire mon menu avec les lignes 
). Essaie de ne pas te donner des challenges trop difficiles. Le système D peut aussi s'avérer utile.
