3246 sujets

Critiques de vos sites: code et design

[pro] spypoint.com nouvelle mise en page accueil

Bonjour!
J'aimerais votre avis sur une nouvelle façon de "présenter" nos produits sur laquelle je suis en-train de travailler.

Donc voilà, ça se situ au niveau du "Cycle de chasse" Quand on arrive sur le site c'est comme ça:
upload/22504-hunting-cy.jpg

Si on clique sur "Découvrir", ça s'ouvre vers le bas et voici ce que ça donne:
upload/22504-open-hunti.jpg

À noté que les textes sont temporaire.

Vous pouvez voir la mise en page actuel pour comparer ici: -www.spypoint.com
Modifié par juliesunset (02 Dec 2014 - 22:32)
Hello,

Je n'ai rien contre ça à la base mais ici, il me semble qu'il y a quand même un contenu très important de cette page qui se retrouve masqué… c'est pas un peu dommage finalement ?
Surtout que le bouton qui permet de faire apparaître tout ça est tout petit petit… grands effets et petite cause… Smiley biggrin
Il me semble qu'il faudrait mettre en valeur beaucoup plus ce bouton en le centrant, en l'agrandissant, en lui donnant de grandes marges internes pour agrandir sa zone cliquable, etc. Smiley smile

On dirait que tu as cherché à caser une fonctionnalité (déploiement via JS) sans te poser trop la question de sa finalité, non ? Smiley confus
Modifié par audrasjb (02 Dec 2014 - 23:44)
Bonjour,

Du bon boulot, efficace. Cependant je plussoie audrasjb. Le bouton pour voir les infos est trop discret. Beaucoup d'internautes vont passer à côté.

Aussi, il y a un décalage entre le produit, son univers chasse (forêt, camouflage… ) et le header sur fond "Star Wars" (la caméra me fait alors penser à un vaisseau spacial Smiley lol ). Il faut donner de la cohérence à l'ensemble.

Le premier point (1. Repérage) est un peu collé au schéma rond du dessus. Peut-être décaler un peu les 5 points (titres et paragraphes) vers le bas pour solutionner ça, surtout qu'il y a de la place.

J'ai un doute sur l'orthographe de la phrase « Envoyez-nous vos photos prise par votre caméra… » en bas, il n'y aurait pas un "s" à "prises" ?

Je suis toujours gêné quand un mot du titre se retrouve coupé, seul sous le reste de la phrase (… saisons). En typo, ça passe mal (c'est moins gênant dans un paragraphe). Sur un site web c'est courant, mais est-il possible de trouver des astuces pour éviter ces coupures inesthétiques ?

Voilà pour moi. Smiley smile
Merci pour vos commentaires!

Vous avez raison pour le bouton, du coup je pense que je vais laisser tout ça ouvert. Au début je pensais que c'était mieux de fermé pour ne pas allongé inutilement la page, mais dans ce cas-ci on passe à côté de l'info.

spongebrain a écrit :
Du bon boulot, efficace.
Ah tu me rassure, j'avais l'impression que ça manquait de fluidité tout ça.

spongebrain a écrit :
Aussi, il y a un décalage entre le produit, son univers chasse (forêt, camouflage… ) et le header sur fond "Star Wars" (la caméra me fait alors penser à un vaisseau spacial Smiley lol ). Il faut donner de la cohérence à l'ensemble.
Le header est en fait une news qui défile, cette image n'est pas là en permanence juste quelques secondes. Ici on présente les caméras cellulaire et wi-fi

spongebrain a écrit :
Le premier point (1. Repérage) est un peu collé au schéma rond du dessus. Peut-être décaler un peu les 5 points (titres et paragraphes) vers le bas pour solutionner ça, surtout qu'il y a de la place.

Je suis toujours gêné quand un mot du titre se retrouve coupé, seul sous le reste de la phrase (… saisons). En typo, ça passe mal (c'est moins gênant dans un paragraphe). Sur un site web c'est courant, mais est-il possible de trouver des astuces pour éviter ces coupures inesthétiques ?
T'inquiète, ce n'est pas fini et ça fait partit du peaufinage. Pour le mot orphelin, la solution serait de mettre une espace insécable entre les 2 dernier mot. De cette façon, les 2 mots passent à la ligne au lieu de seulement le dernier.

spongebrain a écrit :
J'ai un doute sur l'orthographe de la phrase « Envoyez-nous vos photos prise par votre caméra… » en bas, il n'y aurait pas un "s" à "prises" ?
Merci de le signaler, je vais voir ça avec la personne concerné!
Bon j'ai retravaillé un peu tout ça en révisant mon code voici ce que ça donne pour le moment: (le preview n'est pas bon...)
upload/22504-hunting-cy.jpg

Le responsive va bon train, mais pour l'instant je bute sur un problème technique... les fameuses flèches orange sur les côté des blocs. J'aimerais qu'elles s'allongent en fonction de la hauteur des blocs mais qu'elles gardent toujours la même largeur... ça semble simple à prime abord, mais ça marche pas!!!

J'ai regardé du côté du SVG pour ne pas perde de résolution, mais j'ignore comment gérer ça. Si quelqu'un à une référence à ce sujet, je suis preneuse!
Je préfère. C'est plus aéré.

Cependant, les flèches oranges verticales indiquent une direction qui nous amène dans le footer. Une petite subtilité graphique à trouver ?

Aussi, la partie droite de la colonne (les photos) écrase un peu la partie gauche avec ses petits textes. Ne serait-il pas possible pour ce schéma de sortir un peu de la charte du reste du site pour un texte plus impactant et rééquilibrer l'ensemble ?

Là j'ai deux colonnes verticales, avec un manque d'équilibre et de lien visuel. Le lien graphique entre les deux pourrait être un poil accentué. Peut être avec une continuité des rectangles photo, par des filets, un très léger fond, une couleur, des dégradés subtils, en revoyant les flèches et/ou le format des photos ?… De nombreuses possibilités.

Attention, là il y a une illusion d'optique qui donne l'impression visuelle que les flèches de gauche ne sont pas bien alignées sur les photos, mais décalées vers le bas.
http://s3.e-monsite.com/2011/01/09/76713903mullerlyer-illusia-gif.gif

Volilà pour mon avis qui reste subjectif. Smiley cligne

En attendant la suite ? Smiley smile
Modifié par spongebrain (13 Dec 2014 - 11:22)
Ok je regarde tout ça!
spongebrain a écrit :
...la partie droite de la colonne (les photos) écrase un peu la partie gauche avec ses petits textes. Ne serait-il pas possible pour ce schéma de sortir un peu de la charte du reste du site pour un texte plus impactant et rééquilibrer l'ensemble ?
C'est vrai que vu de loin comme ça dans son ensemble les image à droite donne l'impression d'une grosse masse. On a pas vraiment cette impression à l'écran. Je vais réduire leur largeur et augmenter celle des textes de gauche. Et peut-être aussi grossir l'écriture?

spongebrain a écrit :
Là j'ai deux colonnes verticales, avec un manque d'équilibre et de lien visuel. Le lien graphique entre les deux pourrait être un poil accentué. Peut être avec une continuité des rectangles photo, par des filets, un très léger fond, une couleur, des dégradés subtils, en revoyant les flèches et/ou le format des photos ?… De nombreuses possibilités.
Je garde ça en mémoire. C'est un des points qui me chicottait, le manque de lien entre les 2 parties.


Le cas des flèches... ouf! Déjà sur le screen plus haut elles sont trop petites et trop espacé entre elles. Elles devraient avoir à peu près la même largeur que celles dans la roue. C'est le truc sur lequel je boss le plus en ce moment...
spongebrain a écrit :
Cependant, les flèches oranges verticales indiquent une direction qui nous amène dans le footer. Une petite subtilité graphique à trouver ?
Je relève se point... on avait même pensé carrément les enlevés. Gardant juste la numérotation des bloc. Mais je trouve qu'elles apportent un aspect graphique intéressant qu'on aurait pas autrement... je suis d'accord, je doit trouvé une passe pour palier à ça...

Dans tous les cas merci pour ton avis éclairé! Ça m'aide beaucoup!


Je suis toujours à la recherche de référence pour du svg "responsive"...
Petit update, voici où j'en suis.

J'ai viré l'image des flèches pour n'utiliser que du CSS, puisqu'en y réfléchissant bien elles sont purement décorative. En utilisant du CSS pour les faire, elles s'adaptent au contenu en hauteur et donc ça règle mon problème au niveau responsive.

J'ai également ajouté une petite bordure en dégradé dans le haut de chaque bloc.

Augmenté la grosseur du texte et réduit la largeur des grandes images à droite.

Voici ce que ça donne:
upload/22504-FireShot-S.jpg

Ça sera bientôt en ligne.
Fraîchement mise en ligne! -www.spypoint.com

J'ai juste un petit bug sous Chrome, l'espace entre le cercle et le texte est absent sur ce navigateur et j'ignore pourquoi...
Cool, ça donne bien ! Smiley cligne

C'est plus équilibré et agréable à lire comme ça. Les filets en dégradé structurent l'ensemble et les photos dans une hauteur différente ne posent plus problème avec l'alignement des flèches. On a plus la grosse masse à droite. De plus, les photos sont mieux cadrées dans ce format.
Juste une remarque. Sur mon écran le texte du titre touche le rond orange, alors que sur la capture il y a un espace. Je préfère avec un espace.

Voilà pour moi. Smiley smile
Merci!

spongebrain a écrit :
Juste une remarque. Sur mon écran le texte du titre touche le rond orange, alors que sur la capture il y a un espace. Je préfère avec un espace.
Tu dois être sous Chrome? Ou peut-être Safari... Bref, c'est comme je disais dans mon précédent message, j'ai un problème à ce niveau sous chrome. Pour une raison que j'ignore, il ne prend pas en compte le margin à droite de l'image... Il devrait y avoir un 40px d'espace entre l'image et le texte.
Modifié par juliesunset (18 Dec 2014 - 18:25)
Modérateur
En fait webkit fait juste pour le coup:
a écrit :

'margin-right', 'margin-left'
Value: <margin-width> | inherit
Initial: 0
Applies to: all elements except elements with table display types other than table-caption, table and inline-table


La marge ne devrait pas s'appliquer sur un élément en display: table-cell. Utilise plutôt un padding (qui s'applique sur un table-cell)
Modifié par kustolovic (18 Dec 2014 - 18:36)
Ah ouais! Merci pour le tuyau!

Pour le coup j'ai dù mettre le padding sur le titre plutôt que sur l'image parce que ça faisait rapetisser celle-ci.

EDIT : en fait j'ai parlé trop vite... image plus petite de toute façon...

EDIT 2 : problème résolu!
Modifié par juliesunset (18 Dec 2014 - 19:41)
Sujet clos
Aller à