Pages :
(reprise du message précédent)

Bonjour à tous,

En fait, je voudrais faire quelque chose que l'on voit pas mal en ce moment, c'est à dire qu'on a l'impression que le motif est découpé à l'intérieur du ribbon, et donc qu'il est "en retrait" du premier plan... Mais malgré 3 tentatives je n'y arrive pas, c'est pixelisé et l'effet est raté... Si quelqu'un sait comment faire pour que ce ne soit pas pixelisé et que les ombres soient bien placées, ça m'aiderait beaucoup ! Smiley cligne

De mon côté, j'avance un peu, j'ai ajouté la date de publication des articles ainsi qu'un lien "Contact" en haut de chaque article. Qu'en pensez vous, est ce joli ? http://www.blogdumetroparisien.fr/2011/03/le-mp-05.html

J'ai également testé le temps de chargement, l'accueil fait en moyenne 1.61s (en 5 chargements). Je ne me rends pas compte si cela est bien ou non ?

Merci beaucoup pour vos avis et conseils avisés,

Johan
Bonsoir,

J'aime beaucoup le projet et le site a bien évolué depuis le début.
Bravo encore pour ce travail.
J'aime bien la mention contact très visible et le leader.

Les points qui me semblent être perfectibles sont les suivants:
-le background du body rend l'ensemble très terne. Du coup j'ai essayé sans et avec un fond blanc ça passe beaucoup mieux.
Par contre à ma grande surprise le bg englobe l'image de fond et le header que je trouve joli.
Il faudrait une image indépendante pour le header ou le styliser en css.
D'ailleurs celui-ci est un peu déroutant car on pense que certaines zones sont cliquables.
-le texte est en peu petit et les puces du style *) appauvrit l'ensemble.
-les numéros en couleurs sont pour certains illisibles (501 par exemple)
-le retour à l'accueil en bas de page semble égaré
-dans le aside à coté du lien "membres" il y a une icône qui traîne:
upload/42874-metro.png

Pour un site dédié au métro je verrais bien une version en RWD consultable dans les wagons. Smiley smile
Bonsoir Rodolphe,
après quelques galères, j'ai séparé le header du reste, qu'en pensez vous ? Smiley smile
Je vais améliorer petit à petit les points que vous avez cité également, comme le RWD ou les puces...

Merci !
Oui le header est mieux et l'effet au survol du titre inutile, à mon sens. Le pointer de la souris qui change ne suffirait-il pas?

