3246 sujets

Critiques de vos sites: code et design

[Amateur] Mkv4Mac

Bonjour,
L'idée est très intéressante, cependant le design manque de peps un peu. Sans regarder le code html, il serait peut-être intéressant de faire ressortir la hiérarchie des titres, menus, textes, etc. en jouant sur la taille en plus de la couleur.

* Un texte de présentation très court serait très apprécié (exemple : lisez enfin vos fichiers .MKV sur votre Mac !), le visiteur sait ainsi tout de suite à quoi il a affaire. Et c'est très "tendance".

* À titre très personnel je mettrais volontiers un pictogramme illustrant le sujet du site (pour appuyer le texte de présentation)

* Le menu de navigation manque de contraste avec le fond.

*Encore à titre personnel, je modifierais bien la disposition générale des informations : menu de navigation en haut à droite, logo/titre en haut à gauche...

* Le titre du site devrait plutôt être "MKV4MAC" ou lieu d'un simple "MKV"
Modifié par darkstar2023 (30 Apr 2010 - 15:32)
Salut,

Si le contraste noir sur blanc est optimal pour la lecture, le contraste blanc sur noir l'est beaucoup moins, car cela vibre optiquement, rendant le travail oculaire et cérébral plus complexe. Les solutions sont d'avoir une taille de texte plus grosse, mais cela risque de te poser un problème d'utilisation d'espace, ou de diminuer ce contraste en optant pour un gris clair au lieu du blanc pour la typo.

Globalement, le contenu manque d'aération, il serait bien d'ajouter des marges entre les différents paragraphes. Tu devrais aérer aussi un peu autour des pub googles, qui sont un peu trop collées dans le contenu. Idem pour les images, qui sont collées au contenu qui les précède et les suit.

Trop de texte en gras dans la FAQ rend la lecture plus difficile, et cela mériterait de repasser en regular.

L'entête du site est un peu confus pour quelqu'un qui ne connait pas ce genre de formulation pour les logiciels de conversion, il serait peut être bon d'ajouter une baseline pour expliquer en clair de quoi traite le site. Tu as l'espace au niveau des drapeaux que tu pourrais très bien occuper avec ça. Smiley smile
darkstar2023 a écrit :
Bonjour,
L'idée est très intéressante, cependant le design manque de peps un peu. Sans regarder le code html, il serait peut-être intéressant de faire ressortir la hiérarchie des titres, menus, textes, etc. en jouant sur la taille en plus de la couleur.

Pour ça, il faut que je travaille mon CSS sur les balises h1 h2 etc. c'est ça ?
darkstar2023 a écrit :

*Un texte de présentation très court serait très apprécié (exemple : lisez enfin vos fichiers .MKV sur votre Mac !), le visiteur sait ainsi tout de suite à quoi il a affaire. Et c'est très "tendance".

Il y en a déjà un :

Vous avez un mac et des fichiers avec l'extension .mkv. Vous ne savez qu'en faire, ou vous voulez en tirer pleinement parti. Vous êtes sur le bon site. Vous voulez compresser vos dvd dans le meilleur format possible en utilisant des programmes libres et gratuits. Ce site est fait pour vous !

Mais c'est vrai que je pourrais le raccourcir pour que ça soit plus percutant.
Au fait, je viens de voir que sûr google, le petit texte en dessous de l'adresse est une vieille news qui n'est pas très approprié. Comment peut-on dire à Google ce qu'il doit afficher à cet endroit ?
darkstar2023 a écrit :

*À titre très personnel je mettrais volontiers un pictogramme illustrant le sujet du site (pour appuyer le texte de présentation)

Genre une pomme apple ? Ou une télé ?
darkstar2023 a écrit :

*Le menu de navigation manque de contraste avec le fond.

C'est pas faux, faut que je revoie ma palette de couleur. Mais je suis vraiment mauvais à ça. Je voudrais rester dans le noir en fond. Vous me conseillez quoi pour le menu ?
darkstar2023 a écrit :

*Encore à titre personnel, je modifierais bien la disposition générale des informations : menu de navigation en haut à droite, logo/titre en haut à gauche...

Je ne vois pas trop ce que vous voulez dire. Le menu serait toujours horizontal ? Et donc il n'y aurait plus de bannière ?

Merci en tout cas pour vos critiques.
Mikachu a écrit :
en optant pour un gris clair au lieu du blanc pour la typo.

Si tu peux me donner un code de couleur qui pourrait convenir. Merci
Mikachu a écrit :

il serait bien d'ajouter des marges entre les différents paragraphes.

Il faut que j'augmente le margin de la balise p ?
Mikachu a écrit :

Idem pour les images, qui sont collées au contenu qui les précède et les suit.

Là aussi il faut que je mette un margin à mes images ?
Mikachu a écrit :

Trop de texte en gras dans la FAQ rend la lecture plus difficile, et cela mériterait de repasser en regular.

Regular c'est normal pas bold c'est ça ? Y'a juste les titres de la FAQ qui sont en gras. C'est trop ?
Mikachu a écrit :

L'entête du site est un peu confus pour quelqu'un qui ne connait pas ce genre de formulation pour les logiciels de conversion, il serait peut être bon d'ajouter une baseline pour expliquer en clair de quoi traite le site. Tu as l'espace au niveau des drapeaux que tu pourrais très bien occuper avec ça. Smiley smile

Genre celle qu'à proposer darkstar2023 :
lisez enfin vos fichiers .MKV sur votre Mac !

