[Intermédiaire] Portfolio

Bonjour à tous,

J'aimerais avoir vos critiques constructives sur mon portfolio qui est enfin en ligne ici. Qu'en pensez-vous ? Design, intégration, optimisation ?

Pour informations, ce portfolio est destiné aux employeurs, alors que mon site netpom, lui, est destiné aux potentiels clients. D'où ce deuxième sujet d'ouvert.

A vos critiques !

Fanny

EDIT : Le CV n'est pas encore en ligne, c'est normal.
Modifié par fanny95 (07 Aug 2015 - 11:15)

Salut,

Je trouve que la partie haute du site est vraiment très grande pour le peu d'information qu'elle contient. Beaucoup d'espace entre l'horizontale du logo et le titre, beaucoup d'espace aussi entre le titre et la baseline. En revanche l'espace entre la baseline et le porfolio est bien et pourrait être augmentée.

Le logo fait un peu placardé dans cet encart, c'est un peu dommage. Visuellement il a moins d'impact que les 3 boutons ce qui fait qu'on l'occulte.

Du même ordre, la hiérarchie visuelle entre le logo et le titre est quasi similaire. Il faut faire un choix dans l'information à mettre en avant. Soit le logo soit le titre, pas les deux.

Vu que tu es sur du OnePage, je pense qu'il serait bien de séparer un peu plus les sections de la page. Si la séparation entre "Portfolio" et "A propos" se voit pas trop mal (en raison d'un faible contact du lien "voir plus de réalisations"), entre "A propos" et "Contact" c'est un peu collé.

Niveau contraste, je trouve le gris du texte un poil léger, il faudrait pas le contraster beaucoup mais un peu quand même.

Il manque un peu d'aération entre tes colonnes ("Qui suis-je ?" et "En quelques points" notamment), ce qui nuit à la perception des blocs de la mise en page.

Les liens du pied de page ne donnent pas des masses envie de lire, le soulignement pointillé est plus nuisible qu'utile. Ou dans un contraste bien moindre que celui du texte. Mais vu que tout est souligné, le soulignement manque d'utilité.

La partie Portfolio dépliée est très sympa même si une petite aération entre les lignes serait bienvenue.

La zone contact est un peu fouillis, beaucoup d'éléments disparates. Icones roses ou grise (?). Plan réellement utile, est-ce que le nom de la ville avec l'adresse ne serait pas plus lisible ?

J'accroche pas sur le "retour en haut", je ne sais si c'est la taille ou la couleur.

Globalement pour résumer. Manque de structure et de hiérarchie visuelle plus forte, et d'aération.

Coucou Mikachu,

Tout d'abord, merci pour ces remarques constructives.

Sur chaque maquette, j'essaye d'avoir une certaine bonne organisation dans les textes et les images. Cette fois-ci, j'ai voulu essayer et respecter les "grilles" : colonnes de 50px et marges de 20px pour ma part. Je trouvais que ça faisait aussi un peu étroit par moment. Mais j'ai tenté. Eh bien merci de m'avoir conforté dans cette idée ! La prochaine fois, je ferais ma maquette avec mes propres repères et dimensions.

Je suis tout à fait d'accord avec toi pour la couleur trop clair du texte, j'ai changé ça. C'est plus lisible à présent.

Concernant la couleur de mes titres, c'est la même que celle du logo pour garder une certaine harmonie. Je vais y réfléchir.

J'ai plus aéré l'ensemble, il est vrai que ça fait moins "surchargé".

J'hésite à enlever le plan de la rubrique Contact, car l'adresse sera déjà sur le CV. Je vais voir. M'étant fait usurpé mon identité, ça serait embêtant que la fille me retrouve.

Pour le retour en haut, moi c'est la flèche qui me gêne. Quant à la couleur, c'est l'effet pomme que j'utilise partout (puce qui sont dans la popup des réalisations).

