Bonjour,

Rapidement, de très jolies photos !

Les portfolios de photographes sont généralement plus orientés image et très sobres en matière de typo et de mise en page. Le texte sur ce genre de site, inutile de se leurrer, personne ou presque ne le lira. Sauf quelques internautes qui se seront d'abord arrêtés sur l'image.

Je propose donc de simplifier, styliser/unifier et hiérarchiser.

1. Le menu latéral :
Le menu caché est une tendance forte, mais ici il est complètement caché. Sans icône spécifique impossible de deviner qu'un menu se cache derrière cette barre. Mettre un burger icon (3 bandes) à la place du truc en forme d'œil. L'idéal serait d'avoir un menu à minima, qu'il serait possible d'afficher sur l'accueil (qui serait le portfolio). J'y reviens dans la suite de mes commentaires.
Enlevez le gros © avant le nom. Ça fait très cheap et n'a aucune valeur légale en France. À titre dissuasif, placez le en petit dans les crédits et les mentions légales (en général dans le bas du menu ou de la page).

2. Logo
Virez le "logo" à l'anglaise qui n'a rien à voir avec le reste. Ou alors il faut tout recommencer à la base et faire le site à l'ancienne…  Smiley lol Pas de transparence, de bande de boutons, de variantes de typos… virez tout et ne gardez qu'une police de caractère le plus simple et dépouillé possible, virez toutes les couleurs, virez tout ! Et c'est valable pour tout le site.

3. Typo
Pas de logo donc. Utilisez la typographie du site, en plus grand. de préférence en light ou en ultra light.
Virez cette police de caractère script complètement hors sujet ici. Gardez la police des titres (NEW ORK, ICELAND…). Tout le reste vire. Dans la mesure du possible, ne gardez qu'une taille de caractère, qu'une seule couleur (gris sur fond blanc).
Plutôt que de retrouver le nom du photographe un peu partout dans pleins de polices différentes, je le mettrais en haut dans la police du texte, avec beaucoup de blanc autour.

Pas de mention "Continuer la lecture…". On est sur un portfolio de photographe, pas sur un blog. Vous pouvez placer le menu en petit sur une ligne vu le peu de pages. Si vous préférez garger le menu coulissant, virez la barre et ne gardez que le burger icon, qui doit cependant rester bien visible et accessible. Toujours à l'identique sur toutes les pages.

4. Les images
Je suis déçu quand je clique sur un thème de ne voir aucune image. Il faut scroller pour ce faire. Même sur grand écran. Le texte ne doit pas dépasser 2 ou 3 lignes (quitte à ajouter une option pour dérouler et lire le reste du bloc texte). Sur la page «Hiver en…», on doit se taper un poème de Maupassant… Je suis pas fan de l'idée. Ça fait scolaire, ronflant. Très peu de gens seront disposés à lire ça à ce moment précis. Une courte citation de 3 lignes… OK. L'intégrale d'un poème…  non. Il faut se recentrer sur les photos.

Je constate qu'il est impossible de revenir à l'accueil véritable avec les différents sujets. En cliquant dans la barre latérale, ça m'a ramené à l'accueil général et du coup je dois recommencer mon cheminement pour retrouver l'accueil du menu. Aussi je découvre à l'instant qu'il y a un "portfolio" et une "actualité", qui font un peu doublon. Virez un des deux sujet. Beaucoup de sites de photographe n'ont aucun menu. Juste les photos et sur la pages d'accueil on peut éventuellement choisir un thème. Mais pas plus. Là vous perdez l'internaute avec des menus similaires, doublons, cachés, sur plusieurs étapes… Il faut en vouloir avant de voir une thématique photo…

Dans les mosaïques, mélangez les photos. Là les photos similaires sont collées entre elles. Ça fait scolaire et rangé de façon militaire, limite ça casse l'ambiance.

5. Le reste du site
Pas de menu liens avec des captures d'écrans. Juste du texte. Là pour le coup ça manque. Les seules images qui doivent figurer sur le site d'un photographe, se sont celles de son portfolio. Si ces sites ne font pas parti du travail de l'auteur ou ne sont pas réellement complémentaires, virez-les.