Et j'enlève mon texte actuel d'accueil ? Ce texte je le met dans un encart ou just à côté des drapeaux ?

Merci pour les conseils.
crashray a écrit :
Pour ça, il faut que je travaille mon CSS sur les balises h1 h2 etc. c'est ça ?

Effectivement. Après je n'ai pas jeté encore un coup d'oeil sur le code mais les tailles se définissent très facilement en unités em.

crashray a écrit :

Il y en a déjà un :

Vous avez un mac et des fichiers avec l'extension .mkv. Vous ne savez qu'en faire, ou vous voulez en tirer pleinement parti. Vous êtes sur le bon site. Vous voulez compresser vos dvd dans le meilleur format possible en utilisant des programmes libres et gratuits. Ce site est fait pour vous !

Mais c'est vrai que je pourrais le raccourcir pour que ça soit plus percutant.
Au fait, je viens de voir que sûr google, le petit texte en dessous de l'adresse est une vieille news qui n'est pas très approprié. Comment peut-on dire à Google ce qu'il doit afficher à cet endroit ?

Genre une pomme apple ? Ou une télé ?

Un picto porteur de sens, par exemple une icone vidéo posée sur un écran Mac ou autre chose dans le genre. J'ai fait une petite ébauche pour que tu puisse voir plus clairement (picto + texte court)

http://img215.imageshack.us/img215/5785/mkv4mac.jpg

Pour l'affichage google il faut mettre la balise suivante entre les balises <head>

<meta name="description" content="Mettez votre description ici !" />


crashray a écrit :

C'est pas faux, faut que je revoie ma palette de couleur. Mais je suis vraiment mauvais à ça. Je voudrais rester dans le noir en fond. Vous me conseillez quoi pour le menu ?

Je ne vois pas trop ce que vous voulez dire. Le menu serait toujours horizontal ? Et donc il n'y aurait plus de bannière ?
Le menu serait simplement mis en haut à droite tout en restant horizontal. Au pire il tiendrait sur deux lignes ce qui n'est pas particulièrement gênant.
Modifié par darkstar2023 (30 Apr 2010 - 16:16)
Pour le gris, un #eee ou #ddd devrait suffire.

En fait il s'agirait d'ajouter une marge en bas des paragraphes et en haut des titres de manière à ce que le titre du paragraphe suivant soit suffisamment séparé du texte du paragraphe précédent.

Pour les images aussi, mais attention à les avoir en display block, sinon les marges ne s'appliqueront pas.

Oui, regular = normal. Smiley cligne

Pourquoi pas pour l'accroche, mais il n'est pas forcément utile de supprimer le texte qui suit, il rentre un peu plus dans le détail à qui serait potentiellement plus intéressé par l'accroche, et irait encore plus loin si ce paragraphe d'intro l'intéresse. Lecture pyramidale en sorte, idéale sur le web. L'info essentielle est donnée en premier, puis on développe par niveaux d'importance pour finir par les informations de dernier niveau.
En effet, j'avais pas pensé à la notion de lecture pyramidale, en fait l'essentiel étant de donner un maximum d'informations en évitant les répétitions et phrases du genre "ici vous êtes sur le bon site".

Et je répète encore, ne pas hésiter à jouer sur les tailles, un paramètre encore sous-exploité par rapport à aux couleurs.

Voici un exemple d'organisation qui livre autant d'informations sans fatiguer l'oeil (bon, pour la netteté de l'image on repassera...) :

Cliquez pour agrandir
http://img199.imageshack.us/img199/5785/mkv4mac.jpg
Modifié par darkstar2023 (30 Apr 2010 - 17:59)
darkstar2023 a écrit :
En effet, j'avais pas pensé à la notion de lecture pyramidale, en fait l'essentiel étant de donner un maximum d'informations en évitant les répétitions et phrases du genre "ici vous êtes sur le bon site".

Et je répète encore, ne pas hésiter à jouer sur les tailles, un paramètre encore sous-exploité par rapport à aux couleurs.

Voici un exemple d'organisation qui livre autant d'informations sans fatiguer l'oeil (bon, pour la netteté de l'image on repassera...) :

Cliquez pour agrandir
http://img199.imageshack.us/img199/5785/mkv4mac.jpg

Ouch ça claque Smiley eek
En deux temps trois mouvements tu me fais ça Smiley biggol
C'est un CSS que t'a fait ? Ou juste un montage photoshop ? Si y'a moyen que tu me donnes un CSS, j'adopte de suite !!
crashray a écrit :

Ouch ça claque Smiley eek
En deux temps trois mouvements tu me fais ça Smiley biggol
C'est un CSS que t'a fait ? Ou juste un montage photoshop ? Si y'a moyen que tu me donnes un CSS, j'adopte de suite !!


Je crois que c'est la maquette toshop Smiley cligne . A toi de faire l'intégration Smiley murf
Étant donné que je croie que ton code html est généré par un script, je ne peux faire un CSS. À toi d'intégrer Smiley cligne

Sinon j'ai quelques vieilles sources .psd qui m'ont aidé à faire quelques éléments :
Bandeau jaune : http://dl.free.fr/bGWlhpmSb (enregistre en sortie gif)

PS/HS : je cherchais par curiosité "lecture pyramidale" sur Google et ce dernier a déjà référencé ce topic Smiley eek
Modifié par darkstar2023 (01 May 2010 - 04:56)
Sujet clos
Aller à