Mikachu a écrit :
Salut,

Je trouve que la partie haute du site est vraiment très grande pour le peu d'information qu'elle contient.

Le logo fait un peu placardé dans cet encart, c'est un peu dommage. Visuellement il a moins d'impact que les 3 boutons ce qui fait qu'on l'occulte.

Salut, d'accord avec ces deux remarques. J'aime les couleurs que je trouve élégantes sauf pour le pied de page même si on y distingue bien toutes les informations. Pour le logo j'enlèverais juste le fond clair (logo en transparence).

J'aime la navigation et suis partisan des sites en une page unique. En revanche ta partie compétences n'est pas très claire, à l'image du "A propos" tout entier où l'on a l'impression que tu as voulu mettre un maximum d'informations mais comme le disait Mikachu du coup cela étouffe un peu.


Conclusion: Design soigné et couleurs bien assorties mais manque de tri dans l'information, surtout que lorsque l'on se rend sur le site normalement on est déjà à même de jauger ton niveau de compétences web. A ta place je laisserais le PDF simplement, avec les paragraphes "qui suis-je?" et "en quelques points" et je mettrais le paragraphe "au-delà du professionnel" comme partie à part entière. Chapeau pour la partie contact.

<<<EDIT
mince, j'ai regardé netpom et non pas ton portfolio.Ralala, la fatigue de la journée :s
EDIT;


Et l'eau Fanny,

Désolé si je vais être un peu dur mais c'est pour te faire avancer :

Oui mais non !

1. Fautes d'orthographe (les classiques -> cf ce post)
1bis. incohérence orthographique
2. Mise au point du texte partielle ou très mal élaborée (ex : gris typographique non homogène, paragraphe se terminant par un seul mot, blanc tournant quasi nul par endroit, etc.)
3. mise en avant timide à certains endroits (ex : Compétences & prestations -> d'accueil)
4. contraste peu élevé (ça dépend de la cible visée)
(La technologie a changé, pas le métier !)

5. liens cassés dans réalisations
6. factorisation du JS partiel
7. body onload est douteux selon moi, il doit bien y avoir un moyen de le virer et d'implémanter la fonction autrement
8. un layer pour IE6, c'est pas mal tout de même. Ca donne un élément plus crédible à la rigourosité de l'appli (ex : leroymerlin.fr ou laredoute.fr ou etc.).
9. Avis perso, je trouve que le bloc Facebook n'a pas sa place finalement. Est ce que les les agences web/freelance ont tendances à le faire ? Pourquoi ?
10. Autre avis perso, je ne vois pas l'intérêt du html5 bien que je sois d'accord de faire le pas dans la généralité.

Pour ce qui est de la charte en elle même, je ne peux pas te donner un avis objectif vu qu'en ce moment je travaille sur un dossier avec à peu près les mêmes couleurs. L'impression finale que j'aie, c'est que cette appli soit bâclée. Je ne pense pas que ce soit le cas.

bon courage pour la suite

site vu sur :
* Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.2.18) Gecko/20110628 Ubuntu/10.04 (lucid) Firefox/3.6.18
* chrome 12.0.742.112 (90304) Ubuntu 10.04
* Opera/9.80 (X11; Linux i686; U; fr) Presto/2.6.30 Version/10.63
Modifié par niuxe (04 Aug 2011 - 22:48)

niuxe a écrit :
&lt;&lt;&lt;EDIT
mince, j'ai regardé netpom et non pas ton portfolio.Ralala, la fatigue de la journée :s
EDIT;

