Bonjour,
Le site que vous présentez est assez sommaire en matière de design. Ceci dit, il a le mérite de ne pas être un énième clone des sites one page avec des bandes de couleurs et un style "no name" qui peut faire illusion auprès d'un public de néophytes, mais ne trompera guère les professionnels.
Personnellement je n'ai rien contre les sites au look "dessin technique", c'est juste que votre présentation est un peu brut de décoffrage. Sans bouleverser la base, ce site pourrait devenir assez sympa et crédible. Quelques points très simples peuvent déjà être optimisés :
• Il y a trop de polices de caractère, sur la home, j'en compte 5 ! N'en gardez qu'une, de préférence la police sobre sans serif (lettres bâton) du contenu. Les textes en Times doivent passer en lettres bâtons aussi.
• Trop large, pensez à ceux qui consulteront votre site sur une tablette (de plus en plus de monde) ou qui affichent plusieurs choses sur leur moniteur et ont une fenêtre assez étroite (la majorité des utilisateurs n'affichent pas leur navigateur sur toute la largeur de l'écran).
Limiter la largeur maximum du site à 900 pixels semble un bon compromis, voir moins pour certains paragraphes pour éviter les lignes de 3 kilomètres de long. C'est très laid et désagréable à lire (la majorité des livres ont une mise en page en hauteur…).
• Le style du menu principal change en fonction de la page (différent sur la page d'accueil), alors qu'il ne doit pas varier. Juste une touche de couleur pour indiquer la page affichée suffit.
• Ne modifiez pas la couleur de vos textes sans raison (noir, gris… ).
Si vous vloulez utiliser une couleur de complément, vous pouvez par exemple reprendre le rouge du logo et ne l'utiliser qu'en touches (hover du menu, menu sélectionné, survol des liens…). Vous pouvez aussi ajouter une couleur complémentaire, ce qui n'est pas indispensable. Il y a de très belles chartes en 1 couleur (2 en comptant le fond), en noir et blanc… Si c'est propre et équilibré, il n'est pas forcément nécessaire d'ajouter des couleurs.
• Calez vos paragraphes ! Par exemple sur la page "Sécurité" (l'onglet devrait être en rouge), les blocs se placent n'importe comment. Il suffit pourtant de tout caler sur la gauche (en restant dans un site centré et en 900px max), de ne choisir qu'une seule police de caractère, une seule couleur, et le rouge en petites touches pour mettre l'accent sur des points structurants de la page.
Vous n'utilisez pas de soulignement, c'est très bien (c'est une faute en typo). Par contre n'utilisez le gras que pour l'essentiel, les titres par exemple, qui doivent tous avoir la même taille.
• Pas de passages à la ligne à la guillotine. Par exemple dans le titre "La / jurisprudence", "jurisprudence" doit rester sur la même ligne. Là ce que vous faites est une faute de typo (qu'on voit aussi sur des sites de graphistes… ). Idem pour "Le Code du / travail", on évite de couper un titre juste après un article, il faut laisser le mot et son article sur la même ligne quand c'est possible, "Le Code / du travail". Mais là aussi vous avez largement la place de laisser le titre sur une ligne et cette coupure est aussi inutile que laide (en plus de ne pas être conforme en typographie).
• Il faut absolument éviter d'avoir 36 tailles de polices de caractère. C'est moche et confusant dans la hiérarchie de la mise en page. Imposez-vous 2 tailles de police de caractère : une pour le texte courant (normal ou gras pour certains paragraphes), et une autre plus grande pour les titres, les onglets, et… c'est tout.
• Attention à la largeur des blocs textes, il faut éviter les largeurs aléatoires : par exemple pour le texte "La qualité est un concept visant à améliorer les performances par la satisfaction du client.", j'ai le dernier mot "client." qui se place tout seule en dernière ligne. C'est très moche, il faut éviter de placer des veuves dans les paragraphes ou les titres. La largeur des blocs textes doit rester statique, ainsi vous maitrisez mieux la mise en page et vous évitez que celle-ci parte en sucette en fonction de la largeur d'affichage.
Si vous optez pour une mise en page responsive, faites en sorte qu'il y ai deux standards de largeur fixes en fonction de l'affichage. Une pour le moniteurs (une marge blanche importante sur les côtés est préférable à des lignes qui courent sur 50cm… ), et une autre pour les petits moniteurs/tablettes, en prenent soit de laisser des marges sur les côtés (pas moins de 50px ou 100px.
• Pas de cadres si possible, là pour le coup ça fait vraiment vieillot, il suffit quand vous avez plusieurs colonnes côte-à-côte, de laisser un espace suffisamment aéré entre celles-ci.
• Pas de texte tout collé en bas du site, il faut toujours laisser respirer le texte. C'est plus agréable à lire et on a pas l'impression que la mise en page a été coupée au sécateur.
Votre site est certes très maladroit mais il est sobre. C'est cette sobriété qu'il faut caler et présenter de façon plus élégante et donc plus "pro".
Quelques petites astuce pour éviter de faire trop austère, comme laisser un fond très légèrement teinté, colorer le texte et les schémas en gris foncé plutôt qu'en noir (voir liens), ne choisir qu'une ou deux couleurs de complément, ici le rouge et le rouge détramé (rose) par exemple, aérer et composer sa mise en page pour clarifier la lecture…
Les exemples ne manquent pas dans le genre, comme par exemple ici :
http://25.media.tumblr.com/d5fc5898f4c4a63fb5d982e0f7c40381/tumblr_myfj28Uf9a1qe9xbio1_1280.jpg
Dans un autre style gris sur gris clair (+ touche de vert) avec 2 polices de caractère (une droite sans serif et une avec serif (empattements)). Si vous choisissez une police avec serif choisissez la Georgia plutôt que la Times peu adaptée à l'affichage écran.
http://www.agencytool.com/blog/wp-content/uploads/2009/01/8020.jpg
http://fr.wikipedia.org/wiki/Georgia_(police_d'%C3%A9criture)
En gris/vert avec des croquis, dans un style plus conventionnel :
http://www.scoop.it/
Attention au choix de la police de caractère, faites en sorte de choisir une police qui dispose des caractères accentués (même en majuscule sinon c'est une faute), des signes euro, et surtout de différentes graisses (normal et gras au minimum). Cette police doit aussi rester très simple, lettres sans serif (bâton) de préférence. Sur
http://www.google.com/fonts par exemple…
Ceci dit, une police très sobre comme l'Helvetica est une excellente alternative (utilisées par de nombreux sites comme LinkedIn par exemple). Cette police est proche de ce que vous utilisez et est bien moins austère que l'Arial.
Attention aussi à la police de caractère de votre logo qui fait un peu logo d'école de commerce dans les années 90. La mode actuelle est à la sobriété ou alors avec des styles plus marqués et modernes. Mais pour éviter de vous embarquer dans quelque chose que vous risquez de ne pas maîtriser, une police simple comme l'Helvetica peut suffire, de plus elle st installée sur de nombreux ordinateurs, même si les gens utilisent souvent l'Arial par défaut.
Je ne suis pas fan de ce gris-bleu assez froid. Je préfère un gris neutre comme par exemple celui du site Alsacréations. Avec une jolie couleur fraiche (pas forcément du rouge), ça fait son effet !
Dernier point, attention si vous « cassez votre tirelire » de ne pas être obligé de la recasser à nouveau dans peu de temps. Faire une template pour un site (sauf pour les tricheurs qui revendent des templates WorPress toutes faites à 29€), ça demande un peu de temps (quelques jours au moins) et un minimum de talent. Bref, sous les 1000/1500€ vous risquez de voir pulluler des "semi-professionnels" qui voudront arrondir leur fin de mois mais ne vous seront d'aucun secours. Bien au contraire.
Exigez de voir le portfolio d'un prestataire, surtout s'il vous propose de faire votre site pour une misère, genre 600€. Là ça sent carrément l'embrouille, sauf si vous avez la chance de tomber sur un étudiant qui peut avoir un minimum de talent.
En clair, soit vous payez le prix et vous exigez toutes les garanties nécessaires, soit vous n'avez pas de moyens réels et dans ce cas éviter les graphistes/développeurs à la petite semaine qui vont vous pondre un truc incertain. Si vous n'avez pas de coup de cœur en visionnant leur site ou leur portfolio, barrez-vous !
Évitez ça !! :
http://forum.alsacreations.com/topic-9-70202-1-Resolu-Souci-le-designer-produit-un-travail-qui-ne-me-plait-pas-qu.html
Mon dernier conseil, essayez d'optimiser votre site par vous-même. En vous aidant des quelques points ci-dessus par exemple. Vous en ressortirez grandi et plus autonome. Et là si c'est encore perfectible, vous pourrez toujours soumettre votre site à la critique gratuite (c'est le but de ce genre de forum). Ne choisissez l'option "prestataire" de service qu'en dernier recours. De plus si votre site est à peu près calé, ça sera toujours ça de moins à faire.
Donnez vous un peu de temps et lancez-vous !
Voilà pour moi, en attendant la suite ?
Modifié par spongebrain (30 Dec 2013 - 19:02)
je comprends ta proposition ! 
