3246 sujets

Critiques de vos sites: code et design

[Débutant] Site CV/portfolio barbara-brun.com

Hello tout l'monde !

Je débute dans le monde du Web et j'ai réalisé (dans le cadre de ma formation) mon premier site-CV l'année dernière. Je voudrais prochainement le remettre au goût du jour et y apporter des améliorations (vu que j'ai notamment plus de connaissances aujourd'hui qu'à l'époque). Smiley smile

Je précise juste que j'avais des contraintes, à savoir (entre autres) : design avec thème sous forme de "métaphore", pas d'utilisation de CMS (sauf pour le blog rattaché), ni d'animations (ni gif, ni flash). Je n'ai pas non plus eu le temps de rendre toutes les pages valides W3C, mais la page d'accueil l'est bien afin que l'on puisse constater que je sais aussi faire du code propre. Smiley cligne

Voilà le lien : Barbara Brun, Infographiste Webmaster

Merci d'avance pour vos remarques ! Smiley sweatdrop ...et votre indulgence ! Smiley cligne

Barbara.
Modifié par BBarbara (17 May 2010 - 17:21)
Bonjour et bienvenue Smiley smile
ton design montre effectivement que tu n'as pas encore acquis certains réflexes de conception inhérent au web mais tu as commencé par l'essentiel (formation en graphisme...)

L'image de ton bandeau identitaire devrait se trouver dans le HTML (via une image dotée d'un attribut alt reproduisant son contenu textuel) puisque celle-ci comporte des informations importante (nom prénom...). Le contenu du alt (alt="...") s'affichera si les images ne sont pas chargées pour une raison ou une autre (bien que la consultation de ton site sans les images n'ait pas beaucoup de sens) et sera aussi rendu accessible par exemple aux moteurs de recherches (qui ne peut pas voir ton image tout comme une personne aveugle).
Autrement dit en prenant comme exemple ce cas isolé si tu ne mets pas ces infos dans le HTML, on ne pourra pas tomber sur ton site en tapant ton nom ou infographiste.

D'une manière général et pour plusieurs raisons (accessibilité, maintenance, lisibilité légèreté et portabilité du code, interopérabilité...) tu dois toujours veiller à séparer structure+contenu (HTML, XML...), présentation (CSS, XSL...) et comportement (JavaScript) même si dans la pratique ce n'est pas toujours évident...

Comme tu as bien renseigné le title, ça ne sera en réalité pas le cas mais sache que le mot infographie aura plus de poids s'il est présent 3 ou 4 fois (surtout en haut du code)
qu'un seul fois, auprès d'un moteur d'indexation.

Ton menu:
les intitulés de rubriques ne sont pas tous bien choisis :
Accueil ok c'est une convention presque incontournable.
Qualités : on s'attend à lire un petit descriptif de tes qualités or ça correspond plutôt à ton profil et ta conception du métier.
Univers : on ne sait pas du tout sur quoi on va tomber...
Même chose pour Galerie, trop fourre tout, trop vague. Son contenu correspond simplement à ton Portefolio/tes réalisations (noms de rub. plus conventionnels et adéquates).
Le lien pour accéder à ton blog devrait se trouver dans le bandeau identitaire et donc visible en permanence.
Le liens ver ton CV devrait se trouver dans ton profil (en indiquant son poids entre parenthèse). Exemple : Télécharger mon CV (PDF - 780 Ko).
Un lien vers un fichier à télécharger ne se place jamais dans un menu principale.

Ce n'est jamais une très bonne idée d'essayer de faire originale en ergonomie, mieux vaut s'en tenir aux conventions pour ne pas dérouter tes visiteurs. On doit instantanément deviner le contenu de chaque rubrique en lisant son nom.

Graphiquement je n'ai pas une très bonne impression, notamment à cause de la silhouette accroupie renversée et l'araignée dont on a du mal à voir le rapport (plastique et sémiologique) avec son fond.
Je ne dis pas que tu ne peux pas laisser planer une part de mystère mais tes choix me semblent un peu incongrues. Ceci dit une petite explication de ton parti pris pourrait aider Smiley cligne

Niveau compo typographique et habillage (contenu des pages + menu) c'est un peu cheap. Tu devrais aller jeter un œil aux galleries CSS et autres.

