[pro] Portfolio créatif pour développeur

Bonjour à tous,

Je m'appelle Andrea Benetti et j'ai ouvert ma société en juillet dernier. Avec le temps dont je dispose entre les projets, j'ai pu enfin penser à moi et à mon site internet. Je souhaite le terminer d'ici la fin de l'été. Cela fait un moment que je fréquente les tuto d’Alsa Création et je me suis dit qu'il serait intéressant de recueillir votre avis.

http://www.andreadev.be

Le site s’est construit autour du template du w3school disponible ici. Il s’agit de ma première utilisation du Framework w3.css (Je le recommande chaleureusement). La palette de couleur tourne autour du cyan pour souligner le côté créatif et joyeux de l’univers de la programmation. L’image en parallaxe renforce également ces traits.

Au moment de la conception de la maquette, je cherchais à répondre aux questions suivantes :
1) Qu’est-ce que AndreaDev ?
2) Quelles sont les services qu’il propose ?
3) Comment prendre contact ?
4) Qu’est-ce qu’il produit ?
5) Quelles sont les technologies qu’il maitrise ? (Cette dernière n’est pas encore implémentée)

La liste ci-dessus est classée dans cet ordre prioritaire. Les technologies maitrisées étant relégué aux derniers rangs car elles ne concernent principalement que l’audience orienté technique. Ceux-ci devront sélectionner le site depuis le portfolio pour avoir plus de détails (* en cours de développement). Le contenu écrit a été volontairement réduit laissant la possibilité à l’audience de pouvoir prendre contact pour de plus ample information.

La liste des éléments en cours de développement (sera mis à jour) :
- Fenêtre descriptive du site sélectionné
- Technologies utilisées présente dans la fenêtre décrite ci-dessus
- Lien Google map ou bouton pour faciliter la navigation GPS depuis un smartphone par exemple
- Loading de chargement de la page
- Le rendre responsive avec un menu hamburger
- Icône du site
- Metadata pour la recherche, sitemap etc
- Bien évidemment, un dernier coup de balais dans le code pour le rendre plus claire

Merci d’avance de prendre un peu de votre temps pour la critique. J’adore les tomates, alors lâchez-vous !

Bien à vous,
Andrea
Modifié par AndreaDev (29 Jul 2016 - 11:22)

Bonjour,

Voici mes tomates:

- L'image d'accueil me donne envie de fuir tout de suite, vide, floue et enfantine

- Le "Je suis" à remplacer par ton nom

- Indiquer la date de création n'est pas un bon point, trop jeune cela fait peur. Les curieux la trouverons d'eux même

- "Un projet informatique ?" à remplacer par "Un projet ?", à mon sens

- Ce texte "N'hésitez pas à prendre contact" parait flou et n'ai donc pas agréable à lire en plus d'être inutile

- La case commentaire à agrandir

- Le portfolio que je mettrais sur la page d'accueil (site one-page quoi)

Je discuterais pas des couleurs, mais là ton site donne un aspect froid et distant, cela ne donne pas envie de te contacter/connaitre.
Modifié par dann (29 Jul 2016 - 11:32)

Bonjour !

J'ignore si je vais être suffisamment exhaustive à votre goût...

J'ai compris votre désir de montrer un site... 'frais'... Ma première impression est un site un peu pâlichon, les couleurs manquant de tonicité... L'illustration d'accueil est dans la tendance 'Flat design' (des aplats, peu de détails)... mais en si gros (sur mon ordinateur de bureau) ça fait un peu pauvre. (D'ailleurs, si je réduis la fenêtre, à un moment donné, l'illustration ne suit plus.)

J'ai aussi compris que vous vous présentiez en tant que développeur Web (c'est écrit en gros - que veut dire ce terme "complémentaire" ?). Ce que je n'ai pas compris, c'est ce portfolio d'images : vous vous présentez aussi en tant que photographe ?

Voilà, c'est tout pour moi. (Le spécialiste de la critique semble être en vacances...)


Modifié par Zelena (29 Jul 2016 - 11:36)

Merci à vous deux pour les tomates. J'en prends bonne note.

Je constate également un problème de froideur dans la palette de couleur mais je ne pensais pas que c'était si net.

Pour l'illustration principal, il s'agit de mon premier jet en Illustrator / Photoshop, je manque encore cruellement d'expérience mais je pense pouvoir proposer quelque chose de plus détailler. Toujours en restant dans le Flat design mais en intégrant des ombres, plus d'objets, etc... Le côté enfantin ne me dérange pas si on le relie au domaine créatif. Je m'obstinerais donc un petit peu dans ce sens-là sans quoi je devrais me rabattre sur un plan B.

