[PRO] Portfolio d'indépendant/agence en webdesign

Bonjour !

Je suis en train de mettre au point un site présentant mes travaux et qui me permettra je l'espère de démarcher correctement les agences (et les clients directs avec un peu de chance) et servira de bon support pour montrer ce que je sais faire.
C'est mon premier "gros" site en HTML, avant je faisais plus de l'application.
J'utilise un workflow à base de Grunt, Sass, Express, et Node pour le server.

N'hésitez pas à tailler, il faut que ça soit à l'épreuve des balles si je veux avoir un minimum de crédibilité.

http://ecographics.org:3001/

PS : l'adresse est une adresse temporaire évidemment.

PPS : le site propose une version ie8
Modifié par Amlau (11 Sep 2014 - 11:04)

Hello (et bienvenue sur alsa),

Ça me plaît beaucoup graphiquement tout ça
…mais le site et sa navigation manque un peu d'ergonomie AMHA.

1) On met du temps à trouver la navigation cachée en haut à gauche (en plus il y a vraiment débat sur l'affordance du picto hamburger).

2) Sur l'écran d'accueil, il faudra mettre un effet de déplacement/défilement lors du clic sur l'ancre présente sur la flèche pour qu'on comprenne mieux qu'on est toujours sur la même page mais qu'on a juste scrollé vers le bas. D'autant que sur le deuxième panneau, il n'y a plus de flèches donc si je n'ai pas compris que la page a scrollé vers le bas, je suis bloqué ici, le menu ne permettant pas de remonter en haut/revenir à la page d'accueil

4) Le mailto sur ton adresse email c'est vraiment cheap (et attrape-spam) ! Faut mettre un formulaire

5) Dernière chose, je pense que si tu es indépendant, tu as tout intérêt à annoncer la couleur et à dire JE au lieu de ce NOUS galvaudé… Pour paraphraser un collègue (et sans vouloir préjuger de ton environnement de travail ^^) :

J'en ai marre de ces indés qui disent "notre agence" alors qu'on sait bien qu'ils travaillent tout seuls en slip dans leur appart !


Bonne continuation à toi en tous cas !!!
Modifié par audrasjb (11 Sep 2014 - 12:29)

Nouveau message après avoir jeté un œil au code HTML généré :

– Mauvaise hiérarchie des titres : tu as un titre de niveau 2 avant d'avoir un titre de niveau 1

– page "works", c'est pire : les seuls niveaux de titre présents sont des titres de niveau… 5 !

– tu as pas mal de <br /> mal utilisés (pour de l'espacement au lieu d'un retour chariot), tu devrais plutôt utiliser des marges CSS pour gérer tes espacements

D'une manière générale, je ne sais pas trop quoi penser : on sent que techniquement tu maîtrise pas mal les choses (svg, rwd maîtrisé, perfs ok, animations bien foutues et sobres, design clair…), mais il y a bizarrement quelques basic's qui sont vraiment négligés

Salut et merci pour ton retour très précis.

