[Pro] Refonte de mon portfolio - uncoindpixel.com

Hello le forum Alsa.

Je viens de mettre en ligne la nouvelle mouture de mon portfolio : www.uncoindpixel.com

Ce nouveau design se veut plus minimaliste que son prédécesseur. Plusieurs micro-interactions et animations viennent donner vie au tout. Il est adossé à un Wordpress pour l'administration.

Je veux bien vos avis sur son design et le code. Si vous détectez des trucs étranges ou des bugs n'hésitez pas à me le faire remonter.

Belle journée à toutes et tous.

Salut Damien !

Alors, rien a dire coté design et j'ai pas regardé le code non plus mais bon je me fait pas trop de soucis.

J'ai juste décidé de te répondre parce-que je suis hyper troublé par le curseur. C'est stylé mais ça me perturbe de ouf. et quand je déplace la souris un peu rapidement j'ai 1 seconde ou le me perd des yeux c'est troublant. Pour aller sur un élément on ne suis pas le pointeur des yeux, on fixe l'élément et on déplace le pointeur dessus. On le vois arriver dans notre vision "périphérique" mais la c'est beaucoup plus dur a cause de la taille et de la couleur.
Et ça me donne l'impression de galérer à cibler un lien.
Sans compter qu'on a plus l'indicateur du cursor pointer sur les zones cliquable (même si on a un effet de hover sur les éléments).
Voila, c'est peut être juste mon point de vu mais ça me gène grave.

Autre petit truc, tes expériences sont très petites et du coup floues :


Sinon c'est joli j'aime bien !

Bon boulot

Bonjour Laurent

Merci pour tes retours. C'est chouette.

Je partage ton avis pour la taille de typo et on va refaire une MEP corrective à ce titre

Pour le curseur, je note ton retour. J'attends de voir si c'est partagé par d'autres visiteurs du site pour réfléchir à un re-travail.

Merci et belle journée.

Salut

Bcp de cohérence dans le style entre les pages, j'aime bcp, entre le DNS, le style etc.. c'est cool

J'ai pas grand chose à dire perso, à part que j'aime bien

Question curseur oui ça surprend c'est sûr, mais perso ça ne m'a pas trop dérangé, heureusement que la forme géométrique suit de près le petit curseur sinon on se perdrait mais j'ai bien aimer c'est très original.

Après y'a beaucoup d'effet, du coup sur ma machine la moins puissante ça rame un peu de temps à autres.

Bonjour,

c'est sûr que le site est bien fait et aéré. Je suis par contre très dérangé par ce problème du curseur. Sur une machine pas trop performante, c'est infernal et pratiquement inutilisable. En désactivant Javascript, le problème disparaît (et certains effets aussi). Comme Js est désactivé par défaut sur ma machine, je ne l'avais pas remarqué tout de suite.
Autre reproche, tout à fait personnel, ce bleu profond arrache mes yeux. Quand je quitte le site pour revenir sur celui d'Alsacreations, par exemple, j'éprouve une sensation agréable. A noter que mes yeux n'ont plus 25 ans... Une couleur plus discrète ne serait-elle pas souhaitable ? Un beau dégradé, par exemple.
Hormis ces deux "défauts", très beau site.
Cordialement.

Bongota a écrit :
Js est désactivé par défaut sur ma machine

Ça existe vraiment dans la vraie vie ?!

Si on considère qu'une machine tournant sous debian jessy est la "vraie vie", oui.
Je n'ai pas dit que je rejetais JavaScript, je l'autorise, temporairement ou définitivement, suivant la confiance, réelle ou supposée, des sites que je visite.
C'est NoScript qui le fait, et j'ai classé de très nombreux sites OK pour JavaScript.
On fait ce qu'on peut, la protection de la vie privée n'est pas une science certaine.

Bien que je n'aime la palette de couleurs et la charte graphique, bravo ! Pourquoi ? Parce que tu restes cohérent dans tes propos (compositions graphiques) et tu offres une visite sympathique.

C'est dommage pour ton formulaire :
- ton select qui n'est pas designé/stylisé
- ta validation des données est basique
- erreur 403 après soumission du formulaire

