[pro] portfolio prospectif

Pour ce qui est de l'aspect graphique, je trouve ça extrêmement bien fait. Alors, pour ce qui est du code :

Je comprends pas l'intérêt de tes classes sur le body des différentes pages. Ajoute à ça des classes et des balises qui n'ont pas réellement d'intérêt ou qui sont vides. Une meta keywords obsolète, pour finir. Je n'ai que survolé le code, je verrais plus tard pour d'éventuels autres soucis.

Bonjour,

Graphiquement c'est vraiment sympa en effet.
Vive modernizr ^^ !

Pour mon voisin du dessus, je pense que les classes sont du au framework css sparrow je pense ?

Par contre y a une méta qui me choque :

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no">

Sérieusement tu devrais quand même laisser le choix au utilisateur, il ne faut pas oublier les mal voyant ou ceux qui on des problèmes de lecture.

Justement, étant donné que c'est son framework, il devrait pouvoir régler ça avec plus ou moins de mal.

Merci beaucoup pour vos réponses,

1) Alors tout d'abord pour la <div> vide. Je m'en sert pour le système de point par dessus l'image du header.

2) Pour la balise meta keywords c'est une question d'habitude, je vais la retirer du coup ^^.

3) En ce qui concerne les ID sur body je voulais m'en servir comme context pour faire un menu avec un état actif. Elle ne sont pas dépendante du framework.

4) Pour le viewport j'avoue je voulais parer à toute éventualité. Mais j'ai peut-être été un peu violent .

Je vais faire quelques petits changements j'en profiterais pour changer le viewport et retirer les ID.

gortez a écrit :


4) Pour le viewport j'avoue je voulais parer à toute éventualité. Mais j'ai peut-être été un peu violent .

Re,

Alors été violent pas vraiment, je dirais plus que tu à fais l'apprentie boucher "moi je découpe tout et j'analyse après" !

Passons en revu ton code :

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no">

"device-width" ça c'est bien, il va prendre en considération tout les appareils.
"initial-scale=1.0" bah de base c'est 1.0 c'est exactement là même ligne que au dessus.
"minimum-scale=1.0" Donc on peut pas dézomé plus bas pour les presbytes c'est embêtant.
"maximum-scale=2" 2x de zoom max, pour les myopes sévère c'est contraignant.
"user-scalable=no" Et le meilleurs pour la fin

Tu interdis tout zoom sur ta page , waouuhh super utile d'avoir déclaré 5 propriétés pour rien !

<meta name="viewport" content="width=device-width>

Avec cette ligne tu règle tout
Même si ton site n’étais pas "responsive" il va quand même être un peu plus ergo sur un appareil mobile.

Voilà j’espère que ça t'aidera un peu .
Modifié par Nyco (26 Apr 2013 - 23:06)

Salut

Tout d'abord, félicitations ! Il s'agit d'un très beau site, élégant, soigné, actuel, très web 3.0, efficace.

Cela étant dit, il y a quelques points qui peuvent être optimisés. Des détails vu que le site est déjà très propre graphiquement, mais des détails qui peuvent faire la différence. Je suis graphiste donc mes remarques sont surtout axées sur le design de ton site. Je laisse la partie intégration et développement à l'appréciation de gens plus compétents.

Le design s'adapte bien aux différents formats d'écran. Pour faire ma critique, je me base sur une largeur de 1000px. Mes remarques peuvent donc ne pas être justifiées dans un autre format en fonction du placement des éléments. Sur le plan ergonomique/technique c'est très bien de mon point de vue.


• Les couleurs : on est dans une gamme bleu/beige/gris assez élégante sauf dans la partie "Lastest works" avec les deux images de gauche qui laissent apparaitre de la couleur. Ça fait un peut inopportun. Soit tu mets de la couleur dans les trois vignettes de travaux, de façon plus franche et uniforme, soit tu restes dans la gamme du reste du site avec les vraies couleurs qui n'apparaissent qu'en roll over. J'aurai une préférence pour la première option, histoire de réveiller un joli design qui dort un peu.

