[amateur] Portfolio web développeur

Bonjour,

J'ai décidé de me créer un portfolio mais n'étant pas designer dans l'âme j'ai voulu faire quelque chose d'assez simple, épuré mais aussi esthétique et j'aurais voulu avoir votre opinion si c'est réussi ou non.

Concernant le site en lui même il me reste le responsive a faire correctement parce que actuellement sur certaines résolutions c'est pas tout a fait ça.

http://www.antoinec.io/

J'attends vos avis et critiques


Antoine
Modifié par John Wayne (25 Jul 2014 - 10:52)

Bonjour,

En effet tu respectes bien ton objectif, simple et épuré, les couleurs s’enchaînent bien.

J'aime beaucoup le rendu dans la partie CV, notamment la courbe chronologique. Juste une typo en gras qui est pas très net et la jauge de tes compétences qui ressort trop du fond de la jauge (peut être assombrir légèrement le gris ou pastélisé légèrement le bleu).

Pour tes logiciels (la partie j'utilise), on a l'impression que cela est interactif genre bouton ou légende et effet non. Peut être qui si tu ajouté une info-bulle au hover en indiquant en quoi tu l'utilise qu'est ce que tu fais avec, pourquoi tu l'as choisi, cela aurait un intérêt réel.
Sinon essaie de modéliser cela plus car une liste que comme des boutons.

Pour finir, tu as un bug dans ton formulaire de contact, lorsque je saisie un nom (ou les autres input) et que j'efface ensuite, seul "votre" réapparait. Sinon çà part d'une très bonne idée !

Bonne continuation.

Bonjour mini-truc,

Tout d'abord merci pour ta réponse très pertinente

a écrit :
J'aime beaucoup le rendu dans la partie CV, notamment la courbe chronologique. Juste une typo en gras qui est pas très net et la jauge de tes compétences qui ressort trop du fond de la jauge (peut être assombrir légèrement le gris ou pastélisé légèrement le bleu).

Je prends note

a écrit :
Pour tes logiciels (la partie j'utilise), on a l'impression que cela est interactif genre bouton ou légende et effet non. Peut être qui si tu ajouté une info-bulle au hover en indiquant en quoi tu l'utilise qu'est ce que tu fais avec, pourquoi tu l'as choisi, cela aurait un intérêt réel.
Sinon essaie de modéliser cela plus car une liste que comme des boutons.

En effet je vais modifier ça pour la rendre plus dynamique, bonne idée

a écrit :
Pour finir, tu as un bug dans ton formulaire de contact, lorsque je saisie un nom (ou les autres input) et que j'efface ensuite, seul "votre" réapparait. Sinon çà part d'une très bonne idée Smiley smile !

Oh non pas un bug Je vais résoudre ça au plus vite.

Antoine

Bonjour,

Un joli design frais, sobre et moderne.

Par contre, sur mon moniteur, j'ai des éléments qui se calent à droite, ou à gauche, ou au milieu… Ça perturbe fortement le confort de lecture et ruine en partie le design général. Surtout quand par exemple sur la bande bleue foncé (Je suis un développeur web d'Orléans. Je suis passionné…) ou le 3ème rond passe en dessous, alors que la moitié gauche de la page est vide.

Retirez le TOP présent dès le haut de page. Faites le apparaître en bas.
Le footer manque de respiration. Dans le champ, je trouve votre idée intéressante mais vous pouvez retirer les "votre" redondants, et tester plus fondu ou bleu ?

Une fois ces bugs de placement fantaisistes en fonction du format de page réglés (design adaptatif non maitrisé), je pense que ça sera un joli site de Développeur Web, moderne et pro. Du moins pour la présentation.




MàJ : Attention à l'orthographe. Des fautes énormes !! Zéro faute obligatoire.
Juste un exemple :
"et je vous contacte au sujet"

Et attention aux passages à la ligne, plutôt que :
'Bonjour je m'appelle "votre nom" et je
vous contact au sujet "votre message", vous
pouvez me répondre à "votre email"'

Préférez :
'Bonjour, je m'appelle "nom",
je vous contacte au sujet "message",
vous pouvez me répondre à "email"'

MàJ 2 : Le passage à la ligne du formulaire est lié à la largeur de la page. Faites en sorte que le passage à la ligne soit le même quelque soit l'écran. Un design adaptatif réussi ne doit pas flinguer la typo et la mise en page.
Modifié par spongebrain (27 Aug 2013 - 06:32)

Bonjour Spongebrain,

spongebrain a écrit :
Par contre, sur mon moniteur, j'ai des éléments qui se calent à droite, ou à gauche, ou au milieu… Ça perturbe fortement le confort de lecture et ruine en partie le design général. Surtout quand par exemple sur la bande bleue foncé (Je suis un développeur web d'Orléans. Je suis passionné…) ou le 3ème rond passe en dessous, alors que la moitié gauche de la page est vide.