Je pense que c'est ce qu'il te reste à faire (le plus gros est fait), n'est ce pas ?

Bongota a écrit :
Si on considère qu'une machine tournant sous debian jessy est la "vraie vie", oui.
Je n'ai pas dit que je rejetais JavaScript, je l'autorise, temporairement ou définitivement, suivant la confiance, réelle ou supposée, des sites que je visite.
C'est NoScript qui le fait, et j'ai classé de très nombreux sites OK pour JavaScript.
On fait ce qu'on peut, la protection de la vie privée n'est pas une science certaine.

Bonjour,
Même approche en ce qui me concerne, même si la plupart des internautes nous voient comme des fossiles n'ayant rien compris à l'époque actuelle...
Considérant que :
a) HTML / CSS se suffit dans la majorité des cas pour construire un site visitable
b) ce que fait un script téléchargé n'est jamais connu "a priori"
désactiver Javascript est tout à fait pertinent.
Concernant le site en lui-même, je rejoins les observations précédentes sur le curseur. Ma vue n'étant plus ce qu'elle était, repérer l'engin à l'écran sur un fond qui plus est plutôt sombre, c'est une vraie galère. A noter d'ailleurs qu'une fois Javascript désactivé ceci redevient vivable...
Bref, et sans vouloir dénigrer qui ou quoi que ce soit, j'ai un peu l'impression que c'est du design pour du design, éloigné de fait du confort utilisateur qui devrait, a priori, prévaloir.
Globalement la charte graphique me paraît sombre mais là tout est une question de goût personnel et chacun y trouvera son plaisir ou non. C'est toujours difficile d'émettre un avis pertinent en la matière.
L'ensemble me paraît cohérent en matière de navigation et l'utilisateur trouve facilement les infos qu'il recherche entre les différents écrans / parties d'écran.
Je n'ai pas le site sous la main, répondant en vitesse, mais il me semble avoir noté une petite coquille dans le texte (de mémoire, un "ent" en fin de mot qui fait tâche). A confirmer / infirmer toutefois.

Salut Bongota

Bongota a écrit :
Bonjour,
Autre reproche, tout à fait personnel, ce bleu profond arrache mes yeux. Quand je quitte le site pour revenir sur celui d'Alsacreations, par exemple, j'éprouve une sensation agréable. A noter que mes yeux n'ont plus 25 ans... Une couleur plus discrète ne serait-elle pas souhaitable ? Un beau dégradé, par exemple.
Hormis ces deux "défauts", très beau site.

J'étais préparé à ce retour ^^
En effet les couleurs sont assez présentes et cela résulte j'en suis persuadé de la lassitude de faire des sites sur fond clair pour 80 % de mes projets clients

Ce qui m'a amené à ce choix en plus du "moi j'aime ces couleurs" c'est leur contraste ultra efficace d'un point de vue de l'accessibilité. Effectivement comme tu le remontes cela semble, au moins dans ton cas, se faire au détriment d'un certain confort de lecture. Étant donné que nous sommes sur un site où la visite est courte et peu axée sur la lecture de longs textes, je me dis que c'est peut-être acceptable. Peut-être aussi que je me fais plaisir à moi-même en me le disant ? Le point que tu remontes est intéressant en tout cas et risque de me faire réfléchir un peu ^^

Merci à toi et belle journée.

Hello specat !

sepecat a écrit :

Je n'ai pas le site sous la main, répondant en vitesse, mais il me semble avoir noté une petite coquille dans le texte (de mémoire, un "ent" en fin de mot qui fait tâche). A confirmer / infirmer toutefois.

Je ne trouve pas cette coquille. Où se trouve t-elle exactement ?

Merci

Salut,

sepecat a écrit :
Même approche en ce qui me concerne, même si la plupart des internautes nous voient comme des fossiles n'ayant rien compris à l'époque actuelle...

Haha je ne suis pas allé jusque la.
C'est juste que je vois le Js comme une chose qui devient indispensable au web (au delà de simple effet visuel comme il y a quelques temps).

sepecat a écrit :
HTML / CSS se suffit dans la majorité des cas pour construire un site visitable

