[Amateur] Site de présentation Développeur Web Débutant

Bonjour à tous

Je viens de découvrir ce forum "Critique de site" et je cherche à avoir des critiques constructives.
Je viens de terminer une formation au CNAM de Nancy intitulée "Développement Web" et suis à la recherche d'un stage ou d'un emploi.

J'ai donc créer un site afin de montrer un peu mes compétences.

J'ai posté ce site sur facebook pour avoir quelques retours, mais mes amis n'en on à priori rien à f**tre (Ha, les amis virtuels...).

Donc si des pros peuvent me donner leur avis, je suis preneur.

Le point le plus important pour moi c'est :
- L'affichage (est il correct sur tous les postes)
- La navigation (est-elle claire pour tout le monde)

N'hésitez donc pas à critiquez tout ce que vous trouvez bizarre, étrange moche, etc... mais aussi ce qui est bien (ça fait toujours plaisir). Vous pouvez y aller, je suis solide...

LIEN DU SITE: www.paricilestage.eu

Merci d'avance
Modifié par kayoo (09 May 2015 - 09:20)

Bonjour et bienvenue !

J'ai été un peu surpris de découvrir votre site sur mac, car pour moi vous avez conçu un design optimisé uniquement pour mobile. Et encore…
Les 4 grandes bandes blanches sur fond gris foncé + 1 rond photo… c'est quand même très raide sur moniteur. De plus elles ne fonctionne pas bien, il faut aller cliquer sur la flèche de droite pour déployer l'affichage. Ça s'engage difficilement.
À minima, afficher une rubrique par défaut pour éviter cette impression de vide. Et soigner la présentation.
Ceci dit, ça reste propre et clair, ce qui est un bon point.

Le fond mosaïque coloré (bleu, vert… ) est flou.

Prénom suivi du nom, on est plus au collège. De préférence pas inclus dans une bande, pour décloisonner.
Le lien de contact pourrait afficher un formulaire déroulant, là je n'ose cliquer car ça va me lancer mon soft d'email. Et à la fin.

Pas de texte d'intro, d'à propos, le portfolio est encore scolaire, y compris dans sa présentation (à enrichir lors d'un stage ?). Pour un débutant, il est important de mentionner les logiciels utilisés, voir le niveau.
Autant pour moi, c'est juste en dessous dans compétences. Là pour le coup, résumer vos acquis par de simples thermomètres est assez réducteur. On a l'impression de lire les spécifications techniques d'une machine, sans argument ni autre info. Et ces graphiques, bien que très gros, font vide présentés ainsi. Les couleurs de ce site sont globalement trop dures et agressives. En partie à cause de ce fond gris foncé d'une autre époque (travaillé de la sorte). Pour les couleurs, c'est très raide et direct sorti du tube RVB.
Vous pouvez vous aider des multiples nuanciers et des guides tendances sur le web. Par exemple, la gamme Material (google), bien que vive, reste acidulée et fraiche :
http://www.materialui.co/colors
Vous avez aussi des outils comme :
http://coolors.co/
https://color.adobe.com/fr/
…

Il manque les accents sur les capitales (sans c'est une faute) : LE BRIGAND TUE / LE BRIGAND TUÉ
Votre texte aussi est assez raide et brut de décoffrage. Vous pourriez plutôt parler de projet. Pour la période "avant reconversion" parler de "parcours" en précisant à la fin une reconversion, tout en valorisant vos acquis. Pour une recherche de stage ça peut passer ?

Je suis graphiste et le code n'est pas mon fort, mais le HTML semble assez propre et bien indenté. Par contre nommer les blocs "SLIDE 3-3 VERTICALE" n'est pas forcément ultra clair…

Voilou pour moi.


EDIT : Oups, au moment de fermer votre page, un clic et je me retrouve sur la version mac/pc. Jusqu'à présent, je n'avais que la version mobile qui s'affichait sur mon moniteur.
Je laisse cependant ma critique précédente qui reste valable pour de nombreux points, même si là pour le coup, ça passe beaucoup mieux sur PC. Attention cependant aux tritres écrits en énorme, la police de caractère assez molle en grand passe mal. Pour ça il faudrait quelque chose de plus design, élégant, light… ou moins gros.
Très bien le pavé de navigation et les effets de parallaxe bien intégrés. Hormis les titre tout collés à gauche et trop gros et certains points mentionnés pour la version mobile, ce site est plutôt sympa.
L'accueil avec juste cette photo sur ce gris assez dur reste cependant brut de décoffrage, voir mon commentaire précédent.

La question, c'est pourquoi en affichant votre site sur un grand écran mac (chrome) la première fois, je me suis retrouvé avec la version mobile ? C'est assez embêtant si ça arrive à d'autres personnes qui auront une expérience dégradée de ce site. Surtout qu'en bougant la fenêtre (largeur) ça n'a pas d'impact sur la version, actuellement en train de mettre à jour ?
Modifié par spongebrain (11 May 2015 - 06:01)

Bonjour spongebrain

Tout d'abord, un grand merci pour votre réponse. En effet elle fait un peu mal aux dents mais c'est le but de l'exercice. Toutes vos remarques sont fondées, percutantes et totalement vraies.

Je ne sais pas pourquoi le site s'est afficher en version mobile à la première ouverture??? Il faut que je creuse la question. J'ai très peu de connaissance en Javascript, mon code pour gérer le passage de la version web à mobile est très sommaire, la preuve:

if (document.body){ var larg = (document.body.clientWidth); }
else{	 var larg = (window.innerWidth); }
if( larg <1130){	document.location.href="index_mobile.html"; }

Je dois l'améliorer d'urgence.

La version mobile n'est pas celle que j'ai développée en premier, je l'ai laissée un peu à l'abandon et fais quelque chose pour sauver les meubles, il faut donc que je la refonte totalement:

- AFFICHAGE: je vais créer la version mobile/tablette avec Bootstrap pour avoir une version tablette plus large et agencé différemment que la version mobile.

- DESIGN: à revoir entièrement (fonds, couleurs, boutons, menu etc...)

- CONTACT: formulaire en bas de page + infos persos

- CONTENU: texte d'intro, développer un peu plus, corriger les accents

Pour la version web j'ai une question: avez vous vu que l'on pouvait se déplacer latéralement? Je ne sais pas si c'est assez voyant. Dans le cas où vous ne l'auriez pas vu, est-ce bien nécessaire ce type de navigation? (j'aime bien le principe quand même).

Sinon il faut: arranger les titres, développer un peu plus le contenu, ajouter un formulaire de contact, revoir la première page et ajouter un menu d'ancres peut-être.

Je dois aussi et surtout trouver on code Javascript pour gérer la modification de taille de fenêtre qui pose un sérieux problème.

Quand je me lancerai dans toutes ces modifs, je relirai tranquillement votre post et prendrai le maximum en considération.
Encore merci pour votre avis, je suis heureux que quelqu'un ai pris la peine d'aller regarder mon travail. Je m'attendais pas à avoir une réponse aussi claire et fournie, ça va réellement m'aider.

Attention, je peux me tromper et dire des bêtises. Le fait d'avoir découvert le site en version mobile sur un moniteur de bureau n'a pas aidé. La version bureau a des qualités et la version mobile se défend mieux sur mobile.
Les goûts et les couleurs ne font pas toujours consensus. Une couleur de fond n'aura pas le même impact en fonction des couleurs d'accompagnement, tout est question de dosage et d'harmonie…

Au registre des bugs, je note sur mon iPad que la police de caractère n'est pas prise en compte. Résultat, tout s'affiche en Times !

Pour le parcours, la forme antéchronologique en mettant le paquet sur vos derniers acquis peut être payante.

En effet, des règles trop simplistes pour choisir les CSS peuvent produire de mauvaises surprises, en appliquant les CSS mobiles sur grand écran (si la fenêtre n'est pas étirée sur tout l'écran…). Avec l'explosion des résolutions et des formats, c'est devenu complexe. Certains appareils mobiles ont des résolutions supérieures aux PC et la frontière entre écrans mobiles et PC est assez floue. Peut-être se référer au viewport pour plus de fiabilité ? J'ai trouvé ça chez Alsa :
http://www.alsacreations.com/article/lire/930-css3-media-queries.html
http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html
Difficile de trouver la formule magique…
D'autres infos sur les media queries ? Je suis aussi preneur
Modifié par spongebrain (11 May 2015 - 05:58)

Bonjour.

Je jette un œil sur ton site sur PC Windows.

À première vue ça va, mais...

Un formulaire de contact est plus approprié qu'un simple mailto, qui oblige à ouvrir un client de messagerie ou à un copier-coller de l'adresse dans une messagerie web. Fastidieux. Et il y a les risques de spam pour toi avec un mailto.

NAVIGATION
Pour naviger, utilisez les flèches
sur le bord droit

>

NAVIGATION
Pour naviguer, utilisez les flèches
sur le bord droit


Si un système de navigation doit être expliqué aux utilisateurs, c'est un échec (cf. La fameuse phrase de Jakob Nielsen, Zero learnng time or die). Soit ton système de navigation est évident, soit il ne l'est pas, et dans ce cas, il est à revoir.

Une manière de visibiliser davantage ton système de navigation pourrait être d'augmenter ses dimensions et de le décoller un peu du bord droit de la page, enfin, c'est juste une idée comme ça. Faut voir ce que ça donne sur smartphone.

Une autre idée pour mieux identifier ton menu pourrait être de l'afficher au complet dans toutes sections de page avec des flèches en grisé là où elles ne sont pas fonctionnelles.

CNAM et LLLC

Tes visiteurs ne connaissent pas nécessairement la signification de ces acronymes. Dans ce cas, il serait peu-être nécessaire d'y associer leur nom complet.

Côté compétences, je n'ai jamais été fan d'indiquer le pourcentage de connaissance d'un logiciel ou d'un langage, primo parce qu'un visiteur employeur ou potentiel client peut décider, en voyant tes 25% de connaissances en JS ou en jQuery que tu n'es pas suffisamment compétent, alors que le problème ne se poserait pas si tu ne faisais que citer ces langages ou outils, et secundo, parce que je ne vois pas comment on peut évaluer son degré de connaissance et de méconnaissance d'un logiciel et d'un langage. À titre personnel, je pratique Photoshop, mais je serais bien incapable de définir mon degré de connaissance du logiciel au delà du fait que je ne suis absolument pas un maître en la matière.

Et aprés?

Double faute. C'est Et après ?, avec un espace avant le point d'interrogation (idem pour les point d'exclamation, deux-points et point-virgule). En bonne typo, il faudrait une espace fine, mais ce caractère n'est généralement pas dispo dans les polices, en tout cas pas dans celles que j'utilise.

Sinon, mêmes remarques que Spongebrain sur les majuscules non accentuées.

Front-End

Notion de Responsive Design > Notions de Responsive Design
Adobe Indesign > Adobe InDesign

De manière générale, éviter les points de suspension ou les etc. en fin de listes énumératives. Cela laisse à penser qu'on est incapable de définir ses compétences, mas bon, dans ton cas précis, c'est peut-être nécessaire.

Projets réalisés

Création d'un mini-site d'importation et
recherche d'images, avec personnalisation
du thème(CSS contenant du PHP) et file d'actualité.
Essayez le en créant un compte
(sans confirmation, trés rapide)
Cliquez su l'image

>

Création d'un mini site d'importation et
de recherche d'images, avec personnalisation
du thème (CSS contenant du PHP) et file d'actualité.
Essayez-le en créant un compte
(sans confirmation, très rapide)
Cliquez sur l'image

Projet Flash:
Une lampe qui change de couleur
Essayez la ci dessous

>

Projet Flash:
Une lampe qui change de couleur
Essayez-la ci-dessous

Enfin, et c'est un avis strictement personnel, je ne suis pas fan de ton système de navigation vertical ET horizontal. J'ai l'impression que des visiteurs pourraient passer à côté de l'horizontal.

C'est tout pour le moment, bonne continuation.
Modifié par thierry (11 May 2015 - 11:29)

thierry a écrit :
Enfin, et c'est un avis strictement personnel, je ne suis pas fan de ton système de navigation vertical ET horizontal. J'ai l'impression que des visiteurs pourraient passer à côté de l'horizontal.

C'est en lisant ceci que je découvre la navigation horizontale. En navigant rapidement sur le site, je suis passé à côté.
Je trouve l'idée excellente (je suis curieux de savoir comment vous avez fait), mais il faudrait trouver un système pour inciter l'internaute à cliquer. Peut-être par un effet visuel, une animation, un texte ? Il ne manque pas grand chose.
Au pire à supprimer, mais ça serait dommage car ça fonctionne bien et c'est très cohérent dans la navigation générale. Il y a une véritable réflexion de fond et ça peut faire toute la différence avec un site standard. De plus, ça met en valeur votre capacité à mettre au point des solutions complexes et modernes. Reste à les rendre ergonomiques et visibles.

Rebonjour.

Je m'auto-cite :

"Enfin, et c'est un avis strictement personnel, je ne suis pas fan de ton système de navigation vertical ET horizontal."

J'aurais dû ajouter tel qu'il est actuellement, voir mes modestes réflexions dans mon post précédent pour améliorer l'identifiabilité et la visibilité de ton système de nav.

Quelque chose plus dans ce goût-là, sur tous les écrans de ton site ?



Bonne continuation.
Modifié par thierry (11 May 2015 - 15:37)

Bonjour Spongebrain et bonjour thierry,

Merci pour vos conseils et vos remarques. En ce moment je manque un peu de temps (travail alimentaire en usine ultra crevant). Dès que j'ai du temps je vais m'atteler à ces modifications.

Thierry, j'aime ton commentaire "Zero learnng time or die", je crois que ça résume très bien ma navigation. Je dois encore réfléchir sur la manière de la présenter, mais les pistes que tu donnes sont pas mal. Merci d'avoir pris le temps de faire une image.
Je vais tester un petit gif pour la première flèche qui indique le bas et la première qui indique la droite; et un petit menu visible en permanence (c'est dommage, j'en avais mis un au début). A voir...

Pour le pourcentage précisant mes connaissances dans un langage, j'ai longuement hésité. Comme toi je pense qu'il est très difficile d'évaluer son niveau. Mais je vais faire un petit parallèle avec le mot "langage": nous parlons français mais on ne peux pas dire que nous le parlons à 100%, il y a du vocabulaire que nous ignorons, des conjugaisons de verbe que nous utilisons rarement voir jamais, des fautes d'orthographes et de syntaxe. Avec les langages informatiques il en est de même. Je pense qu'on peux juger l'aptitude à se servir d'un langage, la compréhension de sa structure, sa manière de fonctionner, autrement dit sa "conjugaison". Pour le vocabulaire et les cas particuliers, il y en a toujours à apprendre. Vois tu ce que je veux dire?

Sinon pour le reste je suis entièrement d'accord avec toi, et merci encore de souligner toutes ces anomalies. Ça a pas l'air comme ça, mais vous m'aidez beaucoup.

Merci Spongebrain pour votre dernier commentaire, il me redonne la pêche. Pour répondre à votre question, chaque "slide" est en 100% x 100%, et chaque "slide" de droite est décalée de left:100%; (la deuxième left:200%;) un peut de javascript pour gérer les déplacement (aller récupérer la position du slide de droite et un scroll vers cette position).

Je vous tiendrais au courant quand j'aurais finis les modifs du site.
Je le répéterai jamais assez: merci d'avoir pris de votre temps pour regarder mon travail.

A+

Graphiquement, c'est dans la tendance des sites actuels, c'est à dire pauvre et inintéressant. Il s'agit également d'une belle démonstration de comment utiliser beaucoup d'espaces avec peu d'infos. Un site classique avec 2-3 pages aurait été largement mieux, là je n'ai absolument aucune envie de lire le contenu, mes yeux n'ont pas envie de faire 5km pour lire trois mots.

Au delà de ça, les animations sont très poussives, et "Et aprés?" ça fait mal tout de même ...