On met du temps à trouver la navigation cachée en haut à gauche (en plus il y a vraiment débat sur l'affordance du picto hamburger).
En fait je pense que ce menu n'est pas important donc du coup ce n'est pas grave si on le trouve pas... Peut-être mettre un menu ou tout est en ligne en lieu et place du burger si l'ecran a une hauteur assez importante ? Autrement le débat sur le burger fait rage et c'est un autre topic, et tout le monde a son avis sur la question mais vu que ts les grands l'utilisent je pense qu'il est en train de devenir une convention... A utiliser en connaissance de cause on est d'accord.

Pour la fleche... elle m'ennuie cette fleche en fait je l'ai mise la parceque comme "l'écran d'accueil" fait pile la taille du viewport, je voulais que l'utilisateur comprenne qu'il faut scroller, donc je l'ai rendu cliquable, et quand on clique, c'est sensé scroller "smoothly" jusqu'a un peu plus bas, mais apparemment cela ne l'a pas fait sur ton poste... je vais enqueter. Peut être virer la fleche completement ?

OK pour le mailto... je fais un formulaire ASAP

Ok pour le "je". J'ai mis nous pour ne pas rebuter un éventuel client étant donné que même si je suis freelance je bosse quand même avec des collaborateurs suivant la taille du projet. Il n'y a pas de pronom évident pour dire moi + d'autres... Je vais retravailler tout ça.

Niveau sémantique, ok j'ai repassé le terme "Corail" en h1, "conseil&design web" en h2, "approche" en h3.
sur la page works... comme ils sont ts d'un meme niveau d'importance, je les ai mis ts en H2

Pour les br j'ai pas trop compris ta remarque, mes br sont a chaque fois des retours à la ligne... quand je passe en flexbox par contre ils sont problématiques donc je les passent en display:none

Le probleme avec le html c'est que tu n'as nulle part de noyau central qui t'explique comment faire de A à Z, avec les bonnes pratiques, du début à la fin. Tu es obligé de glaner les infos sur css-tricks ou html5rocks etc... Donc parfois quand on a un background différent on peut etre technique sur certains points et ignorant sur d'autres... si tu as des idées de comment commencer par quoi, je prends.

Bonjour,

Très joli site, les photos notamment !

Au registre des suggestions. J'aurais mis le premier visuel avec une hauteur qui s'adapte à la fenêtre, pour un effet "woah" et éviter une bande claire en bas, par exemple sur les grands écrans.
Attention, quand la hauteur de la fenêtre est réduite, le logo devient tout petit, pas le texte. Du coup le logo minuscule est dévalorisé et la hiérarchie dans la taille des éléments est cassée.

Pour les autres visuels/fonds, il y a comme un effet de redondance (un texte court + fond écru ou photo en alternance). Pour éviter cela, l'utilisation de pictogrammes, de data design, de vignettes… pourraient casser cette régularité. Là on glisse trop du haut vers le bas, sans être suffisamment accroché. On a le texte, les photos, mais on a comme l'impression d'un site incomplet, pas terminé.

Un exemple pour illustrer mon propos :
http://timotheecottier.fr/
(sauf pour la hauteur des diapos qui ici sont statiques)

Certains éléments flottent ou paraissent trop dilués. Par exemple, j'aurais regroupé "Le studio est basé à Marseille" avec l'adresse. Pour éviter la "diapo" vide avec l'adresse toute seule comme une pauvre malheureuse et qui lutte avec les diapos claires dédiées aux argumentaires.

À tester, une hauteur différente pour les argumentaires sur fond clair ? Je suis pas sûr de moi sur ce coup là. À voir, ou pas.

Les références sont très bonnes dans le portfolio (La Princesse aux petits prouts… ). Pour enrichir le site au design "monopage", j'aurais placé les icônes de portfolio directement sur la home. Ce qui de plus fait un clic en moins pour accéder à votre portfolio. Pour moi, il y a une étape de trop pour accéder au contenu primordial (le portfolio), ce qui contribue à cette impression de site trop dilué.

Très bien la jolie vue de Marseille, plutôt que de coller un plan Google comme sur les templates pré-mâchées qu'on trouve un peu partout.

Concernant le picto "hamburger" en haut à droite. Je l'ai vu juste avant de quitter le site, surtout qu'il est absent au départ. La lecture d'un site se fait souvent en forme de F, en commençant en haut à gauche donc. Replacer les vignettes de portfolio sur la home permettra de supprimer cette icône pas indispensable.

Concernant le mailto, je trouve ça plus élégant qu'un formulaire contraignant et rarement utilisé qui semble "forcer la saisie". Il existe des astuces pour protéger les liens mails contre les robots.
http://www.caspam.org/
C'est assez efficace. Il existe d'autres systèmes, à vous de choisir le vôtre.

Un joli site donc, mais à "compacter" et compléter avec les outils graphiques en vigueur actuellement pour aller vers une version monopage. Je pense qu'en optimisant les points mentionnés ci-dessus, ce site peut devenir beau (ce qu'il est déjà) et efficace (ce qui est encore mieux).

En attendant la suite ?
Modifié par spongebrain (13 Sep 2014 - 10:52)

Bonjour,

J'ai réglé quelques-uns des problèmes qui ont été évoqués.
Par contre normalement les images etc sont censées prendre effectivement tout l'écran (à partir d'une certaine taille)
Et le logo qui devient tout petit, c'est sur quel navigateur ? (j'ai testé sur bcp de navigateurs mais je n'ai jamais vu ça)
Marrant pr le formulaire, les avis divergent... Entre temps j'en ai fait un... Pas grave, ca montre un peu d'interactivité... Et puis ca fera plaisir au gens qui sont sur gmail et qui se moquent pas mal des mailto... Moi le premier.

Merci pour tes retours SpongeBrain, et je suis d'accord avec ce que tu dis... Malheureusement ces modifications sont assez importantes à faire, donc pour l'instant je vais sortir mon site comme ça et considérer tout ça pour une V2. Le site de Timothée Cotier est pas mal, mais niveau perfs sur mon macbook de 5 ans d'âge, ça accroche.... Sinon graphiquement très chouette, belle palette de couleurs.
C'est vrai que j'aurais bien aimé passer les refs dans la page principale... En v2 donc, en étant attentif aux performances.

