[Amateur] Concerts en Boîte - Des chroniques live et des photos

(reprise du message précédent)

Bonjour,

je dois avouer que la réponse de spongebrain est un choc ! Mais en étant dans un repère de designer, je n'en attendais pas moins.

Quelques éléments de réponses.

Je suis avant tout un ingénieur et avec mon cursus l'habitude du carré, du droit, du net. Absolument pas designer et encore moins typographe, c'est donc normal que je sois largué. Inversement, mon score à Gtmetrix est tout à fait logique pour moi : il y a un règle compréhensible (par moi) et binaire et je sais alors l'appliquer. Donc oui, ce site est hyper optimisé en requêtes et en optimisation conseillée : la technique je maîtrise !


Pour revenir sur les remarques de spongebrain, si aujourd'hui le changement de thème n'est pas à l'ordre du jour, je tente malgré tout de m'approcher d'un maximum de bonnes manières. Pour tout dire, je veux un site carré où chaque chronique est sur la même base et le même squelette. J'ai peur qu'un style plus moderne fasse fouilli et les exemples communiqués vont dans ce sens de mon point de vue de neophyte designer (ou alors ont clairement si peu de contenu texte que ce n'est pas grave). J'ai clairement beaucoup de texte et c'est voulu. C'est justement ce qui marque la différence avec 99% des sites de photos de concerts plus proche de portfolio ou des simple chroniques de concert sans hierarchie et assez bordélique.

Ainsi quelques changement pour essayer de monter dans l'estime de tous :
- j'ai un peu lu sur la typographie, et j'ai opté pour du sans empattement. Encore hier je ne savais pas que cela existait -> c'est clair que c'est plus lisible mais c'est probablement encore perfectible !
- J'ai revu mon fond d'image qui est passé en petit logo -> C'est en effet plus clair et globalement plus lisible pour l'oeil. Ce petit logo avec d'un côté un photographe et de l'autre une chroniqueuse me semble assez explicite, alors qu'en effet il ne l'était pas en fond d'image.
- J'ai changé mon texte justifié : encore ici une rigueur d'ingénieur alors qu'il ne faut pas voir le mal partout avec un texte à gauche.

Que l'ensemble manque de style, je l'imagine sans mal : ce n'est ni mon métier ni ma grande sensibilité ! mais j'aimerai perdre cette image de fouilli car au contraire tout est clairement dans des petites cases à sa place et on passe d'une chronique à une autre avec la même rigueur et logique (d'ingénieur).


Concernant le côté mobile ou responsive ! Sur desktop, c'est 950 px et basta.

La version mobile est, comme son nom l'indique, uniquement sur mobile (test sur le user agent pour choisir un affichage ou un autre). C'est le contenu photos et chronique avant tout sans trop de fantaisie.
Je n'ai jamais vu le site sur Nokia. Sous Iphone, c'est correcte, facile d'accès et c'est confirmé par google qui estime à 100% l'expérience utilisateur. Il y a évidemment un travail de cohérence avec le site desktop, je l'envisagerai plus tard.

Bonjour,

CAMEO172 a écrit :
je dois avouer que la réponse de spongebrain est un choc ! Mais en étant dans un repère de designer, je n'en attendais pas moins.

De développeurs et intégrateurs surtout ! Les graphistes et designers font bande à part.

Votre site s'inscrit dans la culture et le lifestyle, du coup le design passe au premier plan. Pour servir le contenu bien entendu. Même si le but n'est pas de faire un site "design", il faut respecter les codes pour ne pas être discrédité en 1 seconde par les internautes, avant même d'avoir lu une ligne.

Le but n'est pas de créer un choc. Juste de faire réagir si on pense qu'un site part dans une mauvaise direction. De façon objective et argumentée (enfin, j'essaie). Et c'est tout à votre honneur de réagir ainsi, car supprimer le fond et mettre une police sans serif fait déjà plus moderne. Certains se barrent quand les commentaires ne plaisent pas ou partent en vrille…

Pour le reste, aérez, supprimez les éléments graphiques qui peuvent l'être (certains filets horizontaux > remplacer par plus d'espace vertical… ). Faire une grille propre. Mettez des vrais titres plutôt que des mots génériques qui font scolaire (présentation… ).
Idem pour le footer tout collé avec les éléments agglutinés…

