[Amateur] Portfolio & blog

Bonjour,

J'ai déjà créé un sujet sur la 1re version de mon site ici.
Mais voilà, le temps est passé et la version 2 est née !

http://www.kaysix.fr/

La home page n'est pas aboutie. Je peine à trouver des idées pour faire quelque chose de plus percutant. J'ai repris en dessous les dernières posts, mais je ne trouve pas ce choix spécialement pertinent...
J'ai travaillé avec PluXml (CMS sans base de données) et KNACSS (le mini-framework local).

Lâchez les chiens et les critiques.

Merci,
KaySix

Bonjour,

Très jolie design et clair. Bonne utilisation des couleurs vives.

Lorsque je réduis la fenêtre et que je la redimensionne, certains éléments ne reprennent pas leur position d'origine sur Safari. (menu -vertical- et bandeau -coupé en deux-)
J'ai d'ailleurs ce même problème et je me prends un peu la tête dessus.

Petits avis très personnels :

- La couleur rectangle de présentation dans le header est un peu opaque (et délavée) et rend le texte moins lisible
- les border-bottom des liens "read more" sont en trop...De même que je rendrais l'image cliquable au dessus, ça me paraît plus intuitif.
- le décalage de l'onglet actif du menu ne fait pas trop naturel (d'ailleurs il n'y en a pas pour la home).
- sur le formulaire : le label et le placeholder qui se répètent à chaque fois..
- ça fait bizarre d'avoir un breadcrumb en bas de page (ce n'est pas une critique mais je n'en ai pas l'habitude)

Bon courage

Bonjour,

Très joli site. Illustrations très sympas et couleurs actuelles pleines de peps.

Au registre des critiques, probablement la mise en page assez convenue, un cran en dessous du reste. Mais ça reste correct.

Voilà pour moi.

'jour,

Merci pour vos deux retours.

Spongebrain, pour la mise en page, tu as raison, c'est surement une faiblesse chez moi, faudrait que je fasse quelqu'chose de plus poussée.

Rodolphweb, j'vais rectifier (je vais installer Safari ) ce que tu as dis.

Bonne journée,
KaySix

Hello,

Ultra rapidement :
- Même remarque que Rodolphe sur "les couleurs délavées", c'est "fadasse", ça manque de peps (menu, encart logo, read more...)
- il faut revoir le formulaire de commentaire