Le formulaire sur toute la largeur, ce n'est pas esthétique. Stylisez et réduisez le format. Ça doit être le plus discret possible. Le code anti robot avec cette immonde image à recopier, c'est à banir sur ce type de site. Trouvez une autre solution ou une idée plus discrète et élégante (combien font 10+5 avec la typo du formulaire ?). Là ce truc, c'est beau comme une flaque de vomi. Smiley lol

En clair, pour le menu, vous pouvez virer : Accueil, Actualité, Présentation, Portfolio, Liens, Contact… Pour ne garder que Portfolio (qui est aussi l'accueil, sur fond blanc) + À propos. Liens et Contact peuvent être placés dans les mentions du footer (sur la page d'accueil) + mentions légales. Bref suppression du menu ou presque. On se rapproche d'un site de photographe moderne.
Pour la page d'accueil avec les jolies photos plein pot. Je la garderais (c'est très beau, élégant et classe). Mais sans barre verticale pour caser un menu quelconque. Juste les images, et au centre le nom du photographe + "PHOTOGRAPHE". Les gens comprendront qu'il faut cliquer. Si on ne voit cet accueil qu'une fois ce n'est pas gênant. Au contraire, ça renforce son impact, son côté exceptionnel. Aucun menu ne devant ramener sur cette page d'accès au site.
La page portfolio doit devenir le véritable accueil, de préférence sans texte ou le moins possible, juste les titres, le nom du photographe et le lien vers la page "À propos" (lisez mon étude des tendances en lien ci-dessous = image first !).
Et pour rester sur cette étude, choisissez une approche design minimal. C'est ce qu'il y a de mieux pour valoriser un portfolio de photographe. Le contenu et rien d'autre. Tout élément autre que les images doit être supprimé ou minimisé. Et c'est valable pour tout, même pour les polices de caractère. Une police, une taille de caractère pour tout. Ça sera nickel. Seule exception, le nom de l'artiste que vous pouvez pour le coup, faire claquer en grand, dans une police light (ou black) ça fait son effet.

Voilà pour moi. Et bravo pour le travail déjà accompli ! Smiley smile
En attendant la suite ? Smiley cligne
Modifié par spongebrain (21 Jan 2015 - 21:37)
En bonus, quelques sites de photographes. Des styles très différents, mais un point commun, le minimalisme et la simplicité. Smiley cligne

http://www.rouvre.com/ (notez l'accueil et l'intégration du menu) Smiley cligne

http://www.erikalmas.com/

http://davehillphoto.com

http://www.mattstuart.com/

http://www.lgalondon.com/

http://www.leocaillard.com/

http://www.hansvandermeer.nl/

http://www.robert-doisneau.com/fr/portfolios/

http://www.100abandonedhouses.com/

...
Modifié par spongebrain (21 Jan 2015 - 16:41)
Bonsoir,

désolé d'avoir pris autant de temps pour vous répondre, mais à la lecture de votre analyse, je ne voulais pas répondre avec trop de légèreté et d'entêtement (non parce que je suis du genre un peu tête de con parfois ^^).

Ceci étant, tout d'abord, un grand merci pour votre analyse que je trouve pertinente et fort constructive. Suite à cette dernière, j'ai effectué un petit test auprès d'un petit panel d'utilisateurs lambdas dont certaines remarques convergent avec les vôtres

Je vais donc répondre point par point de manière à éviter tout oubli Smiley smile

1 - Le menu latéral, le test panel a été catastrophique. Les testeurs ne l'ont même pas vu, ils ont cliqué sur entrée et après ont mis plus d'une minute pour certains avant de capter la présence du menu Smiley eek Grosse remise en question Smiley rolleyes

2 - Le logo à l'anglaise a été validé par l'ensemble du panel sauf 1 personne.
La transparence du menu semble surtout dérangeante sur de petites résolutions d'écran ou le menu se chevauche avec le contenu du site

3 - Le reste des fonts utilisées sur le site n'a pas posé problème à l'exception de sa taille qui, pour certaines personnes est un peu trop petite pour rendre le texte facilement lisible.
Il y a effectivement une incohérence entre la typo du logo et celle utilisée verticalement "C Nicolas Mazières"

4 - Concernant les images, les retours ont été les mêmes que les vôtres. A également été soulevé le problème de retour en arrière, une fois que l'on est dans un album
Pour la similitude entre les photos, je n'ai vraiment eu de retour, mais à titre personnel, je partage vôtre avis et ai même conseillé à mon ami de ne pas dépasser 10/15 photos par album. S'il y a 30 album à visualiser et 50 photos par album, je ne les regarderai pas toute, autant conserver uniquement les meilleures et éviter la redondance...

5 - Pour les liens, ils resteront tel quel, le but étant de conserver un aspect graphique et visuel. Pas forcément l'idéal pour le référencement mais bon...
Point de footer il n'y aura, décision maître des lieux, qui, encore une fois, préfère miser sur la sobriété. Sur ce coup là, j'avoue être en accord avec lui Smiley smile

Et après ? Après les différents retours qui m'ont été faits, dont le vôtre, j'ai contacté mon pote pour lui en faire part.
Plusieurs choses ont donc été décidées:

1 - suppression de l'animation du menu qui restera fixe et visible, sans la barre verticale et sans transparence

2 - en lieu et place du bouton "entrer", le logo de l'auteur pointant vers la page "porfolio"

3 - suppression des romans dans les portfolios qui seront remplacés par des textes de 2/3 lignes max optimisés en terme de vocabulaire pour le référencement.

4 - page d'actualités, les albums n'y seront plus listés pour éviter la redondance, toutefois, la page restera car elle sera amenée à afficher, l'actualité photographique de l'auteur. Quand un nouvel album sera crée, une news pour l'annoncer sera publiée avec une option "rédaction libre" Smiley lol et un lien direct vers l'album.

5 - la page liens restera telle quelle. (ou tel quel ? je sais comment l'accorder cette tournure)

6 - la page contact sera revue, certainement avec une image de fond en pleine page et les champs du formulaire revus, comme vous le suggérez dans votre réponse.

7 - page portfolio, les images des albums seront directement cliquables (d'ailleurs le panel a soulevé le même problème que vous à ce sujet Smiley cligne )

8 - je crois que c'est à peu près tout...


Voilà voilà, je suis également allé voir les sites que vous avez mis en lien, ils sont sympas, mais je suis tout de même content d'avoir pu faire un design qui sorte un petit peu du lot Smiley smile

Merci encore pour votre précieuse aide.

@bientôt Smiley cligne
Merci Olivier, un oubli de ma part c'est corrigé Smiley smile


edit, ah non, petit bug avec le menu... je regarde ça deman Smiley smile
Modifié par aiglobulles (28 Jan 2015 - 21:19)
Bonjour,

Je trouve votre réponse construite et argumentée. Pas de "tête de con" à l'horizon… Smiley cligne

Une bonne idée que de tester sur des cobayes pour l'ergonomie. Ça a permis de confirmer le problème du menu latéral.

En revanche, l'usage m'a permis de confirmer qu'il est inutile et vain de demander conseil sur le style à des personnes non initiées ou non professionnelles. Je ne demanderais pas conseil à des quidam pour les CSS ou le développement. Pareil en design. Ça n'apporte rien à part des "j'aime/j'aime pas" qui sont au mieux des tests d'agrément. Encore faut-il que le panel du test soit représentatif.
Dans la plupart des cas, ça n'apporte aucune réponse et permet surtout de se conforter dans ses erreurs.

Premier point, le logo. Un logo reflète l'identité d'un design, d'un site. Il faut qu'il soit en cohérence. Là le style à l'anglaise est dissonant et ne colle pas au site. Pour qu'il trouve sa place, soit vous donnez une "english touch" au site, soit vous ne mettez pas de logo. Ici on a pas affaire à une marque. Vouloir absolument coller des "logos" pour tout et n'importe quoi n'a pas de sens. Avoir un style moderne avec des choix typographiques simples sera plus efficace qu'un pseudo logo. Certains photographes connus sont associés à un style qui englobe la typo (ex. : William Klein = typo mode/moderne/jazz/rock). Presque aucun photographe n'a de logo, sauf peut être les photographes de quartiers qui ont une enseigne ou travaillent sous franchise. Mais là c'est autre chose.
Les sites en exemples sont là pour montrer comment fonctionnent les portfolios de photographes. Ils ne sont pas à prendre à la lettre mais montrent que certains points sont difficilement négociables : simplicité, neutralité, ergonomie, respect des règles typographiques, portfolio… On peut choisir un style très typé et différent, mais il faut d'abord avoir intégré les bases. Même les portfolios de photographes très spaces et décalés respectent ces règles.
http://www.davidlachapelle.com/

Faire différent en se contentant de ne pas appliquer les règles de bases et de bon sens en graphisme, ne peut être que contre productif.
Le style minimaliste que vous recherchez et qui correspond bien au sujet doit être appliqué en respectant une ligne nette. S'en éloigner ou y apporter quelques arrangements ne fait qu'affaiblir l'ensemble. La créativité et l'originalité se jouent ailleurs et le travail du designer consiste ici à mettre en valeur celui du photographe, en toute modestie.

Une bonne idée que d'enlever certains doublons de photos. La profusion peut perdre l'internaute qui ne cliquera de toute façon pas sur tout et affaiblir l'image qu'on se fera du photographe.

Bonne idée aussi que de minimiser le texte. Il ne faut pas perdre l'internaute en l'assommant de textes. Par contre vous pouvez vous lâcher un peu sur la page "À propos", mais là encore, simple.

Pour la page lien, les vignettes flottent et font "à l'ancienne". De simples liens textes seraient parfaits. L'idéal serait que les seuls visuels de ce site soient les photos de l'artiste. Un peu comme dans un écrin.

Pour le formulaire, attention à l'image de fond. Pour un portfolio il est "casse gueule" de mettre du texte sur des images si c'est pour les transformer en vulgaire "fond d'écran". Ça peut dévaloriser. En revenche, plein pot sur la home avec juste le nom du photographe (et la baseline PHOTOGRAPHE), sera du meilleur effet. Car là la photo est mise en avant comme une œuvre. La différence est subtile. Smiley cligne

La typo script pour les textes passe vraiment mal. Inutile de faire des tests utilisteurs. Elle n'est pas adaptée pour l'usage que vous en faites et ne valorise pas à l'univers du photographe. Là encore, allez direct à la simplicité. C'est plus difficile que de faire du faux original. Smiley lol

Malgré quelques maladresses normales pour un non professionnel du graphisme, je trouve que vous avez déjà fait un travail très honorable. Je ne m'inquiète pas trop pour ce site.

Voilà pour moi, en attendant la suite ? Smiley smile
Bon bah y aura pas de suite je suis absolument dégoûté

Après avoir validé toutes les modifs, je me suis donc mis au travail et ce soir changement d'avis le pote veut remettre son bouton "entrer" ainsi qu'un me à filigrane sur les toutes les photos de son site...

C'est la dernière fois que je fais un site pour un pote Smiley decu
À prendre comme un exercice intéressant. Qui ne met pas en cause la qualité de votre travail. Smiley cligne

En effet, mélanger travail et amis est un exercice délicat. On découvre parfois les amis sous un aspect qu'on ignorait.
Oui ce n'est pas faux, mais je suis aussi fautif... cela fait un moment que je le dis que je dois travailler sur cahier des charges et faire signer ou valider (garder une trace) des décisions prises afin de ne pas travailler avec le risque de tout devoir refaire.
C'est un problème d'organisation que je dois absolument résoudre.

Pour le reste, bah c'est le site du client et il est donc seul décideur au final, mais c'est dommage car la plupart de vos suggestions me paraissent vraiment pertinentes et j'aimais bien le rendu..

En tous cas, merci pour vos analyses et le temps que vous y prenez. Elles sont (oui je me répète Smiley smile ) pertinentes et sont source de motivation pour qui a envie et besoin de progresser.

A bientôt pour le prochain site, bon week end

Bruno