Les 3 gros onglets bleus ne sont pas raccord avec le style du site. Faites rectangulaire, sobre… Le nom "Épicerie" m'est apparu comme un bug d'intégration. Si c'est un jeu de mot en décalage, il faut que le clin d'oeil soit évident, qu'on ne pense pas se retrouver sur le site de Carrefour Market en cliquant dessus.

Virez certains pictos gris qui font maquette Words, et du coup pas rock du tout. Faites S O B R E !

Accentuez la taille des polices de titres pour rythmer la mise en page. Une police plus web genre Lato (téléchargeable sur google fonts) ?

Attention à la cohérence des couleurs. Là il y a plusieurs bleus, c'est pas charté. Choisissez un bleu bien pêchu et funky. Vous pouvez vous inspirez du guide couleur à la fin de ma présentation (PDF). En cliquant sur le lien alsa sous mon commentaire.

Vous pouvez-y arriver, si le site reste sobre et bien balancé (à ne pas confondre avec pauvre et mal fagoté).

Pour le reste, je pense que les observations qui vous ont été faites vont dans le bon sens. À commencer par faire un benchmark et évaluer les templates responsives avec un design cool.
Le version mobile doit être une déclinaison du site PC, pas un autre site.

Et changez ce favicon !

Voilou
Modifié par spongebrain (25 May 2016 - 22:24)

CAMEO172 a écrit :
Ainsi quelques changement pour essayer de monter dans l'estime de tous

Cela ne devrait pas être trop difficile car je ne crois pas que tu partes de bien bas
Les critiques sur Alsacreations peuvent être incisives, mais elles demeurent globalement très factuelles et largement moins agressives que sur certains autres forums.
Cela reste, de toute façon, des indications et le concepteur du site est in fine seul maître à bord pour décider de ce qu'il met en ligne ou non, et sous quelle forme.
Quant aux questions de design, c'est un domaine pour le moins subjectif et sujet aux effets de mode, pour lequel ce qui vaut à l'instant T sera décrié à T+1.
Y souscrire ou non dépend, à mon avis, du taux de visite attendu et de l'importance qu'il représente dans la vie du site en question.

spongebrain a écrit :

Votre site s'inscrit dans la culture et le lifestyle, du coup le design passe au premier plan.

Je nuancerai cet propos. Si c'est évidemment un site culturel, je ne le situe pas dans le lifestyle. Notre objectif est de parler musique, de concert mais à la façon de journaliste, comprendre avec une rigueur et la meilleur objectivité possible. Dans lifestyle, je vois le côté "cool" voire "bobo" et ce n'est pas du tout ce que l'on cherche. C'est d'ailleurs peut-être pourquoi je veux un design assez rigoureux et sans trop de fantaisie. Mais il est vrai que le sujet se veut détendu et qu'il faut un compromis global.

spongebrain a écrit :

Pour servir le contenu bien entendu. Même si le but n'est pas de faire un site "design", il faut respecter les codes pour ne pas être discrédité en 1 seconde par les internautes, avant même d'avoir lu une ligne.

On est d'accord. Jusqu'à très peu, je me suis attaché à des questions techniques et chercher un moyen de résoudre mon problème, sans penser à l'image global du site. C'est pourquoi j'ai été très technique et chercher la petite bête. Aujourd'hui je suis stable techniquement mais il me faut peaufiner l'image du site. Quant au contenu, sans fausse modestie j'en suis fier ! Et à priori ce contenu plait car nous arrivons à avoir des accords assez compliqué pour des simples passionnés.

spongebrain a écrit :