Pour le bg je réitère ma remarque sur la lisibilité du texte altérée.
Je vous conseille de vous inspirez de pages comme celle-ci (je la consultais aujourd'hui):
http://www.zurb.com
où la lisibilité est la priorité n°1.
Smiley smile
Bonjour Rodolphe,
et maintenant ? J'ai "blanchi" le bg du wrap en laissant une petite transparence... Qu'en pensez vous ? Smiley confus
Quel truc bizarre? Serait-ce un décalage de 1px lors du passage d'une image?

Sinon je suis sur Safari et pas de soucis majeur.
Ah oui j'ai vu le problème...
C'est Le Js de votre slideshow qui pose problème qui agit avec des positions absolues à coup de z-index.
Je n'ai pas réussi à trouver de solutions, désolé.

Essayez d'en trouver un autre plus complet d'ailleurs (avec des boutons d'interactions) Smiley smile
Modifié par rodolpheb (28 Mar 2013 - 13:56)
Bonsoir à tous,

depuis le début je cherche une image de fond d'un viaduc du métro la nuit, avec un métro en flou filé dessus... J'ai trouvé mon bonheur, c'est une image que j'ai retouchée. Le nom de l'auteur figurera sur la page A propos en cours de rédaction... Voir l'image originale

Qu'en pensez vous ?

En tous cas, merci de l'aide que vous m'apportez depuis le début! Smiley cligne
http://i73.servimg.com/u/f73/16/46/53/69/webdes10.jpg
Bonsoir !
Voilà, j'ai commencé à plancher sur la version RWD du site, comme cela m'avait été suggéré plus haut, par rodolpheb. Comme vous pouvez le voir, le menu composé d'onglets sur lesquels il faut cliquer pour afficher la liste des articles. Pensez vous que ce soit pratique ? Je n'ai pas vu comment faire autrement... Voici les maquettes de l'iPad & de l'iPhone en plus grand et plus net...
http://intertransports.legtux.org/maquette_mobile.png

http://intertransports.legtux.org/maquette_tablette.png

Qu'en pensez vous ?

Merci & joyeuses Pâques !
Johan
Modifié par Johan_Clbrt (31 Mar 2013 - 20:55)
Bonjour,

Je trouve dommage aussi que l'exploitation d'une maquette façon plan ne soit pas adoptée (attention aux droits et à l'autorisation auprès de la RATP, il faut s'inspirer, sans recopier, d'où la difficulté).
Sans reprendre le plan tel quel, mais au moins adopter une maquette claire, avec des couleurs et une navigation inspirées par celles des lignes de métro. Un menu sous forme de stations, ça peut être très drôle, frais et convivial, mais ça demande un minimum de maîtrise graphique sur Illustrator. Si c'est mal fait, ça ne fonctionnera pas, il faut vraiment que les détails fassent vrai. Si l'idée est simple en soi, elle demande de le faire avec finesse, pour que le site ait sa propre identité (lignes, pictos, mise en page…). Là c'est du niveau pro confirmé.

Une mise en page qui sans forcément être très compliquée, peut être plus structurée. Essai déjà de t'inspirer des plans de différents métros, pour trouver des idées, y faire référence, sans copier littéralement. Là les liens sont balancés sans grande originalité sur une maquette qui n'en est pas vraiment une.
Pour le logo fait là façon RATP. Déjà si tu pars sur une base fond blanc et clairs, acidulés façon plans de métro (de toutes les villes…) ça donnera un grand coup de peps à ton site.

La maquette avec ces blocs encastrés, le fond sombre de cette photo, ce bleu indigo assez triste… tout ça plombe le site. Ceci dit, pour quelqu'un de 13 ans, franchement c'est très correct. Avant même de commencer un site, il faut s'inspirer, s'informer, et faire des crayonnés jusqu'à ce que tu obtiennes un site sur une feuille de papier qui correspond à ta maquette finale. L'erreur des débutants est de faire le site direct, et ensuite de chercher à adapter la maquette. Ce qui ne fonctionne pas toujours.

D'abord on regarde et on s'inspire, puis le plan sur le papier et les fondations, ensuite on construit. Puis on corrige et on adapte. Et enfin, on fait voyager les gens. Smiley lol

Essaie de nous guider sur ton site avec ton propre plan, sur ta ligne personnelle !

Voilà pour moi. A+ Smiley cligne
Modifié par spongebrain (21 Apr 2013 - 12:57)
Bonjour Spongebrain,

merci de votre message ! J'ai réfléchi à un nouveau mode de navigation en fonction des lignes... Voici une première ébauche :
upload/47859-maquettene.jpg
Qu'en pensez vous ? J'ai fait les icones des 14 lignes, manquent juste les lignes 3bis et 7bis... Je me demande si je ne vais pas les lier avec la 3 et la 7... Niveau couleurs, j'ai fait au plus ressemblant sans chercher à avoir LA couleur des plans... Smiley cligne

Qu'en pensez vous ?
Bonjour,

Je préfère dès qu'il y a une touche de couleur. Les cartes de métro sont souvent très belles (je suis sérieux Smiley lol ) et leur design très étudié.

Certains plans de métro sont protégés et ne peuvent être reproduits sans autorisations. Par contre, tu peux reprendre leurs codes graphiques pour les intégrer dans un guide, un plan, un site. C'est même le but, pour retrouver la même signalétique connue de tous. C'est pourquoi je pense qu'il est intéressant de capitaliser sur cette signalétique, pour la détourner et te l'approprier.

Bonne nouvelle : http://www.lefigaro.fr/hightech/2012/08/09/01007-20120809ARTFIG00366-le-plan-du-metro-de-paris-est-desormais-libre-de-droit.php

Quelques remarques, rapidement :
• Pour rester graphiquement cohérent, il faut limiter le nombre de typos, jamais plus de trois d'une façon générale. Entre la typo du haut, celle de la bannière, celle au dessus des numéros… c'est déjà trop. Ces typos s'accordent mal et certaines sont très éloignées des codes RATP.
Ne garde qu'une seule typo pour tout le site. Choisie en une dans le style plan RATP, sans sérif. La typo RATP est la "Parisine".
http://fr.wikipedia.org/wiki/Parisine
Cette typo est payante, mais y en a plein dans même style. Inutile de tout calquer. Par contre choisie bien une typo avec différentes déclinaisons (light, medium, bold…). En jouant uniquement avec les graisses de la typo et la couleur, tu peux faire tout le site.

• Pour accompagner ta typo, tu peux écrire ton petit texte en arial/helvetica en jouant là aussi sur les graisses et les couleurs. Tu peux t'inspirer un peu du site RATP.
http://www.ratp.fr/

• Tu peux éventuellement avoir une troisième typo UNIQUEMENT pour ton logo. Il te manque un logo. Tu peux le faire façon sigle RATP détourné >>> BDMP, ou bien façon icône de station, avec le M dans le rond bleu, et le numéro de ligne sur un applat de couleur… Tu peux remplacer ces lettres/chiffres, les décaler, ou une idée plus personnelle, etc. À toi de voir…

Voilà, le max de trois typo est atteint. Smiley cligne

• Dans tes ronds, je ne reconnais pas les couleurs de lignes. Là dessus, il faut être fidèle, les parisiens ont ce code couleur gravé dans la tête. Pas de filets ou de petits points dans les ronds, pas de lettres en transparences, apparemment dans leurs charte, les ronds sont en applats de couleurs, et les chiffres en noir ou blanc, c'est tout de suite plus graphique et plus RATP.

• L'idée de la ligne en gris pour lier les ronds, façon plan, est intéressante. Par contre il y a toujours un début et une fin sur les lignes RATP.
http://www.plan-metro-paris.fr/wp-content/uploads/2012/08/metro-ligne-14.gif

• La couleur de la RATP est ce vert bleuté clair. Je ne pense pas qu'il faille aller jusqu'à reprendre cette couleur. Elle correspond à la charte communication. Je pense qu'il vaut mieux se limiter à des références à la charte plan de métro. Il ne faut pas que ton site soit confondu avec celui de la RATP, tu dois te limiter au métro.
Par exemple pour ta bande bleue tout en haut de ton site, tu peux reprendre le bleu foncé du M dans le rond (voir lien ci-dessus), sans effet de matière. La charte plan de métro, c'est que des applats, pour plus de lisibilité. Et en plus c'est joli.

• Dans ta bannière, tu fais référence à la ligne 1 en reprenant le jaune. Très bien. Mais que fait ce violet à côté pour la ligne 1 ??? Pour rester cohérent, il faut resté dans l'esprit de la charte : 1 ligne = 1 couleur. Pour le reste, c'est simple, fond blanc, ou fond photo. En touche, le gris que tu peux reprendre car cette couleur neutre fait le lien entre toutes les couleurs de lignes. Ce plus la RATP ne l'utilise pas car trop neutre, toi tu peu et c'est ce que tu as commencé à faire. Éventuellement un fond blanc transparent sur photo (un eut comme tes captures d'écran sur fond photo de nuit). Ou la couleur de la ligne ? À tester.

• Le beige clair que tu utilises en fond n'est pas très RATP. Là encore, fais simple et graphique, fond blanc. Pour le fond perdu, tu peux, soit rester en blanc, soit afficher une joli photo de paris/métro en mode aléatoire, avec ou sans transparence (sauf au centre, aplat).

• La colonne métro en gris détouré que tu mets sur le côté fait un peut isolée. Soit tu mets une jolie skyline en gris (attention de ne pas perturber le code couleur des stations), soit tu mets une jolie photo, etc.

Voilà pour l'approche plan de métro. Il y a d'autres pistes possibles en fonction des goûts de chacun, mais reprendre les codes couleurs et graphiques du plan de métro a un avantage incontestable. Ces codes sont connus de tous ceux qui ont pris le métro parisien, même une seule fois dans leur vie.

A+ Smiley cligne
Modifié par spongebrain (02 May 2013 - 00:13)
Pages :