Je me disais aussi, je ne comprenais pas trop tes critiques. Enfin cela dit, il y en a certaines voire beaucoup que je ne comprends pas (que j'ai pris en compte sur le site de netpom normal bien sur).

1. Faute d'orthographes, j'en ai vu 7 sur tout le site, et les plupart sont des fautes de frappe et non d'orthographe. Mais merci de l'info, comme ça je peux les rectifier.

2. Gris non homogène ? Paragraphe se terminant par un seul mot : du quel tu parles ? Blanc tournant quasi nul part endroit : ???

3. Où comprends tu ma timidité sur le site ?

4. Contraste élevé de quoi ?

5. De quels liens parles-tu ? Chez moi tout fonctionne sur les miniatures.

6. Pas comprit. Trop de fichiers JS ?

Sinon, tu peux toujours si tu as le temps et l'envie, me donner tes critiques sur le portfolio

Bonjour,

Pour ma part aucune réflexion sur la réalisation de ton portfolio, par contre une réflexion principale sur le contenu qui me semble manquer de précision.

En me mettant dans la peau d'un client potentiel je ne trouve nulle part la mention d'un SIRET, d'une raison sociale, d'un statut quelconque a même de facturer quoique que ce soit. Perso si j'ai à me prononcé sur le choix de prestataires (ça m'arrive dans mon boulot) je ne te retiendrais pas sur ce portfolio pour ces raisons.

Je te conseille (même sommairement) d'indiquer ton statut "a minima".

@Jmlapam

Merci pour tes critiques ! Hier je faisais mon Cv en reprenant le meme design que le portfolio et il est vrai que je me suis posée la question de ce que j'alais enlever ou pas du cv. Du coup sur le cv j'ai mis "compétences" et "en plus". Donc je pense enlever ces 2 parties du portfolio. Je laisserai donc "qui suis je" et "en quelques points" dans la rubrique "a propos".
Maintenant, la question que je me pose, c'est est ce que je laisse la partie "au delà du professionnel" sachant quelle est évidement sur mon cv ?!
Sinon pour le footer, qu'est ce qui te derange ? Le soulignement en pointilles ou le fond dégrade ?

@igor
Je donnerai l'adresse de mon portfolio a des employeurs chez qui je compte travailler en tant que salarié et non avec qui je vais collaborer en free-lance. Donc je ne vois pas l intérêt de mentionner mon numero de siret sur mon portfolio.
Par contre, je ne sais pas comment mentionner le fait que je ne suis plus en freelance sur mon cv. Je l'étais pendant un certain temps d'où la réalisation de mes projets. La je continu avec des projets personnels. Y a t il une grande différence si je rajoute ça ou pas ?

fanny95 a écrit :
Maintenant, la question que je me pose, c'est est ce que je laisse la partie &quot;au delà du professionnel&quot; sachant quelle est évidement sur mon cv ?!

Ne pas oublier que les visiteurs peuvent être feignant et ne prendront pas nécessairement la peine d'ouvrir un pdf. Donc si c'est important, l'info doit garder sa place dans le site.
C'est ma perception, mais je me dis qu'un CV est une pièce "à emporter" par le visiteur, s'il est potentiellement intéressé, il en garde une trace en le téléchargeant. Celui a qui suffit l'information préférera la trouver sur le site. Donc dans ce cas la redondance me semble plus utile que néfaste.

fanny95 a écrit :
@Jmlapam

Merci pour tes critiques ! Hier je faisais mon Cv en reprenant le meme design que le portfolio et il est vrai que je me suis posée la question de ce que j'alais enlever ou pas du cv. Du coup sur le cv j'ai mis &quot;compétences&quot; et &quot;en plus&quot;. Donc je pense enlever ces 2 parties du portfolio. Je laisserai donc &quot;qui suis je&quot; et &quot;en quelques points&quot; dans la rubrique &quot;a propos&quot;.
Maintenant, la question que je me pose, c'est est ce que je laisse la partie &quot;au delà du professionnel&quot; sachant quelle est évidement sur mon cv ?!
Sinon pour le footer, qu'est ce qui te derange ? Le soulignement en pointilles ou le fond dégrade ?

Salut,

Certains aiment bien remplir au maximum leurs pages mais je préfère l'inverse, je m'explique:
les visiteurs (autres que les amis) n'ont pas de temps à perdre, s'ils doivent chercher l'information trop longtemps, c'est mort, mais rassure-toi ici ce n'est pas le cas avec ton site. Néanmoins mon choix est de penser qu'il faut toujours maximiser ce que le visiteur va retenir après avoir quitter la page. Donc plus c'est concis, plus c'est retenu.


D'autre part, je pense qu'indiquer ses passions dans un portfolio est toujours bon surtout si on s'arrange pour y mettre un peu de pro, du genre "je suis passionné(e) par le webdesign", ce n'est pas qu'un gagne-pain.

Concernant le footer, la couleur est un peu sombre mais c'est peut-être l'effet recherché?
J'aurais plutôt mis un couleur claire, surtout que le design sur le reste du site est plutôt
"tout en dégradé". En général tu ne mets pas dans le footer l'essentiel de ton site mais je trouve que c'est pas très lisible, je ne sais pas si c'est la police ou le jeu des couleurs.

aH OUI réédit pour savoir ce que les points verts et roses signifient dans le paragraphe "compétences": c'est le niveau. Si c'est cela, je trouve pas cela top parce que même si le client comprend pas les termes, il se dit qu'il te manque des connaissances. En plus tu ne dis pas sur quel critères tu te bases pour t'auto-évaluer.


Modifié par jmlapam (05 Aug 2011 - 19:26)

fanny95 a écrit :

1. Faute d'orthographes, j'en ai vu 7 sur tout le site, et les plupart sont des fautes de frappe et non d'orthographe. Mais merci de l'info, comme ça je peux les rectifier.

2. Gris non homogène ? Paragraphe se terminant par un seul mot : du quel tu parles ? Blanc tournant quasi nul part endroit : ???

3. Où comprends tu ma timidité sur le site ?

4. Contraste élevé de quoi ?

5. De quels liens parles-tu ? Chez moi tout fonctionne sur les miniatures.

6. Pas comprit. Trop de fichiers JS ?

Sinon, tu peux toujours si tu as le temps et l'envie, me donner tes critiques sur le portfolio

Et l'eau Fanny,

1. Je te laisse le soin de corriger cela
2. N'oublie pas que Google is your friend ex : gris typo
3. Tu n’occupes pas tout l'espace que tu as alloué tout en préservant un blanc tournant
4. si je plisse les yeux (très bonne pratique), le visuel est monotone
5. 3 images ne se chargent pas (erreur 404) :
* http://www.netpom.fr/img/miniatures/gabrielle.jpg
* http://www.netpom.fr/img/miniatures/club-dg.jpg
* http://www.netpom.fr/img/structure/puce-violet.gif
6. je n'ai pas parlé de trop de fichier JS. J'ai dit qu'il y avait une mauvaise factorisation du code JS. En fait, il y a du code JS dans la page et du code dans des fichiers.
-----------------------------

Le portfolio :

J'ai regardé vite fait. Il y a moins de problèmes évoqués sur netpom.
1. manque rollover sur le menu principal (ex : surligner le texte)
2. le logo entouré par un aplat blanc, je trouve cela disgracieux. Il doit bien y avoir une meilleur façon d'harmoniser cela
3. la photo d'identité :
* Enlever le fond de la photo. Ca va permettre d'améliorer le visuel et d'éviter d'avoir des couleurs hors chartes
* Sur cette photo, les couleurs sont pâles, c'est dommage.

page vue sur : Chromium 12.0.742.112 (90304)

@igor : +1
Modifié par niuxe (06 Aug 2011 - 15:05)

@mikachu
En fait, je comptais envoyer mon CV en version PDF directement aux employeurs, avec dessus le lien du portfolio s'ils veulent le visiter. Est-il préférable d'envoyer juste le lien du portfolio et que si mon profil leur plait, ils téléchargent le PDF sur le site ? A voir..

