[Amateur ] Portfolio étudiant webdesigner et développeur web

Bonjour,

Je vous fais part de mon portfolio pour avoir vos critiques
www.fabienbourigault.fr


Merci pour vos retours

Il est bien évidemment adapté pour IE, mais sous ce navigateur vous n'aurez pas toutes les fonctionnalités.

Bon week end à tous !
Modifié par Fabien2 (26 Nov 2011 - 00:13)

Bonjour,

Le menu "mystery meat", c'est la pire des choses à avoir sur un site, plus encore quand il n'y a que ça en accueil.

Personnellement, je n'ai absolument pas envie de ma casser la tête à essayer de comprendre vers quoi mènent les liens, donc je n'irai pas plus loin sur le site. Comme la plupart de tes potentiels visiteurs...

idem : je n'apprécie pas vraiment.

Deux choses en particulier »

1.0 ) Le mixte des langues FR et EN : About, Work, Contact. Les infos en FR.
- L'écrire en FR modifie l'espace ? - n'est-ce pas ? ou peut être s'agit-il d'un template ?
2.0 ) L'animation n'a pas sa place dans la présentation de portfolio et/ou CV.
- En générale un employeur ou un client recherche la maturité, la responsabilité.

Inutile de marquer « ne cliquez pas sur le Logo ».
Ce n'est pas un lieu de divertissement, mais un lieu de présentation.

Faut rester classique dans la présentation d'un CV avec un accès directe, sans masque. Sans détour.

..
Modifié par zardoz (26 Nov 2011 - 01:30)

Salut salut,

Moi je ne suis pas d'accord avec ce qu'il a été dit plus haut. Je parle souvent de suscité l’intérêt dans une interface web. Là je pense que c'est ce que tu as fais.

Quand j'arrive sur le spashscreen je vois cinq cercles avec un plus gros que les autres, inévitablement ça me pousse à l'intéraction, mais que font donc ces cercles ? Le gros ne fait rien et les autres me donne un mot qui m'indique vers quoi je vais me retrouver si je clique dessus.

Mais quelques remarques sur cette page :

Tu as opté pour des bordures différentes pour les cinq cercles, seulement ce choix graphique n'est pas bien représenté quand aucun élément n'est survolé car les deux cercles qui se trouve de part et d'autre du logo ont un bord rouge (du au gris en opacité réduite qui vient dessus). C'est seulement quand on survol qu'on voit qu'il y en a un qui est rouge et l'autre rose. Détail vas tu me dire mais bon je tenais à te le dire vu que ça m'a sauté aux yeux.

C'est bien que le logo soit plus grand que le reste ça le différencie on comprend vite que lui n'est pas cliquable.

Ce qui aurait été bien c'est que les images de tes cercles soit plus cohérentes entre elles.

Cependant comme mes camarades je suis plus mitigé pour la phrase « Ne cliquer pas sur le logo ».

Par contre une fois qu'on rentre dans le sites là on remarque directement tes lacunes au niveau du code. Sur la page « A propos » par exemple moi je vois quatre titres, dans ton code ils n'y en a aucun. En fait l'ensemble de ton site ne possède aucune sémantique, aucune liste, aucun titre. Je pense que c'est à revoir au plus vite ça. Tu as aussi des problèmes de positionnement et ça rend le tout un peu brouillon.

Toujours sur la page « A propos », tu as quatre conteneurs où tu as essayé de mettre le contenu au centre (pourquoi ? ça casse la grille). En fait tu as ton titre aligné d'une certaine façon, le contenu d'une autre et le texte d'encore une autre (« passées à DESIGNER et à DEVELOPPER ! » positionné par rapport à quoi ?). Cette page aurait pu être belle mais il y a trop de soucis à ce niveau là.

Une chose qui fait encore brouillon aussi c'est au survol de ton graphique double casquette, tu as un sprites mais mal positionner donc l'image bouge un peu au survol, de plus tu as mis un div vide pour mettre cette image, tu renforces encore plus ton manque de sémantique.

