[Amateur] lamecarlate.net

Bonjour à vous.

J'ai récemment retravaillé ma "page personnelle", qui est une sorte de portail résumant mes différentes facettes et passions. J'ai conscience qu'elle n'est pas parfaite, et c'est pourquoi je la propose ici, en pâture à vos critiques !

Merci d'avance - et, même si c'est bateau, frappez fort, le web c'est mon métier, si je m'écarte du droit chemin c'est mal.

Donc, l'url : http://www.lamecarlate.net.

Bonjour,

Pour ce qui est du subjectif :
Visuellement j'accroche pas. Il y a comme un puissant décalage entre des "bulles" et le background. bizarrement malgré le radius, ça fait très "old school" pour ne pas être péjoratif.

Je trouve qu'il n'y a pas assez de travail sur les textes, et que ca manqe de fantaisie. Enfin, tu nous propose une mise en page peu commune, mais la présentation du contenu ne suit pas avec cette "folie". (les goûts et les couleurs ...)

Pour la technique,
Tu es en UTF-8 pourquoi codes-tu tes accents ?

Sinon pour :

<section class="groupe" id="mtg">
    <h2>J'aime jouer &agrave; Magic: the Gathering</h2>
    <a href="http://smfcorp.net/forum">
        <img width="120" height="76" alt=""
             title="Dans la Secte des Magiciens Fous, on joue et on papote"
             src="http://www.lamecarlate.net/ressources/img/sc-smf.jpg" />
        <p>Forum de la SMF, d&eacute;di&eacute; au jeu Magic: The gathering</p>
    </a>

J'aurais écris ceci (mais je peux me tromper) :

<section class="groupe" id="mtg">
    <h2>J'aime jouer &agrave; Magic: the Gathering</h2>
    <p>
      <a href="http://smfcorp.net/forum">
        <img src="http://www.lamecarlate.net/ressources/img/sc-smf.jpg" alt="" title="Dans la Secte des Magiciens Fous, on joue et on papote" />
        Forum de la SMF, dédié au jeu Magic: The gathering
      </a>
    </p>

Yvan.

Merci de ta réponse =)

Tu n'accroches pas, ok, les goûts et les couleurs comme tu dis : qu'aurais-tu vu à la place, par exemple ? Un background différent, des cadres moins ronds (ou plus), d'une couleur différente, avec une bordure ? Raconte =)

"la présentation du contenu ne suit pas" : je ne comprends pas très ce que tu veux dire.

J'ai décrit la page comme étant en UTF-8 un peu... par hasard, dois-je avouer (il faut bien déclarer un charset), mais je code les accents parce que c'est une habitude, je le fais naturellement.

Ensuite, les <p> dans les <a> : j'avais cru comprendre que c'était désormais autorisé en html5.

Bonjour,

De façon objective il est tout à fait possible de démontrer qu'il y a un problème avec le design : il n'y a aucun alignement, l'œil ne sait pas où se fixer... en gros, c'est le basard. Se vouloir original, c'est bien ; garder à l'esprit les règles de bases du design, c'est mieux.

Plus subjectivement, le fond "ciel la nuit", ça peut être un choix personnel, mais ça fait surtout revival des années 90, ça plaira aux nostalgiques.

Ok, le fond ne va pas (en le regardant encore et encore, je comprends votre ressenti).

Quelles sont les règles de base du design ? Je ne suis pas graphiste de formation, et je fonctionne essentiellement à l'instinctif : "ce rendu me plaît, je garde".

A la base, les différents blocs sont alignés en quinconce, alignement à droite puis à gauche, puis à droite etc. Ce qui amène à avoir deux blocs par "ligne". Ensuite, je les ai un peu décalés - serait-ce mieux si je ne le faisais pas ?

Salut,

Il sera long et fastidieux de t'apprendre les bases de design par le biais de ce sujet, mais sache que l'objectif d'un design de site est de mettre en avant les éléments clés que le visiteur est censé trouver (généralement l'identité du site et son objet, les différentes rubriques qu'il peut y trouver, les services auquel il peut avoir accès, etc.). Le design doit donc guider l’œil dans ce sens.

Donc, chaque alignement ou non alignement, chaque courbe, chaque masse de couleur, etc. doit être pensé dans ce sens.

Concernant ton fond, il est bien plus présent que le reste du contenu, et n'aide en rien la lecture. Sur un site, le fond doit sublimer le contenu, et non l'inverse. Donc le contraste et les couleurs en devraient être au moins atténués.

Bien, je vais donc prendre un temps de réflexion sur tout ça, j'ai fait quelques essais rapides de nouvelles couleurs et c'est vrai que partir de ce fond très sombre était une mauvaise idée.
L'alignement aussi pose problème selon vous, je vais revoir ça.

Merci !

Laurie-Anne a écrit :
Plus subjectivement, le fond &quot;ciel la nuit&quot;, ça peut être un choix personnel, mais ça fait surtout revival des années 90, ça plaira aux nostalgiques.

Ah non je suis pas du tout d'accord, ça revient même en force dans le design web. C'est plutôt le design global du site en question qui distille cette impression de 90's, mais par exemple chez Apple ou même un certain nombre d'autres sites, ca le fait...

Par ce qui contribue au "design global" je citerais entre autres tous les blocs non alignés, les border-radius géants, la couleur beige qui casse avec le fond noir-bleu : une couleur neutre ou légèrement froide conviendrait mieux. L'effet de survol de la souris sur les liens est un peu trop "original" ! En revanche le border-radius appliqué aux liens quand on survole avec la souris sont de taille idéale !

En parlant de liens, un simple effet de survol par soulignement plus une légère coloration foncée suffirait à avertir le visiteur que c'est un lien. D'ailleurs les liens soulignés lorsqu'ils ne sont pas survolés contribuent beaucoup à l'effet vieillot du site.
Modifié par darkstar2023 (09 Jun 2011 - 21:36)

Perso, je trouve le site http://sphinx.lamecarlate.net/ super !!!!!
Les dessins, c'est toi qui les est faits ?

doc mcfly a écrit :
Perso, je trouve le site http://sphinx.lamecarlate.net/ super !!!!!
Les dessins, c'est toi qui les est faits ?

Oui oui, c'est moi, merci !
(par contre, malgré ce que tu en dis, je pense que le blog du Sphinx aurait aussi besoin d'un redesign tout aussi sévère)

darkstar2023 > pour ce qui est des liens soulignés en mode normal, ça donne peut-être un aspect vieillot, mais ça, j'y tiens, parce que c'est une des règles du web, en termes d'accessibilité et d'ergonomie.
Je vais modifier les border-radius (je trouvais ça marrant, mais c'est peut-être justement... juste "marrant") et diminuer le contraste entre fond et blocs.
Modifié par AkaiKen (12 Jun 2011 - 12:01)

Je te rejoins sur les liens , pour moi un lien doit soit avoir le look d'un bouton/icône, soit être en bleu soit souligné soit dans un "menu", sinon l'internaute ne peut pas savoir que c'est un lien , tant pis pour le côté vieillot ... ( vaut mieux un style "vieillot" mais ergonomique que à la mode mais peu pratique .... je sais la fenêtre triangulaire de ma chambre d'enfant m'a marquée ... très jolie de l'extérieur, c'était pour suivre la ligne de la toiture sarde de l'immeuble savoyard, mais vraiment pas pratique ... )

Rebonjour ! Après des mois, j'ai enfin trouvé le temps de revoir de fond en comble le design de mon site.
Qu'en pensez-vous ?

(normalement, à côté des liens vers les blogs il y a les titres des trois derniers articles, mais mon hébergeur semble ne pas apprécier les fonctions php de gestion de fichier, c'est nul)

Bonsoir à toutes et à tous,

l'image de fond, j'adore !

C'est, comme dirait DALI, "psychédélique" ! Après avoir fumé un pétard, l'on voit des spots de lumières de toutes les couleurs. Il ne manquerai plus que l'image de fond bouge pour avoir la nausée. C'est top !

Ensuite, pour les dessins, je dirai que tu as du talent. C'est très bien !

Mais cette page monolithique détone ! J'aurai aimé voir quelque chose de plus fantaisiste. Les règles du design, avant tout, sont d'être cohérentes. On ne mélange pas des genres qui ne vont pas ensemble. Tu parlais au début, d'un décalage en quinconce ? En espaçant, les blocs, je pense que cela aurait été plus esthétique.

Le choix des couleurs est approprié avec le fond.

Pourquoi ne pas choisir une police de caractères New Age ?

Le conformisme, ça va un temps, mais faire ce que tout le monde fait, je ne vois pas l'originalité ? La grande innovation d'Apple a été de faire des ordinateurs en couleurs. Ca change du classique beige de chez IBM, non ?

Par contre, lorsque je manipule la barre verticale de l'ascenseur, et bien, elle n'est pas fluide ? Aurais-tu un problème de performance ?

J'ai regardé les erreurs avec Firefox, j'ai trouvé que tu en avais beaucoup (Outils / Console d'erreurs).

Le rendu sous MSIE 8.0 n'est pas le même. Est-ce normal ?

De plus, je remarque que tu n'utilises presque pas les balises html5 et que tu reviens systématiquement à l'usage de la balise <div>. Aurais-tu un problème avec HTML5 et ses nouvelles balises qui ne sont pas interprétées nativement en MSIE 8.0 ?

J'ai découvert ce site avec du retard. Sinon dans l'ensemble, j'aime beaucoup ! Bravo.

@+
Modifié par Artemus24 (03 Aug 2011 - 03:11)

Artemus24 >

Monolithique ? Tu entends par là la suite de blocs rectangulaires ? Tu aurais dû voir la version précédente, toute en rondeurs - et c'est d'ailleurs ce qu'on me reprochait un peu, ça faisait vieillot.

En revanche, tu demandes plus de fantaisie : oui, mais comment ? Je dois avouer ne pas comprendre... Les blocs sont alignés, certes, mais je ne vois pas le conformisme, ici. Avant, j'avais placé les objets en quinconce, justement, et c'était marrant quoique incohérent à l'oeil, m'avait-on dit .

Ensuite, oui j'utilise des <div>, et ? Je ne vais pas les remplacer systématiquement par des <section>, car ce n'est pas leur but. Et puis HTML5 n'interdit pas d'utiliser ces balises-là.

Le New Age c'est pas mon truc. Tu vois du psychédélique dans le fond de ma page, moi j'y voyais des lumières de ville floues . Donc pas de police New Age - en revanche, je cherche une police sympa pour agrémenter le tout, mais comme j'ai peu de texte elle doit rester extrêmement lisible.

Les erreurs dans la console : ce sont essentiellement les déclarations CSS3 du type -moz-radial-gradient dans le background qui les font apparaître. Mais il y a aussi ça : "[09:43:46,537] Nom de fonctionnalité média attendue, mais « touch-enabled » trouvé. @ -http://www.lamecarlate.net/:1", et je ne comprends pas, d'ailleurs. La ligne 1 c'est celle du doctype... Une idée, les gens ?

Aspect sous IE8 : le fond est sûrement vert uni ? En effet, c'est de la dégradation gracieuse (en ce sens que le comportement utilisateur n'est pas affecté), car ce navigateur ne comprend pas les "radial-gradient" qui crée les taches de couleur du fond.

Le coup de l'ascenseur, j'avoue ne pas avoir saisi...

Merci de ta critique constructive, en tout cas, et je suis heureuse de voir que ma page te plaît

zardoz > gni ?

Perso je trouve que le dégradé en fond des blocs et la bordure ça fait trop. Je verrais mieux une couleur unie, pourquoi pas avec de la transparence.

Pourquoi pas des bords arrondis sur les blocs pour donner un coté un peu plus moderne ?

Les blocs légèrement séparés parce que tes différentes rubriques sont vraiment différentes des unes des autres (sujets complètements différents).

Une police qui mettrait plus en avant tes titres : là ils se fondent trop dans le reste du contenu.
Modifié par jb_gfx (03 Aug 2011 - 20:02)

Bonsoir à toutes et à tous,

je suis désolé, mais je n'ai pas vu la première version de ton site.

Monolithique : ce sont bien les blocs rectangulaires au centre de la page. Pourquoi les rondeurs sont-elles vieillottes ?
Et puis, il y a un, je ne sais quoi, qui me dérange, mais je n'arrive pas à l'exprimer. Est-ce la diversité des sujets abordées ? Est-ce ce bloc compacte au milieu qui me fait penser à une sculpture (ou une compression) de César à la gare Saint-Lazare à Paris ?

Un peu plus de fantaisie : pourquoi ne pas placer ici et là une expression de toi, comme un petit dessin que tu sais si bien faire !

Le conformisme est se conformer à la majorité. Je suppose que tu es une artiste (je dis cela à cause des dessins) ! Le conformisme et les arts ne vont pas ensemble. Exprime ce que tu ressens au travers de ton site et non pas vis-à-vis d'une quelconque opinion. A moins que je ne me trompe, tu ne désires pas faire un site commercial ? Si c'est non, alors fait ce qu'il te plait !

L'image de fond suggère le flou et les rondeurs et dont pourquoi faire des boites anguleuses ?

Le New Age n'est peut-être pas la bonne expression. Mais les couleurs m'ont rappelé les années 70. D'où ...

Le coup de ascenseur : sur mon ordinateur, je suis en WIFI et je n'ai pas un gros débit. Donc lorsque je manipule l'ascenseur, je n'ai pas la fluidité comme sur le site d'alsacréations. Pourtant ton site est léger en code et il y a quelque chose qui coince quelque part. Est-ce les -moz-radial-gradient qui provoquent cela ?

Aspect sous IE8 : oui, c'est tout à fait cela !

Ah oui, j'ai regardé dans mon dictionnaire japonais-français : AKAI : rouge ou cramoisi et KEN : épée, fleuret. Et donc je me demandais où tu avais mis cette épée rouge (ou sanglante) ? Je ne la voie nulle part sur ton site ? Voici un autre dessin à introduire en tant que logo.

@+

Bonjour.

Ce qui est moyen :
Ton site est très peu lisible et l'harmonie des couleurs est discutable. Je trouve qu'entre la couleur des textes, la typo et ton background, le visiteur est vite perdu et n'a pas forcément envie d'aller jusqu'en bas. S'ajoute que les liens ne sont pas clairement visibles, il faut vraiment les pointer pour les voir (notamment l'image du chat). Tu pourrais rajouter un mailto sur ton adresse mail (située dans ta rubrique contact) parce que l'on a l'impression que c'est un lien et puis non en fait, perso je trouve cela désagréable.

Ce qui est bien :
Le site en une page.

jmlapam > Ohhh jamais de mailto ! C'est la porte ouverte au spam ! Mais tu as raison, on dirait un lien - et je comprends tout à fait cette impression de "je peux faire quelque chose mais en fait non", je me sens nouille de l'avoir créée, moi qui déteste ça . Comment puis-je faire pour faire ressortir le texte mais sans donner cette impression ?

Les liens sont tous soulignés, sauf le chat c'est vrai (mais lui c'est un bonus). N'est-ce pas suffisant ? Que verrais-tu ?

Le texte est trop peu lisible pour toi, dis-tu ? Verrais-tu une autre couleur ? Passer du blanc au vert sombre, voire autre chose ?

artemus24 > Alors, pour info, l'épée rouge se retrouve bien quelque part... Dans l'URL ! AkaiKen est mon pseudo depuis longtemps, mais je ne pense pas forcément pertinent de l'illustrer partout ou de ne faire que des sites rouges (ce que j'ai d'ailleurs fait longtemps ^^).

Rondeurs vieillottes : disons que les rondeurs de l'ancienne version étaient, heum, imposantes.

Je ne suis pas vraiment une artiste. Je suis, disons, multiclassée, et c'est pour ça que ce site présente de nombreuses facettes de moi. Comme le suggère jb_gfx plus haut, je vais voir à espacer légèrement les blocs et mettre de légers coins arrondis

"Un peu plus de fantaisie : pourquoi ne pas placer ici et là une expression de toi, comme un petit dessin que tu sais si bien faire !"

C'est très gentil, mais justement j'essayais de faire "un peu" sobre, et il y a quelques dessins : mon avatar, les screenshots des blogs (design et peintures persos) - peut-être un peu trop petits ? Mais après ça devient lourd à regarder.

L'ascenseur : ah, oui, le fond en radius-gradient doit jouer... J'aimais l'idée des couleurs floues placées en presque aléatoire sans aucune image à charger, mais ça, c'est peut-être pire...

jb_gbx > Personnellement j'aime les bordures, quand elles sont fines elles changent tout de suite un bloc "banal" en bloc "pro(pre)". Pour ce qui est du dégradé, oui, je vais tester en uni mais en légèrement transparent, je tiens à mon fond coloré !

Merci à tous les trois pour vos remarques !

EDIT : j'ai fait quelques modifications. Excellente idée, le fond uni, ça rend super bien ! Voilà où j'ai placé le site en cours de redesign : http://www.lamecarlate.net/tests/ci-portail/
Modifié par AkaiKen (04 Aug 2011 - 19:51)

AkaiKen a écrit :
jmlapam &gt; Ohhh jamais de mailto ! C'est la porte ouverte au spam ! Mais tu as raison, on dirait un lien - et je comprends tout à fait cette impression de &quot;je peux faire quelque chose mais en fait non&quot;, je me sens nouille de l'avoir créée, moi qui déteste ça . Comment puis-je faire pour faire ressortir le texte mais sans donner cette impression ?

Les liens sont tous soulignés, sauf le chat c'est vrai (mais lui c'est un bonus). N'est-ce pas suffisant ? Que verrais-tu ?

Le texte est trop peu lisible pour toi, dis-tu ? Verrais-tu une autre couleur ? Passer du blanc au vert sombre, voire autre chose ?

Déjà les modifications apportées vont dans le bon sens. On a moins l'impression que l'adresse est un lien. Tes hover sont beaucoup mieux, même si je suis pas fan des couleurs.
Le spam? tu as un trafic important sur ce site?

jmlapam a écrit :


Déjà les modifications apportées vont dans le bon sens. On a moins l'impression que l'adresse est un lien. Tes hover sont beaucoup mieux, même si je suis pas fan des couleurs.
Le spam? tu as un trafic important sur ce site?

Non, mais c'est pour le principe de précaution : ne jamais mettre un moyen pour que les robots récupèrent ton adresse. D'ailleurs l'adresse n'est pas écrite telle quelle dans le code, si tu regardes bien

Les hover n'ont pas changé ^^ enfin, la couleur des textes a été inversée, mais la couleur des liens survolés (et focusés) est toujours la même.