Maquette Rails-edge.be

Hello,

Je suis en train de lancer un nouveau blog et je fais quelques essais de maquette avec Photoshop.

J'aimerais votre avis là-dessus.

Voici un premier essai:

Edit: Le site est en ligne: http://www.rails-edge.be

L'idée est d'avoir un haut de page assez contrasté. J'ai tenté de donner un petit effet "carbonne".

L'idée des "vagues" est en rapport avec les "rails" de Rails.

La colonne de droite est la colonne classique d'un blog, et j'ai voulu trouver une couleur de contraste.

J'ai rajouté quelques dégradé et séparation entre les zones.

Je pense que je vais utiliser le "big footer" pour mettre un "tag cloud".

De nombreuses choses doivent être améliorée, notamment la finition et la typographie.

Cela n'est qu'un début, mais j'aurais voulu votre avis général, notamment pour les couleurs et l'aspect général.

Merci
Modifié par Cedric (21 Jun 2007 - 17:19)

J'ai fait des modifications notamment au niveau du "logo" et de la colonne de droite.

Edit: le site est en ligne: http://www.rails-edge.be

ça ressemble à quelque chose ?
Modifié par Cedric (21 Jun 2007 - 17:20)

Cedric a écrit :
ça ressemble à quelque chose ?

Salut Cedric,

effectivement, c'est pas mal, moi j'aime beaucoup, je trouve les couleurs très chouettes.

Personnellement, je trouve que l'élément graphique rouge de ton premier essai rempli mieux l'espace.

a écrit :
Je pense que je vais utiliser le "big footer" pour mettre un "tag cloud".

Pourquoi pas, ça peut être bien. Par contre, pense à ce que ça ne détruise pas le visuel et l'efficacité de ta compo

Merci

En tenant compte de ça j'arrive à ceci :

Edit: le site est en ligne: http://www.rails-edge.be

- logo différent ( là il me plaît bien, et vous ? )

- bulles pour les commentaires et trackbacks

- adoucissements de certains effets
Modifié par Cedric (21 Jun 2007 - 17:20)

Ouais, encore mieux je trouve, et puis aussi, une chose que je n'avais pas relevé au départ, c'est la présence de tes vagues qui est très judicieuse dans le sens où ça guide le regard du visiteur vers le menu
Modifié par touvert (19 Jun 2007 - 16:56)

Merci

Là je pense que j'arrive vers une version un peu plus définitive.

Mais au niveau de la typographie je suis un peu largué. Actuellement j'ai choisi les polices au hasard.

Je me demande

- combien de polices maximum faut il par pages ?

- quelle est la police la plus "classe" pour présenter du texte : je veux vraiment mettre en avant les articles

- même police pour les titres que pour le texte ?

Merci encore pour les conseils

Bonjour,

Cedric a écrit :
Merci
- combien de polices maximum faut il par pages ?