PS: Pr le vieux port, c'est la seule photo qui ne soit pas de moi, c'est une image wikimedia... Il faut que j'aille sur le port pour en faire une belle. Tout le reste, calanques, mers, corail, c'est de moi.
Modifié par Amlau (16 Sep 2014 - 18:27)

Bonjour,

J'avoue avoir la flemme de lire ce qui a été écrit plus haut... Désolé s'il y a du doublon du coup.

Mon premier ressentie est esthétique : c'est pas très actuel, presque ringard.
Pour habillé ton site, tu as abusé des bordures. La tendance actuelle est au contraire d’abolir les éléments superflues tels que "les blocs dans les blocs" (effet produit par les bordures).
L'image d'accueil choisie manque également de profondeur. Le filtre qui lui est apposé unifie tellement les tons qu'il n'y a plus de contraste dans l'image. Donc plus de profondeur, donc pas d'immersion dans un univers.
Dans la même logique, un text-shadow sur le texte aura le double effet de créer du volume et d'améliorer l'aliasing du texte.
La police de caractère choisie n'est pas moderne non plus. Les sérifs, c'est bien pour le papier et les lectures longues. Sur le web, il faut les oublier.
Les tons du site manquent également de saturation. Il faut oser le contraste en associant une couleur bien saturée à du noir ou du blanc. D'autant que dans des tons pastels vont renvoyer l'image d'un caractère peu assumé, un manque de force. Dans le cadre d'une prospection d'emploi ou de contrats, ce n'est pas l'idéal.

Seconde constatation : ta page d'accueil est composée d'une succession "slides" présentant une idée. Pourquoi chacun de ces slides ne couvre t-il pas entièrement la surface du viewport ? Réaliser cela n'est pas très compliqué et le rendu serait nettement plus efficace !

Donc au final, pour moi, la principale chose qui cloche est l'esthétique du site. Pour le reste, ça tient la route.
Modifié par erwan21a (17 Sep 2014 - 11:40)

Salut,

Le problème n'est présent que sur le header, j'avais regardé un peu rapidement.
Le problème provient simplement du "max-height: 40em;" qui limite ce premier slide.

Salut,

Juste pour rebondir sur une remarque de spongebrain à propos des liens mailto :

spongebrain a écrit :
Concernant le mailto, je trouve ça plus élégant qu'un formulaire contraignant et rarement utilisé qui semble "forcer la saisie". Il existe des astuces pour protéger les liens mails contre les robots.

Un lien mailto force le lancement du logiciel de messagerie configuré par défaut sur la machine client. Or, ce logiciel de messagerie n'est dans bien des cas pas utilisé par l'utilisateur de la machine (notamment chez les nombreux utilisateurs de webmail). Dans ce cas, forcer l'ouverture d'un logiciel va venir parasiter l'utilisateur dans sa visite du site (le temps de comprendre ce qui se passe, de fermer le logiciel, etc.). Pas cool

Autant laisser uniquement son adresse email sans lien pour que le visiteur copie-colle l'adresse dans ce cas. Du moins si la solution classique du formulaire n'est pas privilégiée.

Je suis entièrement d'accord avec audrasjb.

Cette fonctionnalité n'est pertinente que pour les utilisateurs d'un client email desktop.
Or nous sommes aujourd'hui à l'ère du cloud et du mobile, nos habitudes tendent à ne plus être aussi ancré sur du desktop.

D'un point de vue ergonomique, le mailto est également mon efficient qu'un formulaire direct. Cela oblige en effet à un clic de plus, puis une attente que la fenêtre s'ouvre. Autant afficher directement un formulaire clair et bien construit.

Amlau a écrit :
Salut et merci pour ton retour très précis.

On met du temps à trouver la navigation cachée en haut à gauche (en plus il y a vraiment débat sur l'affordance du picto hamburger).
En fait je pense que ce menu n'est pas important donc du coup ce n'est pas grave si on le trouve pas...

Raah tu peux pas dire ça et mettre dans ton folio "L’ergonomie du projet, sa facilité d’utilisation sont des considérations majeures" Tous les grands utilisaient des glossy aussi à une époque. J'ai l'impression que le burger menu sur desktop c'est surtout de la poudre aux yeux et eyecandy trendy 3.0 tout ça : pourquoi cacher une navigation composée de 3 liens qui prennent presque pas de place ? J'aimerai vraiment un argument ergonomique qui me prouve que c'est une bonne idée de cacher une navigation courte sous un burger icon sur desktop (je suis ouverte à la suggestion hein, mais pour le moment j'en ai pas trouvé).