• Dans "Lastest works" : les effets de flou + les effets de zoom inversé + les effets d'onglet qui monte et descend + l'image qui bouge un peu (ça c'est un bug)… c'est trop. Quand le curseur se trouve entre deux images, les trois vignettes deviennent floues. Fait simple, un seul effet efficace sera plus payant qu'une flopée d'effets chichiteux.
Tes réalisations graphiques sont de qualité et très pro. Tes cadrages de travers ou avec des perspectives dans "Lastest works" ne leur font pas honneur. Reste simple et ultra graphique. tes vignettes doivent être travaillées comme des créations à part entière, et doivent parfaitement s'harmoniser.

• Dans la partie "Main skills", la couleur des icônes n'est pas très flatteuse. On dirait un compromis entre le beige de fond et le noir, résultat une sorte de gris jaune qui plombe un peut au lieu de réveiller le design général où chaque détail a son importance. Tu peux tester des icônes en gris, ou mieux, en couleur ? N'hésites pas à essayer avec des couleurs franches (rouge, vert, bleu…). Une couleur pour chaque thème : icône/titre/filet de pied ?
Peut-être pas, mais peut être que oui. Si ton harmonie de couleurs fonctionne correctement, il manque quelque chose pour éveiller l'ensemble. Apporter une touche de peps. Probablement faut-il retrouver des touches de couleur de-ci de-là.
Le pavé "Code" est plus haut que les autres dans une fenêtre de 1000px de large. Ce problème disparait dans d'autres largeurs… Ct'e prise de tête !

• La partie "Four last years" me semble parfaite. Je note au passage qu'on a un employeur en commun (pas au même moment). Inutile de me demander qui, secret !

• Le footer est très sobre. Attention le bouton "Contact" envoie directement un eMail, c'est trop intrusif. Soit tu mets "eMail", comme ça on sait ce qui se passera en cas de clic. Soit tu met "Contact" en lien vers un formulaire ou l'adresse email marquée qq part dans la page. Jamais "Contact" ne doit envoyer directement un mail.
Personnellement je préfère un vrai eMail, c'est plus direct et plus pro qu'un formulaire de contact comme on en voit partout, on sait à qui on l'envoie avec une trace dans ses mails.
Il y a largement la place pour placer les trois réseaux sociaux en ligne, là le "linkedin" passe en dessous. Tu peux avoir les textes sur une ligne, les icônes (eMail, google… ) sur la seconde ligne.

• Une idée en passant. Bien que je ne sois pas fan de ce genre d'effet, as tu essayé un carousel automatique dans ton header ? J'aime bien ton image avec le chat, peut être qu'un défilé sur 3 images du même style mais démontrant plusieurs facettes pourrait avoir son effet ?

• Il y a un truc qui me gêne dans ce site, que j'ai beaucoup de mal à définir. Je me demande si ce n'est pas ce fond beige clair. Sur mon écran il est assez soutenu et tire au rose/jaune. Dans les parties grisées, ça vire un peut au jaune (écran Apple IPS/dalle mate). Peut être plus clair ou moins saturé ou un truc dans le genre. La différence de ton avec les blocs vraiment blanc peut être très légère.

• Le gris utilisé pour ton nom dans le header est plus foncé que le gris de "Keywords" en bas. C'est pas logique, surtout que ton nom ressort assez mal. Tu peux essayer d'éclaircir la typo grise, ou inverser bloc gris/typo noire, ou nom dans bloc bleu et fonction dans bloc noir… à toi de tester, il faut voir pour se décider. Il faut que ton nom apparaisse mieux, surtout qu'il est difficile à lire.

• Mis à part quelques petites optimisations signalées pour la page d'accueil, les pages de travaux sont parfaites pour moi. Simples, épurées, élégantes. Les travaux sont très graphiques et techniques, très pros. Ils sont bien valorisés par la mise en page. Bravo !

Vivement les prochains !

• J'accroche "moyen" avec ton logo asymétrique qu'on ne voit que dans la bande du haut. C'est un peu bateau et on ne le retrouve nulle part ailleurs. Peut être qu'il ne se décline pas (ou mal) dans ta charte ? Les deux blocs "nom" et "fonction" dans le header sont centrés. As tu essayé de les décaler franchement en largeur pour leur donner une dynamique et les dissocier des titres de rubriques qui eux doivent rester centrés ?

• La page "Works" ne fait pas travaillée. Je pense qu'elle est inutile. Sur la page d'accueil, tu peux avoir une ancre et un scroll vers la partie "Lastest Works". Il y a déjà les mêmes informations et tu pourras parfaitement ajouter d'autres vignettes. Je pense que tu peux te baser sur un site "one page", c'est très tendance et personnellement j'aime ce genre de site. Les pages supplémentaires peuvent n'être réservées que pour les travaux comme les trois pages déjà en place.

• Le "Resume" dans le menu se présente comme un lien parmi les autres. Le choc graphique quand on tombe sur le PDF qui vous saute à la figure !
Indique directement qu'il s'agit d'un PDF pour prévenir. Soigne ton CV, graphiquement, il est un peu brut et moins soigné que ton site web. Du coup on est un peu déçu avant même d'avoir commencé la lecture.
Peut-être que le lien vers le CV est mal placé. Tu peux l'intégrer dans la partie "Four last years" ? en tant que simple téléchargement PDF ? À toi de tester et de voir.


Voilà ce qui me vient dans une première approche. Ce ne sont que des idées qui je pense ne sont pas forcément à prendre au pied de la lettre, mais si j'ai mis le doigt sur quelque chose de juste et que je n'en parle pas ça reste perdu. Donc à toi d'appécier et de juger si mes remarques sont pertinentes ou pas. Tu as l'expertise, ce site le prouve déjà.

En attendant de découvrir la suite. A+
Modifié par spongebrain (27 Apr 2013 - 17:56)

@spongebrain : Merci beaucoup pour ta réponse et le temps que tu as pris pour écrire ton post. C'est exactement le sentiment que j'avais de mon site sans vraiment arriver à mettre le doigt dessus. Comme tu le dis c'est "clean" mais ça manque de "peps" et tous les petits détails (et moins petits) pourrissent l'impression global.

Du coup je vais refaire un tour sur photoshop à l'appui de tes critiques.

Sinon pour notre boite en commun je crois avoir deviné par élimination, mais si c'est un secret je ne vais pas tenter d'y répondre. Sinon vivement que ton site perso soit en ligne. Si tu es aussi bon à l'exécution qu'à l'analyse sa promet d'être du lourd.

Merci encore à Nyco et Knozelfhoegtj pour les critiques plus côté code qui méritent aussi une petite repasse .

Je t'en prie !

Le travail présenté est déjà très bon, il s'agit seulement d'optimiser. Je suis passablement nul en web 3.0, tu me bats à plate couture. Tu risques d'être un peut déçu quand je vais poster. Pour le moment j'essaie de comprendre le HTML5 !
C'est pourquoi il vaut mieux que je limite mes observations au sujet du graphisme. Et il est plus facile d'avoir du recul à propos du travail des autres que du sien. Ravi en tout cas si cela te permet d'avancer.

La boîte en commun commence par E et se termine par G. Mais c'est un secret.

En ce qui concerne le hover sur les boites "latest works", moi je n'ai rien contre les effets, je ne trouve pas que ça fasse trop, ce qui me gêne plutôt c'est le temps de réactivité de l'effet. Quand je fait des transitions sur des hover, je ne mes pas de transition-delay, et je n'excède jamais un transition-duration de 0.5s (au grand maxi, généralement je mes 0.2s ou 0.3s). En effet, là, ce petit effet manque selon moi de fluidité.
Je ne suis pas en phase avec les normes html donc je ne pourrais pas te faire de remarque

Graphiquement je trouve ça vraiment beau, dans le style actuel, avec l'esprit "flat", des colonnes multiples (qui je suppose s'alignent verticalement sur smartphone), l'organisation est vraiment claire.

Petite note pour finir: je n'avais pas vu le hover sur le logo en haut à gauche, je dirais la même choses que pour les boites "works": la transition manque de rapidité.

N'oublie pas que ces remarques ne sont que mon resenti personnel
Modifié par juliendargelos (07 May 2013 - 12:29)

Salut très beau site même si je ne me retrouve pas dans les couleurs (surtout le bleu) mais c'est purement personelle.
Je passais juste ici pour donner juste un ptit conseil sur ton menu. A ta place j'aurai enlever les bordure Bleu claire entre tes liens je trouve ca pas très beau comme ca, ou je les aurai mis en beige pas un nouveau bleu.
Et sinon pense à rajouter une favicon ca fait plus pro .