3, grand maximum. Au delà, ça devient bordélique (pardonnez-moi l'expression). D'ailleurs ça fait partie des bonnes pratiques opquast.

Cedric a écrit :

- quelle est la police la plus "classe" pour présenter du texte : je veux vraiment mettre en avant les articles

- même police pour les titres que pour le texte ?

Il n'y a pas de réponse absolue à ces questions. C'est tout le métier du graphiste weddesigner que de savoir faire ces choix, selon des tas de critères, qui vont de la nature du contenu à l'équilibre visuel de la page, en passant par la lisibilité, etc.

Je pense que les visiteurs de ce forum ne sont pas les mieux armés pour répondre à ce type de questions. Là on touche réellement au design graphique, qui n'est pas la spécialité du coin.

Ok je vais voir ça.

Lanza a écrit :
Là on touche réellement au design graphique, qui n'est pas la spécialité du coin.

Bah ça dépend quand même

Lanza a écrit :
Il n'y a pas de réponse absolue à ces questions. C'est tout le métier du graphiste weddesigner que de savoir faire ces choix, selon des tas de critères, qui vont de la nature du contenu à l'équilibre visuel de la page, en passant par la lisibilité, etc.

Je pense que Lanza a très bien résumé l'attitude à adopter par rapport au choix des polices dans une création graphique (qu'elle soit destinée au web, à l'impression ou autre).

Une chose importante est qu'il faut toujours regarder vers la finalité de ton travail, ce qui implique :

- que toutes les polices choisies doivent être lisibles.

- que de toute façon, il ne sert pas forcément à grand chose de mettre des polices "exotiques" pour essayer de faire original (surtout dans le cas d'un site de contenu comme le tiens).

En définitive, je te conseillerais de rechercher une police pas trop fantaisiste, juste un chouyat parce que ton site est tout de même beau visuellement et qu'on est pas obligé de mettre les mêmes polices qu'on voit tout le temps.
Mais sinon, rester sobre est selon moi très bien.

Utilise verdana, c'est bien pour la lisibilité.

un petit line-height de 14px , c'est pas mal non plus(interligne)

Pour moi, le dégradé du menu à l'air bien. Je trouve que le dégradé du header et du footer est trop gros. Peut-être est-ce dû aux côtés.

Sinon, j'aime bien aussi

Je vais partir sur du Verdana + line-height de 14px pour le texte, je pense qu'en terme de lisibilité c'est vraiment top.

Et alors je me tâte pour la police un peu plus "fantaisie" pour les titres. Peut être du Lucida Sans.

Hum... Chez moi, c'est sans-serif dans tous les cas. Mais c'est bien de se faire plaisir. Attention cependant aux excès de "fantaisie": Lucida sans, c'est quasiment frivole, ça
Modifié par Laurent Denis (19 Jun 2007 - 19:00)

En écrivant "fantaisie" j'ai tiqué aussi

L'utilisation des "small caps" ( petites majuscules ) est à proscrire ou bien c'est acceptable également ? Y a t il parfois des problèmes de rendu ?

ça marche mal, disent les typographes et les graphistes.

Ok.

Voilà la dernière version.

Edit: le site est en ligne: http://www.rails-edge.be

J'ai éliminé le rouge du logo qui était de trop, et je suis passé vers du bleu ( au lieu de vert ).

Je trouve ça plus sobre.

J'ai changé les polices ( verdana et lucida sans - adieu le small caps pour les titres ).

On approche du but ?
Modifié par Cedric (21 Jun 2007 - 17:20)

Hop, sujet déplacé dans le salon ad hoc.
Edit : ah ben non, pas ad hoc, du coup retour vers le Bar.
édit par Igor: je plaide coupable

Par ailleurs :

- Graphisme général : pas renversant mais sympathique. Attention au bloc en pied de page, j'espère qu'il aura un contenu parce que sinon il attire l'oeil pour rien. Pour le reste, je ne suis pas fan des effets de relief, notamment sur le bloc d'ent-tête et le bloc de pied de page (mais ça n'est qu'un avis personnel).

- Couleurs : le bleu est effectivement un bon choix, il faut bien ressortir le orange. Par contre, le orange sur fond blanc et le blanc sur fond orange, c'est un poil limite niveau lisibilité/contraste. De même pour le gris clair sur fond blanc !

- Typographie : certes, il y a théoriquement de multiples choix typographiques, mais dans la pratique si on veut une probabilité raisonnable d'obtenir le rendu voulu (sans en faire une fixette, sinon on perd son temps), on devra probablement se limiter aux core fonts de Microsoft, et à quelques équivalents Mac, voire Linux... quelques exemples :
http://web.covertprestige.info/test/00-comparaison-de-fontes-pour-le-web.html
Pour ma part, j'aime bien Georgia dans le genre serif très lisible sur écran (contrairement à Times New Roman ou Times ou les autres...), de même que les classiques Verdana et Arial. Suis moins fan de Trebuchet, qui a quelques soucis de dessin (lettres pas terribles, signes diacritiques approximatifs).

Mais surtout, pour la gestion du texte, il faudrait vraiment que tu augmentes la hauteur de ligne de tes paragraphes. Là, c'est pas terrible terrible.

Pour information : lorsqu'une ligne de texte est longue (flot de texte principal), le risque est grand de perdre le fil lors du retour de l'oeil vers la gauche pour la lecture de la ligne suivante. Avoir une hauteur de ligne qui permet de bien distinguer les lignes est une bonne solution pour éviter ces décrochages dans la lecture.

Ce n'est donc pas une règle absolue, mais on pourra retenir :
- plus la ligne de texte est longue, plus il faut une hauteur de ligne importante (après, pas besoin de dépasser les 1.5em ou 1.6em, sauf si on recherche un effet graphique de « texte aéré ») ;
- plus la ligne de texte est courte, et plus on peut resserrer la hauteur de ligne (jusqu'à 1em, voire .9em, suivant les fontes).

Pour ma part, quand je veux quelque chose de « neutre et lisible » (ce qui est objectivement difficile à définir...), je pars sur une hauteur de ligne importante et correspondant bien à la fonte choisie, entre 1.3em et 1.5em, puis je réduis ponctuellement là où c'est nécessaire : petits blocs de texte, colonnes étroites, titres et textes au corps important, etc.

Ah oui : ne pas donner de hauteur de ligne en pixels. Merci.
Modifié par Igor (19 Jun 2007 - 21:03)

Pour les small caps, je suis pour ma part plutôt fan, mais c'est vrai que le rendu dans IE est souvent pas génial... d'où le fait que ça soit assez peu utilisé.

Edit : bizarre, le rendu dans IE6 a l'air très correct en fait. Du moins si on se limite aux fontes qui ont un rendu correct en capitales en taille petite ou moyenne (donc pas Times New Roman, par exemple...).
Modifié par Florent V. (19 Jun 2007 - 19:58)

Merci pour les conseils.

Je pense que le consensus général est que c'est plutôt pas mal

De toute façon pour un premier design je ne sais pas si je pourrais faire mieux. Il manque encore quelques éléments ( recherche, pied de page, ... ) mais ça viendra au fur et à mesure.

Je vais faire les corrections et passer tout ça en xhtml / css ; ce sera plus simple de jouer sur l'interligne et des choses comme ça.

:)

Cedric a écrit :


Je vais faire les corrections et passer tout ça en xhtml / css ; ce sera plus simple de jouer sur l'interligne et des choses comme ça.

:)

Le plus simple serait de prendre comme point de départ une ou des pages avec du contenu (réel) sans parti pris de mise en écran, tu auras alors tous les éléments pour faire le design de tes pages