hop (j'avais dit rapide )

Au contraire je trouve les couleurs très bien choisies car elle font bien ressortir les illustrations.

A part ça j'aime beaucoup et j'ai rien de plus à dire.
Modifié par jb_gfx (07 Apr 2013 - 14:36)

jb_gfx a écrit :
Au contraire je trouve les couleurs très bien choisies car elle font bien ressortir les créations.

Ça doit être le besoin de soleil qui se fait ressentir, j'ai envie de couleurs !

En (re)passant pas fan non plus du survol des liens qui reprend la couleur du texte

Mais sinon, oui, évidemment, belle réalisation

J'aime bien pare que je visite le site de Kaysix et pas le xième parmi des clones.

C'est net et simple. Suis moins fan de l'opacity sur ton rouge quand c'est en transparence, ça le rend un peu terne.

jmlapam a écrit :
J'aime bien pare que je visite le site de Kaysix et pas le xième parmi des clones.

+1

Plop,

Je réponds à tout le monde, puisque j'ai eu enfin le temps de me plonger dedans.

Pour Safari, je me le note.

a écrit :
rodolpheb >
- La couleur rectangle de présentation dans le header est un peu opaque (et délavée) et rend le texte moins lisible

a écrit :
6l20 >
- Même remarque que Rodolphe sur "les couleurs délavées", c'est "fadasse", ça manque de peps (menu, encart logo, read more...)

a écrit :
jb_gfx >
Au contraire je trouve les couleurs très bien choisies car elle font bien ressortir les illustrations.

a écrit :
jmlapam >
C'est net et simple. Suis moins fan de l'opacity sur ton rouge quand c'est en transparence, ça le rend un peu terne.

3 avis contre 1. Je vais changer la couleur !
Vous parlez du rectangle sur la home à côté de mon avatar ?
Là pour tester, je lui ai mis la même couleur que les boutons, mais du coup, ça fait un peu agressif.
Sinon, la couleur dont je ne suis pas fan, c'est aussi l'espace de beige-gris en haut (là où il y a le nom de mes pages et une mini description), dois-je changer aussi ?
Pour l'opacity, tu parles du "retour en haut" ? ou tu inclus les hover sur les boutons également ?
Le rouge du menu manque de pep's ? Sérieux ?

a écrit :
rodolpheb >
- les border-bottom des liens "read more" sont en trop...De même que je rendrais l'image cliquable au dessus, ça me paraît plus intuitif.
- le décalage de l'onglet actif du menu ne fait pas trop naturel (d'ailleurs il n'y en a pas pour la home).

ça se voit peut-être pas, mais si j'ai mis un border-bottom, c'est pour donner une impression de relief (un profondeur au bouton), j'ai essayé de le faire comprendre avec le mouvement (le top lorsqu'on clique), mais effectivement, ça mérite d'être mieux pensé ! Je vais revoir le truc.
(pour la home, j'ai corrigé pour que ce soit en active quand on est dessus).

a écrit :
rodolpheb >
- sur le formulaire : le label et le placeholder qui se répètent à chaque fois.

Ce n'est pas bien ? En fait, j'ai remarqué que sous IE, le placeholder ne s'affiche pas (pas geré), y a-t-il une façon de contourner ça ?

a écrit :
rodolpheb >
- ça fait bizarre d'avoir un breadcrumb en bas de page (ce n'est pas une critique mais je n'en ai pas l'habitude)

Tu as raison, je modifie.

a écrit :
6l20 >
- il faut revoir le formulaire de commentaire

Qu'est ce qui te dérange dessus ? (et le formule de contact, pareil ?)



