[Amateur] Votre avis sur une charte graphique pour un site fictif

Bonjour,

Cela fait quelque temps que je travaille sur une charte graphique pour un projet fictif dans le but d'améliorer mes maigres compétences en web design. Étant développeur de formation j'ai toujours été intéressé par de belles interfaces propres et agréables à utiliser.
Du coup j'aurais avoir votre avis quant à ces maquettes que j'ai créées.

L'accueil

Une page pour une activité

Je vais commencer par exposer mon avis :

- J'ai un sentiment de "vide" sur les deux maquettes, je sais pas pourquoi mais j'ai l'impression qu'il manque quelque chose en plus, surtout sur l'accueil.

- J'ai un doute quant aux couleurs, j'ai utilisé que trois couleurs max (gris, bleu et blanc) mais j'ai pris 4 teintes de bleu, donc deux qui sont utilisés uniquement dans le footer. Cela ne fait pas un peu trop ?

- D'un côté je me dis que c'est pas mal ça m'a l'air assez propre, pas de fioritures mais n'est-ce pas trop simple ?

- J'ai l'impression que tout est un peu gros.

- J'ai aussi eu l'idée d'un filtre sur l'accueil comme on peut trouver sur certain site, il s'agit d'une phrase avec des bouts à compléter pour avoir des résultats qui correspondent à nos attentes du genre "JE SUIS (choix) AVEC (choix) ET QUI VEUT (choix)" mais je suis partagé entre le coup de "jeune" que ça peut apporter et la réel utilité sur un site de ce type.

Merci d'avance pour ceux qui auront eu le courage de tout lire et des critiques .

Bon week-end pluvieux !
Modifié par John Wayne (03 Jan 2015 - 18:43)

Bonjour,

Rapidement, en effet il manque une couleur de complément pour réveiller la gamme actuelle. La tendance est aux couleurs vives et aux contrastes. Par exemple dans le logo ou le header ? Là le logo en blanc sur gris clair est tout simplement illisible.
Idem pour le titre blanc sur le slider, l'ombré est inaproprié puisqu'on ne retrouve nulle part ailleur. Ça fait "hors charte". Vous pouvez être plus impactant (couleur, style de la typo).

Attention aux polices de caractère. n'en choisissez qu'une ou deux, mais surtout hiérarchisez-les (taille, style… )!
La police de bienvenue ne s'accorde pas du tout avec celle du logo ou du texte. Le texte courant dans une police étroitisée est peu lisible. Faites simple avec une police facile à lire. N'en choisissez qu'une et pour donner du relief à vos paragraphe, placez des chapôs.
Ne choisissez une police avec un style un peu marqué que pour le logo et quelques points particuliers (totre du slider…). Là les titres ont un style très différent du reste du texte et ne s'harmonise pas assez. Une tendance actuelle est de marquer une forte rupture dans la taille des textes, en gardant la même police, mais en mettant les grands textes en light.

Dans vos paragraphes, les lignes me semblent longues avec beaucoup de caractères. la faute à cette police étroitisée ou à la taille des caractères ?

Les sous menus me semblent complexes. Qu'en sera-t-il sur tablette ?

Pas fan du fond flou tramé.

Ajoutez une baseline pour qu'on comprenne immédiatement l'objet de ce site. Pour le moment ce n'est pas très clair pour moi.
Le footer est un peu écrasé.

Pour le reste, il semble que ce template a été pensé et structuré, avec des détails soignés (icônes, jolies photos… ).

Voilà pour moi, un peu dans le désordre.
Modifié par spongebrain (15 Jan 2015 - 12:37)

Merci pour ton retour très instructif comme d'habitude Spongebrain !

Je vais modifier les points que tu as évoqués, peut-être revoir la palette de couleur

Bon dimanche !

Bonjour

Après je ne sais combien d'essai sur Photoshop me revoilà avec la nouvelle maquette modifiée en corrigeant ( j'espère ) les points évoqués. J'ai changé la palette de couleurs pour partir sur des teintes de gris et du rouge pour le "pep's" .

La home

Une page pour les activités hiver

Qu'en pensez vous ? Mieux ou je suis à côté de la plaque ?

Merci !

Je trouve ca mieux avec le rouge, ca rajoute du peps. Mais perso j'aurais peut etre jouer avec une tendance bleue et du rouge en touches. Apres ce n'est que mon opinion.

