[pro] Site vitrine

Salut tout le monde,

Bon, étape que je redoute, la critique de mon site pro tout neuf. http://perso.jeux-lothi.com/test/index.php

- il est valide W3C
- l'adresse est temporaire. Je vais de se pas acheter mon nom de domaine.
- il marche sans javascript (mais donne mieux avec)
- il marche en théorie au clavier (mais étant incapable de naviguer moi-même au clavier, je garantis rien)
- il devrait être lisible au lecteur d'écran

Voilà, pro ou pas, je continue d'apprendre, donc lâchez-vous !
Modifié par Lothindil (07 Jan 2014 - 17:23)

Hello

J'imagine bien ton appréhension

Je suis passé rapidement et je ne suis définitivement pas assez expert pour une analyse digne de ce nom.
Juste deux petits points (je repasserai peut-être plus tard) :

J'aime beaucoup l'animation sur le menu et le principe du "symbole" pour naviguer.

Cela se gâte un peu juste après... Ça bouge dans tous les sens !!!
Je trouvais cela dérangeant sur mon 27', là sur mon iPad, c'est abomiffreux (en mode portrait, le contenu manque de place et va à la ligne)

Je trouve les couleurs de chaque section un poil vieillottes, pâlottes, ça dénote un peu par rapport à ce menu et ce que je m'attendais à trouver, mais c'est sûrement subjectif...

Il doit y avoir moyen de faire apparaître ces contenus de façon plus "discrète", plus "douces", plus "sexy", là, ça part un peu dans tout les sens (en hauteur, en largeur, j'ai eu l'impression d'être sur un vieux site qui clignote de partout)

Je n'ai pas encore regardé le code, ni le contenu en profondeur, mais je n'y manquerai pas

Désolé pour ce commentaire tout pourri, j'avais prévenu, c'est une expertise que je n'ai pas vraiment (et je manque de temps pour m'appliquer comme je le devrai...)

Bon courage pour la suite (et les vraies critiques qui ne manqueront pas d'arriver )

À bientôt

6l20 a écrit :

Cela se gâte un peu juste après... Ça bouge dans tous les sens !!!
Je trouvais cela dérangeant sur mon 27', là sur mon iPad, c'est abomiffreux (en mode portrait, le contenu manque de place et va à la ligne)

Sur mobile, c'est bien possible que ça soit abominaffreux, J'avoue que j'y connais absolument rien en responsive et que j'ai pas franchement l'intention de m'y pencher plus que cela. (c'est pour ça que j'ai mis 3/5 en css)

Pour le fait que ça bouge dans tous les sens, à vrai dire, je vois le soucis (enfin je l'ai sur mon pc), mais impossible de le résoudre.

Mon code d'ouverture des sections s'arrêtant à ça (quand une section est déjà ouverte) :

var idclick=$(this).attr("id");
var decoupe = idclick.split("-"); 
var id=decoupe[1];
var page={1:'prog',2:'illus',3:'jeux',4:'pres',5:'blog',6:'contact'};
var titre={1:'Adeline Duterre : Programmation',2:'Adeline Duterre : Illustrations',3:'Les Jeux de Lothi',4:'Adeline Duterre : Présentation',5:'Adeline Duterre : le blog',6:'Adeline Duterre : Contacts'};
var exid=$('#ouvert').val(); 
$("#contenu-"+page[exid ]).addClass('invisible').delay(50).hide(500);
$('#ouvert').val(id);
$("#contenu-"+page[id ]).removeClass('invisible').delay(70).show(2000);
document.title = titre[id ];

edit : suis une idiote, c'était le second delay le soucis... il doit être supérieur à (delay+hide) du premier pour démarrer après
Modifié par Lothindil (07 Jan 2014 - 19:25)

Bonsoir, une petite critique graphique.

Aspect général
Ma première impression fut: Ah, au moins on ne retombe pas dans un design vu et revu 700 000 fois. C'est un bon point et il faut le garder selon moi. De plus, le site ne pêche pas dans l'excès d'originalité en rendant le tout incompréhensible. Toutefois créer quelque chose d'original n'est pas aisé, et cela demande pas mal de réflexion en plus, qui ici, ne sont pas vraiment abouties. Je vais donner quelques pistes par la suite. Sinon j'aime bien la rosace, et l'idée de travailler avec ces couleurs.

Typographie
C'est très très très petit. Personnellement ça me décourage de lire. La fonte choisie, est une fonte à empattement avec une faible hauteur d'x (hauteur de la lettre x comparativement à la taille de la fonte). Ce genre de police rend donc, pour la même taille, très petit. et 12-14px ce n'est déjà pas bien grand.
À cela on rajoute que vu la taille, les textes, sur une largeur basique desktop (1300px) prennent dans les 150 caractères par ligne. En sachant que l'idéal se situe au alentours des 70, c'est assez désagréable et dur à lire.
De plus, cela rappelle les sites tout petits et cougnés que l'on faisait à l'époque pour nos faibles résolutions. Les visules actuels ne se gênent plus de prendre de la place, au pire on scrollera, c'est fait pour. Là cette petite taille donne justement un air has-been à ce site.

La gestion des espaces n'est pas toujours bien faite: Des titres ont un espace plus grand après qu'avant, certains éléments sont trop sérés, ou au contraire trop espacés. Les formulaires de devis passent particulièrement l'envie de les remplir, il n'y aucune gestion de mise en page ou d'espace que ça fait un peu chenil.

Mise en page
Le tout manque parfois un peu de structure, certains éléments semble être posés par ci, par là, sans une bonne réflexion. S'aider d'une grille peut aider. Ou au moins imaginer quelques axes de force et subdivisions standards.

Le menu de gauche, les mélanges entre alignement centré et à gauche rend le tout peu clair.

Les textes aux quatre coins, on ne sait trop où donner de la tête, il sont mis sur pied d'égalité, alors que le titre devrait être mis en valeur, le contact un peu moins, et les mentions légales et le rappel du menu, on se demande à quoi ils servent là. Les mentions légales devraient passer sur une autre page, accessible avec un lien discret.

Détails
– L'ombre portée qui fait effet flou sur les boîtes, ça fait un peu effet inutile. L'oeil est inutilement attiré par cet effet. L'ombre portée sert parfois à faire ressortir un élément pour bient le séparer visuellement. Là la séparation est déjà bien trash entre le noir et la couleur, ce n'est pas nécessaire d'en rajouter.
– Les étoiles/pourcentages dans les compétences, décidément je n'y arriverait jamais. Qui les a données? 4.5/5 c'est presque parfait! Il n'y a aucune marge d'apprentissage?
– De manière générale, comme pour les animations, il y a quelques effets qui n'ajoutent rien à ce site, qui sont juste des effets pour l'effet. Alléger un peu cela donnera en peu plus de solidité à ton visuel. Par exemple les bordures au survol des liens de la rosace. Les ombres portées, les liens qui deviennent gras et décalent les menus (on a l'impression que ce n'est pas solide)
– Les couleurs de fond sans dans un autre style que la rosace, et ne la rappelle pas. Et elles sont assez inintéressantes, ni vraiment pastel, ni vraiment acides, juste un peu délavées. Peut-être imaginer autre chose pour rappeler la couleur (un fond trop foncé ne serait pas adapté.

je ne suis pas très fan des couleur de fonds choisie.
ça se voit que c'est un site de développeur..
à part l'animation qui n'est pas mal, je pense qu'il faut revoir toute la mise en page (les mentions légales dans un coin, votre nom dans l'autre, )

Bon, j'ai retravaillé un peu le tout...

dans le désordre :
- j'ai changé le pattern de fond
- j'ai grossi la taille du titre, de la partie "contact" et réduit la taille de la police du footer
- j'ai ajusté les couleurs des fonds (qui sont une version très clair et peu saturée de la couleur de cette partie de la fleur de lys)
- j'ai agrandi la police pour la passer à 16 (et donc à 110 caractères sur un écran en 1280px, soit la même chose que sur les forums)
- j'ai fixé la taille de la partie à gauche, de manière à ce qu'elle soit la même pour toutes les parties
- j'ai viré la div folio pour fusionner avec la description (onglet "illustration"), ça évite de faire planter mon animation, puis comme ça je garde la même structure pour tout les onglets
- j'ai viré les shadow sur mes box
- j'ai viré le gras des liens (et changé les couleur pour que le hover/focus se voit)
- j'ai viré le shadow sur le menu, et changé la couleur du hover pour que ça soit la même que celle du background des sections.


J'aimerais pouvoir donner la même hauteur à ma div gauche qu'à celle de présentation par contre, mais je sais pas par où m'y prendre...

(ps : la version sans js n'est pas à jour)
Modifié par Lothindil (13 Jan 2014 - 13:21)

Bonjour Lothindil !

> [mon site] est valide W3C
Pas CSS Il y a 4 petites "inventions".

> il marche en théorie au clavier
Ça marche, mais on passe 3 fois par les mêmes liens quand on fait le "tour" des liens du site (avec tabulation). D'ailleurs, la première fois, les liens sont invisibles à l'écran.

> il devrait être lisible au lecteur d'écran
A priori, le modèle de conception des pages génère beaucoup de répétitions. Par exemple, le menu général et le sitemap font écho. En outre, la page Contact contient l'un après l'autre les titres "Contactez-moi" (h1) puis "contact et devis" (h2) puis "contact" (h3), et plus loin le "contact" (h1) présent sur toutes les pages.

Encore bravo et bonne continuation !
> donc lâchez-vous !
Je ne vais pas me lâcher sur le design, mais sur le HTML
1. Un encodage UTF-8 ne serait-il pas préférable ?
2. La balise NAV englobe le menu de navigation, pas chaque lien. En clair, elle correspond à votre ID="NAVIGATION".
3. Votre structure de page me semble honnête. Simplement, le sous-titre du header pourrait être un P ou un STRONG. Quant au sitemap, ce pourrait être une liste… ou rien du tout encore une fois, puisqu'il est déjà présent sous la forme du menu général.

css c'est possible, j'ai pas mal touché mon css ces derniers jours, j'irais vérifier ça.

Pour la navigation, je vais me dire qu'il vaut mieux 3 fois qu'une. Et la "première fois", ça doit être le passage sur l'image map, là j'avoue que j'y connais rien en hover et focus et que j'ignore même ce qu'il y a moyen de faire.

Pour la lecture d'écran, effectivement, ça peut être pénible au niveau des formulaires de contacts (sans javascript), vu que je voulais garder la même structure qu'avec le javascript.

Encodage utf-8, c'est une vieille mauvaise habitude que j'ai, mais je m'y suis tellement habituée à mon latin-1 que je le garde. (le jour où j'aurais un projet qui utilisera des écritures non-latines, je passerais en utf-8 sans soucis, mais bon, voilà quoi ^^)

Ah, marrant, c'est la première fois que je l'utilise comme ça la balise nav... Chais même pas ce que j'ai foutu là

Pour le sitemap, j'avoue que j'hésite de plus en plus à le faire le sauter... et le sous-titre, c'est un truc où j'ai toujours un doute sur quoi lui mettre comme balise ^^

Et au passage, j'en profite pour signaler que la dernière version est disponible sur mon site officiel : www.aduterre.com
Modifié par Lothindil (17 Jan 2014 - 08:08)

Bonjour Adeline,

J'arrive un peu après la musique.
Mes remarques se limiteront à la partie graphique, ergonomique, design. En terme de développement, je serais incapable de vous suivre.

Ce site semble fonctionner parfaitement mais certains points sont largement optimisables. Ça me semble même nécessaire.


Tout d'abord le motif, une sorte de fleur arc en ciel est jolie (un lotus ?), mais il n'est pas valorisé sur ce fond, avec cette maquette, cet effet néon, dans cette mise en page et avec ces choix typographiques, les paragraphes dans les coins. Les couleurs posent également problème.

Autre point : quel est votre métier ? Je veux dire votre métier principal. Par exemple moi, je suis Graphiste avec d'autres compétences annexes (illustration, un peu de CSS/HTML… ) Mais je me présente d'abord comme Graphiste, avec des plus. Si je me présentais comme Graphiste/Intégrateur/Illustrateur/Développeur/Masseur, je pense que je ferai fuir pas mal de monde qui verraient dans une telle description un touche à tout, mais pas un pro.

Première chose, clarifier votre présentation. La hiérarchiser. Par exemple, présentez vous comme Développeur (euse ?) en précisant dans quel domaine. Et en second plan, présentez vos compétences annexes, comme l'illustration…
Là j'arrive sur un site dont le design n'est clairement pas celui d'un illustrateur (où sont les illustrations ? Même une ça suffit), alors que c'est mentionné au même niveau que le reste. Conclusion, je n'arrive pas à vous cerner.


Ensuite, le design. Il faut moderniser tout ça. Il faut absolument s'inscrire dans les tendances actuelles pour être crédible. C'est obligatoire pour un graphiste, un illustrateur, et fortement recommandé pour un intégrateur ou un développeur.
Actuellement je suis sur une page et je n'arrive pas à revenir sur la page d'accueil. Même en cliquant sur le nom. Première chose à régler. Je n'arrive pas à trouver le lien pour revenir à l'accueil, rien que ça j'ai pas envie de rester. Je reste quand même pour continuer mon commentaire. Ouf, en cliquant X fois sur la flèche retour, je retrouve l'accueil…

Le design donc est trop sombre. Ce fond noir traité de la sorte vous déssert. Ça manque de fraîcheur. C'est terne, triste, étriqué dans un rectangle imaginaire qui ne correspond à rien.
Inspirez vous par exemple de ce lien :
http://line25.com/articles/20-stylish-examples-of-flat-illustrations-in-web-design
Qu'on aime ou pas, c'est moderne, frais, graphique, composé, pro, donc crédible.
Un site de développeur avec de l'illustration :
http://jonathan-boyer.fr/
http://jonathan-boyer.fr/competences (il hiérarchise ses compétences : "compétences secondaires", il est donc crédible)
http://jonathan-boyer.fr/culture (il créé de l'empathie, ça pourrait aussi être une activité annexe)
Très efficace. Tout-y est et c'est très bien composé, clair, avenant… Texte gris + 1 couleur, c'est très payant. 3 tailles de caractère (titre, chapô et sous-titres, contenu). 2 polices de caractère modernes (1 pour les titres avec serif, 1 pour le texte courant sans serif).

Ne gardez que le minimum, ce dessin de fleur gagnerait à être présenté sur un fond clair, ou même blanc. Là on est dans des codes ésotériques. Limite page d'accueil pour un mage, voir une secte.

Les textes autour, le papier peint, la police de caractère doivent être simplifiés.
• La police de caractère est vieillotte. Choisissez une police sans serif (caractère droit de type helvetica par exemple). Limitez le nombre de formats, un pour le titre, un pour le contenu, et éventuellement un troisième plus petit pour les mentions légales. Là il y a trop de taille sde caractère, c'est une erreur en typo.

• Utilisez les majuscules dans les gros titres. Là les gros titres en minuscules et le menu en majuscules, c'est incohérent. Les titres dans une couleur en gras majuscule, ça peut être sympa. Et pour le reste, texte gris. Uniquement les liens en gras/couleur, sans soulignement (ou alors qu'en over, et uniquement pour les liens externes).

• Pas de parenthèse dans un titre (Freelance) ! C'est très laid, surtout à côté de votre nom. Écrivez d'adord votre prénom.
Par exemple :
PRÉNOM NOM
DÉVELOPPEUSE WEB FREELANCE
HTML 5, CSS 3, Javascript, PHP - Illustration

Accueil . Portfolio . Programmation . Illustration . jeux-lothi.com . Blog . Contact

Votre projet personnel ne doit pas bouffer votre site. Il faut se tourner vers le client avant tout, répondre à ces questions.
Présentez-vous directement dans l'accueil. Un portfolio est obligatoire, même si ce sont vos travaux.
Évitez absolument les textes de toutes les couleurs, ça dévalorise l'ensemble. Par exemple sur fond blanc (fortement recommandé), écrivez vos textes en gris, sauf les Gros titres en une couleur (fraiche). Aidez-vous du site en lien ci-dessus, mais avec votre style. Ça suffit.

• Repositionnez vos blocs et vos paragraphes. Là dans les 4 coins c'est très laid et ça ne correspond pas aux coins réels de mon moniteur. J'ai l'impression d'arriver sur un site vintage optimisé pour les écrans d'il y a 15 ans, quand tout le monde avait le même.
Centrez vos paragraphes, sur fond blanc, typo sans serif en gris, bold couleur pour le titre (plus gros). Idem pour le menu (Programmation, Le blog, Illustration… ). Tout sur une ligne. Là autour de la fleur arc en ciel, ça fait trop site de Madame Irma, programmation/voyance sur fleur de lotus en 1995.

Plus sérieusement, il faut MODERNISEZ tout ça !!

• Pas de texte qui touche le bord de l'écran ou presque. Ne placez rien dans les coins, surtout avec toute cette place, composez votre mise en page, un site centré correspondrait bien à ce que vous avez initié.

• Les couleurs du lotus, pourraient être simplifiées et rafraichies, par exemple sur un site de fond blanc, vous pourriez ne choisir qu'une couleur en aplat pour vos titre et la fleur (Un bleu, un orange ??). La fleur en une couleur unie, sans effet néon ultra daté. Et quand je passe sur un pétale, une couleur thématique apparait. Tout le reste dans le même gris (textes…).
Là, entre la fleur, les textes bariolés, c'est juste une cacophonie de couleurs. C'est d'autant plus gênant qu'il est mentionné que vous êtes illustratrice et même designer…


Je clique au hasard sur un menu : Le jeu de loti. Et là j'ai des blocs superposés avec des cadres en couleur qui s'affichent d'une façon trop space. C'est quoi cet effet de bloc qui bouge avec le texte qui se met dedans ?? À oublier direct.
Les cadres ne servent à rien, ce sont des béquilles pour compenser une mise en page inexistante. Même si la fenêtre d'affichage est étroite, vos blocs textes ne doivent surtout pas se superposer, ça casse la mise en page. Vos blocs ne doivent pas bouger, surtout pour se caler comme ça sur la gauche.
Vos pictos sont très vintage, mais très cools.

• Pas de couleur pour les textes de paragraphes, surtout que ces couleurs ne correspondent pas à celles de la fleur. Là encore c'est too much. Gris sur blanc, avec seulement le titre dans la couleur du thème (éviter de mettre "présentation" qui n'est pas un titre). Trop d'effet tue l'effet, et là vous en faites des tonnes. Rien que les menus fluos sur la gauche… Effet contre productif garanti.