@Zelena
Je constate également un problème de même nature sur mon smartphone concernant l'illustration. Je règlerai tous ces détails bientôt.

En fait, je suis développeur Java et je travaille depuis près de 10 ans en entreprise. J'ai décidé cette année de passer en activité complémentaire. En Belgique, c'est un statut particulier qui te permet de fonder une entreprise personne physique alors que tu es déjà employé ailleurs. C'est un deuxième travail en fait, je suppose que vous avez l'équivalent en France ?

Par conséquent je l'indique dans le titre du site car c'est un paramètre important que les clients doivent prendre en compte s’il souhaite avoir recours à mes services. Je dispose de moins de temps qu'une société ou qu'un particulier à plein temps. Je souhaite nouer une relation de confiance avec mes clients.

Concernant la partie photographie du portfolio, je voulais en faire une partie bonus pour ne pas confondre mon métier avec celui de photographe. Finalement, je l'ai intégré dans le portfolio, j'ai pensé que c'était une compétence intéressante à mettre en avant comme la photographie et le web design vont souvent de pair. Fausse bonne idée ?

Voila, j'ai été suffisamment long pour une réponse . Merci encore d'avoir pris le temps et j'espère avoir pu vous éclairez quelques peu. Le site évoluera de toute façon d'ici ce week-end, je vous tiendrais informé de son évolution si j'ai quelque chose de pertinent à vous montrer.

ps : si d'autres veulent lancer des tomates
Modifié par AndreaDev (29 Jul 2016 - 12:31)

Bonjour Andrea,

Je rejoins les commentaires précédents. Voici ce que j'ai noté en vrac :
- site peu accueillant, un côté froid du au manque d'éléments, aux couleurs, etc
- lorsque l'on arrive sur le site, on a une impression de vide, qu'il n'y a rien d'autre que l'image probablement parce qu'il n'y a aucune incitation à cliquer quelque part pour voir la suite du contenu
- le menu du haut est peu attirant, 2 onglets ça donne l'impression qu'il n'y a rien a découvrir sur ton site. Peut-être qu'un menu plus fourni serait plus intéressant, comme par exemple : Accueil (optionnel si tu met le logo de ton entreprise directement dans le menu par exemple), Portfolio, Présentation de l'entreprise, Contact. A toi de voir pour le nom des items, mais voilà probablement les infos que tes visiteurs voudront trouver.
- les typos ne s'accordent pas et il y en a trop.
- le message de ton site n'est pas cohérent, tu commences par mettre ton profil en avant dès le départ ("Développeur Web") pour ensuite dire que ton entreprise fait plusieurs autres choses et que le développement ne vient qu'en 3e position dans ta liste. Du coup, on a vite fait de se perdre dans les prestations que tu proposes car tu ne les dis pas clairement. Par exemple : Fais-tu des sites internet ? On pourrait le penser vu l'intitulé de départ, mais tu ne le dis nulle part de manière explicite dans ton site.
- Visuellement ce n'est pas homogène, des éléments non alignés (bouton twitter), des boutons qui ne ressemble pas à des boutons (dans le portfolio), etc... je pense qu'il faut que tu t'inspires de ce qui se fait de bien sur le web et que tu essayes de garder une cohérence entre toutes tes pages pour te faire une bonne maquette graphique.

Voila pour moi, en espérant que cela te soit utile.

Bon courage pour ton entreprise et pour les corrections dans ton site.
Modifié par Raphi (29 Jul 2016 - 14:51)

Merci Raphi, j'ai intégré deux trois de tes conseils. C'est en ligne.

Je viens de travailler un peu le menu et on le remarque déjà mieux. Le logo est un placeholder fais en deux minutes et le background est sous licences mais ça permet de se faire une petite idée.

J'hésite encore a inclure le portfolio dans la page principal. Sans, le site manque de volume. Avec, il en prend trop. Je me tatte... Je vais donc faire une pause... le soleil brille

Merci encore à vous

Le menu a été retravaillé ainsi que l'agencement du contenu. Désormais pour bien scinder le portfolio du contenu photo, j'ai défini ce dernier dans une page séparé et j'ai placé le lien du menu en dernière position. NB: L'icône à côté du lien est vide tandis que les autres sont remplis, ce qui marque encore un peu plus la différence.

Le contenu principal est finalement dans une seule et unique page. L'intégration du portfolio a été réalisée dans la page d’accueil. Un filtre Bénévolat a été ajouté pour distinguer mes sites amateurs de mes sites professionnels.

