Mon portfolio bon à refaire

Il existe depuis un moment et mérite d'être amélioré

a marqué ce sujet comme résolu.

Hello tout le monde :)

J’ai une approche un peu différente pour cette présentation de projet : ce n’est pas un projet tout neuf où j’attends des applaudissements et une avalanche de compliments, mais plutôt l’inverse : c’est une site qui est en ligne depuis un moment mais dont je n’ai jamais été vraiment satisfait.

Je vous présente donc mon site perso.

C’est une simple page statique (avec du GitHub Pages derrière), avec beaucoup de texte (que je trouve moi-même long et pas forcément intéressant, avec du recul). Je l’ai mis en ligne fin 2019, avec l’idée d’accentuer la qualité Web, mais j’en oublie pour le coup mes autres compétences.

Je cherche donc des pistes d’amélioration pour soit tout refaire (auquel cas des inspirations seraient les bienvenues) soit modifier l’existant pour le rendre plus agréable à lire et plus explicite sur ce que je peux apporter à mes clients.

Voili-voilou, faites-vous plaisir (mais tapez pas trop fort quand même) :D

Effectivement, beaucoup de texte. Manque clairement d’illustrations / d’icônes. Également, la page est purement linéaire, ça se lit de haut en bas et c’est tout. Tu ne joue à aucun moment sur les possibilité "droite-gauche", comme des colonnes, etc. D’ailleurs, ça donne des lignes trop longues ce qui est un peu désagréable.

+1 -0

C’est une simple page statique (avec du GitHub Pages derrière), avec beaucoup de texte (que je trouve moi-même long et pas forcément intéressant, avec du recul).

Je trouve au contraire que plus y a de texte, plus je peux (ou pense pouvoir) évaluer un professionnel. En fait, il faut juste que ça ne sonne pas creux, ce qui en l’occurrence n’est pas le cas.

Si c’est l’effet pavé qui te gêne, alors je ne pense pas que ce soit le texte le problème, mais plutôt sa présentation. Pourquoi pas faire une petite synthèse pour chaque paragraphe, et avoir un petit bouton qui dit En savoir plus pour dérouler le paragraphe complet. Comme dit Phigger, il y a aussi peut-être des choses à tester avec des illustrations pour casser cet effet de pavé.

Je pense que tu peux avoir le meilleur des deux mondes : une page légère qui présente très vite l’essentiel, mais sans sacrifier le contenu qui peut intéresser certains prospects.

Sur ton profil Malt, il y a beaucoup d’infos pertinentes pour savoir comment collaborer avec toi. Je trouve ça dommage que ces informations ne soient pas aussi sur ton site Web directement, car elles sont quand même assez essentielles pour la prospection. (et ça jouerait peut-être en ta faveur niveau SEO).

Quant au design, je n’ai pas vraiment d’avis sur la question, ni même les compétences pour te donner un avis éclairé.
La seule chose que je peux te dire, c’est que je prends peur quand je vois des sites Web super bien léchés, avec des animations somptueuses partout et du eye-candy, et un scrolling trafiqué. Pourquoi ? Parce qu’en général, c’est lourd, c’est peu ergonomique, et parce que de toute façon je (et les autres clients aussi, en général) ne cherche pas à avoir le même site Web qu’une agence Web qui a besoin de montrer à quel point elle maîtrise les technos du Web en utilisant de la magie noire JS/CSS. Ton site ne tombe pas dans ce travers, et je trouve cela appréciable. Il a un job précis à faire, et il le fait sans entrave.

Rien de pire que d’entendre ses ventilateurs s’affoler ou de sentir son téléphone chauffer dans sa main quand on veut simplement consulter un site Web.

+4 -0

@Phigger : C’est effectivement mon ressenti. Mais je suis pas designer et au moment de le faire je voulais surtout prioriser le contenu. Et depuis j’ai toujours pas d’inspiration de ce qui le mettrait en valeur… 😬


@sgble : Merci de me rassurer sur l’efficacité d’un texte honnête ! ^^

Je cherche pas forcément à en mettre plein la vue, mais avoir un peu d’interactivité serait quand même pas mal je pense. En fait je pense à la mode des Easter Eggs qu’on retrouvait à un époque.

Une développeuse que j’aime bien utilise par exemple une illustration d’oiseaux sur un fil pour ses <hr>.

Un copain utilise des petites transitions de fade in pour faire arriver certains éléments au scroll. C’est pas bien lourd et ça ajoute un peu de fun.


Quelqu’un connait des portfolios (de freelances ou d’agences par exemple) avec des petits éléments qui vous plaisent ?

Pourquoi pas des volets dépliants ? Tu as beaucoup de titres qui donnent envie de lire le paragraphe en-dessous, mais le problème est de scroller jusqu’à eux. Si tu fais par exemple 2 colonnes, tu peux afficher plusieurs éléments et les faire se déplier au clic. Ça permettrait d’avoir en arrivant une vision globale de ce que tu veux mettre en avant, et pouvoir lire le détail si voulu.

+0 -0

J’ai mis à jour en utilisant des balises <details> et <summary> pour cacher les pavés par défaut, ça fait déjà moins de masse d’un coup. :)

https://www.corentin-hatte.eu/ (pensez à rafraîchir votre cache si besoin)


Je me pose également la question des informations essentielles : est-ce que tout est présent pour un client potentiel ?

Par exemple sur Malt mon tarif de base est affiché, est-ce que ça ferait sens de le mettre aussi sur mon site ?

Est-ce qu’en découvrant cette page vous trouvez toutes les infos qu’il vous faut ou il reste des zones d’ombre selon vous ?

Salut,

Je pense que tu as une bonne marge de manœuvre pour rendre ton message plus clair pour tes prospects. Actuellement, il y a beaucoup d’information qui ont un rôle à jouer, mais je ne trouve pas que ce soit structuré de manière facile à comprendre le plus rapidement possible. (C’est pas catastrophique, mais quand tu parles de perception et de contenus c’est un peu un comble.)

Un bon point pour moi, c’est l’en-tête : "Développement Web de qualité" C’est un plutôt bon résumé, et ça donne un message assez clair (si c’est celui que tu souhaites donner). Ensuite, on voit que c’est sur mesure et sur tout le cycle de réalisation. Jusque là, c’est pas mal.

Tout le passage sur la qualité, ta certification, etc. est moins convainquant. Je l’aurai pas mis à cet endroit du tout. Ou pas sous cette forme.

Ensuite, on voit la partie "service", c’est sûrement la partie la plus concrète pour tes clients (s’ils connaissent un peu leur besoin). Afin d’avoir un résumé de ce que tu veux faire (même si tu sais faire autre chose). Je pense qu’il faudrait la remonter et l’améliorer.

Le contact tout en bas… c’est beaucoup trop bas. Beaucoup de gens et entreprises le mettent en tout en haut.

Point de vue ergonomie, pas convaincu par les paragraphes pliants…


Je ne suis pas un pro de la com’, donc je ne saurai pas forcément conseiller beaucoup mieux.

Cependant, une technique facile, c’est d’identifier le message principal et quelques arguments pour le soutenir. Comme tu fournis beaucoup de services différents et sur plein de domaines, ce n’est pas évident. Mais s’il y a quelque chose de clair, c’est que ton truc, c’est le Web de qualité, alors il faudra creuser dans cette direction. ^^


Ah, et une dernière chose qui me paraît importante : tu sembles avoir plusieurs profils de client, à qui tu ne voudra pas dire la même chose. Je distingue des profils plus clients finaux non-tech et d’autres plus tech-développeurs.

Dans toute la page, tu as un peu des deux.

  • visibilité réduite : non-tech ;
  • performances moindres : plutôt tech ;
  • ergonomie : plutôt non tech ;
  • coûts : tech et non-tech ;
  • respect de la loi : plutôt non-tech ;
  • conseil : un peu les deux ;
  • audit de livrables : plutôt tech j’imagine ;
  • formation : non tech et tech, mais pour deux aspects différents ;
  • outillage : tech.

Après, je ne connais pas trop tes clients, donc ça n’a pas peut être pas trop de sens de segmenter.

Je trouve aussi la page assez austère, peut-être pas tant sur la question des images (même si des icônes seraient bienvenues) mais un mix de choix de police et de couleurs qui ne colle pas avec le style portofolio (ça ne me fait pas le même effet sur Zeste de Savoir :D ).
Je rejoins aussi l’idée qu’une présentation en colonnes pourrait aider à aérer un peu, même si je ne sais pas comment ça pourrait être divisé.

Et je ne suis pas spécialement fan de l’en-tête qui remplit toute la hauteur de la page : on n’a pas d’idée de ce qu’on va trouver en-dessous.