erwan21a a écrit :

La police de caractère choisie n'est pas moderne non plus. Les sérifs, c'est bien pour le papier et les lectures longues. Sur le web, il faut les oublier.

En 1999 peut-être... en 2014 on a quand même pas mal de serifs très bien conçue et parfaitement lisibles pour le web. Et au contraire ça donne un style peu retro qui peut cadrer selon le design général. Dans son cas je trouve que ça se marie bien sur les photos.

erwan21a a écrit :

Pour habillé ton site, tu as abusé des bordures. La tendance actuelle est au contraire d’abolir les éléments superflues tels que "les blocs dans les blocs" (effet produit par les bordures).

Là encore, une question de "tendances" : j'ai vu pleins de tutos qui remettent les bordures et les lignes à l'ordre du jour avec des effets de transition très sympa. Je trouve qu'au contraire le cadre "border" autour des photos donne un effet de style un peu retro plutôt pas mal. (en vrac http://tympanus.net/Tutorials/BorderAnimationSVG/)

En dehors du burger icon qui pour moi est inutile, j'aime beaucoup l’ambiance générale du site et la DA : simple, clean et sophistiqué sans en faire trop. Par contre j'ai du mal sur la page références à revenir sur l'accueil. Un bouton "retour" c'est pas super intuitif comparé à un logo cliquable par exemple.