Un site vitrine oui. Mais dès qu'on veux rajouter un peu de fantaisie, de création, d'art etc on est souvent obliger d'y passer.
Et pour tout ce qui est service, application etc c'est souvent toujours le cas. Je ne sais pas s'il y a encore beaucoup de site seulement en html css php... par exemple pour mon site j'utilise un tout petit bout d'AJAX pour mon formulaire de contact..

sepecat a écrit :
ce que fait un script téléchargé n'est jamais connu "a priori"

Non mais normalement il est assez limité... on peut pas faire grand chose en Js en dehors du site en lui même si ? J'ai peut etre une idée assez simpliste mais je vois le Js très "contenu" par le navigateur... Si vous avez des exemples de choses géantes que l'on peut faire en Js en question de hack je suis preneur pour élargir mes connaissances..

Bonne journée a tous !

_laurent a écrit :
Haha je ne suis pas allé jusque la.

Je te rassure, je ne l'avais pas pris pour une attaque personnelle et j'utilise plutôt le terme "fossile" en tant qu'auto dérision

_laurent a écrit :
Non mais normalement il est assez limité... on peut pas faire grand chose en Js en dehors du site en lui même si ? J'ai peut etre une idée assez simpliste mais je vois le Js très "contenu" par le navigateur... Si vous avez des exemples de choses géantes que l'on peut faire en Js en question de hack je suis preneur pour élargir mes connaissances..

Il y a eu différentes discussions sur le sujet, dont une sur Alsa. Une recherche sur le web retourne par ailleurs un certain nombre d'articles traitant de l'aspect sécurité lié à javascript.
Juste un petit extrait, par exemple, tiré d'un billet paru sur Digital Guide en septembre 2018 :

Pourquoi certains utilisateurs désactivent-ils Javascript dans leur navigateur ?

JavaScript est un langage efficace pour la création d’éléments interactifs et conviviaux. Mais aussi, les possibilités de ce langage script sont souvent utilisées pour des composants de sites Web qui n'offrent aucune valeur ajoutée au visiteur et qui ont souvent une influence négative sur l'expérience de l'utilisateur. La forme la plus connue parmi ces mauvaises utilisations de JavaScript est le pop-up publicitaire apparaissant soudainement dans l'interface du navigateur et devant être fermé manuellement pour continuer à profiter du contenu du site Web. Bien que des bloqueurs publicitaires aient été développés pour résoudre ce problème, il existe divers autres codes JavaScript ennuyeux et même dangereux.

- Fenêtres de dialogue (parfois multiples apparaissant à la suite) qui ne disparaissent qu'après une action de l'utilisateur.
- Codes cachés qui ferment le navigateur ou modifient la taille de la fenêtre lorsqu’ils sont activés.
- Codes de suivi qui recueillent des données sur les visiteurs et leur comportement et peuvent les reconnaître à chaque nouvelle visite (Google Analytics, Piwik, etc.).
- Scripts qui cachent des liens vers des sites non sécurisés (par exemple sous la forme de boutons normaux) et redirigent l'utilisateur sans son approbation.
- Applications JavaScript en apparence ergonomiques dans lesquelles un code malveillant a été introduit par cross-site scripting (XSS) basé sur le DOM.

Comme toutes ces mauvaises finalités de JavaScript impliquent d’exécuter le script en question, de plus en plus d’utilisateurs décident de désactiver ce langage de programmation dans leur navigateur. Le risque que des processus de suivi JavaScript puissent porter atteinte à la vie privée est probablement le motif principal de cette fréquente désactivation, et bien souvent, cela est fait à juste titre.

Après, tout est affaire de mesure et chacun peut décider ou non de mettre en place un niveau de filtrage plus ou moins élevé, en acceptant comme corollaire de voir certains sites ne plus fonctionner en tout ou en partie.
Le plus "choquant" à mon sens est de voir certains sites afficher carrément une page blanche si tu as le malheur d'avoir désactivé JS, sans même présenter une balise <noscript> affichant un message d'info. Comme je l'indiquais, HTML / CSS se suffit à lui-même dans la majorité des cas puisque toute page comporte, forcément, des parties statiques qui n'ont nullement besoin de script pour s'afficher. Concernant les parties dynamiques dont je ne conteste pas qu'elles puissent avoir leur utilité, un site à mon sens correctement conçu devrait :