Le but n'est pas de créer un choc. Juste de faire réagir si on pense qu'un site part dans une mauvaise direction. De façon objective et argumentée (enfin, j'essaie). Et c'est tout à votre honneur de réagir ainsi, car supprimer le fond et mettre une police sans serif fait déjà plus moderne. Certains se barrent quand les commentaires ne plaisent pas ou partent en vrille…

De vous à moi, la première lecture m'a blessé. Oui je suis mauvais mais j'y passe des journées complètes et d'un plat de la main tout mettre à terre sans chercher à positiver même un petit truc.. ouch.. après en lisant entre les lignes, je pense avoir compris et je vais chercher maintenant à unifier mon image. La page d'Accueil sera donc logiquement revu pour parfaitement s'intégrer, sans paraître une verrue au milieu du nez.

spongebrain a écrit :

Pour le reste, aérez, supprimez les éléments graphiques qui peuvent l'être (certains filets horizontaux > remplacer par plus d'espace vertical… ). Faire une grille propre. Mettez des vrais titres plutôt que des mots génériques qui font scolaire (présentation… ).
Idem pour le footer tout collé avec les éléments agglutinés…

voilà de la critique que j'aime. j'en prends note. Je crois que j'avais oublié que je ne paye pas le scroll et que tout à besoin d'oxygène pour que chacun puisse y trouver sa respiration ! L'idée est comprise, à moi de trouver les moyens.

spongebrain a écrit :

Les 3 gros onglets bleus ne sont pas raccord avec le style du site. Faites rectangulaire, sobre… Le nom "Épicerie" m'est apparu comme un bug d'intégration. Si c'est un jeu de mot en décalage, il faut que le clin d'oeil soit évident, qu'on ne pense pas se retrouver sur le site de Carrefour Market en cliquant dessus.

Compris. ça va dégager ! Nous cherchons à jouer sur le côté "En boîte" et rayon et le mot épicerie est venu assez naturellement. Je vais lui enlever le côté commercial en déjà changeant son logo.

spongebrain a écrit :

Virez certains pictos gris qui font maquette Words, et du coup pas rock du tout. Faites S O B R E !

J'y vois un zeste de fantaisie dans la rigueur du squelette. Je vais prendre du temps de réflexion et trancher plus tard.

spongebrain a écrit :

Accentuez la taille des polices de titres pour rythmer la mise en page. Une police plus web genre Lato (téléchargeable sur google fonts) ?

sur ce point je suis clairement mauvais. je prends note mais pour application et réflexion plus tard.

spongebrain a écrit :

Attention à la cohérence des couleurs. Là il y a plusieurs bleus, c'est pas charté. Choisissez un bleu bien pêchu et funky. Vous pouvez vous inspirez du guide couleur à la fin de ma présentation (PDF). En cliquant sur le lien alsa sous mon commentaire.

Pour moi il n'y en a qu'un sur les liens et les onglets.

spongebrain a écrit :

Vous pouvez-y arriver, si le site reste sobre et bien balancé (à ne pas confondre avec pauvre et mal fagoté).

J'aime ce soutien !!

spongebrain a écrit :

Pour le reste, je pense que les observations qui vous ont été faites vont dans le bon sens. À commencer par faire un benchmark et évaluer les templates responsives avec un design cool.
Le version mobile doit être une déclinaison du site PC, pas un autre site.

là vous ne m'aurez pas. J'aime la solution WP Touch et j'aime le côté non responsive du site.
Par contre, je prendrais le temps de peaufiner le theme mobile pour qu'il colle avec le site.

spongebrain a écrit :

Et changez ce favicon !

c'est si petit que je ne sais pas quoi faire

Re,

À chacun ses passions. Je ferais moins le malin sur les pages code ou dans votre spécialité en ingénierie…

La critique, même argumentée, est souvent directe. Du coup ça passe plus ou moins et il faut enrober un peu pour les néophytes. Mais le résultat est le même. Si on est pas réceptif c'est peut être parce qu'on n'est pas prêt ou pas ouvert. Ou que la critique est à côté de la plaque.