Pourriez vous me dire la résolution de votre écran ? Je n'ai que viewlike.us pour tester et je n'ai pas rencontré ce problème hormis sur un écran Rétina.

spongebrain a écrit :
Retirez le TOP présent dès le haut de page. Faites le apparaître en bas.
Le footer manque de respiration. Dans le champ, je trouve votre idée intéressante mais vous pouvez retirer les "votre" redondants, et tester plus fondu ou bleu ?

Ok je vais ajuster cela.

spongebrain a écrit :

MàJ : Attention à l'orthographe. Des fautes énormes !! Zéro faute obligatoire.

Étant donné que le site est encore en développement je n'ai absolument pas fais attention aux fautes

spongebrain a écrit :
MàJ 2 : Le passage à la ligne du formulaire est lié à la largeur de la page. Faites en sorte que le passage à la ligne soit le même quelque soit l'écran. Un design adaptatif réussi ne doit pas flinguer la typo et la mise en page.

En effet ce passage est hasardeux, je vais modifier.

Merci pour votre critique

Re,

Sur chrome (mac), capture à l'échelle 1 (ouvrir l'image dans un onglet pour avoir le rendu à l'échelle) :

http://img4.hostingpics.net/pics/314664Capturedcran20130827102909.png


Pour se rendre compte des positionnements sur tout le site dans différentes largeur de fenêtre, capture à échelle très réduite (à l'échelle 1 c'est à peut près le même bazar) :

http://img4.hostingpics.net/pics/914428Capturedcran20130827102802.png

http://img4.hostingpics.net/pics/660770Capturedcran20130827102829.png



Sur moniteur de bureau, c'est la largeur de la fenêtre qui prime, et non pas la largeur de l'écran comme sur un smartphone. Beaucoup affichent plusieurs fenêtres et la largeur est donc complètement aléatoire.
On constate que certains blocs qui devraient rester centrés et s'équilibrer, se placent à droite ou à gauche de façon désordonnée. En variant la largeur de la fenêtre, ce qui correspond à différents écrans, le problème persiste ou s'aggrave.

Il faut que tout reste bien centré quelque soit l'écran. Les 3 ronds sur le bleu foncé doivent rester côte à côte, ou bien superposés tous les trois et centrés.
Les blocs "Mon CV" et "Mes compétences" doivent se retrouver centrés également, qu'ils soient côte à côte ou superposés. L'espace entre les deux blocs ne doit pas être trop important comparé aux espaces latéraux.

Concernant le formulaire, on voit à quel point le passage à la ligne doit être maîtrisé et la respiration verticale accentuée. Là c'est pas joli joli.

Voilà, que du calage et des réglages donc, mais qui feront toute la différence.

Bon courage !


Mà J : Et attention, le fil bleu du CV ne doit pas couvrir le texte.
Modifié par spongebrain (27 Aug 2013 - 11:00)

Salut

J'avoue que pour les deux premières captures j'ai un doute, es ce que tu as redimensionné ton navigateur et pris tes screenshots ? Parce que j'ai des medias queries qui justement gère le positionnement des éléments pour les résolutions suivantes :

- 1600px
- 1440px
- 1366px
- 1280px
- 1024px
...

a écrit :
Concernant le formulaire, on voit à quel point le passage à la ligne doit être maîtrisé et la respiration verticale accentuée. Là c'est pas joli joli.

Entièrement d'accord

À l'échelle 1 j'ai tout qui se cale comme sur la capture. Comme on ne peut pas voir ce qui se passe en dessous, j'ai réduit l'affichage pour montrer ce qui se passe à l'échelle 1 en faisant défiler la page. Que faire de plus ?

Pour la largeur de la fenêtre il suffit de regarder sur la capture N°1. Ça peu bouger un peu en fonction de la largeur de fenêtre. Mais le problème reste le même, et est même accentué sur grand écran.

Allez vérifier vous même, je ne pense pas être le seul chez qui ça s'affiche comme ça. L'affichage doit fonctionner aussi sur moniteur, quelque soit le largeur. Là ça ne fonctionne correctement dans aucune largeur sur moniteur. Puisque c'est l'intégration qui est probablement à revoir.

Bon courage !
Modifié par spongebrain (27 Aug 2013 - 11:35)

En effet c'est bizarre, viewlike.us ne doit pas si bien marcher que cela alors

Merci

Des fautes dans le texte :
ainsi que tout ce qui touche au milieu du web
pour le plaisir
en licence professionnelle
je vous contacte
développeur

j'aime beaucoup site, fluide, qui s'adapte, avec des animations...

Bonjour,

J'ai pu rectifier quasiment tous les problèmes répertoriés,le design s'adapte correctement il me reste que le rétina à gérer mais je suis entrain de voir comment le faire de la meilleure façon.

J'ai modifié le bloc contact car les inputs à remplir dans les phrases sa devenait assez illisible pour un grand message. J'ai ajouté un petit quelque chose sur le bouton envoyer du formulaire de contact, je l’enlèverais surement au moment de la mise en ligne mais c'était pour expérimenter les keyframes .

Si vous pouviez me dire si le design s'adapte bel et bien à votre écran sa serait cool Dans le cas contraire merci de me dire votre résolution.

@mimmeeko : merci

Antoine

J'ai toujours les éléments qui se calent mal. Notamment dans la bande bleue foncé, tout se colle à droite.
Modifié par spongebrain (04 Sep 2013 - 23:15)

Bonsoir,

Idem sur ipad, mode paysage et portrait.

Toujours sur ipad, j'ai un peu de mal avec certains styles (très proche de ce que l'on trouve habituellement pour styler des boutons/liens) qui me font croire que je peux cliquer sur certaines parties (chouette, me dis-je, un peu d'interactivité), mais non :
- Dans la partie bleu, 8 Nov. 1993 / 45000 - Orléans / antoinec.com (outre le fait que l'utilité de ces informations me semble limité, ou que c'est "mal exploitée", mis en valeur).
- Dans la partie compétences (avec un accent ) section "J'utilise", Sublime Text / Chrome / etc...
C'est déstabilisant, voire frustrant.

Au niveau du formulaire... Un label explicite c'est mieux (au niveau de l'accessibilité tout ça )
Il n'est pas fonctionnel ? ( j'ai tenté d'envoyer un petit bonjour, sans succès apparemment...)

Ne manque plus grand chose, le site et sobre et plutôt sympa, courage

ps: ancien habitant d'Orléans, j'y retourne ce week-end, c'est toujours en travaux ?

Salut

a écrit :
Idem sur ipad, mode paysage et portrait.

EDIT: j'ai vu des solutions avec un zoom: 200% sur le body je vais tenter de dev' sur ça on verra bien le résultat

a écrit :
- Dans la partie bleu, 8 Nov. 1993 / 45000 - Orléans / antoinec.com (outre le fait que l'utilité de ces informations me semble limité, ou que c'est "mal exploitée", mis en valeur)

En fait c'était pour faire une sorte de résumé sur les infos importantes mais je vais voir si je peux améliorer ça.

a écrit :
- Dans la partie compétences (avec un accent Smiley cligne ) section "J'utilise", Sublime Text / Chrome / etc...
C'est déstabilisant, voire frustrant

Merci. Finalement je pense que je vais faire comme pour la partie développement avec un système de "jauge".

a écrit :
Au niveau du formulaire... Un label explicite c'est mieux (au niveau de l'accessibilité tout ça ) Smiley cligne
Il n'est pas fonctionnel ? ( j'ai tenté d'envoyer un petit bonjour, sans succès apparemment...)

Merci pour l'astuce je ne connaissais pas Et non il n'est pas fonctionnelle pour l'instant.

a écrit :
Ne manque plus grand chose, le site et sobre et plutôt sympa, courage Smiley cligne

Merci

a écrit :
ps: ancien habitant d'Orléans, j'y retourne ce week-end, c'est toujours en travaux ?