a) soit conserver l'aspect dynamique si l'utilisateur a laissé JS actif
b) soit remplacer la zone en question par son équivalent <noscript> informant du pourquoi du comment la zone est devenue HS

UnCoindPixel a écrit :
Je ne trouve pas cette coquille. Où se trouve t-elle exactement ?

Pour moi, elle se trouverait sur la page intitulée "Données personnelles", dans le passage : "Un coin d’pixel vous proposent sur cette page...".
A priori le "Un" débutant la phrase me paraît en contradiction avec le verbe, mais je peux me tromper...
Côté design et curseur "affolé", il pourrait être intéressant de conserver une partie du site avec ce type de présentation qui correspond à un savoir faire que tu souhaites, et c'est ton droit, mettre en avant.
Ce pourrait être par exemple une section dédiée clairement annoncée.
Pour la charte graphique jugée plutôt sombre, offrit la possibilité d'appliquer plusieurs feuilles de style avec des couleurs dominantes différentes pourrait être une alternative intéressante.
Bref, il peut y avoir matière à concilier l'aspect vitrine du site sur tes capacités professionnelles et un confort d'utilisation pour le visiteur lambda qui préfère, en majorité, un environnement plus conventionnel.
Juste une suggestion...

Ah merci. J'ai trouvé la coquille et l'ai corrigée

Nouvelle MAJ qui corrige certains de vos retours : https://www.uncoindpixel.com/

Merci à vous !

Bonjour Damien,

Tout d'abord, félicitations pour ce joli site/portfolio !

D'un point de vue graphique c'est frais et créatif, propre et dans l'air du temps.
Perso pas fan du violet/vert très 80's, mais ici ça fonctionne. Donc c'est OK pour moi.

Quelques petits points à optimiser ?

Peut être le logo. Désolé mais le carré vert avec l'angle blanc, je lis : L'
En fait je pense que tu n'es pas allé au bout de ton idée. Tu peux aller encore plus vers l'épure. Un coin de pixel, sérieux, tu as le design dans le nom. Inutile d'en rajouter. Le pixel carré en coin, avec l'angle inférieur droit qui touche l'angle supérieur gauche du texte. Éventuellement, tu peux garder le rappel dans l'apostrophe, mais pas indispensable. Texte sur 1 ou 2 lignes, à voir. Et pis c'est tout !

Pour la typo, tu aurais là aussi pu jouer avec le nom du site. Une police "pixel" pour le logo et éventuellement le titrage, une police de complément sobre et basique pour le texte courant.

Une remarque aussi sur la grille (mode affichage desktop). J'ai des choses dans les coins, centrées, calées à gauche, en retrait, sur différents retraits. Du coup, c'est un peu compliqué. Le design du site serait renforcé si on avait une grille plus simple et lisible. Je supprimerais les retraits inutiles (H2… ) pour ne garder que 2 niveaux maximum. Idem pour les éléments placés un peu partout.
1 GRILLE SIMPLIFIÉE + UNE SEULE LOGIQUE D'AJUSTEMENT DU TEXTE (à gauche) = <3

Idem pour les tailles de caractères. On y gagnerait en réduisant le nombre de tailles. Jamais plus de 3 et dans des différences de tailles marquées. Pour une structuration claire de la maquette. Là par exemple entre le paragraphe chapeau du début (Identités, sets d’icônes, graphisme print, formations… ) et le sous-titre (Ma démarche), on a presque la même taille. Il y a une taille de police de trop. Pour éviter la collusion entre les deux textes, la grille doit faire son œuvre. Là le fait de décaler le H2 le fait atterrir dans le chapeau.
À l'inverse le sous-titre "Mais encore ?" sous le H1 flotte terriblement, c'est pas esthétique.

Le H1 "Webdesigner à Rennes", je trouve ça un peu court. Un petit adjectif, ou une mise en situation façon storytelling ? Surtout qu'il y a redite dans le paragraphe qui suit. Parfois, le prénom et le nom ça peut le faire aussi. Ça affirme le personnage. Après c'est une question de choix et d'approche…

Très sympa le déroulé du portfolio. On voit qu'il y a du boulot !

Le over des titres du menu est du plus bel effet.
Peut être un effet en vert sur le curseur en mode desktop dès qu'on le fait bouger, genre "ronds de goutte d'eau" ? Dans la version actuelle, j'ai eu un court temps d'adaptation avant de constater que le curseur était devenu un pixel vert.
Un détail loin d'être anodin à traiter. Le pixel est carré dans le logo. Pour le curseur il apparait comme un losange suite à une rotation. Le mieux est l'ennemi du bien, il y a une version de trop. Ce genre de détail est capital dans la gestion de la charte d'une identité graphique. Aucun effet ne doit être laissé au hasard.

Page partenaires, très jolie.

Quand je passe à la page contact, je constate le manque de structuration de la grille. La ligne de calage à gauche change tout le temps. Ce qui contribue à donner moins de structure au site. Peut être virer tous les textes centrés. Ou ne laisser que le titre principal de la page en grand. Là, toutes ces variations dans l'ajustement du texte, ça accentue le manque de grille structurée. Après tout, autant aller au bout de la logique un coin de… (donc on cale dans "le coin"). Ça pourrait donner plus d'allure à l'ensemble (style typographique international).
Le fait d'utiliser le pixel en losange pour les grands fonds ne me gêne pas. Tant qu'on ne touche pas au petit pixel. Mais là aussi il faut faire un choix. Là j'ai un cou carré, un coup losange, traité de la même façon.

J'éviterais les mots en vert dans les paragraphes blancs. Une couleur par paragraphe suffit. Éventuellement en touche, mais très peu. Vous pouvez en revanche avoir le paragraphe de présentation en blanc, et le second paragraphe plus petit en vert (ou l'inverse). Là aussi, simplifier.

Sur la home, on a une image carrée, puis les losanges. Pourquoi pas que des losanges et pour la première image, juste un angle (losange géant tronqué) qui sert de cadre à une grande photo où on vous voit en train de bosser, ou bien une de vos réalisation ? Je suis un peu vague sur ce point, mais il y a peu être un truc à trouver pour donner un coup de peps à la home. Un peut comme le header d'un élément du portfolio, mais avec une découpe losange (coin). Toujours dans une optique "design suisse minimaliste", qui doit servir de structure pour ce type de design.

https://fr.wikipedia.org/wiki/Style_typographique_international

Voilou pour moi,

Encore bravo pour ce joli travail qui fait déjà très bien son œuvre, en espérant que mes pistes vous soient utiles.
Modifié par spongebrain (14 Jun 2019 - 11:45)

spongebrain a écrit :
Bonjour Damien,

Tout d'abord, félicitations pour ce joli site/portfolio !

D'un point de vue graphique c'est frais et créatif, propre et dans l'air du temps.
Perso pas fan du violet/vert très 80's, mais ici ça fonctionne. Donc c'est OK pour moi.

Quelques petits points à optimiser ?

Peut être le logo. Désolé mais le carré vert avec l'angle blanc, je lis : L'
En fait je pense que tu n'es pas allé au bout de ton idée. Tu peux aller encore plus vers l'épure. Un coin de pixel, sérieux, tu as le design dans le nom. Inutile d'en rajouter. Le pixel carré en coin, avec l'angle inférieur droit qui touche l'angle supérieur gauche du texte. Éventuellement, tu peux garder le rappel dans l'apostrophe, mais pas indispensable. Texte sur 1 ou 2 lignes, à voir. Et pis c'est tout !

Pour la typo, tu aurais là aussi pu jouer avec le nom du site. Une police "pixel" pour le logo et éventuellement le titrage, une police de complément sobre et basique pour le texte courant.

Une remarque aussi sur la grille (mode affichage desktop). J'ai des choses dans les coins, centrées, calées à gauche, en retrait, sur différents retraits. Du coup, c'est un peu compliqué. Le design du site serait renforcé si on avait une grille plus simple et lisible. Je supprimerais les retraits inutiles (H2… ) pour ne garder que 2 niveaux maximum. Idem pour les éléments placés un peu partout.
1 GRILLE SIMPLIFIÉE + UNE SEULE LOGIQUE D'AJUSTEMENT DU TEXTE (à gauche) = &lt;3