Hello... Des études ont montré qu'en fait le logo qui renvoie à l'accueil, qui est une "convention" chez les dev de sites, n'est en fait pas si utilisé que ça ! Ca à de quoi surprendre mais enfin apparemment c'est vrai (plus les sources désolé... J'aime pas dire ça dans le vide mais bon...)
En plus, sérieux, entre un bouton retour qui permet de retourner à la page précédente, et un logo cryptique qui, avec aucune affordance (si ce n'est cette convention qui est finalement remise en cause) tu trouves que c'est mieux un logo ?
Le retour en haut à gauche c'est la norme dans les trucs iOS en plus...
Quand au burger... on peut se balader dans le site sans. Le menu avec les liens est rappelé dans le footer. Il y a un gros bouton qui pointe vers les références... Je songeais à éventuellement remplacer le burger par un sticky menu (voire un sticky footer ?) pour les écrans avec assez d'espace vertical. Je pense que ça pourrait le faire tout à fait. Non ?
Tu dirais que tu as mis cbien de temps à trouver les références quand tu as commencé à les chercher ? (je suis curieux)

Merci Stéphanie, je n'aurais pas dit mieux.

Pour la police de caractère, le serif est en effet à éviter pour les petits caractères qui passent mal sur les basses résolutions encore très présentes sur les moniteurs PC (les détails/empattements sont altérés), mais ce n'est pas le cas ici. À partir d'une certaine taille on est libre de choisir la police de son choix. Et avec la montée en puissance des écrans haute résolution cela va devenir de plus en plus vrai.

Pour ce qui est du formulaire, du mailto ou d'une simple indication de l'email, je pense que les différents arguments se défendent. Il n'y a pas "une" vérité. À Amlau de faire son choix en fonction de ses objectifs.

Pour le logo (le corail) qui se rétrécit avec la fenêtre, cela se passe en réduisant la hauteur (chrome/mac), mais j'ai l'impression que des retouches ont été faites et il faut vraiment beaucoup réduire la hauteur pour que cela se voit. Idéalement, lier la partie texte et image d'un logo pour que l'ensemble reste homothétique quelques soient les circonstances.

Sur le picto "hamburger", Stéphanie a tout dit. Je pense qu'en amenant les vignettes du portfolio sur la home (ce qui va dynamiser le site), le problème ne se posera plus en supprimant le picto (ou en affichant le menu sans le cacher). Le picto hamburger prend son sens sur mobiles avec un manque de place, sur les grands moniteurs c'est tout simplement inapproprié.
Une idée parmi d'autres serait de glisser le menu en fixe sous le premier visuel, puis de le laisser visible pour le reste de la page, en jouant sur les plans. Ou bien un menu qui apparaît au scroll ? Les possibilités sont multiples…

Pour la convention qui veut qu'on clique sur le logo pour revenir à la home, c'es très ancré chez les utilisateurs et d'un point de vue logique le logo est la base du design et du site. Et quand on veut revenir à la base…

Un joli site en tout cas qui ne cherche pas à faire "branchouille", avec une touche classique et élégante, typiquement "frenchy", si ce n'est des mises au point ergonomiques et de mise en page qui viendront dans la V2 comme l'a dit Amlau.

HEllo,

Je suis d'accord avec Stéphanie et SpongeBrain.
Je n'ai pas trouvé le menu en haut à droite.

Pour ce qui est du mailto, ou formulaire, j'ai fait le test sur mon site personnel. J'avais pendant longtemps un lien mailto. Je recevais quelques mails par semaine. Depuis l'ajout du formulaire, j'ai très nettement augmenter la conversion, je dirais d'un facteur 3/4 environ.
Sinon l'ensemble est sympa graphiquement, mais fait un peu "jauni", du coup, donne un effet de vieux. Perso je suis pas fan, mais c'est très subjectif.

Ça me parait étrange pour cette étude mais ça m’intéresse, si tu la retrouves hésite pas à me ping Perso je me base sur mes cours d'ergo et nombreuses lectures sur le sujet, mais bon, elles sont peut-être un peu vieillottes remarque ça a peut-être changé. Ça reste quand même souvent remis dans pas mal de guidelines ergo.
Ce qui m'ennuie avec le mot "retour" c'est le niveau d'abstraction : retour à quoi ? Y avait quoi déjà avant ? Ça demande de réfléchir. Alors que l'accueil, c'est l'accueil, point. C'est l'habitude sur iOS, mais ce qui semble logique sur une plateforme native ne l'est pas forcément partout. Et surtout : 2 cliques pour revenir à l'accueil depuis une page interne du folio (retour + retour). Au pire l'utilisateur à le retour du navigateur si c'est ce qu'il souhaite vraiment faire.

En fait je pense que mon souci avec le menu ici c'est que 2 des 3 liens sont des ancres internes, du coup le seul "vrai" lien c'est références. Après je suis d'accord : c'est pratique de linker le formulaire de contact de bas de page pour que celui qui le cherche le trouve dans le menu. Pourquoi pas un sticky menu qui disparaît dans un effet de fade un peu sympa. Un autre truc que je trouve pas mal en ce moment en interface c'est Pocket : le menu est sticky, disparait quand tu scrolles vers le bas, mais si tu remontes (on considère donc que tu cherches peut-être le menu) on te le re-affiche. Je sais pas ce que ça donne sur des utilisateurs "classique" (aka pas des webdesigner geeks ^^) mais ça me parait pas mal comme compromis place sur l'écran / esthétisme.

Pour le reste encore une fois, joli boulot de DA
Modifié par Stéphanie W. (19 Sep 2014 - 15:28)

J'ai mis en place un petit menu qui se rétracte si on scrolle vers le bas + un menu sur la homepage... C'est mieux je pense là... Par contre à votre avis sur les tablettes, quel type de nav est préferable ? Sachant que je n'ai pas de tablette pour tester -> gros touriste...

PS: je sais pas pourquoi mais l'effet "jauni" m'attire énormément moi... Je suis un amateur de vieux trucs en même temps..
Modifié par Amlau (24 Sep 2014 - 15:13)

Sur desktop, c'est mieux, mais du coup le "menu" juste en dessous du premier bloc devient inutile puisque qu'il n'est plus "visible" quand on clic sur la flèche...

J'ai testé rapidement sur ma tablette (Galaxy Note 10.1) et j'aurais aimé avoir le même menu que sur desktop. Tu pourrais utiliser le hamburger pour les tout petit écran seulement. D'ailleurs, quand je scroll, ça "saute" un peu...

Même commentaires que déjà mentionné niveau design, c'est juste un peu trop régulier au niveau des blocs. Je trouve dommage de devoir changer de page pour voir les références, j'aime beaucoup le design de cette page, la mettre sur l'accueil aurait cassé l'effet régulier des blocs.

Amlau a écrit :
J'ai mis en place un petit menu qui se rétracte si on scrolle vers le bas + un menu sur la homepage... C'est mieux je pense là... Par contre à votre avis sur les tablettes, quel type de nav est préferable ? Sachant que je n'ai pas de tablette pour tester -&gt; gros touriste...

PS: je sais pas pourquoi mais l'effet &quot;jauni&quot; m'attire énormément moi... Je suis un amateur de vieux trucs en même temps..

C'est pas mal comme ça. Par contre tu te retrouves avec 2 menus quand tu scroll vers le bas et remonte un peu à un moment. Y a peut-être moyen de faire en sorte en JS qu'il n'y en ai toujours qu'un ?

A mon avis sur tablette vu que t'as que 3 items dans le menu, un menu horizontal rentre sans souci. Pense juste au :active pour que l'utilisateur ai un retour quand il "touch" le lien

ça avance pas mal c'est cool en tout cas