Dans la partie C.V. chez moi ça bug (ce problème vient du fait que tu as mis un height fixe à ton élément, sur firefox mac ça pose des problèmes (merci Felipe))



Pour les autres parties, toujours des problèmes de positionnement, rien n'est cohérent. Je te conseil vivement d'utilisé Firebug tu pourras ainsi te rendre un peu mieux compte.

Par contre ce que je pense c'est que le logo n'a plus rien à faire (à partir du moment où on est entré dans le site) dans le menu. Ça perturbe plus qu'autre chose, et vu que tes pages sont plutôt vides il y a d'autre moyen de l'intégrer de façon original et peut être plus subtil ?

Plus généralement ta meta description et ta balise title devrait être différente sur chacune des pages (référencement).

Dans ta balise title tu as | et • c'est plutôt bof pour un lecteur vocal. Oui il n'y a pas beaucoup de lecteurs vocaux qui viendront voir ton site je sais, mais moi si j'étais recruteur c'est le genre de chose que je regarderai pour voir si tu es conscient de ce genre de détail.

Ah et je viens de voir que tu n'avais qu'une seule balise de titre sur tes pages, c'est sur ton splashscreen et c'est des h3. Soit tu ne sais pas qu'il faut logiquement commencé par un h1 soit tu as bêtement copié collé le code.

En espérant t'avoir fourni quelques pistes ...

Laurie-Anne a écrit :
je n'irai pas plus loin sur le site. Comme la plupart de tes potentiels visiteurs...

Et samedi prochain il fera quel temps?

En revanche, mis à part cette fin improbable (même si ne pas pousser la visite se comprend), ce qui a été dit est très juste, qu'est ce que c'est que cette page d'accueil? L'idée de mettre un logo avec la mention "ne cliquez pas sur le logo", c'est farfelu et plutôt absurde, autant ne pas le mettre. Y a rien de plus frustrant qu'un site où on te dit, j'ai cela mais tu peux pas l'utiliser.
En revanche si on pousse la visite c'est pas si mauvais hormis l'alternance de formes carrées et circulaires, ce n'est pas très logique.

J'aime bien les sites en mouvements et les effets js sont certes classiques mais efficaces.
La partie "about" est très originale et elle accroche, on la retient après la visite, c'est un bon point, félicitations, mais elle a le défaut de ses qualités, par exemple, elle ne comporte pas ton nom, moi j'aime les sites qui sont pensés "en dehors de la boîte" mais je crois que tu te dois de respecter certains codes du web pour ne pas perdre tes visiteurs en route. Et puis "double casquette" ne sonne pas pro du tout, mettre plutôt "double profil" surtout que ton illustration n'est même pas une casquette.

La partie CV est à revoir je pense, c'est quand même le premier portfolio sans coordonnées c'est très embêtant même s'il y a les réseaux sociaux. La partie expérience est assez mince, notamment "stage de 2 semaines" ce n'est pas vendeur. Le teaser pour le PDF, c'est pas top, autant ne pas le mettre et écrire une phrase du genre "une version PDF sera très prochainement mise en ligne". A noter, que si le PDF reprend le contenus de la page, le délai pour l'uploader ne se justifie pas.

Partie contact:

Les couleurs de hover sur tes inputs et textarea ne se marient pas bien entre elles. Le fond du formulaire tranche avec le reste du design, il est beaucoup moins soigné (du chiffonné avec des formes géométriques c'est pas raccord).


Quelques modeste remarques sur le code comme tu es aussi webdeveloper:

- Les target_blank sur les liens vers les réseaux sont à proscrire je pense, enfin personnellement les sites qui pratiquent cela me rebutent totalement. J'aime bien décider de la manière dont je navigue.

- tu as un charset UTF-8 alors pourquoi utiliser les é and co?

- ton formulaire est une passoire, c'est normal? En l'état c'est moyen. Je peux t'envoyer n'importe quoi, autant de fois que je veux, à la fréquence que je veux. C'est pas vendeur pour un wedeveloper parce que l'on se dit "il ne sait pas gérer cela" ce qui est sûrement faux d'ailleurs, enfin je te le souhaite en tout cas.

- la remarque sur la balise <title> est essentielle pour ton référencement en effet.


Conclusion de ce pavé que je t'ai pondu : c'est vraiment pas un produit fini pour le profil que tu mets en avant (webdesigner/wedevelopper), les réalisations sont trop peu nombreuses pour pouvoir jauger tes capacités, mais je pense que tu es amené à alimenter tout cela rapidement non?


Dernier point: la plupart du temps je suis soit sous chrome soit sous firefox soit sur opera mobile, je ne vois pas en quoi j'ai des "fonctionnalités" supplémentaires. Tu voulais parler d'effets?

Bon courage à toi pour préciser cette ébauche.
Modifié par jmlapam (27 Nov 2011 - 05:06)

Salutation @tous

Gili a écrit :
Cependant comme mes camarades je suis plus mitigé pour la phrase « Ne cliquer pas sur le logo ».

Eh oui, et entièrement d'accord. D'ailleurs le sujet restera intéressant (Question maturité : que j'ai développer plus haut). Et que je crois être essentielle tout d'même.

Ma première approche lorsque c'est la zone de critique se fonde uniquement sur l'utilisation première du site en question. Dont le sujet est bien le portfolio, et souvent un CV intégrer. Mais deux sujets sérieux en même temps. Nous prenons tous une décision (de poursuivre ou pas), dès la première approche.

J'ai omis volontairement les qualités. Car il y a qualité aussi. Seulement ma première approche me laisse douteux sur l'exécution des « fades ». D'autant plus qu'elle traite directement avec la navigation, un des éléments les plus focuscé lorsqu'on parle d'ergonomie. Cette partie est complètement hors sujet. De même pour le Logo (L upperCase), qui joue un rôle de divertissement, aussi hors sujet. Je n'ai pas intérêt à cliquer une deuxième fois. J'ai vu le script s'exécuter. Je le comprend.

C'est pourquoi on ne retient que l'essentielle. Le grand intérêt des portfolios et des CV, est leur possibilité d'exploration avec des éléments simples (HTML et CSS) seulement. Uniquement via les bases.

Dans un portfolio il faut absolument éviter le divertissement, ou toutes techniques orientées banales. Ne pas perdre de vu le seul but du projet : la présentation et l'aisance dans l'utilisation (bref le confort). Seul HTML et CSS pourrons le permettre.

Si vous désirez implémenter une animation : veuillez d'abord en maîtrisé la technique.
Tant et aussi longtemps que JQuery ne gèrera pas les ressources, ou ne participera pas à l'ensemble des éléments de composition, je ne le verrai pas comme une technologie de pointe.

Défauts techniques et défauts de décissions.

1 ) Animation trop longue dans la durée. Animation en entrer sacadé. Ça force, aucune fluidité.
2 ) Pas sûr de l'intérêt ou plutôt de la justification d'une animation attachée à la navigation. De plus ce n'est pas vraiment explicite en accueil. Un mot (work), une rubrique.

Je n'ai rien contre l'animation. Je dis seulement qu'il faut connaître le sujet de l'animation avant de l'intégrer. Et crois moi, le sujet d'intégration d'animation est large. Très large.

Ce qui pourrait être intéressant pour ceux et celles qui veullent à tout prix montrer des animations ou des ( divertissements ? ), serait de les centralisés sous rubrique, mais de grâce ne jamais obliger un visiteur de passer par là. Une simple invitation en page d'accueil suffira.

PS : Je reprend un point que j'ai mal exprimer à propos de l'animation. Elle n'est pas intégrer cette animation. Il s'agit tout simplement d'une couche supplémentaire accrocher à la navigation. Toutefois elle ne joue pas de rôle sur le volet de droite (ni même sur la navigation). Fait juste désactivé JQuery « /* */ » et tu retrouve le vrai. Une navigation qui répond au clique avec chargement rapide des données (texte et/ou image). C'est l'animation qui retarde.

Le volet de droite est complètement charger et afficher, que l'animation poursuit encore son cours. Son exécution n'est pas terminer. Ce qui laisse un goût désagréable. Ce qui laisse entrevoir deux Timelines. Une pour le volet de droite (il y a forcément une Timeline parce qu'il y a une durée d'exécution), et une pour l'animation (non pas la navigation puisque l'animation est une couche sans intégration). L'animation ne gère ni la navigation ni le chargement des données et l'affichage de celles-ci. On est loin de Flash.

Une écriture perso en javascript ferait mieux. Car le but d'une intégration d'animation est au minimum de gérer une seule et unique Timeline au travers laquelle navigation, chargement des données, affichage et animation seraient complémentaire. Volet de gauche comme de droite.

Malheureusement l'animation JQuery profite d'un espace isolé du reste et n'entretient nullement de rapports harmonieux entre les deux volets principaux (l'animation n'est qu'un vulgaire prétexte, un vulgaire divertissement). L'animation ne joue aucun rôle technique. C'est impensable en Flash.

Le chargement des données et l'affichage devraient se faire à un point temporelle précis sur la Timeline (et entièrement gérer par JQuery ou javascript). Il ne s'agit pas uniquement d'animation isoler selon une durée. Celle-ci devrait jouer un rôle décisionnel sur le chargement des données et l'affichage, quelque part sur cette Timeline (quelque part dans la durée). Alors là seulement nous parlerons d'intégration. En dehors de quoi l'animation n'est que pure fantaisie.

Ce pseudo-code délègue une tâche spécifique (affichage des données) à un objet d'animation
» si (tempsExécution >= duréeTotale) afficheDonnées ();

Ici nous faisons de l'objet d'animation un objet de participation. Il peut gérer l'entrer d'affichage des données à un moment précis de sa Timeline, de sa durée. Rien de mieux que la délégation des tâches (à un objet d'animation) pour l'intégrer en tant que participant.

..
Modifié par zardoz (27 Nov 2011 - 22:05)

Fabien ce topic sert à débattre de ton site, il est toujours intéressent d'en débattre à plusieurs d'ailleurs. C'est pourquoi je répond à ton message privé ici :

C'est ok ! ^^

Tu te sauve ou quoi (fabien.quelquechose ) ?

On partage tout simplement entre-nous.
En tant qu'auteur du topic puisses-tu rendre la réplique svp ? - ne serais-ce qu'un réactif de ta part.

Un bouton cliquer, ne réagit-il pas toujours ?

[pensée du jour]

Ce que j'aime de la fôte d'ortho est sa capacité d'adaptation dans tous les contextes possibles. Et sans perte idéologique, sans perte réceptive. Honneur à la fôte d'ortho, une fois l'an.

Parce que nous écrivons un fichier en octets (bits), et que nous manipulons ce fichier avec élégance, nous sommes en taille de légerté sécuriser des transferts de données. Tout près des langages machines.

[/pensée du jour]
Modifié par zardoz (01 Dec 2011 - 21:23)

Effectivement, je m'excuse pour ma non-réactivité ...
J'avais oublié de revenir sur ce topic, et les mails pour me prévenir des réponses sur ce topic arrivent sur mon adresse remplir de spam ...

J'ai lu attentivement toutes vos critiques, et ai corrigé certains points (logo cliquable avec la phrase sur la page d'accueil, amélioration du code, ...).
Je suis toujours en train d'améliorer mon code

Sinon, sur certains points, je ne partagent pas votre avis ...
Je vais essayer de vous répondre sur ces points, et vous expliquer ma position.

- Menu "mystery meat" :
Mon portfolio ne présentant que quelques pages, je ne pense pas que la navigation soit très compliquée à comprendre. D'autre part, étant donné qu'il s'agit d'un portfolio, je pense qu'un brin d'originalité n'est pas à exclure.

- Mixe FR/EN
Effectivement, j'ai fais le choix de mettre les noms des menus en anglais, pour un gain de place. "Work" étant plus court que "Réalisations / Travail / Projets ...".
Peut être que cela n'est pas très judicieux, mais dans le cas d'un portfolio, je ne pense pas que ce soit très pénalisant. Ce site ne s'adressera pas à des particuliers, mais plutôt à des boites.

Je finis de corriger tout cela, et vous tient au courant très prochainement

Merci Fabien.2

Je suis content de ton retour subitement comme ça et sans influnence extérieur : librement j'imagine !

Prend le temps qui t'es nécessaire svp, pas de presse ici.
Je sais seulement que j'ai été dur envers toi. Je le reconnais, j'avoue.

Seulement je tiens particulièrement à cet objet d'animation. Car celui-ci peut gérer le temps. Par le fait même il peut gérer le moment exacte de l'exécution de toutes les tâches qui lui seront confiées, souvent une fonction de rappel exécutée n'importe où dans la durée.

Merveilleuse écriture de script orientée Timeline. Simple et accèssible d'approche.

PS : j'irai voir ta nouvelle version. Je te donnerai des news sur le sujet. Soit dit en passant je réserve tes qualités pour un autre jour.

Les qualités déjà acquises ne participent pas à l'élévation perso dû fait qu'elles sont prononcées par la communauté. Elles sont innées tout simplement.

Bon d'ac elles participent mais en secret. Les qualités sont toujours naturelles en soi et facile d'accès.

Ok c'est le week-end, le fameux vendredÿ, les 2 minutes du peuple.

À lundÿ ++

..
Modifié par zardoz (02 Dec 2011 - 03:39)

Fabien2 a écrit :
...
Ce site ne s'adressera pas à des particuliers, mais plutôt à des boites.
...

À des boites ?
Alors soit sérieux dans la structuration de ton portfolio. Soit mature. N'intègre pas l'inutile à ton portfolio. N'intègre surtout pas un élément que tu ne contrôle pas via les scripts.

L'intérêt de base dans le développement de portfolio et de CV restera toujours HTML et CSS qui à mon avis donne l'essentiel en présentation (propre) et l'accès rapide à toutes les informations simples.

..
Modifié par zardoz (02 Dec 2011 - 03:56)

La par contre, je ne partage pas ton avis ... Mais on peut en débattre

Pour moi, étant donné que c'est un milieu "créatif", je n'avais pas envie de faire qqch de trop "classique".
Quand on voit certains sites d'agences de comm', ou bien de portfolio de professionnels on n'est pas du tout dans le classique ^^

Ok on peut en débattre.

Laisse grandir ton projet et nous y reviendrons plus tard.
Comprenons que le HTML et CSS n'empêchera pas une présentation perso de qualité et innovateur.

C'est la toute puissance du HTML que de représenter toutes griffes, comme toutes signatures.

Nous pouvons qualifié un portfolio comme une approche d'élément statique plus que dynamique, et déjà porteur de contenu dont les mises à jours sont relativement restreintes.

Ce en quoi le portfolio restera simple. Le reste n'est que superflu.
Le portfolio est un système d'ajout ou de supression d'informations sur un ou des sujets précis.

Le portfolio est un objet que nous abandonnons en cours de route. Chemin faisant nous le remplacons par notre expérience, par notre façon d'être. Le portfolio n'aura qu'une durée de vie relativement courte.

..
Modifié par zardoz (02 Dec 2011 - 08:05)