Concernant les textes, oui un peu trop gros. Sur Photoshop, perso, je me limite a 15px/16px en texte, pas plus.

Sinon, j'aime bien, t'es sur la bonne voie oui

Bonjour Fanny et merci de ton retour !

Concernant la palette de couleur j'y ai pensé à mettre du bleu et du rouge en moindre mesure mais les résultats n'étaient pas très concluants mais je vais m'y re-pencher voir ce que ça pourrait donner

Concernant les tailles des textes tu as raison tout est trop gros mais c'est une erreur de ma part avec photoshop. J'ai fais la boulette de mettre la largeur de ma zone de travail à 1920px et du coup mon texte s'étendait sur 1600 et quelques px. J'ai tout redimensionné en suivant ton conseil, j'ai pris 16px pour les textes et 24px pour les titres.

Voici le résultat

D'ailleurs petite question : est-il possible de déplacer une sélection de calque en haut d'un document Photoshop ? Parce que pour le moment je dois tous les sélectionner et venir les caler ce qui est un peu long si je change plusieurs fois de hauteur de document
Modifié par John Wayne (28 Jan 2015 - 21:23)

J'aime bien la dernière version. Je trouve qua ça a avancé dans le bon sens comparé à la première.
C'est simple, propre, clair, efficace. L'accent est mis sur les photos et le texte passe bien.

Sur la seconde page, le texte est un peu trop clair, mais ça semble corrigé sur la dernière home. Pour le bloc de droite ( aller, Conseils… ), à tester en mettant la même largeur que la bande rouge du haut.

J'aime bien ce rouge/blanc/gris, c'es dynamique. Un petit logo très simple pourrait être envisager à côté du nom histoire de peaufiner les détails, mais ce n'est pas indispensable.

À voir intégré pour des optimisations éventuelles ? Good job !

Bonjour,

belle progression dans l'ergonomie des différentes versions proposées, toutefois, eu égard à la thématique de la maquette, je trouve que le rouge n'est pas adapté et je préfère de loin le bleu de la première version qui, je trouve s'accorde mieux également avec la teinte des images, mais aussi et surtout, que le drapeau finlandais est également composé de blanc (le fond) et de bleu (le croix)

Mais là encore, c'est histoire de gout

Belle maquette en tous cas
Modifié par aiglobulles (29 Jan 2015 - 10:46)

Merci pour vos réponses ça fait plaisir Je pense rester sur ce rouge même si un bleu pourrais tout à fait s'adapter sur la maquette. Je ferai l'intégration mais ça sera pas avant début Mars, vacances d'hiver oblige

Bonjour JW,

la quête graphique et colorée d'un site requiert de s'organiser. Si la plupart d'entre nous sommes sensibles à la force d'une harmonie de couleurs, peu d'entre nous sommes capables d'en créer. Il est alors judicieux d'utiliser une méthode pour aborder la quête d'une harmonie colorée.

Considérant d'abord le blanc et le noir, il faut savoir la réalité intangible que 3 couleurs primaires existent, et pas davantage. Or elles peuvent être déclinées en une infinité de nuances, notamment par adjonction de leur complémentaire (et d'un peu de blanc pour conserver la luminosité initiale, ou de noir pour éteindre la luminosité afin de créer un contraste franc).

Bleu et sa complémentaire : orange
Rouge et sa complémentaire : vert
Jaune et sa complémentaire : violet

Il existe sur le web de multiples outils de couleurs, et certains approchent la quête (presque logique) d'une harmonie. Par exemple ici : http://www.code-couleur.com/


Un autre outil des couleurs qui m'accompagne jour et nuit (depuis 10 ans) : La Boîte A Couleurs de Benjamin Chartier (windows). Requête google :

https://www.google.fr/search?q=la+boite+a+couleur&ie=utf-8&oe=utf-8&channel=fs&gws_rd=cr,ssl&ei=bX7fVOPVM8f4UKqEgtgI (copier-coller le lien)

Et bien sûr un colorScheme : http://colorschemedesigner.com/csd-3.5/ en configuration triad est vraiment épatant !

Je gage que tu devrais y trouver ton bonheur. Car même moi qui suis artiste peintre, j'ose discipliner pour le web mes créations grâce à de tels outils.
Modifié par senteur_honrable (14 Feb 2015 - 18:44)

Salut !

Pour les couleurs, tu peux t'aider d'Adobe Kuler et de ses différents thèmes.

Tu as aussi cela pour les nuances.