@jmlapam
Merci pour ta réponse. Concernant le footer, je vais essayer de trouver un fond qui ressemble plus au design du site. Trouves-tu que le contenu de mon footer est important pour que je le mette plus haut ?
Oui, les puces vertes et roses signifient une note sur 5 que je m'attribue sur tel ou tel logiciel. Certains utilisent des étoiles remplies ou semi-remplies. J'ai préféré utiliser des puces pour garder une certaine homogénéité. Je rappelle que ce portfolio ne s'adresse pas à des clients potentiels mais à un futur employeur où je travaillerai en tant que salarié. Je pense personnellement qu'une société spécialisée dans le web comprends l'ensemble de ces termes non ? Je m'auto-évalue, je vois mal comment je pourrais mettre ça sur le site ?

@niuxe
Merci pour tes explications, je verrais ça dès lundi.
Quant au portfolio, c'est vrai qu'un effet lors du rollover sur la navigation serait bien. Merci de l'idée. Concernant le logo, je vais revoir cela. Et pour la photo, et bien je vais voir si en couleurs ça serait mieux. Merci de ton avis

fanny95 a écrit :


@jmlapam
Merci pour ta réponse. Concernant le footer, je vais essayer de trouver un fond qui ressemble plus au design du site. Trouves-tu que le contenu de mon footer est important pour que je le mette plus haut ?
Oui, les puces vertes et roses signifient une note sur 5 que je m'attribue sur tel ou tel logiciel. Certains utilisent des étoiles remplies ou semi-remplies. J'ai préféré utiliser des puces pour garder une certaine homogénéité. Je rappelle que ce portfolio ne s'adresse pas à des clients potentiels mais à un futur employeur où je travaillerai en tant que salarié. Je pense personnellement qu'une société spécialisée dans le web comprends l'ensemble de ces termes non ? Je m'auto-évalue, je vois mal comment je pourrais mettre ça sur le site ?

Salut,

Je disais que cette notation que tu t'auto-attribues est au mieux "pas très claire" , cela veut dire quoi un niveau de 3/5 en CSS ? Perso, je mettrais plutôt une presta, du style "je suis capable de mettre telle chose en place", "je gère telle technologie". Imaginons qu'un employeur potentiel t'évalue lors d'un entretien ou en visitant ton site et se rende compte que tu t'es surestimée (je ne dis pas que c'est le cas ici), il sera beaucoup moins enclin à t'embaucher, pour ne pas dire totalement déçu.
Ce que je veux dire c'est que s'auto-évaluer c'est prendre un risque, mieux vaut présenter des critères objectifs.


footer: j'avais zappé le contenu, en fait je ne n'en vois pas l'intérêt si ton site doit convaincre un employeur, je ferais plutôt une rubrique infos ou bons plans. Si on en croit les blogs spécialisés dans le webdesign, la tendance voudrait plutôt que tu mettes ta rubrique contact dans ton footer en fait parce qu'apparemment c'est bon de retrouver les réseaux sociaux...etc dans le footer.

A toi de voir.
Modifié par jmlapam (06 Aug 2011 - 20:22)

fanny95 a écrit :
@mikachu
En fait, je comptais envoyer mon CV en version PDF directement aux employeurs, avec dessus le lien du portfolio s'ils veulent le visiter. Est-il préférable d'envoyer juste le lien du portfolio et que si mon profil leur plait, ils téléchargent le PDF sur le site ? A voir..

Ça lu Fanny,

Pourquoi as tu fait une onepage alors ? (??) L'employeur va regarder comment tu mets en page mais aussi comment tu codes. Un employeur ne veut pas se fatiguer (il n'aime pas répondre aux candidatures ) Si tu ne lui apportes pas sur un plateau, tu peux passer à côté d'un bon poste.

Le HTML est un format standard. Je ne vois pas l'intérêt d'envoyer un pdf. (???). Tu devrais te concentrer sur une css print à mon avis.
Modifié par niuxe (07 Aug 2011 - 12:31)

@niuxe
Tu as tout à fait raison pour le PDF. Mais je préférais en faire un pour les candidatures de réponse aux offres, où ils demandent souvent en pièce obligatoire un CV.

Finalement, j'ai repensé mon portfolio et a prévu de mettre finalement une arborescence telle que la suivante dans cet ordre là :
* réalisations
* compétences
* expériences
* formations
* a propos
* au-delà du professionnel

Je garderai dans la rubrique A propos le lien pour télécharger le CV si jamais il veut l'enregistrer.

@jmlapam
Dans le footer, mettre ma rubrique Contact actuelle qui contient :
- Profil (coordonnées) ;
- Réseaux sociaux ;
- Besoin d'informations (formulaire de contact)

Puis également sur le côté une icône "imprimer le CV" pour inciter le futur employeur à l'imprimer s'il veut.

Je trouve quand même que ça fait beaucoup de parties, mais au moins ça sera organisé tel un CV.

Concernant la notation dans les compétences, peut-être mettre une phrase disant au la première puce c'est mauvais, jusque la dernière qui est très bonne.
Si l'employeur veut m'évaluer, il peut toujours aller vérifier mon niveau de compétences sur mes réalisations non ?

Bonjour,

Personnellement, je crois que tu peux envoyer les deux : l'adresse de ton site et le PDF en attachement. Les avantages du PDF :

- S'imprime parfaitement et ça supporte très bien les entêtes et pied de page d'une page à l'autre. Il n'y a pas de coupures non plus comme avec une page Web. On peut arriver à faire de belles choses avec un CSS print, mais jamais aussi précis qu'avec un PDF
- Se transfert facilement à une autre personne
- Peut être archivé dans un dossier
- Se consulte hors-ligne

C'est quand même un format standard lorsqu'on parle de C.V.

fanny95, pour les puces de compétences, tu devrais utiliser des images (<img>) avec un alt et un title adéquat lors du passage avec la souris. Les termes utilisés pour les différents niveaux pourraient être : Maîtrise, Bon niveau, Notions, etc. Un peu comme on voit souvent sur les CV.

@Tony Monast
Je suis tout à fait d'accord avec toi concernant les avantages du PDF ! C'est pourquoi je veux garder le lien de téléchargement sur mon portfolio. Avec également un lien pour imprimer au cas où. Ces 2 liens là sont, à mon avis, obligatoires sur un portfolio pour avantagé l'employeur.

La question que je me posais, c'est quelles informations garder sur un portfolio ?
Sur un CV, les parties Compétences, Expériences, Formations et Extra-professionnelles sont dessus. Est-ce que ces parties là doivent figurer sur le portfolio ? Certains se contentent de mettre Work - About - Contact pour faire minimaliste. D'autres mettent plus d'infos du genre "compétences" en plus. J'ai peur qu'en mettant toutes les parties réunies (celles citées dans le post précédent), que cela fasse trop chargé.

Quant aux puces, je n'y avais pas pensé au rollover ! Merci de l'idée. Je vais faire ça Ca sera + explicite en effet !

fanny95 a écrit :

Je trouve quand même que ça fait beaucoup de parties, mais au moins ça sera organisé tel un CV.

Concernant la notation dans les compétences, peut-être mettre une phrase disant au la première puce c'est mauvais, jusque la dernière qui est très bonne.
Si l'employeur veut m'évaluer, il peut toujours aller vérifier mon niveau de compétences sur mes réalisations non ?

Bonsoir, oui mais je disais cela dans le sens tendances. Apparemment les footer sont amenés à prendre du volume...



Pour la notation, je reste persuadé que ce n'est pas une bonne idée mais effectivement tu pourrais préciser ce que signifient les points comme cela on comprend immédiatement.