[Pro]

Bonsoir tout le monde,

j'ai enfin terminé mon portfolio

Que pensez vous du code et du design en général ?

Pour infos, je me suis fixé quelques contraintes sinon ce n'est pas drôle :
1) Avoir un grade A (GTmetrix Google Speed & Yslow) : Good ! 100% / 96% mais google analytics me plante mes stats le bougre
2) Ne pas utiliser de .js (hormis Google analytics et html5.js) : Good
3) w3c validator HTML5 : Good
4) Charger chaque page en moins d'une seconde : Good
5) Obtenir un site full responsive (3 niveaux de responsive) : Good
6) Ne pas utiliser de CMS ni de plugin (tout coder à la main, slideshow, etc.) : Good
7) Compatible tous navigateurs hormis IE7- (opti chrome tout de même) : Good
8) N'utiliser aucune image sauf les purs visuel : Good

Merci d'avance
Jonathan
Modifié par psykhe (12 Oct 2015 - 09:27)

Bonjour,

Je viens de faire un tour rapide sur ton portfolio. Tout d'abord, au niveau du design c'est pas mal du tout, on sent qu'il y a du travail et le tout donne un rendu sympathique.

Le seul point que je peux reprocher concerne ton portfolio. Ceci reste un avis personnel, mais je n'accroche pas trop avec ton plugin jQuery te permettant de présenter tes différentes créations.

Le plugin en lui même est sympathique avec ses animations, cependant, vu que toutes tes vignettes sont en noir et blanc, le résultat est un peu "fouilli" et on a du mal à s'y retrouvé.

Et enfin le dernier point que j'ai pu pointer concerne l'ergonomie de ton site et plus particulièrement de ton menu. Lorsque qu'on clique sur une catégorie de ton menu, on change bien de page, cependant, rien ne différencie la partie haute de ton site quelque soit la page choisie(Bonjour - Design - Contact). Vu que pour toutes tes pages tu gardes ton bandeau "Jonathan Levaillant Webdesigner - Intégrateur).

Si l'on regarde l'url, on voit bien que l'on a changé de page. Cependant, aucun élément graphique ne permet de différencier la partie haut de chacune de tes pages.

Voila je te souhaite une bonne continuation tout de même

Bonjour et merci pour tes retours

Alors concernant la page design ce n'est pas un plugin en fait, tout est géré en css avec notamment l'event "target", j'ai tout fait à la main

Et concernant le rendu oui j'ai voulu prendre un risque, j'aimais bien le principe de coller l'ensemble (en fait il est très optimisé Chrome avec le passage Noir & Blanc > Couleur au survol)
(Via du css3). Sur les autres navigateurs l'ensemble des vignettes sont en couleurs, donc le survol d'une vignette est peut être moins clair...

Pour le point sur l'ergonomie, c'est étrange le bandeau change pourtant en fonction du lien. (Bandeau blanc avec le descriptif qui change également)

Voila

Bonjour,

J'aime bien le design de ton site par contre je suis pas trop fan de l'arrondi avec l'ombre sur tes liens du menu.

Sinon dans la partie portfolio, étant donné qu'on ne peux cliquer que sur l'étiquette d'un item pour l'ouvrir en plus grand il faudrait peut-être laisser l'étiquette apparaître 1s ou 2s lorsqu'on est plus au survol de celle-ci afin de pouvoir revenir facilement dessus.
Sinon il serait peut-être plus simple de pouvoir cliquez sur la vignette, au lieu de devoir cliquer sur l'étiquette.

Lorsqu'un item de ton portfolio est ouvert en plus grand, tu n'affiches la croix que lorsqu'on survole l'image. Je trouve ça assez gênant à l'utilisation. Peut-être vaut-il mieux ne pas mettre de croix du tout, ou bien si tu en met une, la laisser en permanence visible.

Après concernant ton image de pigeon sur la page contact, je trouve à mon goût que c'est pas trop à sa place. En gros si quelqu'un te demande du travail, c'est toi le pigeon ?

Voila pour mon retour.
Bonne continuation à toi !

Hehe merci pour tes retours Raphi

Le pigeon pose en effet quelques soucis, à l'origine c'était l'image du pigeon qui apporte du courrier (je voulais changer l'image en fonction du statu du mail : Si le mail ne part pas, image du pigeon qui se prend un arbre, enfin une bêtise de ce genre )

Il faut que j'étudie le problème !

Pour l'arrondi je suis assez d'accord, d'autant plus qu'on ne retrouve aucun arrondi dans le site...

Ah ok j'avais vraiment pas vu ça comme ça pour le pigeon.

Dans ces cas là je verrais plutôt une image de pigeon qui dit une phrase du style : "À vot' service !"
Et une image dans ce genre là par exemple (tirée du film Vaillant) :
http://www.histoquiz-contemporain.com/Histoquiz/Lesdossiers/premiere/pigeons/vaillantsoldat.jpg

Salut,