Les sous menu et les icônes ont été ajoutés pour améliorer l'expérience utilisateur. La couleur lors de l'évènement hover a également été changé pour du cyan. J'espère ainsi donner plus de pêche au niveau des couleurs.

Un ensemble d'icône ont été placé dans le menu et les bandes de titres, j'espère qu'il donnera plus de volume aux contenus. Sans rendre le site trop chargé pour le coup...

Perso, j'aime pas la notion de bénévolat dans un site d'entreprise.
Je pense que tes clients n'ont pas besoin de savoir ce qui l'est de ce qui ne l'est pas. La seule chose qu'ils doivent connaitre c'est ton travail (peu importe s'il était bénévole ou non). A moins que le travail ait été réalisé pour des associations connues, mais sinon c'est pas top à mon goût.
Concernant la date de création de ton entreprise, je suis à 100% d'accord avec @dann, ce n'est absolument pas vendeur d'indiquer que tu viens juste de la créer. En gros tu dis à tes futurs clients: "bonjour je suis nouveau dans le domaine, je ne sais pas combien de temps je garderai mon entreprise, mais allez-y confiez moi votre projet, vous verrez-bien si je suis encore là dans 2 ans"...

Et pour le contenu du site, pour ma part je n'ai pas l'impression d'avoir de réponses sur ce que tu proposes réellement à tes futurs clients:
- Conseil informatique: dans quel domaine ? Les métiers y sont nombreux, donc de quels type de conseils s'agit-il ?
- Gestion d'installations informatiques: C'est-à-dire ? Tu proposes d'installer des logiciels ou un OS sur le poste de client ? Ou tu proposes des prestations de déploiement de logiciels ou d'OS dans des parcs informatique ? Tu proposes de gérer la mise en réseau des postes d'une entreprise ?
- Programmation informatique: De quel type ? Applications mobile ? Applications Web ? Applications natives ?
- Intermédiaire du commerce en produits divers: C'est-à-dire ?

En espérant que tout ça puisse t'aider.
Modifié par Raphi (01 Aug 2016 - 09:53)

Bonjour !

L'illustration d'accueil est beaucoup mieux, plus agréable. Et elle prend beaucoup de place. A tel point que l'on a envie de cliquer sur un des éléments... Ah, aucun élément n'est cliquable. Je regarde en haut : un modeste menu. Je m'aperçois aussi qu'il y a du contenu hors de la fenêtre et que je peux 'scroller'... La visite peut continuer.

Avant que je clique, le "Je suis Développeur..." au centre de l'illustration est bien trop pâlot, surtout si on compare le contraste avec celui des éléments affichés sur l'écran d'ordinateur.

Si on clique sur "Portfolio" ou "Bénévolat" du menu du haut, la page va se positionner correctement dans la fenêtre, mais si on clique sur un des boutons "Portfolio" ou "Bénévolat" à côté de "Filtre", il n'y a de repositionnement, les images peuvent être masquées, c'est embêtant.

Le logo, minuscule, me chiffonne. Il a des détails qui ont à la limite de la visibilité. Ou alors il faut le simplifier.

En bonus, des photos ? On peut les prendre ?

Pour l'impression d'ensemble... le début est sympa, après c'est assez sage. Je comprends que vous voulez donnez une impression de sérieux, mais j'ai l'impression d'une coupure entre l'accueil et le reste.

Etonnante, cette quasi-absence d'animation de la part d'un programmateur...

AndreaDev a écrit :

C'est un deuxième travail en fait, je suppose que vous avez l'équivalent en France ?

Je ne saurais dire.

Merci à vous 2 de suivre mon projet avec attention. Vos observations et conseils me sont précieux et je les trouve particulièrement judicieux.

@Raphi
Le mot « Bénévolat » peut être remplacé par « Partenaire ». Trouves-tu ceci plus acceptable ?

La date d’entreprise et la définition des services proposées seront totalement revues. Je bute actuellement sur l’écriture plus que sur la définition de ce que je souhaite proposée. Beaucoup de lourdeur dans mon style d’écriture que je dois corriger avant de pouvoir vous le montrer.

Le propos du site est flou car je souhaite intimement travailler dans beaucoup de secteur à la fois. Je souhaite volontairement varier les plaisirs car je pense en être capable techniquement même si je ne serais jamais aussi efficace qu’un spécialiste. Je me rends compte que c’est un problème pour le site car finalement on ne sait pas du tout ce que je propose. Je vais donc mettre en avant la programmation de site internet et application de gestion. Plus tard si un secteur se développe plus sérieusement, il trouvera sa place.

Pour renforcer le propos, je devrais également mettre en avant les technologies dont je me sers. Je souhaite les mettre dans une fenêtre de détail. Lors du clic sur le projet celle-ci apparaitra avec les infos concrète, des impressions écran choisie et un lien externe. Cette partie n’est pas encore développée.

PS : Intermédiaire de commerce… on oublie ça tout de suite

@Zelena
Vous pouvez vous servir dans mes photos, elles sont libre de droit, du moins je ne porterai pas plainte. Ce sera ma contribution à votre aide

Les éléments cliquable à l’écran est sans doute une bonne idée. C’était la première des remarques de mon entourage. Je vais donc devoir trouver des petites idées pour animer cela.

Concernant le logo c’est encore un placeholder fais en deux minutes avec Illustrator. Je souhaite m’y consacré plus de temps pour obtenir de meilleurs résultats. Je n’en suis pas satisfait non plus.

Les animations sont ajoutés aux comptes goutent. On a l’animation de loading et l’animation de scrolling dont je dois encore adapter le script pour qu’ils fonctionnent à 100%. Je me tâte encore sur les autres animations, j’observe d’autres sites et je me demande si faire venir les blocs au fur et à mesure lors du scrolling serait pertinent. Je vois que c’est à la mode en ce moment. Le tout est d’éviter l’effet too much…

Le repositionnement après le clic sur les filtres est une bonne idée.

Concernant l’impression de coupure, je me sens malgré tout un peu désarmé, je pourrais à la limite placé de la couleur sur un côté pour servir de fil conducteur… Je devrais faires quelques tests pour me rendre compte.

AndreaDev a écrit :
Le mot « Bénévolat » peut être remplacé par « Partenaire ». Trouves-tu ceci plus acceptable ?

Pour ma part je ne ferais pas de distinction avec tes autres projets. Ça ne regarde que toi, la manière dont tu as géré le projet avec ton client.
Le seul intérêt de faire une distinction serait à la rigueur si tu proposais des "sites clé en main" à bas cout, sans design ni fonctionnalités sur-mesure. Ça éviterait qu'un client se dise "oulah mais ce site n'est pas au même niveau que les autres". Dans ton cas, je ne ferais pas de distinction, en plus tu ne proposera pas ce type d'arrangement (bénévolat, ou très bas cout) à d'autres clients.

Bonjour,

Perso, je trouve le site sympa. La maquette est dans le coup pour un développeur, même si très vue (flat + clavier… ). Ça le ferait moyen pour un graphiste. Pour un dév, ça ne me choque pas.

En revanche attention aux polices. Restez sobre, une ou deux maxi pour les titres. Ou à associez comme vous l'avez fait, mais pas avec cette police pseudo script à l'anglaise, qui s'accorde très mal avec la police destroy (démodé également). Police sobre pour tout le site, et pour les titres, vous avez pas une police un peu plus hype ? Plus techno ou développement ?

Le logo avec la souris, c'est la cata. Virez ce truc et pas de logo. On s'en fiche. Mettez votre nom dans une police du site, ça sera 10 fois plus élégant.

Sinon le dessin avec le café et l'ordi est sympa. C'est vous qui l'avez dessiné ?

J'aime pas le titre "je suis développeur". C'est bien beau mais vous êtes qui. La première chose qu'on fait devant quelqu'un qu'on ne connait pas, c'est de se présenter : prénom, nom. Là ça arrive trop tard

"Indépendant complémentaire" est une définition bizarre. Peut être êtes-vous canadien ou belge ?
Ah oui, belge !

La photo de portrait dans le rond fait applatie, le rond doit être rond, sinon c'est pas joli.

Pas de retrait pour les puces, c'est pas moderne.

Le portfolio demande à s'étoffer un peu. Du coup c'est pas très rassurant. Mettez plutôt un truc du genre, dernières réalisations, 3 minimum. Ne mettez pas le site dedans, c'est redondant.

Je ne vois pas l'intérêt des tags pour si peu de contenu. Ça donne un côté pauvre.

Les ombres sont trop marquées, les filets trop épais.

Pas fan des pictos dans le menu fixe du haut. Ils sont pas funky. Pas de pictos sera mieux, sauf super idée.

Numéro de TVA et compte sont mal placés, mettez les dans le footer, de façon très discrète.

Pas fan du truc qui tournicote au chargement du site, avec cette police vieillotte en plus… Je ne comprend pas qu'il faille un loading pour un site aussi simple…

Bon, j'en ai oublié.
Voilou pour moi.
Modifié par spongebrain (02 Aug 2016 - 11:29)

" La palette de couleur tourne autour du cyan pour souligner le côté créatif et joyeux de l’univers de la programmation "

Parce que si j'utilise du jaune et du marron j'ai un humour pipi caca ???

Parfois le bullshit ça me fait faire des blagues trop bien ahahahahah

Merci Spongebrain, je suis content que tu trouves le site sympa, au moins je peux enlever la corde de mon cou, il me reste un espoir

J'ai noté l'ensemble de tes remarques et j'en tiendrais compte durant mes prochaines modifications. J'aime beaucoup l'idée des 3 dernières réalisations.

Concernant le dessin, je n’en suis pas l’auteur malheureusement. Il s’agit pour l’instant d’un placeholder, je souhaite reproduire un dessin qui s’en inspire via Illustrator. Seulement, si ce que je fais est moins bien, je vais devoir acheter les droits.

Changelog:
- Remplacement du logo
- Remplacement du "Je suis développeur" par "AndreaDev Java and PHP developper"
- Remplacement du texte de présentation
- Ajout du détail des projets lorsque l'on clique dessus depuis le portfolio
- Ajout des détails techniques dans le détail des projets
- Ajout d'un texte promotionnel dans la partie bonus
- Correction de l'effet de scrolling

Salut,

"AndreaDev Java and PHP developper" < developer pas developper

Merci SuperMerguez

Petite faute dans ton texte :

a écrit :
Ce projet, né d’une grande passion, me permet à présent de vous offrir mon expérience et mon savoir-faire dans le domaine du développement de sites internet et d’applications de gestion.

Concernant le titre, pourquoi de l'anglais alors que le reste du site est en français ?
Pour le nouveau texte c'est beaucoup plus vendeur !

Concernant le loading, je sais pas si c'est normal, mais chez moi ça ressemble à une sorte de rectangle arrondi sur les angles, qui tourne, avec écrit en gros "loading" dans une police affreuse.

Petit point de détail... quoique... les libellés apparaissant sur les boîtes de dialogue (descriptifs des projets) sont soulignés.
A priori ce style est plutôt réservé aux liens hypertexte. Vu le contexte visuel, on suppose vite qu'il ne s'agit que de libellés sans destination particulière, mais cela peut être confus pour certains.
Mieux vaudrait privilégier un affichage aligné verticalement sur les délimiteurs (caractère":").

Bonjour,

La police de substitution passe mieux pour le titre, mais elle est trop typée SF 80's (à mon goût). Il y a toujours la guerre des polices !!! J'en compte 4 ou 5 sur la page, impossible de faire quelque chose de cohérent dans ces conditions !!! Que fait cette police anglaise au dessus de votre nom ? De plus ces polices ne s'accordent pas entre elles car elles ont trop typées et racontent des histoires différentes. Sauf si vous maitrisez la typo sur le bout des doigts, jamais de mélange de plusieurs polices, c'est la cata assurée.

Regardez ce qui se fait actuellement (PDF avec exemples/conseils typo dans le lien de ma signature… ). Deux choix :
1/ Une police pour tout le site, sobre (2 ou 3 tailles maxi)
2/ Une police pour le texte + une pour les titres plus typée (2 tailles maxi)

Si vous optez pour une police typée (titres ) la police de complément doit être sobre et élégante pour ne pas lutter.

Bonne idée la police développeur (Java and PHP… ), mais celle choisie est inélégante. Les lettres ont une hauteur différente, les p minuscule se placent mal en hauteur, les espaces horizontaux sont mal gérés (trous), du coup c'est vilain à l'écran. Pourtant il existe des polices "développement" (monospace) bien plus élégantes, comme "Roboto Mono“ (gras) par exemple, qui peut être associée à Roboto pour le texte courant (gratuit sur Google Fonts). Pour les titres, vous pouvez opter pour une police plus marquée, mais elle doit rester MODERNE.

Le texte calé à droite (titre) n'apporte rien. Centrez.

Le texte passe mieux dans le menu mais le nom semble écrit plus bas (chrome, mac). À voir avec votre nouvelle palette typo.

Le truc de loading est en effet inesthétique. À enlever (chez moi, ça dure une demi seconde (fibre)), ou si obligatoire, faire un truc simple et élégant (pas de gros machin qui tourne… ).

Voilou pour moi.
Modifié par spongebrain (04 Aug 2016 - 10:23)