Non, le bleu n'était pas identique entre le menu et les onglets dans le contenu (enlevés). Même s'il était identique au départ il ne l'était plus à l'arrivée. Il existe des outils qui permettent de voir avec une pipette les valeurs de chaque couleur à l'écran. Par ex sur mac : Colorimètre numérique.

Attention de ne pas confondre la ligne éditoriale et la catégorie de votre site. Un site de critiques de concerts et musique pop/rock, c'est culturel/lifestyle. En revanche, libre à vous d'adopter une ligne éditoriale sobre. Ça c'est votre style qu'il faut communiquer par votre design. Mais sobre ne veut pas dire design pauvre, bien au contraire. Les design sobres sont souvent les plus difficiles à mettre en place car tout se joue sur la composition et équilibre entre les éléments graphiques, qui sont choisis avec soin. Ça joue à peu et demande un certain background.

Et lâchez les bobos… Quelqu'un vous a-il traité de beauf ? Dans le genre cliché, on fait pas mieux.
Vous devriez au contraire allez voir ce que font les bobos pour vous inspirer et vous positionner. Pas de design si on est pas réceptif et ouvert.

Peu importe l'outil choisi pour la version mobile. Seul le résultat compte. Et si en allant sur mobile je ne retrouve pas l'identité du site PC, c'est un problème. Rien de pire qu'un site qui semble bricolé.

Pour le favicon, faites le à la fin. Il est souvent une déclinaison du logo ou d'un élément graphique ou distinctif du site. Sobre, souvent une ou deux couleurs, c'est un élément important qui vous distinguera dans les onglets.

Pour rythmer la typo, il vaut mieux limiter le nombre de tailles (3 par ex pour tout le site), limiter les polices (1 ou 2) qui se déclineront avec les styles, graisses, tailles, couleurs… La différence de tailles entre chaque police doit être marquée. Si elle ne l'est pas suffisamment, les textes vont se confondre et il sera plus difficile de structurer.

L'italique est à réserver à certains usages. Pas pour les paragraphes.

Pour le travail de typo, il existe de nombreux ouvrages. À vous e trouver celui qui vous parle, mais chercher des idées à partir du style typographique international devrait constituer un bon départ.

Enfin, aérer demande d'aller voir ce qui ce fait par ailleurs. Sur les sites bobos par exemple.

« Épicerie Musicale » Là je comprend !
« Où suis-je tombé ?!? » aulieu de « Présentation » Ça change tout, il y a un ton. En revanche, enchainer par « Bienvenue sur… » On s'en tape…

L'air de rien des petites retouches qui commencent à faire leur effe sur la version PC. C'est un début !

ne soyez pas piqué par mon "bobo" entre guillemet ! J'ai dis que ce n'est pas l'image souhaitée pour le site, pas que je ne l'étais pas moi même

parce que je suis un fou (et que je suis heureux de vos critiques aussi), voici la dernière monture en ligne.

Je pense avoir assimilé la première vague de critique et voici comment je l'interprète :

Accueil : ça n'a plus rien à voir avec l'ancien. Pour gagner de l'air, j'ai passer les images de carré à rond. L'air de rien ça fait classe je trouve ! (et mine de rien je prépare la cohérence avec la version mobile, c'est l'étape de la semaine prochaine). Grosse cohérence avec le reste, même type de mise en avant des titres. C'est je crois une bonne porte d'entrée.

http://www.concertsenboite.fr


Pages : là aussi de l'air pur injecté ici et là. Aussi des images rondes sauf celles propres à la chronique qui malgré tout ont les coins arrondis. Le fil d'ariane est le même de partout pour une cohérence globale.

ex : http://www.concertsenboite.fr/2016/04/15/chronique-photos-live-my-favorite-horses


Globalement :
- mes bords sont aussi ronds de partout. Est-ce un début de style ? je ne saurai l'affirmer mais ça me plaît ! ça apporte de la douceur dans la rigueur.
- Niveau charte graphique (ou en tout cas ce que je mets derrière ce mot encore barbare) : tous les liens sont bleus et gris en hover sauf ceux du menu et du sommaire qui sont bleu mais avec un hover blanc pour aller avec le fond noir.
- Mes boutons ont tous le même fonds et des coins arrondis
- Je testerai probablement Lato sur mes h1 et les titres de chroniques la semaine prochaine. Je ne sais pas si ce sera probant, mais je fais confiance à l'avis des experts.
J'aurai alors 3 fonts, mes dates ayant une font (et un letter spacing) à eux.
- je ne crois pas avoir 90 tailles de police.. mais je peux me tromper.. en tout cas c'est pas probant pour mes yeux de neophytes.

Cool, les vignettes rondes. Par contre pour le slider et le container : coins carrés. C'est plus moderne.
Avoir un style n'est pas décliner le même truc partout, mais trouver de la cohérence, un design qui donne le ton et sert le propos.
Les ronds et les grandes images rectangulaires peuvent très bien cohabiter.

Lato est un exemple parmi d'autres, allez voir sur Google Fonts et sélectionnez les polices sans serif pour voir. Il y a plein de trucs sympas qui peuvent se décliner des titres jusqu'aux paragraphes.

Vos écris confirme mon analyse de votre site : l optimisation la technique informatique est maitrisé et pas la partie graphiste . J'ai suivi une formation design web et le cours tourne autour des couleurs et des fontes et des classifications (Maximilien Vox) et tout un chapitre sur l'écriture du français ( cours de dactylo et de français ?!!) abordant : les signes , les règles de ponctuations, les titrailles , les minuscules et les majuscules .......! Le reste abordant les outils graphiques ( partie technique) .

Un exercice formateur est une police pour un concept. A ce jeu les designers devraient pouvoir vous orienter ! j'en suis incapable !! '( actuellement ) et j'aimerais en lisant les posts sur alsa trouver des examples.

Pour un site de musique et de scène peu t on déjà choisir une fonte parmis ces choix :
1-les humanes garaldes = réales = classiques (empattement triangulaires, axe plus ou moins incliné, faible contraste plein-déliés).
2-les didones, mécanes et linéales = modernes (période industrielle : traits simples, fonctionnels).
3-les incises, scriptes et manuaires = calligraphique ( avec ou sans ligature , gothique ou non ) .

En gros quelle fonte choisir pour les titres et quelle fonte pour le corps du texte !!! pour un site de rock musique artiste ?


Un autre principe est de partir d'une police et de jouer sur ces caractéristiques / variantes ( graisses italiques). Mais bon les principes et moi !!!


Est il possible de s inspirer( ou reprendre ) le même nom de fonte que celle utilisée dans des magasines rock français ? puisqu'il faut faire sobre et standart !!! mais bon ce n est pas le cas des inrocks on passe pour les titres de haut en bas de la couleur orange à rouge puis jaune bleu orange et verts .... je n 'y comprend rien , y a t il vraiment une chartre graphique sur ce site !! !

Est ce que mettre le titre contenant un lien n est pas mieux que mettre un lien à la fin contentant le texte " lire et visualiser les photo" ? On met en valeur les metadata ( couleur bleu) alors que c est le titre qui doit primer et qui ici reste en noir comme le corps du texte !! passer la souris sur le titre montre un surlignement confirmant que l on a affaire à un lien !!!!
Modifié par 75lionel (27 May 2016 - 23:43)

Re,

75lionel a écrit :
upload/48731-fonte102.jpg

Appliquer certains styles en CSS (étroitisation, bold, italique… ) c'est dénaturer la police (si le style n'existe pas en police "native"). Bien que ça peut passer sur une police simple sans serif dans un paragraphe ou en note… Une police de caractères ne doit pas être déformée artificiellement. Ça casse le travail accompli par les typographes. Pour une police condensed ou italique par exemple, il faut utiliser la version conçue à cet effet. Certains confondent oblique et italique. Dans le premier cas la police est juste penchée, dans le second elle est redessinée entièrement pour un résultat optimal. Sur ce point, le web rejoint désormais le print.
http://creativepro.com/typetalk-italic-vs-oblique/