Ne soulignez pas vos liens, surtout dans les paragraphes. Jouez la "typo" (en typographie un texte souligné est une faute). Si votre texte est en gris, il suffit de mettre les liens en couleur, éventuellement en gras (pas de couleur fluo, inspirez vous de mon lien plus haut). Inutile de faire plus.


En fait, votre sitre demande juste d'être simplifié, de par sa composition (centrée), ses couleurs (clarté, sobriété, fraîcheur), sa typo (sans serif, moderne), et modernisé (pas de cadres, pas d'effet néon, pas de papier peint tristouille), pas d'effets kitsch (blocs des paragraphes qui s'affichent progressivement, pas d'effet néon… ).

Simplicité, élégance, modernité, efficacité. Même vos pictos vintage en sortiront modernisés.


Voilà pour moi. C'étais long, mais je pense que c'est vraiment nécessaire. Quand je suis sur votre site, je suis sur le site d'une voyante, en 1995. Pas dans le sens "vintage" ou second degré. Manque la mention "Optimisé pour Internet Explorer" et l'illusion serait totale. Très nombreux seront ceux qui vont en rester à cette impression négative et tourner les talons, sans même chercher à savoir quelles sont vos compétences. Ce qui serait dommage.

En attendant la suite ?
Modifié par spongebrain (18 Jan 2014 - 14:09)

J'aime beaucoup votre avatar. Et si ce blanc/bleu devenait le code couleur de votre site ?