Bonjour,
Pour commencer, je trouve ce site relativement propre et même si la maquette n'est pas optimale en matière de design, ce n'est pas pour autant un élément discriminant pour un développeur. En agence à chacun son métier et les talents se complètent.
Je suis graphiste, donc ma critique se portera essentiellement sur le design. Un développeur qui fait preuve d'intérêt pour le design aura un atout de plus dans son jeu. Un développeur et un graphiste qui comprennent les problématiques de l'autre n'en seront que plus efficaces.
Pour faire simple, le but n'est pas de transformer ce site en modèle de design, mais d'adopter une présentation claire et agréable. Au moins éviter les pièges récurrents de mise en page.
• "DÉVELOPPEUR WEB" c'est trop vague. Surtout que les intégrateurs se dénomment parfois développeur front end… Entre un dev front end et un autre qui fait du PHP ou de l'AS, ce ne sont pas les mêmes profils. Soyez carré et précis dès le départ.
• Faut-il en 2014 encore inscrire "bienvenue" en gros sur la home ? Pas certain. Allez à l'essentiel. Votre texte d'introduction met en valeur votre passion pour l'informatique depuis votre plus jeune âge, mais il manque la transition avec vos compétences actuelles. Ç'est surtout ce que vous êtes aujourd'hui qui est intéressant pour les recruteurs.
Des expressions comme
« juger de mes compétences techniques » sont assez malheureuses. Chercher du taf, ce n'est pas passer devant un tribunal. Restez simple, concret, précis, ouvert.
• La grande capture avec le code va droit au but, mais elle est amenée de façon abrupte. Une petite phrase d'intro, une accroche pourrait faire son petit effet ?
• Il y a trop de polices de caractère et qui de plus, ne s'accordent pas. Choisissez en une seule. Et ensuite jouer uniquement sur la taille, la graisse, eet éventuellement la casse. Vous trouverez des typos sympas sur google fonts… (évitez les polices avec serif (empattements) qui passent moins bien sur écran et sont plus difficiles à manier.
• Il faut hiérarchiser le texte. Là j'ai le titre (nom) plus petit que le texte courant, c'est illogique et perturbe la lecture. Sue les 4 premiers paragraphes j'ai 4 tailles différentes et mal coordonnées (choisissez en 2 max, éventuellement 3 pour le nom un peu plus gros que le reste ?).
• Le haut de la page est centré, puis, sans comprendre pourquoi, la maquette passe en calage sur la gauche. Centrez tout le site. Ce qui n'empêche pas de justifier sur la gauche les sous paragraphes (c'est même recommandé, une liste à puce centrée, c'est illisible).
• Le fond tournant est trop étroit (la bordure entre les éléments, le texte, et le bord de la fenêtre). Du coup ça donne l'impression d'une maquette étriquée. Cet effet est accentué par les trous en plein milieu de la page (listes sur fond gris). Équilibrez vos colonnes, par exemple 3 de même largeur sur la même hauteur. La quatrième colonne (tweets) peut passer en dessous. D'ailleurs ça peut passer dans le footer. Là soit le footer fait 3 mètres de haut, soit il n'y en a pas. C'est pas clair.
Attention, un footer n'est pas systématiquement gris foncé ou noir, le blanc c'est joli aussi et ça passe sur tous les écrans.
• Évitez les soulignés ou les filets qui y ressemblent. En typo, un texte souligné peut être considéré comme une faute.
• Ce gris est triste. Surtout avec ces filets gris bleu et le texte ocre. Là encore faites simple. Virez les bandes, ce gris pas sexy et choisissez une jolie couleur fraiche et pourquoi pas un peu électrique. Les tendances actuelles sont aux couleurs acidulées, pêchues et franches. Le gris n'est utilisé que pour mieux mettre en valeur les autres couleurs. Là on est inondé de gris avec des touches de couleurs ternes.
Pour vous aidez, vous pouvez lire le PDF que j'ai rédigé sur les tendances web design :
http://philipperondepierre.com/
(clic sur la bannière "En 2015, restez connecté !")
Vous y trouverez une synthèse des tendances actuelles et des idées, notamment pour la couleur, simplifier la maquette…
• Les pictos posent problème. Le coup des gros drapeaux à cliquer de cette façon, ça fait un peu daté.
Là encore, pour faire simple, regroupez tous vos pictos : langues, facebook, sociaux… sur une seule ligne (de même hauteur) qui pourrait trouver sa place dans le header. Évitez les couleurs qui agressent et les arrondis qui ici passent mal (drapeaux) ou les couleurs ternes et dégradées (sociaux). 1 couleur pour tout le monde. Les drapeaux peuvent être monochrome (ou juste la couleur pour la langue choisie ?). La couleur d'origine des pictos peut n'apparaitre qu'au survol (voir les chartes de chaque picto disponibles sur les sites de chaque service). Par exemple, là le picto twitter est faux, pour respecter leur charte, il faut placer l'oiseau, pas ce "t" obsolète. C'est aussi une façon de montrer qu'on connait quelques bases en design (respect des chartes respectives).
https://about.twitter.com/press/brand-assets
(idem pour facebook, LinkedIn, Google+… )
Un petit hors sujet, sur votre compte LinkedIn, vous pourriez vous inscrire à des groupes, ce qui facilite la prise de contact et le réseautage. Par exemple un groupe de développeurs, de designers, ou Alsacréations…
• Le fond avec les petits carrés en biais qui apparaît en milieu de page, je ne suis pas fan. Ça s'accorde moyen avec le reste et la tendance est plus aux aplats. Même si vous n'êtes pas obligé de répondre aux dictats du "flat design".
• La police du menu est trop petite en comparaison avec le reste du site (voir mes premières remarques), et là aussi il y a des trous entre les mots, trop d'espace. Inutile de chercher à vous caler sur les bords. Le picto en forme de maison/niche ne sert à rien et est hors d'âge. Surtout aussi gros.
• En simplifiant votre maquette, vous pourriez en profiter pour présenter vos réalisation sous forme de vignettes directement sur la home ? Du cou la couleur attirerai l'attention sur l'essentiel ?
Pour les pages portfolio, là aussi restez simple. Pas de filets, préférez une maquette claire et bien structurée (à intégrer dès la home). Là encore, trop de couelurs, de tailles, de styles d'aligenments de typos qui partent dans tous les sens. Ça créé la confusion. Faites simple. Une maquette bête et méchante mais sobre et bien construite, fera plus d'effet qu'un mic mac de petites bidouilles qui partent un peu dans tous les sens (et qui du coup ne font pas très pro).
Là encore, le picto tout fait avec les 2 persos pour projet ne sert à rien, virez les pictos du menu. Ils sont désuets et apportent plus de confusion qu'il n'aident à la lecture.
• La page "Qui suis-je ?". Pourquoi pas : "À propos" ?
Le style change de la home, unifiez.
Là encore, on a des petits blocs et des textes sur toute la largeur. Équilibrer la maquette. S'il le faut, utiliser des colonnes (une ligne ne doit pas dépasser 80 signes (espaces incluses) pour rester lisible, 100 signes est le grand maximum).
• Il manque une photo sur la page "À propos", les gens aiment bien voir à qui ils ont affaire. Par exemple sur LinkedIn, les profils avec photo sont plus visités que les autres.
• Sur la page "Projets, affichez directement tous les projets. Les effets de mouvement "kikoolol" à l'intro ne sont peut être pas indispensables. Vous êtes développeurs, pas le magicien d'Oz. Les vignettes sont très grosses. Quand on en a 2 sur une ligne, il y avait la place pour au moins 3.
Aussi elles sont toutes très floues, c'est peut être dû à un agrandissement au dessus de la taille d'origine des images de base. Une image à 72ppp, ça ne se grossit jamais. Là c'est gênant, car ce sont vos travaux qui sont introduits de cette manière et si vous avez laissé passé ça, on peut craindre que vous allez en faire de même avec leurs images.
Attention, il y a comme des filets verts sur la droite des vignettes. Là soit vous mettez de vrais cadres, soit rien. Un fond couleur pourrait aussi aider à délimiter les contours. Aussi, au scroll (mac/chrome), j'ai des traits noirs horizontaux qui apparaissent sur les vignettes dont l'effet de bandes grises a été utilisé. Un jQuery bancal ? Peut être vaudrait-il mieux abandonner cet effet pour quelque chose de simple. Inutile de placer des machins qui font des trucs dans tous les coins.
Pourquoi ne pas intégrer ces vignettes (plus petites et nettes) sur la home ? Directement dans la partie réalisations ? À vous de voir.
• Sur la page parcours, on a un peu l'impression d'arriver sur un autre site. Calez votre mise en page sur la haome et testez la en meêm temps pour les autres pages. Là encore, pas d'arrondis, de filets. Mettez des aplats sobres et frais.
• La page "Blog" : on change d'univers à 100%. Pourquoi pas, mais là on part sur quelque chose de radicalement différent. De plus avec cette photo impersonnelle de globe sur un clavier, ça prend un furieux air de template toute faite et à peine adaptée. Pourquoi pas, vous, n'êtes pas obligé de développer tous vos outils, mais il faut essayer d'avoir un minimum de cohésion.
• La page contact est hardcore. Virez les arrondis et les effets gratuits. "Contactez moi" c'ets pas très engageant. C'est déjà marqué dans le menu, inutile de créer de la redondance.
• Quelques bugs de ci de là… des textes qui dépassent de la fenêtre (copyright) ou se superposent.
Voilà pour moi. Pour la partie code, d'autres seront plus judicieux que moi. Même si mes observations peuvent induire un peu de code.
Je n'ai pas testé sur mobile.
En attendant la suite ?
Modifié par spongebrain (12 Aug 2014 - 11:50)