Quelques remarques des choses qui m'ont perturbé :

- Bonjour/design/contact : à moins d'avoir un écran de 1m de haut, on ne voit aucun changement au clic, c'est assez problématique (on a l'impression que ça ne fait rien, voire pire que ça bugge). Le souci vient de ton double header énorme, qui est aussi inexplicable que redondant... pourquoi ?

- Présentation de tes travaux : La mosaïque pourquoi pas, mais là c'est un peu le bordel... De plus le masque sombre en overlay par défaut plombe carrément l'ambiance, ça ne met pas du tout en valeur les tafs alors qu'au contraire ça devrait donner envie de les cliquer. À mon avis il faut envisager une autre forme d'interaction.

- Sur ces mêmes travaux : on devrait pouvoir cliquer l'image en entier, pas juste le titre, là c'est ergonomiquement pénible.

- Les visuels en popin : pourquoi pas (encore que...) mais là ils sont vraiment microscopiques (et mal coupés ?). C'est assez chiant de ne pas pouvoir passer d'un visuel à l'autre dans ta popin (prev/next).

- Présentation des tafs : absence ! Tu devrais contextualiser tes boulots, là des jpg balancés sans un mot ça vaut pas grand chose... De plus je ne sais pas si tu as réellement bossé pour la BBC ou Lonely Planet mais si ce sont des boulots d'entrainement tu DOIS le mentionner quelque part...

Voilà en deux mots pour moi, dernière remarque : les contraintes de nazi sur la technique c'est bien, un portfolio efficace c'est encore mieux !

STPo a écrit :
Salut,

Quelques remarques des choses qui m'ont perturbé :

- Bonjour/design/contact : à moins d'avoir un écran de 1m de haut, on ne voit aucun changement au clic, c'est assez problématique (on a l'impression que ça ne fait rien, voire pire que ça bugge). Le souci vient de ton double header énorme, qui est aussi inexplicable que redondant... pourquoi ?

Je suis assez peu d'accord avec toi sur ce point. Je trouve justement qu'il a très bien joué la chose. Le changement se voit en bas de page avec titre/description de la rubrique, pile au dessus de la ligne de flottaison.

Knozelfhoegtj a écrit :
Je suis assez peu d'accord avec toi sur ce point. Je trouve justement qu'il a très bien joué la chose. Le changement se voit en bas de page avec titre/description de la rubrique, pile au dessus de la ligne de flottaison.

Si j'ai un écran de 1024×768 en paysage, ton "bas de la page" est totalement invisible pour moi.

La "ligne de flottaison" est une notion périmée à oublier à jamais, elle est 100% relative (taille de l'écran, résolution, taille de la fenêtre, navigateur, barres d'outils installées...) et aujourd'hui avec la multiplication des devices mobiles plus que jamais dépendante de milliards de paramètres totalement incontrôlables.

D'ailleurs cette notion de fold n'aurait jamais dû exister en web design à mon sens.

Quelques liens ?

100 % relative, tout comme le web. Il suffit de l'adapter aux différentes résolutions.

Hello STPo, merci pour tes retours

J'ai testé sur un 1024x768 en effet le "bas de page" n'est pas visible mais je me dis que cette résolution est tout de même de moins en moins répandu actuellement. (le 1280x1024 passe bien)

Pour les clic sur les liens des vignettes, oui je suis entièrement d'accord, ce n'est pas très ergonomique, je vais voir ce que je peux faire.

Pour les popin je ne voulais pas dépasser les 640px de large (et j'avais surtout une contrainte de poids...)

PS : mince, j'aimais bien le passage N&B > Couleurs au survol

Knozelfhoegtj a écrit :
100 % relative, tout comme le web. Il suffit de l'adapter aux différentes résolutions.

Non, il ne suffit pas, la résolution n'est qu'un des paramètres, pas le seul.
Et quand bien même, ce n'est pas le cas ici.

psykhe a écrit :
J'ai testé sur un 1024x768 en effet le bas de page n'est pas visible mais je me dis que cette résolution est tout de même de moins en moins répandu actuellement.

Les tablettes, c'est vrai que c'est en plein déclin !

psykhe a écrit :
Pour les popin je ne voulais pas dépasser les 640px de large (et j'avais surtout une contrainte de poids...)

Je ne comprends pas cette somme de contraintes drastiques pour un portfolio créa en fait, ça me semble assez peu justifié et ça te pénalise plus qu'autre chose...

Hello,

j'ai fais quelques petits changements en fonction de vos retours (surtout la partie "design") :
1) Mini description pour chaque vignette au survol
2) Click global sur la vignette
3) Popup plus grand (900px/900px)
4) Croix en permanence visible
5) Navigation (suppression de l'ombre portée au survol)

Qu'en pensez vous ?

Je n'ai par contre pas d'idée pour le changement au clic si l'écran est de 1024x768

Encore merci,
Jonathan
Modifié par psykhe (17 Oct 2015 - 11:04)