Il est donc recommandé de choisir une police complète avec toutes les versions, bold, italique, thin… afin de garder un style élégant et non trafiqué. Les polices qui se déclinent dans tous les styles sont plus rares (et souvent plus chères). Mais on en trouve quelques unes gratuites comme Lato sur Google Fonts.
Les polices fantaisies, souvent dans une seule version sont en général réservées pour les titres et logos (retouchées). À éviter pour les paragraphes car moins lisibles et manquant de souplesse.
Aussi, chaque police est porteuse d'un style, d'une identité, de valeurs qui peuvent aller jusqu'à la politique. Certains polices sont donc antinomiques et les associer mène à la confusion. Si certains choix typographiques sont communs aux inRocks et à Libération, ce n'est pas un hasard.

75lionel a écrit :
Est il possible de s inspirer( ou reprendre ) le même nom de fonte que celle utilisée dans des magasines rock français ? puisqu'il faut faire sobre et standart !!! mais bon ce n est pas le cas des inrocks on passe pour les titres de haut en bas de la couleur orange à rouge puis jaune bleu orange et verts .... je n 'y comprend rien , y a t il vraiment une chartre graphique sur ce site !! !

Si la licence le permet, sans souci. Ce qui n'est pas le cas de certaines polices créées sur mesure, comme par exemple San Francisco qui est une police créée exclusivement pour Apple (la firme + les apps).
En revanche, copier tous les éléments graphiques d'une charte peut être considéré comme un plagiat, comme par exemple dans la mode, on peut sortir un produit similaire à la concurrence, mais à partir d'un certain nombre de points similaires, il s'agit d'un plagiat. D'ailleurs les procès pleuvent dans le textile et ceux qui gagnent ne sont pas forcément les gros poissons.

Ceci dit, beaucoup de sites et blogs s'inspirent de la concurrence. Beaucoup d'éléments graphiques sont ouverts (impossible de déposer le flat design qui s'inspire de styles qui font partie de la culture ou de l'histoire… ). Idem pour le style typographique international qui inspire Apple depuis le début ( http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage ). Et quand les CSS permettent un effet, tout le monde peut s'en emparer. Mais quand ça ressemble trop et que ça reprend plusieurs éléments conçus par/pour une marque pour aller marcher sur ses plates bandes, ça sent le procès (ex : Apple vs. Samsung).
Il est possible/recommandé d'appliquer des styles "maison" pour une application destinée à une plateforme (iOS, Material design… ). Mais piquer la charte du voisin pour faire la même chose ailleurs, c'est un autre débat. Cela même avant l'ère des écrans.