Pour des raisons de confort de lecture, éviter le contraste maximum entre texte te fond (noir sur blanc ou inversement); l'interlignage doit être augmenté par rapport à celui d'un texte sur support papier (plutôt 130 à 160% pour une justif moyenne) > exemple line-height: 1.5em (1em = 100%)

Dommage que ton fond soit interrompu aussi brutalement, une surface périphérique importante de blanc fait souvent perdre les qualité immersives d'un univers graphique.

Voila pour l'essentiel Smiley cligne
Modifié par Hermann (04 Apr 2010 - 12:06)
Hello Hermann !

Merci beaucoup pour toutes tes remarques, notamment pour tout ce qui concerne l'ergonomie car tu as tout à fait raison et je n'y avais pas encore pensé ! Ce sera donc pris en compte dans la V2 ! Smiley cligne
Pour l'image du bandeau et ce qui est organisation structure-contenu, ça fait partie des choses que je ne maîtrise que depuis peu et que je n'ai pas modifié sur ce site puisque je prépare une nouvelle version (j'ai eu la flemme quoi ! lol). Mais donc pas de souci, je connais le principe ! Smiley cligne
Et le design, il ne faut pas y faire trop attention en fait car comme je le disais au départ, j'ai dû partir sur une métaphore, plus précisément du métier de webmaster, et du coup j'ai fini par atterrir sur l'idée de la super-héroïne du Web (une sorte de "SpiderWoman"), qui navigue sur la "toile", avec donc un univers BD/comics, etc. mais mon nouveau design n'aura plus rien à voir. Il sera sobre et aura plus l'allure d'un portfolio "classique", qui mettra à mon sens le contenu plus en valeur...
D'ailleurs je te remercie aussi pour tes conseils concernant la typo et l'habillage ! Smiley smile

J'indiquerai quand la v2 sera en ligne (bientôt j'espère). Merci encore en tous cas !
Hello, hello !

Juste pour info', la nouvelle version de mon site est en ligne.
Elle n'est pas terminée (je travaille notamment sur des galeries dynamiques), mais l'essentiel est là. Smiley cligne

Je redonne le lien : Barbara Brun - Infographiste Webmaster - Paris/Toulouse

Et voilà le lien vers la V1 (pour ceux qui ne l'avaient pas vue et qui voudraient comparer) : Barbara Brun - Infographiste Webmaster - 1ère version du site

A + !
Modifié par BBarbara (11 Apr 2010 - 20:20)
Bonjour,

Côté Design :
J'aime bien l'ambiance générale, mais je trouve que ça manque de mise en forme dans la page du portfolio, CV... Par exemple il pourrait y avoir un meilleur titre ("Expérience professionnelle", ...), dans la page "Expérience" il y a trop de textes en capitale.
Aussi, en page d'accueil tous les liens en bas ne marchent pas, et le lien sur la grosse image qui conduit à la même page est illogique.

Pour le code :
Ta hiérarchie des titres n'est pas bonne. Je vois des h4 et h3, mais pas de h1. Plus d'infos : http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html

Bonne continuation. Smiley cligne
Modifié par darktemplar (11 Apr 2010 - 22:40)
Salut Chok71 !

Merci pour ta réponse ! Smiley smile

Pour la mise en forme, je suis d'accord avec toi et je travaille dessus (c'est notamment de ça dont je parle quand je dis que je veux mettre au point des galeries dynamiques).
Je vais aussi modifier mes titres (hiérarchie et CSS). Smiley cligne

Et effectivement, merci pour l'info' sur les liens ! (Bizarre, j'ai dû faire une mauvaise modif' vu qu'ils fonctionnaient il y a qques heures...)

Bonne continuation à toi aussi !
Modifié par BBarbara (13 Apr 2010 - 22:37)
Bonjour Barbara,
c'est beaucoup mieux, mais il y a encore certains point à améliorer Smiley cligne

Concernant le logotype, le mélange de caractères à chasse normale et condensée n'est pas très heureux esthétiquement en plus de ne pas être très pertinent dans ce cas,
sauf effet de style recherché mais alors plus évident.
Cela donne un peu l'impression comparativement au prénom que ton nom a été numériquement étroitisé par manque de place.
Pour la tagline (infographiste...) certaines méthodes de lissage adaptées au web comme le lissage net font apparaitre des irrégularités au niveau des lettres (la barre centrale du E non centrée est assez typique) qu'il vaut mieux éviter en modifiant le type de lissage voire en choisissant une autre typo.

> Il manquerait une petite marge sous ton menu.

> S'agissant de l'image centrale, dommage que tu sois centrée dans la compo. Il aurait été plus intéressant par exemple que tu te places à gauche de celle-ci et que les domaines de compétence soient placés à ta droite puisque ton regard est dirigé ainsi (> "suivez mon regard et voyez les domaines de compétences que que je connais ou maitrise).
Sinon je trouve marrant le mélange typo grunge et jeune actrice de cinéma mais chacun y mettra ce qu'il veut selon ses propres références Smiley cligne
Ceci dit et d'une manière général mieux vaut écrire en page d'accueil un petit laïus de présentation, c'est plus efficace (et plus bénéfique d'un point de vue indexation des contenus).
Le title de l'image (Consultez...) n'est pas fait pour afficher la cible du lien mais des métadonnées (infos EXIF, photographe etc) non essentielles d'un point de vue ergonomique ou en terme de contenu car inaccessible dans certains cas: cette étiquette qui met un certain temps à s'afficher ne sera pas forcément lue. Cette image au vu de son contenu devrait être illustrative ou alors pointer vers tes domaines de compétence (et non ton blog).

> le texte le la page de blog manque de contraste avec son fond.

> Le champ de recherche devrait se trouver en haut de page pour être plus visible, puis c'est plus conventionnel.

Voila il y aurait encore d'autres points à améliorer mais j'ai essayé
de cibler les problèmes les plus ennuyeux Smiley cligne
Modifié par Hermann (13 Apr 2010 - 19:29)
Salut Barbara (fais coucou du bout de l'open-space !),

Il est chouette ce nouveau design !
Le côté monochrome passe bien, c'est bien structuré, c'est cohérent.

Quelques broutilles en vrac :

- Le filet inférieur du dernier élément de chaque colonne de ta nav est de trop je trouve, ça respirerait si tu l'enlevais. Passe tes liens en block aussi dans cette nav => usability++

- Dommage que ton logo ne soit pas ajusté à la taille de ta baseline : en poussant de quelques pixels tu pourrais aligner verticalement le tout, tu gagnerais en cohérence et tu pousserais ton côté "bloc de logo".

- Ton rollover sur les liens du bas ("web", etc.) est un poil timide je trouve, ce serait pas mal d'essayer de pousser la luminosité de ta border-bottom.

- Pas fan du moteur de recherche tout en bas (en haut c'est mieux), mais bon il est très visible donc ça passe bien.

- Un petit lien vers ton compte Twitter à côté de la remontée de ton dernier Tweet ?

Voilà voilu,
À demain Smiley cligne
C'est vrai que le nouveau design est nettement meilleur !

Quelques remarques (d'ordre esthétique) personnelles :

Je suppose que la charte graphique n'est pas encore entièrement construite. En effet les petites icones avec les initiales des rubriques pourraient être remplacées par des pictogrammes significatifs... et si l'avantage de ce genre de design est de mettre le contenu en valeur par son minimalisme, il a aussi l'avantage de permettre de jouer sur des petites subtilités qui sont inconsciemment remarquées par les utilisateurs. Tu peux effectivement essayer de jouer sur la typographie en choisissant des polices plus originales (sans tomber dans le kitch). D'ailleurs tu peux le faire très aisément vu que tu utilises déjà beaucoup de PNG !

Sur la page du formulaire de contact, le dégradé blanc pourrait être plus doux ou plus étendu.

D'ailleurs en parlant de PNG, sur IE6 le site est méconnaissable. C'est pourtant dommage car IE6 est un très bon navigateur moderne et utilisé par beaucoup d'entreprises ! Smiley murf

Dernière blague (pas très constructive) : le gabarit de ton site ressemble un peu à Alsacréations...
Hey ! Merci bcp à tous pour tous ces conseils ! Je vais les mettre en pratique rapidement (j'ai déjà un peu commencé).
Il y a juste le moteur de recherche que je vais laisser là où il est pour l'instant parce que ça m'arrange carrément ! Smiley cligne Et je reviendrai à la limite dessus quand je me serais occupée du reste (et 'y a du boulot).

Et STPo, du coup t'as gagné une Chupa Chups demain ! Smiley cligne (Ou même plusieurs s'tu veux !)

Encore merci tout l'monde ! Smiley smile
darkstar2023 a écrit :
Tiens, j'allais éditer mon post pour mettre les polices qui pourraient bien convenir à un design minimaliste orienté web 2.0

http://img714.imageshack.us/img714/3064/barbarabrunfonts.jpg

J'ai mis les noms des polices (libres de droit) à droite (Google est ton ami Smiley cligne )


Super ! Merci bcp !!!

Et au fait pour IE6, j'ai même pas osé tester ! lol J'imagine bien la m*** que ça doit donner ! Smiley cligne
Petites améliorations à apporter à la page de contact :
* changer la mise en page (les tableaux ne se justifient pas ici)
* ajouter des label aux champs de formulaire (amélioration de l'association intitulé/champ se fasse), ainsi que du padding (amélioration de la lisibilité du texte saisi).
octopus984 a écrit :
Petites améliorations à apporter à la page de contact :
* changer la mise en page (les tableaux ne se justifient pas ici)
* ajouter des label aux champs de formulaire (amélioration de l'association intitulé/champ se fasse), ainsi que du padding (amélioration de la lisibilité du texte saisi).


Salut octopus984 !

Merci bcp pour tes conseils ! Smiley smile
Par contre pourrais-tu m'expliquer pourquoi "les tableaux ne se justifient pas ici" ? Je ne comprends pas... D'autant que je ne m'imagine pas mettre tous les champs les uns au dessus des autres...

Merci d'avance. Smiley cligne
BBarbara a écrit :
Par contre pourrais-tu m'expliquer pourquoi "les tableaux ne se justifient pas ici" ? Je ne comprends pas... D'autant que je ne m'imagine pas mettre tous les champs les uns au dessus des autres...

C'est que tu assimiles encore les tableaux à une mise en page particulière. Ne pas utiliser de tableaux, ce n'est pas forcément mettre tous les champs les uns en-dessous des autres ; les CSS sont là pour remédier à tes soucis de mise en page Smiley cligne .

Les tableaux doivent être réservés à des données tabulées (un calendrier, une grille de statistiques, ...). Pour tous les autres cas, il y a mastercard. Non ! Il y a la le reste des balises du langage HTML. Ce qui nous amène au sens dont est porteur le code que tu écris, la sémantique : s'il existe une multitude de balises, c'est qu'elles ont toutes une raison d'être, et donc une utilisation particulière.

Concrètement, ton formulaire devrait ressembler à quelquechose comme cela (la syntaxe est un peu olé-olé, mais le plus important est le balisage) :

<form id="" method="post" action="">
  <p>Les champs marqués d'un <span id="asterix">*</span> sont obligatoires.</p>
  
  <div id="">
    <p><label for="name">Nom</label><input id="name" type="text"></p>
    <p><label for="website">Site Web</label><input id="website" type="text"></p>
  </div>

  <div id="">
    <p><label for="email">Courriel</label><input id="email" type="text"></p>
    <p>
      <label for="from">Vous m'avez trouvée grâce à</label>
      <select id="from" name="sendto">
        <option value="brunba@wanadoo.fr">Google</option>
        <option value="brunba@wanadoo.fr">un annuaire</option>
        <option value="brunba@wanadoo.fr">un réseau pro'/social</option>
        <option value="brunba@wanadoo.fr">un autre moyen</option>
      </select>
    </p>
  </div>

  <p>
    <label for="message"></label>
    <textarea id="message"  name="Message" rows="5" cols="100"></textarea>
  </p>

  <p><input type="image" name="send"></p>
</form>

Une fois la structure posée, aux CSS de prendre le relais pour égayer le tout !
Modifié par octopus984 (27 Apr 2010 - 02:12)
Merci beaucoup octopus984 !!! Maintenant je comprends (et j'apprends) mieux. Smiley cligne
(Désolée au fait pour cette réponse tardive.)
Sujet clos
Aller à