Idem pour les tailles de caractères. On y gagnerait en réduisant le nombre de tailles. Jamais plus de 3 et dans des différences de tailles marquées. Pour une structuration claire de la maquette. Là par exemple entre le paragraphe chapeau du début (Identités, sets d’icônes, graphisme print, formations… ) et le sous-titre (Ma démarche), on a presque la même taille. Il y a une taille de police de trop. Pour éviter la collusion entre les deux textes, la grille doit faire son œuvre. Là le fait de décaler le H2 le fait atterrir dans le chapeau.
À l'inverse le sous-titre "Mais encore ?" sous le H1 flotte terriblement, c'est pas esthétique.

Le H1 "Webdesigner à Rennes", je trouve ça un peu court. Un petit adjectif, ou une mise en situation façon storytelling ? Surtout qu'il y a redite dans le paragraphe qui suit. Parfois, le prénom et le nom ça peut le faire aussi. Ça affirme le personnage. Après c'est une question de choix et d'approche…

Très sympa le déroulé du portfolio. On voit qu'il y a du boulot !

Le over des titres du menu est du plus bel effet.
Peut être un effet en vert sur le curseur en mode desktop dès qu'on le fait bouger, genre "ronds de goutte d'eau" ? Dans la version actuelle, j'ai eu un court temps d'adaptation avant de constater que le curseur était devenu un pixel vert.
Un détail loin d'être anodin à traiter. Le pixel est carré dans le logo. Pour le curseur il apparait comme un losange suite à une rotation. Le mieux est l'ennemi du bien, il y a une version de trop. Ce genre de détail est capital dans la gestion de la charte d'une identité graphique. Aucun effet ne doit être laissé au hasard.

Page partenaires, très jolie.

Quand je passe à la page contact, je constate le manque de structuration de la grille. La ligne de calage à gauche change tout le temps. Ce qui contribue à donner moins de structure au site. Peut être virer tous les textes centrés. Ou ne laisser que le titre principal de la page en grand. Là, toutes ces variations dans l'ajustement du texte, ça accentue le manque de grille structurée. Après tout, autant aller au bout de la logique un coin de… (donc on cale dans "le coin"). Ça pourrait donner plus d'allure à l'ensemble (style typographique international).
Le fait d'utiliser le pixel en losange pour les grands fonds ne me gêne pas. Tant qu'on ne touche pas au petit pixel. Mais là aussi il faut faire un choix. Là j'ai un cou carré, un coup losange, traité de la même façon.

J'éviterais les mots en vert dans les paragraphes blancs. Une couleur par paragraphe suffit. Éventuellement en touche, mais très peu. Vous pouvez en revanche avoir le paragraphe de présentation en blanc, et le second paragraphe plus petit en vert (ou l'inverse). Là aussi, simplifier.

Sur la home, on a une image carrée, puis les losanges. Pourquoi pas que des losanges et pour la première image, juste un angle (losange géant tronqué) qui sert de cadre à une grande photo où on vous voit en train de bosser, ou bien une de vos réalisation ? Je suis un peu vague sur ce point, mais il y a peu être un truc à trouver pour donner un coup de peps à la home. Un peut comme le header d'un élément du portfolio, mais avec une découpe losange (coin). Toujours dans une optique "design suisse minimaliste", qui doit servir de structure pour ce type de design.

https://fr.wikipedia.org/wiki/Style_typographique_international

Voilou pour moi,

Encore bravo pour ce joli travail qui fait déjà très bien son œuvre, en espérant que mes pistes vous soient utiles.

Bonjour,
Je trouve vos remarques très pro, je me permettrai peut-être de vous envoyer certains de mes sites pour avoir votre avis
Claire

clairedu75 a écrit :


Bonjour,
Je trouve vos remarques très pro, je me permettrai peut-être de vous envoyer certains de mes sites pour avoir votre avis
Claire

@spongebrain a TOUJOURS un regard très professionnel et très juste.