Pour les inRocks, oui, il s'agit d'un site avec une charte très étudiée (orange pour l'actu, rouge pour la musique… ). Une police bold/black étroite pour les titres (ça permet de caser plus de texte dans une ligne sans perdre en impact), raccord avec le logo et pour le côté "rock". Police sans serif sobre pour les paragraphes (lisibilité). Polices spécifiques (script) pour certaines promos (Store), ce qui permet de casser le côté rigide. Une grille très calibrée. Fond noir pour la partie TV. Une maquette dense (richesse du contenu) mais avec des espaces de respiration. Un footer minimaliste et du coup efficace. Des encarts dans lesquels le site s'octroie une certaine liberté, mais en cohérence avec le reste… Le tout reprenant le style du magazine et formant une identité.
On a ici une charte à 360° qui se décline sur différents types de supports (magazine, affichage, web… ) tout en gardant de la cohésion et un style. L'identité de la marque est ici affirmée, elle colle à la ligne éditoriale et reste cohérente. En fonction du support, la charte s'adapte, mais on reconnait immédiatement le style du magazine. Qu'on aime ou pas n'est pas le propos, la charte est calibrée pour une ligne éditoriale, un certain type de lecteurs.
Ceci dit, les inRocks ont une charte complexe. S'en inspirer demande beaucoup de réflexion et de travail, difficile même pour les pros. Pour des amateurs, il est plus prudent de se baser sur un style simple pour éviter de se retrouver avec une maquette indigeste.

@ CAMEO172

Juste un exemple de blog découvert dans un autre sujet qui respire avec des espaces verticaux confortables et des éléments graphiques légers (boutons… ).

https://adelledemo.wordpress.com/

Je vous remercie pour votre réponse . Ayant suivi le cours je comprends parfaitement vos propos et en apprécie la lecture .

Bonjour,

je ne sais pas à quel point vous remercier tous ! Alors que je croyais mon site "beau" (oui tout est subjectif), vous m'avez pas mal ouvert le yeux et je crois maintenant avoir synthétisé une grande partie de vos remarques.

Ainsi, je vous propose une nouvelle visite du site !
Tant en SEO pure avec des changements ici et là, qu'en mise en page et en "aération" dans le texte, la sidebar ou le footer : j'espère avoir fait un grand pas en avant. Les titres de paragraphes percutent et attire l'oeil, les textes sont plus lisibles etc...
Sans vos remarques je serais passé à côté de tout ça !

Je sais que j'aurai encore des remarques, dont certaines que je ne prendrais jamais en compte comme la responsivité du site (je suis contre !) ou encore les coins ronds partout que spongebrain trouve old school..mais moi je l'aime comme ça et il me correspond ! Ysabel ma chroniqueuse et compagne trouve le site "girly" et c'est le genre de remarque qui me plait !

Si vous avez du temps à perdre pour alimenter ce débat, je suis votre homme pour les points encore perfectibles et où je suis ouvert à la discussion, au débat.

Niveau contenu, je serais fou heureux si quelqu'un peut écrire un avis sur les meta data d'un billet de chronique. Il y a la dessous un gros travail de réflexion mais je suis peut-être à côté de la plaque.

Bonjour,

Ça faisait longtemps que je l'avais fait et comme c'est ma journée de générosité, voici ma réponse en image.

Je pense que depuis la première version du site, de nets progrès ont été faits. En terme de typo notamment. Toutefois, ce site n'est pas encore assez rock à mon goût. La faute à une mise en page qui ne respire toujours pas assez (les blancs tournants, les inter paragraphes et les marges ne sont pas assez marqués), une police de caractère plus moderne mais un peu trop "passe partout", une typo logo en majuscule qui fait plat, un fond noir très dur qui bouffe le site, des touches bleues qui peinent à trouver leur place et semblent là juste pour la lisibilité, certains pictos désuets qui font template bureautique (ne laisser que si indispensable ou à remplacer par un truc plus rock), des coins arrondis qui m'inspirent un style pour salle de bain en maison de retraite (un délire perso), un problème de hiérarchisation dans les style et la taille du nom du site, des titres, des notes sur les photos et sliders (les titres de second niveaux ne doivent pas être plus gros que le titre principal, idem pour les notes sur le slider… ), un cadrage photo un peu trop classique et qui remplit trop la page au dessus de la ligne de flottaison au détriment du texte (préférer qq chose de plus "panoramique" comme dans mes templates), un cadre sur le slider qui fait "Marie Louise" (manque le napperon dessus et ce sera parfait), des titres centrés pas bien amenés…

Arrêtez de demander conseil à votre copine en matière de design, jusqu'à présent elle ne vous en a donné que des mauvais, par exemple ces coins arrondis qui ici font site à sa mémère…

Grosso modo, dans les templates joints (réalisés en quelques minutes), j'ai fait le contraire de ce que je reproche dans mon paragraphe précédent. Des marges et espaces qui respirent, plus d'espace vertical au dessus du container, slider plus panoramique (et du coup, ligne de flottaison plus haute), sans cadre, textes un peu plus petit, Courier pour le logo et les titres (cette typo est décriée par certains mais recèle du potentiel pour donner un style pas trop ronflant, un peu "live"), un jeu de tailles sur les lettres du logo (réalisable en CSS), menu déroulant sans pictos "Word", le bleu passe sur le fond et du coup le container n'est plus écrasé (réalisable en gris ou dans la couleur de votre choix, pas celui de votre copine please !!!). Pour le reste je vous laisse observer les images…

À noter que je n'ai pas traité le footer, en l'état il me semble un peut écrasé. Alignez les pictos sur toute la largeur du container et le texte centré en dessous.

Pour les transitions, éviter le patchwork actuel, ça fait kikoolol. Choisissez une seule transition, celle avec des carrés ou en fondu. À vous de voir.

Voili, voilou les images (à prendre en entier pour un réel résultat ou pas du tout) :

http://img15.hostingpics.net/pics/748291concertEnBoiteBleu.jpg

http://img15.hostingpics.net/pics/744334concertEnBoiteGris.jpg

Un essai avec cadrage slider déstructuré (j'aime beaucoup cette version qui apporte du style). En dessous, le calage du texte à gauche peut être aussi déstructuré, genre 2 options possibles, à voir… ) :

http://img15.hostingpics.net/pics/760152concertEnBoiteBleuAsymetrique.jpg

Un coup de sobriété, un design plus dépouillé, plus radical… et du coup… plus rock !

Le bleu est moins saturé (moins bureautique) que celui que vous avez utilisé.
Pour le reste, à vous de jouer !
Modifié par spongebrain (24 Jun 2016 - 16:19)

Si vous n'arrivez pas à choisir une couleur, vous pouvez réaliser le logo du haut en PNG transparent et avoir une couleur de fond + certaines typo aléatoire. Un coup bleu, un coup gris, un coup rose, un coup violet… Ou choisir une couleur, un fond, en fonction d'un événement ?
Bref, à vous de voir, je n'ai pas que des idées intéressantes…

Pour les silhouettes du logo en PNG transparent. Si vous n'êtes pas à l'aise avec votre traitement d'image, réalisez le en très grand (blanc 100% + transparent, pas l'alpha), les détourages seront probablement grossiers, mais une fois passé au bon format, ça sera nickel et prêt pour un export propre en PNG.
Modifié par spongebrain (24 Jun 2016 - 15:41)

spongebrain, tes conseils sont précieux !

J'ai testé un fond bleu, j'ai bien regardé mais non... je ne m'y fais pas !

Mes coins ronds j'y tiens aussi après avoir essayé sans !

je ne suis pas prêt à tout pour le design et tant pis !

Faut tout prendre ou rien prendre, comme dit. La demi mesure entre la chèvre et le choux ne donne rien de bon

Du coup, il faut faire des choix assez radicaux et savoir faire confiance (pas au beau frère ou à la copine). Et surtout se donner la peine d'y arriver. Colorer votre fond en bleu, juste en passant votre texte en orange et en laissant tout ce qui ne fonctionne pas (voir liste dans mon commentaire précédent), automatiquement ça ne peut pas fonctionner. Au contraire…
Si vous allez trop à tâtons sur la base actuelle, dans 10 ans vous y serez encore, quand il faudra faire autre chose.
Virez les bouées qui vous bloquent et plongez dans le grand bassin ! Là je vous ai tendu une perche. Sinon gardez votre design actuel, mais vous n'aurez pas l'embryon d'un style.

Bonjour,

J'ai continué dans mon coin à avancer et je vous présente une nouvelle monture maintenant

je vous propose donc la dernière révision d'une page de chronique en exemple :
http://www.concertsenboite.fr/2016/07/24/chronique-photos-live-louise-attaque-2

Ensuite libre à vous de vous balader dans ce site, j'en serais le premier honoré !


Ne pas taper sur les coins ronds : je les garde

Bonsoir !

Un site de passionnés ne se juge pas de la même manière qu'un site de professionnels... L'important est que vous réussissez à faire passer votre enthousiasme. Je considère que c'est le cas.

Mon 'unique' critique : l'interlignage qui varie selon le paragraphe, je ne trouve pas ça agréable visuellement.

Salut,

pas mal tes modifications. J'aime bien la première page de ton blog en tout cas, c'est clair et précis. On sait précisément à quoi s'attendre et connaît le thème du site dès les premières images et premiers mots de la page.