Orléans est constamment en travaux Je ne sais pas depuis combien de temps tu n'es pas venu mais ils ont fini la ligne de tram B et ils rénovent la place du Martroi.
Modifié par John Wayne (05 Sep 2013 - 10:51)

Re-bonjour,

J'ai pas mal bossé sur mes media-queries, j'ai un design qui s'adapte de façon bien plus fluide qu'avant lors du redimensionnement de la fenêtre maintenant.

J'ai enlevé les les trois ronds qui finalement étaient inutiles pour les remplacer (je vous laisse voir par quoi), concernant la liste a puce dans "J'utilise" j'ai essayé de la rendre plus sobre pour éviter de tromper l'utilisateur en lui faisant croire qu'elle est interactive.

Concernant les hautes résolutions (>1980) j'ai pas pu réellement tester mais le résultat doit être convenable maintenant enfin j'espère

Merci pour vos retours,

Antoine

Bonjour,

J'ai toujours des éléments qui se calent mal. Notamment dans la bande bleue foncé, tout se colle à droite.

Sur le fond blanc (CV / Compétences) ça fonctionne bien mieux avec un positionnement plus équilibré en largeur.

Par contre dans Portfolio, même avec une fenêtre de plus de 1000 pixels de large, le troisième élément du portfolio glisse trop tôt en dessous en se calant mal (ni centré, ni complètement à gauche). Même quand il n'y en a que deux ça se cale mal. D'ailleurs en cliquant sur un travail, dans la fenêtre bleue qui apparait, on a l'image collée à gauche, le titre centré et un bloc de texte blanc qui n'occupe que la partie gauche du fond bleu. Il faut repositionner tout ça.

Dans le contact, le plan créé plutôt un déséquilibre dans la composition et ne sert pas à grand chose. Sinon, le formulaire est plus joli, bien que la partie "message" soit un peu trop petite. Les astérisques rouges ne ramènent à rien, où sont les explications ? La façon de protéger votre adresse mail avec des crochets fait limite amateur. Il existe d'autres solutions moins visibles et plus élégantes.
http://wiki.univ-nantes.fr/personnels:autres:proteger_son_adresse_email_sur_le_web

Le bouton TOP ne doit pas apparaître quand on est en haut de page. Soit le faire apparaître au scroll dès un certain positionnement, soit le positionner directement dans le HTML tout en bas. À vous de voir.

Les nouveaux pictos animés sur le fond bleu (casque, Anfroid, DH…) sont très sympas. Vous avez fait ça comment ?
Modifié par spongebrain (06 Sep 2013 - 17:22)

Bonjour spongebrain

spongebrain a écrit :

J'ai toujours des éléments qui se calent mal. Notamment dans la bande bleue foncé, tout se colle à droite

Oh le boulet que je suis j'ai oublié de dire dès le début que c'était normal, en effet je compte mettre une photo de moi sur la gauche dans la bande bleu c'est pour çà que le texte est à droite

====================

En effet le portfolio reste le point à améliorer.

====================

Noté pour la carte dans le bloc contact.

spongebrain a écrit :
Les astérisques rouges ne ramènent à rien, où sont les explications ?

Bien vu je vais arranger ça, pareil pour l'adresse mail.

spongebrain a écrit :
Le bouton TOP ne doit pas apparaître quand on est en haut de page. Soit le faire apparaître au scroll dès un certain positionnement, soit le positionner directement dans le HTML tout en bas. À vous de voir.

Je vais le faire disparaitre dès que l'on est en haut de page

spongebrain a écrit :
Les nouveaux pictos animés sur le fond bleu (casque, Anfroid, DH…) sont très sympas. Vous avez fait ça comment ?

Picto de chez fontello + css3 avec les transitions et transformation (rotate(360deg)).

Bonjour,

Mise à jour du site en prenant compte des améliorations citées précédemment à savoir :

- Amélioration du portfolio
- Suppression de la carte dans contact
- Ajout d'un cadre blanc à coté du formulaire avec les différentes informations pour me contacter
- Formulaire fonctionnel en Ajax.
- Protection de l'adresse email via un moyen plus propre.
- Le bouton TOP n’apparaît plus lorsque l'on est en haut de la page.

Qu'en pensez vous ?

Antoine