Bonjour !
Tout ce que j'ai à dire pour le moment, c'est que j'aime beaucoup, franchement, ça a de la gueule ! Pixelmator semble te réussir.
C'est moderne, graphique, efficace, en plein dans le sujet, clair, construit, coloré avec sens, soigné, faisant référence aux codes de la RATP sans les copier… tu as su tirer parti avec intelligence et réactivité des remarques constructives qui t'on été faites en les adaptant à ta façon et même au delà.
À 14 balais, bravo !
Là je pense que tu tiens ta maquette, inutile d'aller chercher une autre piste. Il ne reste plus que les "petits réglages" de finalisation avant de passer à l'intégration.
Voici quelques points qui peuvent être optimisés :
• Le fond de briquettes rend vraiment bien, c'est ça qu'il fallait dès le départ ! Le dessin des briquettes est bien réalisé et on reconnait immédiatement les murs de stations. Cependant tu peux encore améliorer le rendu qui pour le moment fait un peu trop "fait sur ordinateur". Si le dessin des briquettes est juste, il manque les jointures entre celles-ci ainsi que de très légers ombrages (ce n'est pas obligatoire mais à tester), à peine moins claires pour éviter les zones trop blanches qui se fondent avec la colonne centrale (il faut y aller avec parcimonie, ça joue à très peu). Pour éviter le rendu trop lisse du logiciel de dessin, tu peux reprendre des vraies photos de briquettes à retoucher sur Pixelmator ou t'en inspirer. Il y a de très légers dégradés dans les aplats blancs, les contours ne sont jamais 100% nets (donc un très léger flou peut être utilisé). Une astuce assez efficace pour retrouver un rendu photo à partir de dessin vectoriel plat, est de mettre un léger bruit à la fin (bruit = grain de photo sur photoshop, l'équivalent doit exister sur pixelmator).
Un exemple ci-dessous qui peut t'aider :
http://www.tourisme93.com/visites/972-1683-thickbox/ratp-parcours-sur-la-petite-et-grande-histoire-du-metro-parisien.jpg
Tu n'es pas obligé d'avoir un rendu aussi photographique, le but est que ton fond prenne de la consistance et fasse moins "ordinateur". Après c'est à toi de décider ce qui te convient.
• Les trois pictos dans la bande bleue du haut sont clairs et compréhensibles. Tu n'es pas obligé de les caser dans des ronds, ce ne sont pas des stations de métro. La loupe peut être représentée telle quelle, comme dans mon schéma ci-avant, là elle est maigrichonne dans le rond. L'enveloppe sera plus explicite si tu dessines aussi les plis du bas, comme sur mon schéma (dans un rond ou pas, à toi de voir). En revanche, le M dans un rond est bien le symbole du métro, le contour pourrait être graissé un peu et le M plus ample comme sur le symbole officiel :
http://candgetautres.files.wordpress.com/2010/11/400px-metro-m-svg.png
• "Histoire et secrets du métro parisien" est un poil collé au bord. Plutôt que de tout bouger, essaie d'ajouter quelques pixels de hauteur à la bande pour voir (genre 3 pixels).
• Le fond mauve décentré avec le picto de la station qui dépasse est efficace et clair. Tu peux décaler à peine l'ombre pour lui donner la même direction que celles qu'on retrouve sur les briquettes d'arrière plan.
À l'endroit où tu as mentionné "Je ne sais pas quoi mettre ici", c'est tout simple, indique le nom de la ligne : "Porte de Clignancourt, Porte d'Orléans". C'est l'emplacement idéal. L'information du moment se place très bien sous la photo.
L'espace blanc en hauteur au dessus de ces blocs est différent de celui du dessous, centre les en hauteur pour avoir les mêmes marges.
Aussi l'angle droit en bas de l'aplat mauve de la ligne 4 pourrait se justifier avec le bord droit du bloc gris foncé du dessous. Ensuite, tu centres le bloc gris à l'horizontale en conséquence. À toi dévaluer les bonnes largeurs.
• Inutile "d'agrandir les pictos des lignes dans un second temps" comme mentionné. Je ne vois pas comment tu pourras avoir assez de place. Si tu élargis de quelque pixels, profites en plutôt pour faire apparaître un peu plus la ligne grise du dessous.
• Dans le bloc gris, les textes sont un peu collés. Peut être faut-il optimiser cet espace pour que toutes les longueurs de textes puissent s'y inscrire sans difficultés. Ce gris est un peu dur. As tu essayé un peu plus clair ? (idem pour le footer)
Sous le bloc gris, c'est une bonne idée que de mettre des infos complémentaire (liens, infos…). Vu que tout est déjà graphique et bien construit, tu peux la jouer ultra simple pour ne pas surcharger avec juste du texte sur le fond blanc, calé en fonction des blocs du dessus (attention le "Survolez le numéro…" se cale un peu bizarre, soit plus à gauche ou en fonction du bloc gris). Le texte sous le bloc gris peut-être écrit avec le bleu foncé des bandes d'information pour garder une cohérence, à tester en tout cas.
• Dans le footer je trouve bien de mentionner toutes les infos qui rassurent et informent les internautes tout en protégeant ton travail, et qui sont parfois "obligatoires" sur un site public. Tu peux décoller chaque mention des traits verticaux. Afin de clarifier les choses, il pourrait être judicieux de placer sur une ligne en dessous une mention du style "Blog non officiel mis en ligne par Johan C." afin de t'éviter les foudres éventuelles de la RATP qui pourrait avoir envie de faire la même chose et donc de rentrer en concurrence directe avec ton blog. Pour cela il faudrait simplement rehausser le footer.
Les lignes de textes ne semblent pas calées sur la même hauteur (nom / infos). Essaie soit de tout mettre dans la même taille de typo, ou bien au contraire d'accentuer la différence en écrivant les mentions un peu plus petit. Là les tailles de typo trop proches luttent un peu.
Souvent les petits réglages de finalisation demandent autant de temps que de trouver la maquette. Bon courage à toi et encore bravo pour le chemin parcouru.
Je serais curieux de lire d'autres avis qui ne seraient pas forcément d'accord avec mes conseils, des avis différents peuvent être constructifs.
Voilà pour moi, en attendant la suite !
Philippe
Modifié par spongebrain (29 May 2013 - 03:00)