Sinon, oui merci, je voulais un peu sortir du lot (de l'eau ) et faire quelqu'chose de plus original...
J'en ai un peu marre de voir toujours les mêmes sites (sur Wordpress la plupart du temps).
N'étant pas une pro', y a quand même pas mal de points à revoir !
Faut que je travaille la mise en page qui fait défaut (comment bien mettre en valeur le breadcrumb, par exemple).

Hello,

Ne te bile pas trop, ce ne sont que des avis, du ressenti et des goûts personnels alliés aux aléas du temps et les humeurs du moment, ceux de Jb ou de jmlapam valent largement de s'y arrêter également.
Pour les couleurs je parlais essentiellement de l'état survolé que je trouve effectivement assez terne, mais la remarque de jb est un très bon contre - "argument".
Finalement, après plusieurs passage on s'y habitue

Concernant le formulaire de commentaire, il faudrait, à l'instar du formulaire de contact que le label soit explicite ( i.e utiliser les attributs for (sur l’élément label) et id (sur le champ de formulaire) avec la même valeur.) afin de relier directement le champ de saisie au texte qui lui est associé, ...accessibilité, toussa

Moi je trouve que les couleurs sont un atout pour ce site, je les trouve acidulée et pleines de peps, si ça c'est terne, comment trouvez-vous le site de la Banque de France ?

Un détail par contre qui me gène et que j'ai remarqué après coup, ce sont les vignettes du bas qui s'adaptent à la largeur de la page, quand j'étire un peut trop la largeur de la fenêtre, les dessins se retrouvent noyés dans la page, en plus ils se placent sur le côté dans leur vignette (chrome/mac). Je pense qu'il faudrait limiter la taille de ces vignettes, ainsi que la marge entre elles, quitte à ce qu'elles glissent d'une ligne à l'autre.

En fonction de la taille de la fenêtre le site peut être perçu très différemment, sur un 20", ce qui n'est pas le max actuel, il y a déjà beaucoup trop de vide partout, tous les dessins flottent. Si la volonté de s'adapter à tous les formats d'écrans est louable, ça ne fonctionne pas à tous les coups, une largeur fixe pour le site serait peut-être même préférable. Ou en tout cas limiter le blanc.

Ce qui pourrait aussi ajouter du poids au site, serait de placer un header illustré sur toute largeur. Ça assoirait le site avec une image plus impactante que les autres, là toutes les illustrations ont la même taille, y compris le header, ce qui contribue à l'impression d'un manque de hiérarchisation de l'information et de flottement.

Beaucoup de sites se contentent de vignettes très sobres placées les unes à côté des autres, ce qui est très souvent largement suffisant pour un portfolio. Du moment que les couleurs sont bien choisies, la charte (typos...) bien pensée, et les réalisations de qualité.

Quelques exemples :
http://skinnyships.com/
http://toddhale.com/

http://www.fakepaper.fr/
http://pleix.net/
http://cargocollective.com/niallstaines

Les sites skinnyships.com et toddhale.com sont intéressants, car les vignettes conservent la même taille, la même marge, et son flottantes, ce qui permet de garder le même équilibre des masses et d'avoir la même cohérence graphique quelque soit la taille de la fenêtre. Pour les sites de type portfolio comportant des images très colorées et des illustrations, des mises en pages sobres peuvent être assez valorisantes. Ensuite à chacun de trouver le juste équilibre en fonction de ce qu'il souhaite présenter.


Edit : Je suis moi même graphiste (pro) et illustrateur (amateur), et j'aime les couleurs acidulées. Attention à relativiser les remarques sur les couleurs. Si chacun à des goûts différents, le réglage de chaque écran est souvent très différent. Un gris bleu sur un écran IPS apparaitra parfois bleu azur délavé sur un écran TN non calibré... La différence d'un écran à l'autre est souvent énorme. D'où l'intérêt een graphisme de travailler sur une dalle à peut près fiable. Quand on fait une remarque sur les couleurs ont devrait systématiquement dire quel type de dalle on utilise. Dans mon cas, un écran mat IPS à peut près calibré.
Modifié par spongebrain (08 Apr 2013 - 15:16)

Merci Spongebrain, c'est très intéressant ce que tu écris.
J'avais la tête ailleurs mais j'vais regarder tout ça maintenant.

KaySix.

Hello,

Kay content de te retrouvé par ici !
Ton petit mouton noir ^^.

@Spongebrain

a écrit :
Ce qui pourrait aussi ajouter du poids au site, serait de placer un header illustré sur toute largeur.

Un peu comme ce site : http://uniformmotion.net/ ?


J'ai un peu remodelé la home, avec un peu plus d’interactivité.
Les vignettes ne doivent plus s'adapter à l'écran (enfin elles disparaissent si l'écran est trop petit).

a écrit :
Dans mon cas, un écran mat IPS à peut près calibré.

Comment sait-on cela ?


@Nyco
Salut. Et oui, j'ère là où le surf me porte...

Il faut voir, et travailler la maquette dans son ensemble. C'est juste que ton site est très blanc, ce qui passe moyennement avec ta mise en page très basique. Et ton header ne parvient pas à compenser. Il faut étoffer, construire, structurer…

Pour savoir quel écran tu as il suffit de regarder les spécifications de celui-ci. Pour le graphisme il vaux mieux éviter une dalle TN au profit d'une dalle IPS/PVA/PLS… aux angles de vision plus ouverts et aux couleurs/contrastes souvent plus fidèles. Les dalles TN sont très utilisées sur les portables et les moniteurs premiers prix. On reconnait facilement une dalle TN car en bougeant un peut, elle virent de couleurs et se grisent.

On trouve maintenant des dalles IPS a des tarifs très abordables.

Les écrans mats sont à privilégier aux brillants qui faussent les couleurs/contrastes.

Pour savoir si ton écran est correctement calibré, il suffit de l'avoir fait toi même, ou bien d'avoir un écran bien calibré à l'achat (voir tests sur lesnumeriques.com). On évalue la fidélité des couleurs avec le "Delta E". Un écran doit avoir un Delta E entre 0 et 3 pour être jugé fiable. Certains écrans bas de gamme ou trop saturés ont un Delta E supérieur à 10. Autant dire qu'ils sont inadaptés à la conception de sites et designs. Le rendu à l'écran étant alors aléatoire.

Plus d'infos : dalles TN, MVA, PVA, IPS
http://www.lesnumeriques.com/moniteur-ecran-lcd/lcd-dalles-tn-mva-pva-ips-4-videos-retrouver-a438.html

Tests écrans "fidèles" selon les numériques :
www.lesnumeriques.com/moniteur-ecran-lcd/comparatif-ecran-lcd-moniteurs-22-a-30-pouces-a240.html#filters/s2=4&c3=v61,v62&c4=v112,v113,v115,v116&nox=3&prx=1&prn=0

Copier le lien s'il ne fonctionne pas.
Modifié par spongebrain (02 May 2013 - 13:53)

Plop,

Je viens de basculer mon site sur la dernière version de PluXML (v5.2) avec le plugin "MyBetterUrls" pour la réécriture d'url. Je vous invite à découvrir cette nouvelle version de PluXML qui déchire tout !
La communauté est active, donc n'hésitez pas à poser vos questions, les réponses sont très rapides et cohérentes. D'ailleurs, un article sur PluXML sur Alsa' serait une bonne idée (il y en a un mais, il est un peu obsolète maintenant).

J'ai fait quelques correctifs de mon site depuis ces derniers mois :
-> animations des picto Avatar sur la home et picto de catégories sur le hover
-> rajout de la catégorie "Ressources" avec deux ressources PluXML
-> réécriture des textes en français (j'faisais du franglais pas très élégant)
-> optimisation du responsive design
-> réécriture d'urls plus propre
-> page robot.txt
-> je n'ai pas touché aux couleurs.
-> je n'ai pas résolu le bug sur safari

Ce qu'il manque, c'est du contenu... mais j'préfère bidouiller qu'écrire !

Bref, si vous voyez des trucs "OMG, c'est trop mocheuh/mal écrit/n'importe quoi", dites-le moi !

Bonne journée à tous,
KaySix
Modifié par KaySix (05 Aug 2013 - 17:14)

Bonjour,

J'aime assez le côté simple et épuré, les images relève un peu de profondeur mais ne suffisent pas a combler les vides. Je pense que le site manque cruellement de contenu ; j'espère que c'etait une beta test ; si c'est le cas n’hésite pas à faire du lorem ipsum pour rendre le site en situation réelle.

Je ne sais pas de qui est les illustrations mais chapeau au dessinateur !

Je ne suis pas fan du hover sur le message d'accueil rouge. On pourrait le laisser comme tel. D'ailleurs, les réactions diffèrent selon les éléments survolés: le titre, le message d'accueil et le lien "retour en haut" s'assombrissent, tandis que les liens du menu s'éclaircissent.

Le lien "retour en haut" est un peu gros, je trouve.

Autre chose: quand je réduis la fenêtre, le responsive réagit bien, sauf que le bandeau avec le menu couvre une partie du message d'accueil.

Sinon, le portfolio est agréable, le blog est ultra plaisant, et j'adore le footer

Très propre
Concernant le contenu, il est clair qu'il va falloir en ajouter.

Juste deux détails qui me chiffonnent :
- sur desktop, on scroll avec la souris, et grâce au hover, il y a toujours un élément de couleur (#F2F2E8) : bien. Sauf que lorsque l'on est sur mobile, point de hover, résultat, cela fait un peu blanc :



- sur desktop, ce hover n'est pas le même sur le blog que sur la page d'accueil, puisque les li ne prennent pas 100% contrairement aux articles. Et je préfère ce changement de couleur sur 100% (blog) que sur 920px (accueil). Sais pas si jsuis très clair