ZEP-04 : Nouvelle page d'accueil !

Parce que celle en place est très brouillon

a marqué ce sujet comme résolu.

Cela donne quoi avec 4 contenus mis en avant ("Contenu sélectionné par l'équipe", c'est trop long; "À la une", c'est mieux ;) keep it simple) ?

+2 -0

Pour l'icone, voici un test avec une icone existante. La barre orange rendait pas hyper bien, et oblige à tout décaler de 10/15px…

Je pense pas que l'avatar des membres pour les sujets chauds soient intéressants à mettre, parce que ca prend de la place, et que je ne suis pas sûr que ça représente le sujet, et donc que ça soit réellement utile… Ou alors on peut imaginer un truc genre le "built by" sur GitHub:

Pour la barre de présentation, celle d'Alex est effectivement plus complète, mais aussi beaucoup plus lourde…

@Arius: J'avait testé au début, mais 4 contenu, ca veut dire aligné avec ce qu'il y a en dessous, et ca rend la page très "carré"… Vraiment, j'aimais pas. Je peux tester si vraiment, mais ça risque de prendre un peu de temps, et je pense vraiment pas que ca soit la peine…

Pour le nom, comme on a toute la largeur, je pense que un titre plus long, c'est mieux. J'ai fait pareil avec les sujet chauds, en rajoutant un "sous-titre", pour éviter qu'il y ai un trop gros blanc. On peut du coup envisager "A la une", et en sous titre "Contenu sélectionné par l'équipe"

+0 -0

@Arius: J'avait testé au début, mais 4 contenu, ca veut dire aligné avec ce qu'il y a en dessous, et ca rend la page très "carré"… Vraiment, j'aimais pas. Je peux tester si vraiment, mais ça risque de prendre un peu de temps, et je pense vraiment pas que ca soit la peine…

Bah c'est plus pour comparer, en fait. Après, que ce soit 3 contenus au lieu de 4 est un peu dommage. L'alternative serait d'avoir un slider 2x3 contenus mais bien que les sliders ne me dérangent pas, c'est pas le cas de tous.

+0 -0

En fait, j'ai surtout l'impression qu'on n'utilise pas la largeur total d'un écran full HD comme on en a pas mal aujourd'hui. Je veux bien comprendre que les IBidules sont aussi très célèbres mais c'est pas le taf du responsive que de leur donner un rendu personnalisé? Les dernières stats montrent plutôt des visites sur des navigateurs normaux avec des devices normaux.

@Kje: 2 lignes, c'est trop, et je vais t'expliquer pourquoi:

Ce qui est important sur une page, pour un premier visiteur, c'est le haut de la page, les 600/700 premiers pixels. A cette limite, sur ma maquette, le visiteur tombe juste à la fin du contenu sélectionné. Il faut qu'a ce stade la, il comprenne sur quel type de site il est. Dans ces contenus la, le fait que ca soit un projet, un tutoriel, ou un article n'est pas mis en avant, et un visiteur lambda n'y fera pas attention. Il verra juste un truc qui lui apprend à utiliser MySQL, un autre truc qui lui apprend qu'ElasticSearch est passé en 1.4, et un truc bizarre avec un vaisseaux spacial.

Il faut que dans ce qu'il va lire ensuite, il comprenne de quoi il s'agit. Actuellement, plus bas, c'est clairement délimité, d'un côté les tutoriels, et d'un côté les articles. La, c'est compréhensible, et comprend qu'il est sur un site de tutos et de news. Plus bas encore, il verra qu'il y a un forum, et s'y intéressera peut-être. Mais si on lui rebalance tout de suite une autre couche de "trucs" qui l'intéressent pas forcément, il va juste pas comprendre, voir quitter le site. Et c'est encore pire sur mobile, où il faut scroller des masses avant d'arriver sur quelque chose de "compréhensible".

Donc 2 ligne, c'est trop gros, c'est pas envisageable

Après, si la question c'est sur le nombre de contenus mis en avant, on peut éventuellement prévoir ça comme une "pool" d'une dizaine de contenus mis en avant, qui tournent régulièrement et automatiquement. Soit à chaque chargement (c'est moyen, je trouve), soit genre tous les quart d'heure. Pas de carousel. Les gens n'interagissent pas avec les carousels, et c'est chiant quand tu veux cliquer sur quelque chose, et que cette chose se barre sous ton nez… :-°

+8 -0

Salut à tous,

Je poste pas beaucoup sur le forum mais je suis pas mal les discussions qui s'y déroulent et j'ai eu envie de tester quelque chose pour cette page d'accueil. J'ai repris la maquette de Sandhose en modifiant quelques trucs (surtout sur le bandeau de présentation).

Maquette

Donc dans l'idée :

  • J'ai supprimé le fil d'ariane et la recherche car ça ne sert pas à grand chose sur la page d'accueil (la recherche y est);
  • J'ai essayé de rendre plus attractif le bloc de présentation en faisant juste une image de fond en structure. Le truc c'est que c'est facile à faire (on peut tout à fait changer l'image de fond et c'est donc libre de droit). C'est quelque chose qui ne change pas (pas de problème à en trouver) et ça donne tout de suite un coté plus cool (je trouve). L'organisation des textes a été faite à la va-vite et j'imagine ajouter des lien carrés blancs comme dans la maquette d'AlexD;
  • La recherche : pas grand chose à dire;
  • J'ai supprimé les traits orange en dessous des titres (dans le reste de la page), je trouve que ça rend moyen et fait un peu vieillot. Les titres seuls se suffisent (à mon avis). Et le "bloc" est conservé grâce au bouton "Tous les …"
  • J'ai aussi enlevé les icônes qui sont à mon sens inutiles (les titres sont clairs) sur une page où il y a déjà beaucoup d'image.

Voilà une petite idée. C'est juste pour tester.

Et mettre une 2ème ligne de contenus choisis entre les tutos/articles et les sujets chauds/tribunes ? C'est pas ce qui a été décidé par le vote, mais je propose quand même. Ça permettrait aussi de casser ce coté "aligné" dont tu parlais.

Perso, je pense que je préfererais sans, mais ça reste une possibilité.

@SpaceFox : j'imagine que tu poses la question à moi. Donc dans l'idée c'est une image de fond (background) donc on peut sans problème mettre une image de 2500 x 350 (la hauteur actuelle) et centrer l'image. En optimisant bien la compression de l'image et en sachant que c'est dans le cache c'est pas trop lourd et c'est très bien gérer niveau CSS.

J'aime beaucoup l'idée de la maquette de Abdelazer aussi. Après, je reste attaché aux lignes oranges, par soucis d'uniformité. Il faut aussi se demander ce que deviendra cette (très belle image) sur mobile ou quand on est connecté.

PS: non aux "carrés de la maquette d'Alex-D" dans la présentation du site. C'est trop lourd.

+4 -0

@SpaceFox : j'imagine que tu poses la question à moi.

À tout le monde en fait.

Parce que typiquement, les colonnes "derniers articles / derniers tutos" je vois bien ce que ça donne si la largeur change ; par contre le contenus à la une, je vois beaucoup moins bien – surtout s'il y a une grosse image.

J'aime pas vraiment la disparition des lignes oranges. Ni celle des icons. Ni l'image de fond d'ailleurs.

Sur le reste ça semble assez logique.

+3 -1

@SpaceFox: Je pense que vous n'avez pas à vous inquiéter des détails techniques du genre. Par exemple Florian me demandait comment on allait faire niveau responsive. Vous inquiétez pas, c'est possible, on gère ;)

@Abdelazer: Pour faire court, j'aime beaucoup ton header, j'aime moins le fait que tu ai viré les icônes et les lignes orange… (et je suis pas le seul :p )

Au passage, je met à dispo mon fichier photoshop de travail, que je mettrais régulièrement à jour: http://s.sandhose.fr/zestedesavoir/zep-4-wip.psd

Sinon, par rapport à l'adaptation aux différents écrans, je pense qu'il serait judicieux d'avoir la home en largeur fixe sur grand écran, avec plusieurs breakpoints (dans le sens, on aurait pas de largeur à 100%, mais des layouts "fixs" adaptés aussi aux très grands écrans)

+0 -0

@SpaceFox: Je pense que vous n'avez pas à vous inquiéter des détails techniques du genre. Par exemple Florian me demandait comment on allait faire niveau responsive. Vous inquiétez pas, c'est possible, on gère ;)

Je ne te demande pas de me dire "on gère" mais de préciser "comment ça va être géré".

D'autant plus que mon inquiétude porte au niveau des écrans PC, pas vraiment du mobile (où les éléments sont probablement les uns sous les autres.

Exemple : si j'ai pas pile la taille pour avoir 3 éléments à la une dans ta maquette, il se passe quoi ?

C'est ce que je disais en fin de message: je pense que l'on optera plutôt pour plusieurs largeurs fixes, au lieu d'un 100%… Genre une fois à 1200px, une fois à 1400px, à 1600px… Ca évitera ce genre de problèmes. Demain, si cette maquette convient, je me lancerais dans les différentes versions, dont la version "grand écran full HD"

+0 -1

Je suis ravi de voir que ma wireframe a plu et de voir la maquette de Sandhose qui ne suit pas vraiment ma contribution mais qui n'est pas si loin que cela. J'aimerais juste expliquer 2-3 choses à ma wireframe dont je reproche l'absence à la maquette de Sandhose.

  • Je suis un passionné du développement mobile. J'ai donc pensé ma wireframe en fonction de cela. Un principe de design assez simple (mais malheureusement pas toujours respecté) est de concevoir des listes avec des items du même contenu et de même taille. Tous mes items du même type sont de la même taille, j'ai même été plus loin en mettant de la même taille tous les types d'items. Ils peuvent alors se placer aussi bien dans la version web que mobile sans déstabiliser l'utilisateur. Ils s'y retrouvent directement. Sandhose, je ne comprends pas pourquoi tu as voulu mettre des tutoriels sur deux colonnes. Qu'est ce qu'il se passe quand tu vas rétrécir la fenêtre de ton navigateur ? Tu vas directement changer la taille et la disposition de tous les items ?

  • J'ai cru comprendre que plus longtemps nous laissons un tutoriel ou un article sur la home, mieux c'était. Je parvenais à mettre 6 tutoriels et 6 articles. Sur ta maquette, nous ne pouvons mettre plus que 4 tutoriels et 4 articles. C'est pas grand-chose mais c'est dommage.

  • Toutes les informations que j'ai placé dans mes items avaient été voulus et demandés dans les 10 premières pages de ce sujet. J'ai donc respecté cette contrainte. Tu as considérablement allégé les tutoriels et je trouve cela dommage.

  • Pour les sujets chauds, je vais d'abord confirmer les dires de Kje. Dans un premier temps, je me suis dis : "Puisque les sujets chauds sont moins prioritaires que les articles ou les tutoriels mais que je dispose de la place, mettons en plus sur deux lignes". Puis, je me suis rendu compte que c'était une merveilleuse opportunité pour rester flexible aux tribunes libres qui devraient arriver dans un futur plus ou moins proche. J'étais donc très content de moi à la fois des items que je pouvais même imaginer dans les forums et de leur disposition pour l'avenir. Sandhose, que va-t-il se passer quand nous aurons les tribunes libres ? Nous n'aurons plus qu'une simple liste de sujets chauds ? C'est à dire seulement 3 sur la home ?

Voilà, je tiens quand même à dire que je vois du potentiel dans la maquette de Sandhose et je suis aussi dur pour la faire évoluer dans le bon sens. Tout comme la plupart, je suis vraiment enthousiaste de ce dernier rendu et je pense que nous allons dans le bon sens mais il y a trop de détails qui ne vont pas encore selon moi.

Sorry pour le pavé. ^^

+1 -0

Pas de soucis pour les lignes oranges et les icônes. C'était juste une idée. Par contre je trouve qu'on pourrait mieux intégrer les icônes (le padding me semble bizarre) qui sont très proches de la ligne orange. En fait c'est peut-être ça qui me dérange :)

Concernant le header vu que ça semble plaire (au moins un peu), j'ai fait une nouvelle version avec les "vrais" textes et un essai concernant le fait de mettre des liens dessous les textes. J'ai aussi remis la ligne orange du haut.

Maquette en mode non-connecté

Maquette en mode connecté

Note : j'ai réduis la hauteur du header de manière à avoir plus de contenu visible dès le début.

Edit : ajout de la maquette en mode connecté.

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte