Bonjour,
Niveau graphisme (je ne parle pas du code), je trouve que pour une stagiaire qui ne connait rien à la maquette, c'est pas si mal. Pas de réelles fautes de goûts, c'est le critère rédhibitoire qui peut anéantir tout espoir, vous n'êtes pas concerné. Ouf !
On voit votre intention de faire sobre et élégant. Sans chercher à partir dans une maquette prétentieuse et hasardeuse. Vous avez eu la bonne démarche.
Sans faire le site de l'année, vous pouvez optimiser le look de ce site en revoyant certains détails.
Le logo : Je pense qu'ils ne vous en voudront pas si vous supprimez les deux lames de guillotines super moches pour ne récupérer que le logo texte et l'écrire droit. Franchement, vu la gueule du logo qui a dû être bricolé par le neveu du beau frère du patron en 1984, ça limitera la casse. En l'état rien le logo, ça plombe le site. Vu qu'ils n'avaient même pas de site, prenez vous même l'initiative, que vous pourrez présentez comme une touche de modernisation du logo qui en a plus que besoin. Attention de faire une image propre, là la dégradation JPEG est perceptible dans le bleu (contours).
Placez le décentré en laissant vide à côté. Centré, on ne voit plus que ça. Si ils tiennent absolument à cette horreur, réduisez la taille et calez le à gauche, façon "Bauhaus".
Une astuce pour avoir un logo.jpeg propre. dans votre fichier de travail .psd travaillez à l'échelle 200%, faites vos retouches. Et quand c'est suffisament propre, divisez le format du fichier par deux avant d'exporter pour le web le jpeg. À 100% en 72 dpi, le résultat sera optimisé.
La typo : En principe, jamais plus de 2 ou 3 typos dans une maquette (les déclinaisons light, reguler, bold… ne compte pas comme une typo supplémentaire, même s'il faut en user avec parcimonie).
Là vous avez au moins 6 typos qui luttent entre elles !!! Le logo, la base line, le menu, les grands titres, les légendes, les bulles… Simplifiez !!! Ne gardez que 3 typos, celle du logo, celle du texte qu'on retrouvera partout (utiliser éventuellement des déclinaisons bold et/ou couleur en touche), et une typo de complément pour la base line (à tester), le menu, les gros titres et les blocs typo image. La plus jolie typo et la plus moderne est celle que vous utilisez pour les gros titres "Une organisation efficace". D'ailleurs cette page est assez propre ! C'est un bon début.
Pour la baseline du logo, une seule couleur, gris par exemple, en petit. Et ne la collez pas au logo.
Au niveau des couleurs, attention vous avez différents bleus. Le bleu dans les typos et dans le logo doit être exactement le même.
Votre fond "spirograph" n'est pas laid. Par contre pour accentuer le contraste graphique et la touche technique, je pense que les blocs blancs gagneraient à n'avoir aucun contour filet, aucune barre supérieure gris-bleu et pas d'arrondis. Idem pour le header. Et pas de transparence sur les côtés. Le header pourrait être moins haut et imposant. Les ombres autours des diaporamas plus discrètes (ou supprimées ?).
En bas je laisserais le fond réapparaître dans la même marge qu'entre les deux blocs supérieurs. Et à la place de la grosse bande gris-bleu, ajouter un autre bloc blanc de hauteur similaire, juste pour placer le copyright et les mentions légales (centrés). Ainsi, le bas serait moins étriqué et la page aurait la même logique en bas qu'en haut avec des blocs blancs collés aux bords verticaux et tous de la même largeur. Le header et le footer en symétrie verticale… dans l'idée.
Comme vous le voyez, le but est de faire simple, ce qui ne veut pas forcément dire "pauvre". Pour ne pas avoir un site trop blanc, il y a les photos. Et là contrairement au logo vieillot, les photos sont plutôt propres et jolies. Elles apportent une touche de professionnalisme.
Aussi je vois que vous utilisez des blocs carrés dans vos pages, par exemple sur la home "Tous vos projets réalisés entièrement selon vos envies !". Vous pouvez tester avec des blocs bleus "image", afin d'éviter les trous typo et les mots isolés sur une ligne. Inutile d'utiliser des CSS pour ces blocs qui doivent rester esthétiques, en complément aux photos. Testez avec la typo des titres en blanc sur bleu ?
Attention aux trucs énormes et pas soignés. Le gros bouton "Demande de devis en ligne" avec l'enveloppe floue et pixélisée… c'est à éviter, absolument. Restez simple, un petit texte avec un lien bleu souligné et l'affaire est dans le sac. Au niveau des différentes tailles de typo, là aussi, limitez. 3 tailles pour tout le site maxi, c'est jouable (en ajoutant une taille spécifique pour les mentions et la base line éventuellement).
Pour la page contact, laissez les champs de saisie avec un fond blanc, sans arrondis et juste un contour gris fin (comme dans vos cercles de fond). Pour le bouton, logique !! Faites le bleu avec texte blanc, comme pour les "encarts carrés".
Attention à la propreté des logos ! BodyCare est lui aussi très dégradé, c'est surtout perceptible par son ombre non détramée. Si vous faites les scans vous même cette option existe et est assez efficace (j'espère que vous n'avez pas un scanner HP, c'est de la daube).
Dans la rubrique serrurerie, ajoutez du texte, même du baratin pour remplir au moins quelques lignes façon légende, idem pour les diaporamas sans légendes. Ne collez pas la mention "Cliquez sur l'image pour agrandir le diaporama" au bloc image, n'oubliez pas la ponctuation (le point), et testez en centré, juste pour voir.
Voilà pour moi, écrit d'une traite. Ces petites optimisations, si elles vous conviennent, devraient vous aider à obtenir le design simple et soigné que vous avez commencé à esquisser. Avec maladresse certes, on ne s'improvise pas graphiste. Mais je pense que votre maquette ne demande qu'à être optimisée. Faites la pour vous, faites vous plaisir, simple et efficace. Sans fioritures inutiles. Je pense que vous êtes en bonne voie.
Si vous avez des doutes, testez sur une template photoshop, plutôt que de tout intégrer et recommencer.
Bon courage à vous !
MàJ : Complément d'information. Modifié par spongebrain (24 Jul 2013 - 02:38)
J'ai une préférence pour garder la typo des gros titres, la typo du menu est un peu rognée à cette taille (cette typo s'accommode avec difficulté des petits formats en résolution 72dpi). Si les deux typos posent problème en petit, choisissez en une autre, de préférence avec au moins 2 graisses pour accentuer les petits caractères (google font…). Ou pourquoi pas avec une seule typo, celle du texte ?