Peut-être qu’en remontant la partie services je pourrais la revoir pour détailler un peu plus et segmenter un peu comme tu le suggères. C’est peut-être sur cette partie que ça fait plus sens de segmenter (le reste étant surtout de l’info et de l’éducation générale).

Pour les blocs pliants je vais voir si avec une ou deux phrases de résumé ça pourrait pas donner un compromis intéressant.


@Aabu : Quand tu dis que le passage sur ma certification est moins convaincant tu penses que c’est dû au texte/contenu, ou juste la présentation ?

Merci pour ton retour !


@entwanne : Promis je voulais pas copier ZdS ! 😅

Je vais essayer de voir si une présentation en colonnes (ou en tout cas moins linéaire) peut se tenter. Faudra peut-être revoir les contenus en même temps du coup…

Je note pour l’entête géant. J’avoue qu’à l’époque c’était un peu la mode, mais au final ça montre rien du site que l’on visite…

@Aabu : Quand tu dis que le passage sur ma certification est moins convaincant tu penses que c’est dû au texte/contenu, ou juste la présentation ?

Le contenu est pas mal du tout pour moi. La certification, c’est top. Sans la connaître, je me dis que ça montre que tu as quand même fait la démarche, et c’est pas rien. Les 3 paragraphes sur la qualité c’est bien aussi ce qu’il y a dedans.

Ce qu me gêne c’est plus la présentation : ça prend beaucoup de place avant de parler de tes services, et ce n’est pas très percutant.

Tu peux garder développé dans l’absolu, mais en disant juste :

  • je suis certifié qualité,
  • la qualité vous fait économiser de l’argent durablement et gagner du business,
  • j’applique une méthode d’évaluation structurée.

Ça a sensiblement le même effet sur moi, tout en étant beaucoup plus court. Les détails pourraient être avancés dans un second temps, avec un petit lien, dépliant pour dire :

  • que dit exactement la certif,
  • comment exactement la qualité fait fait économiser des sous,
  • quelle est ta méthode d’évaluation qualité.

Alors j’ai modifié quelques trucs rapidement :

  • Pour chaque bloc dépliant j’ai laissé une phrase ou deux visibles par défaut.
  • J’ai remonté le bloc Mes services tout en haut
  • J’ai affiché des liens de contact dans l’entête
  • J’ai réduit la taille de l’entête (il s’adapte à son contenu)
  • J’ai mis du CSS pour faire paraître l’entête et le pied de page comme statiques.

J’aime bien ton idée d’avoir un résumé et un développement @Aabu, par contre je verrais plus ça sur plusieurs pages (avoir un développement poussé des concepts dans une page dédiée, et une page d’accueil plus courte). Ça va demander un peu de temps par contre ^^

Alors j’ai modifié quelques trucs rapidement :

  • Pour chaque bloc dépliant j’ai laissé une phrase ou deux visibles par défaut.
viki53

A mon avis, il faut quelque chose de plus explicite qui indique qu’il y a une suite et qu’il faut cliquer pour la voir car sans connaitre l’ancienne version de ton site, je n’aurai jamais pensé qu’il y avait du texte "caché".

Hello !

J’ai pris un peu de temps aujourd’hui pour revoir un peu l’organisation du site et passer à un modèle sur plusieurs pages.

https://www.corentin-hatte.eu/

J’ai donc créé les pages suivantes :

Je dois encore créer une page avec mon parcours et une liste (raccourcie) de mes clients et principaux projets.

J’ai aussi optimisé l’image pour le motif du fond (~65% de réduction de poids) et revu un peu le CSS (supprimé certaines ombres inutilement lourdes, etc.). :)


Est-ce que ça vous paraît (plus) clair comme présentation ?

Les contenus sont-ils assez explicites selon vous ?


Va aussi falloir que j’optimise un peu le référencement, parce que niveaux stats c’est pas trop ça… :-°

Salut,

En terme de contenu ça me semble déjà plus clair et scannable oui. Certains éléments très importants pourraient peut-être être plus en avant (dans un titre ?), tel ton certificat si c’est important. Mais dans l’ensemble c’est déjà beaucoup mieux !

Concernant le fond, quelques remarques.

+0 -0

Si je force le bleu en permanence (plus de orange au clic) pour l’entête/footer du coup ça irait ? Je t’avoue que depuis que j’ai enlevé l’ombre sur le texte c’est effectivement assez désagréable à lire…

Je vais voir pour réduire un peu la largeur, mais sur grands écrans ça risque de faire tout petit… 😬

[EDIT] C’est fait

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte