ZEP-03b : Page résumant les tutos en rédaction (amélioration)

a marqué ce sujet comme résolu.

J'invite donc quiquonque à tenter un truc :)

Ok, je vais tenter un truc. Je prépare une proposition de design qui combine les différentes idées. :-)

+1 -0

il faudrait ce rapprocher du format des blocs présents sur la page d’accueil

ok

je trouve que les "bulles" s'intègrent assez mal avec le designe ZdS, […]. Faudrait un truc beaucoup plus flat, dans l'esprit de ce qui se fait pour les autres icônes.

ok

Ajouter sur la case la date de mise à jour du tuto

ok

Rajouter un paramètre d'avancement

ok

Nous avons donc :

  • L'avancement des tutos (en création, commencé, avancé, bientôt terminé, terminé) :

Tuto Promesses JS - #1

Tuto HTML 5 - #1

  • Les besoins (de haut en bas : rédacteur, correcteur, illustrateur, repreneur) :

Tuto HTML 5 - #2

Tuto Promesses JS - #2

  • L'accès au tuto (version en ligne, version beta) (oui normalement c'est un lien donc là c'est pas le bon curseur) :

Tuto HTML 5 - #3

Notes :

  • les icônes inactives ne sont pas affichées ;
  • on suppose que les 4 icônes ne seront jamais activées en même temps : si on cherche un repreneur, on cherche uniquement un repreneur et c'est lui qui se chargera si besoin de trouver d'autres personnes.

Les icônes proviennent :

  • du set d'icônes utilisé sur le site pour correcteur ;
  • de font-Awesome pour les batteries et beta ;
  • création perso à partir du set d'icônes utilisé sur le site et de font-Awesome pour les autres.

Les icônes téléchargeables sont ici, au format svg (expiration dans 60 jours, me redemander si besoin).

C'est encore une maquette, je n'ai pas modifié le front du site.

Si vous voulez tester de votre coté, voici le code HTML d'une tuile (télécharger auparavant la page html des tutos) :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<article class="content-item">
  <a href="https://zestedesavoir.com/tutoriels/449/les-balises-audio-et-video-en-html5/" tabindex="-1" class="content-illu">
    <img src="Site%20web%20%E2%80%A2%20Tutoriels%20%E2%80%A2%20Zeste%20de%20Savoir_fichiers/3a0af0f4-312c-4c54-835b-66c04c745ac8.png" alt="">
  </a>

  <div class="content-info">
    <a href="https://zestedesavoir.com/tutoriels/449/les-balises-audio-et-video-en-html5/" title="Les balises audio et vidéo en HTML5 − Le multimédia avec HTML 5">
      <h3 class="content-title" itemprop="itemListElement"><img style="margin-top: -4px" height="20px" width="30px" src="./battery-3.svg" title="Bientôt terminé"/>Le HTML5 et le CSS3 pour les Clémentines partie 1</h3>
      <p class="content-description">Le multimédia avec HTML 5</p>
    </a>

    <div style="float: left">
      <img width="32px" style="margin-right: 7px" src="./en_ligne.svg" title="Voir la version en ligne"/>
      <img width="32px" style="margin-right: 7px" src="./beta.svg" title="Voir la version beta"/>
    </div>

    <div class="content-meta">
      <p class="content-categories"> dans <a href="https://zestedesavoir.com/contenus/?category=site-web">Site web</a></p>
      <p class="content-authors"> <time class="content-pubdate" pubdate="2015-04-16T09:46:58"> Mis à jour le 16 avril 2015 </time> par <a href="https://zestedesavoir.com/membres/voir/Eskimon/">Eskimon</a></p>
    </div>
  </div>

  <ul style="margin-top: -10px" class="content-tags" itemprop="keywords">
    <li style="margin: 0; padding:0"> <img width="32px" src="./redacteur.svg" title="Cherche un redacteur"/> </li>
    <li style="margin: 0; padding:0"> <img width="32px" src="./correcteur.svg" title="Cherche un correcteur"/> </li>
    <li style="margin: 0; padding:0"> <img width="32px" src="./illustrateur.svg" title="Cherche un illustrateur"/> </li>
  </ul>
</article>

+2 -0

En vrac, mon avis:

  • J'aime bien l'idée des icônes sur le côté, perso :)
  • J'aime moins la pile, qui a symboliquement une autre signification. J'aime bien l'idée de représenter l'avancement graphiquement il y aurai probablement moyen de faire ça avec un autre objet. Par exemple comme ça :Des roues … Ou un truc plus joli :p
  • Le "voir la version en ligne" me semble redondant avec le fait que le titre devrait en toute logique être un lien vers ladite version en ligne, que donc le titre devrait pas être cliquable si il n'y a pas de version en ligne (ou alors pour renvoyer sur la bêta, mais bonjour pour les différencier), et que le texte en orange devrait pas être le même entre publié et non publié (genre "publié dans Site web") si c'est publié. Autrement dit, pour moi, seule l'icône "bêta" est pertinente.
  • Sinon, gros plus un pour font-awesome et pour le fait que si on cherche un repreneur, on risque pas de chercher le reste (mais lors, il faudrait forcer ça côté back pour éviter qu'un petit malin ne le fasse quand même).

Le dernier point m'as donné une idée, que je balance comme ça, sans prétention aucune: on pourrait visuelement faire la différence entre publié et non publié en changeant légèrement la couleur du font. Par exemple, avec ma liste d'article perso, ça donnerai,

Fond de couleur

comment, ça, la couleur est moche ?

Comme ça, avec la page de demande d'aide, on aurait une différence visuelle entre non-publié et publié :)

+5 -0

J'aime moins la pile, qui a symboliquement une autre signification.

+1, mais je trouvais pas d'icône de qualité qui se rapprochait de l'idée. Une idée, du coup : ce serait chouette d'en profiter pour créer une icône custom ZdS. Par exemple, un verre de jus d'orange qui se remplit, un citron qui passe progressivement de l'état grisé à jaune, etc. N'hésitez-pas à proposer des idées.

Le "voir la version en ligne" me semble redondant avec le fait que le titre devrait en toute logique être un lien vers ladite version en ligne.

+1 aussi

Changer la couleur de fond me parait une chouette idée pour la lisibilité, par contre il faudra de toute façon laisser l'icône beta puisqu'elle servira de lien vers la version beta.

Bref, je refais un test en prenant en compte les remarques.

Sinon à part pierre_24 je n'ai pas eu énormément de retours sur mon design. Je vous écoute :-)

+0 -0

Par exemple, un verre de jus d'orange qui se remplit, un citron qui passe progressivement de l'état grisé à jaune, etc. N'hésitez-pas à proposer des idées.

J'aime bien l'idée du jus d'orange ^^

[…] par contre il faudra de toute façon laisser l'icône beta puisqu'elle servira de lien vers la version beta.

Tout à fait d'accord (d'ailleurs je l'avais dit ^^ ).

Sinon à part pierre_24 je n'ai pas eu énormément de retours sur mon design

Story of my life …

+0 -0

Sinon à part pierre_24 je n'ai pas eu énormément de retours sur mon design

Story of my life …

. :'(

+0 -0

Du coup j'ai eu une idée qui est un mélange de nos 2 proposition : une orange coupée en quartiers.

J'ai récupéré une image d'orange libre de droit que j'ai modifié pour obtenir les 5 dessins des valeurs de progression.

Un magnifique rendu

Sans l’icône Version en ligne et avec le tuto en beta d'une autre couleur, comme pierre_24 proposais. J'ai aussi retiré le fond gris des icônes.

Les sources pour tester

+1 -0

Ton idée me plait bien, monsieur le roi. Je trouve que ça fait quand même très surchargé comme design.

Mes propositions :

  • Le sous titre, souvent il sert à faire un jeu de mot sympa ou attirer le lecteur mais dans notre cas, le jeu de mot n'est pas super utile et l'utilisateur à déjà envie de lire et de participer. Je pense pas qu'il soit utile pour apporter un surplus d'information, le futur rédacteur connait (déjà) bien le sujet. Les correcteurs et illustrateurs, n'ont pas particulièrement besoin de plus d'info.

  • Les informations sur les catégories, et la date de mise à jours peuvent être mise au survol et être un critère de tri (moins d'un mois, trois mois, un an, …). On peut aussi afficher la date sous format court (par exemple, moins d'une semaine, moins d'un mois, …]. Ceci permettrais de mettre les icones sur la dernière rangé et gagner de la place en largeur.

+3 -0

J'aime pas trop l'idée d'afficher la catégorie et date au survol et j'aime bien les icône à droite (car c'est vraiment séparé des autres icônes).

Par contre c'est vrai que la date peut être réduire (comme je proposais ici), du coup on peut mettre tout sur une ligne.

Et en enlevant la description comme tu proposes on gagne 2 lignes, c'est plus épuré :

Un style plus épuré

+1 -0

\o/

Ce soir je poste un lien vers les images que j'ai faites pour les captures ci-dessus (le lien framadrop plus haut n'est plus valide).

+1 -0
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