Un petit coup de peinture ?

Bonjour,

J’ouvre ce sujet pour discuter des amélioration de design qu’on peut apporter à Zds. Comme l’a suggéré Sandhose, on va y aller de manière incrémentale.

Dans un premier temps je propose de nous attaquer au bloc du haut de la page d’accueil (paragraphes de présentation pour les non-connectés, recherche, unes).

Lien vers le message correspondant

Initialement j’avais proposé plusieurs modifications, Si vous voulez comprendre les premieres réponses, voici le message initial :

Je n’aime vraiment pas du tout. Je trouve que le design actuel est très bien comme ça. D’ailleurs, je ne vois pas en quoi le site n’est pas accueillant…

J’aime bien l’idée de la moitié haute de la page d’accueil, par contre, je ne suis pas pour la page tuto perso (que ce soit pour le header, les titres ou la sidebar). Par contre pour le titre du haut du tuto, je pense qu’il y a quelque chose dans le style à faire.

C’est super cool ! Ça serait génial qu’on ai encore plus de propositions ou de maquettes dans le genre, je pense qu’il y a vraiment du travail à faire sur le design de ce site.

(Au fait, actuellement il n’y a aucun bords arrondis dans tous le design du site. C’est des angles droits partout. Je ne suis pas contre le fait de changer ça (j’aime bien les deux), mais si on change ça, il faut le faire partout pour que ça reste cohérent)

Merci !

Déjà, merci pour vos retours

Premièrement,

+1000. Si certains veulent je peux partager mes fichiers photoshop si certains veulent travailler dessus. Ou peut être Sandhose peut aussi partager ceux de la page d’accueil actuelle pour avoir une base. Et pour te répondre complément motet-a :

(Au fait, actuellement il n’y a aucun bords arrondis dans tous le design du site. C’est des angles droits partout. Je ne suis pas contre le fait de changer ça (j’aime bien les deux), mais si on change ça, il faut le faire partout pour que ça reste cohérent)

Je sais, et justement il faut qu’on discute de tous les petits changements qu’on peut faire sur le site, et bien entendu avoir une charte graphique cohérente sur l’ensemble du site.

Dans l’ordre des réponses :

Helmasaur et remarques concernant mes propositions

Je n’aime vraiment pas du tout. Je trouve que le design actuel est très bien comme ça. D’ailleurs, je ne vois pas en quoi le site n’est pas accueillant…

Comme je l’ai dit c’est un ressenti personnel, et je dit pas que le design est moche, en effet il marche bien comme ça : il n’y a pas d’erreurs d’ergonomies / choix stylistiques. Mais je pense qu’on peut trouver des solutions pour le rendre meilleur.

Je vais donc expliquer pourquoi je pense qu’il y a du travail à faire pour la page d’accueil en développant mes propositions de modification :

1. Fusion header / bloc de présentation - recherche. Séparer ces deux éléments comme c’est fait actuellement ajoute un effet d’oppression. En fusionnant les deux (ce qui n’est pas délirant pour la page d’accueil) permet d’avoir un effet plus aéré.
2. Changement de style de police pour l’header. Actuellement le menu est en majuscule, personnellement je préfère en minuscule. C’est complètement subjectif, mais je vois pas trop la justification de mettre le menu en majuscules, je préfère réserver les éléments en majuscule pour les titres de nouvelles sections ou le texte écrit en petit comme dans des boutons par exemple. Je trouve le choix des minuscule plus approprié ici. J’ai aussi enlever la distinction menu des contenus / menu connexion-inscription toujours pour une histoire d’aérer le tout. De plus je vois pas ce que la distinction actuelle apporte, une couleur flashy d’arrière plan pour le bouton "inscription" serait justifié pour un site qui veut inciter les utilisateurs à s’inscrire, mais là je vois vraiment pas.
3. Les items de présentation du site. A la base c’est surtout pour ça que j’ai voulu faire une proposition de modification et que je pense que le site n’est pas très accueillant pour les nouveaux. Actuellement je trouve les paragraphes de présentation brouillons (dispatcher sur deux colonnes, mais sur la deuxième il y a deux paragraphes, et surtout beaucoup de texte, et ça donne pas très envie de lire). Je me met à la place de quelqu’un qui arrive sur le site pour la première fois et qui ne sait pas si ça vaut la peine de perdre du temps à rester sur ce site. Actuellement la disposition des éléments ne permet pas à l’utilisateur de parcourir simplement et rapidement la philosophie du site. J’ai disposer les items de présentation horizontalement agrémenté d’icônes afin que l’utilisateur puisse parcourir simplement et rapidement les 3 items (même si il n’a pas envie de les lire dans le détails, il peut lire rapidement les 3 titres de présentations et mémoriser ces 3 principes plus facilement grâce aux icônes)
4. La barre de recherche. Par grand chose à dire. J’ai juste séparer Clem de la barre de recherche pour un effet plus aéré (j’ai l’impression de me répéter ).
5. Bordures arrondies et ombrages. Vous l’aurez remarquer j’ai remplacer les coins droits et les bordures par des coins arrondies et des ombres. Tout simplement parce que je préfère, mais c’est à discuter en fonction des préférences de chacun, pour le coup je pense que ça apporte (ou enlève) rien à l’ergonomie et à la lisibilité des éléments.
6. Quelques détails. J’ai mis les titres de sections (ex : Derniers tutoriels) en noir, actuellement ils sont en bleu, je pense qu’il y a assez de bleu sur le site, et mis a par pour les fonds je pense qu’il faut réserver le bleu pour les liens (sauf pour les titres de sections pour les contenus mais c’est un peu différents). J’ai remplacer les barres jaunes horizontales par des petites barres noires, grâce à la petite taille de ces bordures on peut les épaissir un peu pour que ça soit plus voyant et donc mieux distinguer les différentes sections.

AmarOk

J’aime bien l’idée de la moitié haute de la page d’accueil, par contre, je ne suis pas pour la page tuto perso (que ce soit pour le header, les titres ou la sidebar). Par contre pour le titre du haut du tuto, je pense qu’il y a quelque chose dans le style à faire.

C’est le degradé que t’aimes par du header ou alors le changement majuscule –> minuscule, la suppression du fond pour le menu connexion-inscription et le logo qui a été diminué de taille ?

Concernant les titres j’ai uniquement changé les titres de chapitres qui sont actuellement sur un fond blanc avec des bordures en haut et en bas (grises et jaunes) mais pas sur les côtés. Je trouve que ces titres actuellement sont vraiment pas super beau (à voir avec les autres avis bien sûr) mais je pense que ça serait bien d’essayer de trouver une solution pour changer ça (actuellement c’est bizarre ce bloc blanc avec des bordures mais pas partout et pas de la même couleur)

Pour la sidebar je serai curieux de savoir pourquoi t’aime pas ? Je trouvais ça un bonne idée de déplacer les informations à propos du contenus sur le côté. Ca permet de ne pas polluer l’espace de lecture et de dédié uniquement l’espace principal au contenu pur. C’est un peu la quatrième de couverture qu’on peut accéder de partout en regardant sur la gauche. Après niveau design c’est pas travaillé.

Sandhose

J’ai annoté rapidement quelques endroits avec des points qui me plaisent moins, et c’est essentiellement de l’alignement/choix de tailles de police.

1. Plus d’espace ici. L’interligne à l’intérieur du texte est le même que le "titre" au dessus, ce qui donne l’impression qu’ils sont vraiment collés.
2. Même si le logo est parfaitement aligné verticalement avec le menu (j’ai checké, dans un bloc de 85px de haut, apparement), visuellement il paraît un peu haut.
3. Clem est vraiment compliquée à aligner sur la recherche. J’avais aussi eu ce problème en faisant la page d’accueil, et ça donne un peu l’impression que la page est déséquilibrée. J’ai tenté un truc, pour pouvoir la descendre, tout en ayant quand même l’effet bulle. Je suis pas super satisfait, mais bon, peut-être une piste.
4. Pareil, plus d’espacement. Notes par rapport aux Unes, elles rendent vraiment bien la, mais il faudra faire quelque chose pour que l’équipe de com’ en fasse du même genre.
5. Je suis contre ces ombres. La, avec cet espacement entre les items, ça charge plus qu’autre chose. Soit il faut plus espacer, soit trouver autre chose.
6. L’espacement est de nouveau un peu bizarre, mais cette fois c’est parce que l’icône est trop espacée par rapport au texte, et pas assez par rapport à la séparation en dessous.
7. J’aime ce bloc, mais pas sa position centrée comme ça au milieu de la page.

Merci beaucoup pour ce message complet. Au contraire je l’ai très bien pris, ça fait plaisir que tu te penches dessus pour proposer des améliorations.

J’ai pas beaucoup de remarque à faire, tu as plutôt raison pour tout. A savoir que j’ai pas fait les maquettes assez vites, donc j’ai pas beaucoup travailler sur les details d’ajustement - alignements - espacements. Pour les points 1, 2, 4 et 6 je suis entierement d’accord, maintenant que tu m’as fait remarquer ça, ça me dérange.

Pour le point 3 pour l’alignement de Clem avec la barre de recherche je m’étais dit que j’y reviendrai plus tard et au final … j’ai oublié. J’ai pas accès à mes maquettes là, mais je crois que si on la centre uniquement avec son corps (sans prendre en compte les feuilles) ça rend plutôt bien, à vérifier. C’est d’ailleurs un peu ce que t’as fait au final, la pointe de ta flèche à l’air d’être centré avec le corps de Clem.

Pour le point 5, voir la remarque 5 du dessus. C’est un choix personnel parce qu’en se moment j’aime bien mettre des ombres partout

1. J’ai eu un problème pour placer ce bloc, je suis pas satisfait non plus par son placement. Mais par contre je suis vraiment pour le dégager de où il est actuellement, à savoir dans la section article. Je comprend pas pourquoi il est dans la section article alors qu’un membres peut écrire tout types de contenus.

Et concernant l’autre maquette, elle n’a pas été beaucoup travaillé, je l’ai fait rapidement pour voir ce que ça pouvait donner sur une autre page du site et me donner une base de travail, il me reste plus qu’a travailler un peu plus ! Encore merci.

EDIT : Les unes

Ca commence à faire un peu long mais je voulais parler des unes. Je suis à 100% pour l’idée des unes mais là, à l’heure actuelle, elle ne donne vraiment pas envie d’être lues (pour un utilisateur qui connait bien le site et la communauté biensûr que si parce qu’on aime bien savoir ce qu’il s’y passe, mais sinon …). Actuellement il y a deux unes bleues comme la couleur principal du site et 3 blanches … Ca attire vraiment pas l’oeil.

A ce que je sais les unes sont choisies par le staff ET les icones aussi, donc c’est à priori pas une grosse contrainte de rendre ça plus jolie. Par exemple, personnellement je préfère les unes que j’ai misent sur ma maquette (c’est les même qu’avant hier). Ca pourrait être pas mal de developper un truc où quand le staff veut mettre un une, il choisit une couleur et une icone (png en transparence) et ça génère automatiquement un truc jolie (sur ma maquette, un dégradé et l’icone centrée). Ca attire plus l’œil. Et surtout essayer de rester dans la charte graphique du site. Là, l’icone des défis de Clem, c’est pas vraiment en adéquation avec le design du site …

J’ai lu ta réponse en entier.

En fait, je pense que je suis en désaccord avec ces changements car j’aime beaucoup ce design carré avec les bordures. Du coup, je n’accroche en rien à ce qui est fait.

Je ne critique pas pour autant ton travail. Il y a une réflexion et une cohésion dans ce qui a été fait.

Tu trouveras une ancienne version de ma maquette ici, même si des choses ont changées entre temps (et je sais pas exactement où est le dernier fichier à jour).

Si par le plus grand des hasard, tu as accès à macOS, un de mes travaux en cours consiste à faire un document Sketch complet, pour pouvoir designer rapidement et proprement de nouvelles pages. Tu trouveras ce document ici.

J’avais pas pris le temps de le préciser dans mon premier message (et j’ai pas grand chose à redire sur ta réponse ), mais je voulais tout de même te mettre en garde: des éléments de design que tu proposent ont énormément d’implications, et ça me paraît suicidaire de vouloir tout redesigner from scratch.

Par exemple, la fusion du header. Comme elle est partie, ça impliquerait je pense de revoir le dropdown des contenus, ainsi que celui de l’utilisateur étant connecté. L’actuel ferait tâche dans ce que tu proposes.

Aussi, sans délimitation en hauteur du header, je pense qu’il vaudra mieux passer à un avatar rond. Autant dire que ça a plein d’autres implications, et que –bien que ça soit pas mal dans "l’ère du temps"– ça va en faire gueuler plus d’un.

Pareil pour les coins arrondis, ça implique de changer à plein d’autres endroits ; mais sur les Unes + la barre de recherche, je pense que ça passe bien, sans avoir pour autant à changer massivement dans un premier temps sur le reste du site.

La sidebar, outre les problèmes d’alignements (pareil, rien de grave), l’ombre sur le côté donne une impression juste de bord "flou". Si ça peut rendre assez moderne sur des cartes blanches, quand tu as un fond dans une nuance de gris déjà relativement sombre, ça fait juste un espèce de dégradé qui rend pas super.

Je suis pas convaincu du déplacement des informations de durée, des auteurs et tout le bordel dans la sidebar.

Bref, mon point c’est que, à l’image de ce qu’on essaie de faire sur les messages, il faut vraiment tenter de changer le design du site de manière incrémentale. Déjà qu’on a un certain nombre de pages qui mériteraient d’être revues, je pense vraiment qu’il est important de revoir certains points en particuliers avant de vouloir changer tout le site.

Les items de bienvenue sont excellents, la recherche est sympa, l’idée de titre pour les contenus est très bonne aussi.

Je me concentrerais sur ce genre de points plutôt que d’essayer de tout faire à la fois.

Bonjour,

Je ne voudrai pas m’improviser graphiste (je n’ai clairement pas les connaissances), mais il y a tout de même quelque chose qui m’a étonné : le changement de couleur se fait au milieu des Unes. Actuellement, comme chaque élément est bien séparé des autres, ça ne me pose pas de problème, mais comme dans ta maquette les transitions sont plus discrètes, que la seule transition nette soit faite au milieu d’un élément me semble bizarre.

Pour la maquette des tutos, j’aime vraiment beaucoup. Vraiment vraiment ! Seul petit point négatif : la barre verticale sur le côté à déjà un petit côté fourre-tout (en particulier sur certaines pages comme le profil ou les contenus en rédaction), il faudrait éviter d’amplifier ça. De plus, pour la cohérence, si on change la barre dans les contenus, il faudrait la changer partout, ce qui nécessiterait je pense beaucoup de boulot (car il y a pleins de cas particulier, selon les pages et les autorisations).

Édit : mon denier point rejoint ce que dit sandhose.

Aussi, sans délimitation en hauteur du header, je pense qu’il vaudra mieux passer à un avatar rond. Autant dire que ça a plein d’autres implications, et que –bien que ça soit pas mal dans "l’ère du temps"– ça va en faire gueuler plus d’un.

+1, je ne suis pas graphiste non plus mais l’avatar tout rond c’est un truc (assez audacieux) qui me trotte dans la tête depuis quelques temps Et à mon avis, si on garde les bords carrés ça peut carrément le faire, ça peut faire une sorte de “contraste” assez sympa (si vous voyez ce que je veut dire).

Il faudrait laisser le champ de recherche en premier je pense.

Sandhose  : Oui c’est vrai qu’on ne peut pas tout modifier d’un coup ! (en plus, ce sujet partirait surement dans tous les sens). Sur tes conseils je propose donc de recentrer ce sujet dans un premier temps sur le bloc de présentation du site, la recherche et les unes. On verra les autres éléments quand on aura déjà fini de discuter de ça (l’avantage de ces éléments c’est qu’il n’ont à priori pas d’implications sur le reste du site).

Gabbro : Je pense que je vois pas exactement ce que tu veux dire. Tu trouves qu’on voit moins, d’un premier coup d’oeil, les différents éléments de la page (Unes / Derniers tutoriels / Derniers artciles ) ? Si c’est ça c’est donc un point à travailler sur ma maquette.

Pour la maquette des tutoriels, merci. Mais du coup je pense qu’on y reviendra plus tard puisque c’est quand même un gros sujet à travailler, pour le coup. (d’ailleurs pour la sidebar, faudra en discuter aussi à un moment, je suis pas convaincu de son utilité / ergonomie sur toutes les pages, typiquement pour uploader mes maquettes dans ma galerie j’ai dû mettre 3-4 secondes pour trouver le bouton "ajouter une image")

Du coup recentrons le sujet (j’ai aussi mis à jour le premier message :

Interressons-nous dans un premier temps à la page d’accueil, au bloc en dessous du header, contenant un bloc de présentation du site (pour les non-connectés), la barre de recherche et les unes. Voici le design actuel :

Voici ma proposition de modification (26/11/2017) (lien vers taille normal)

Rq : CdP = Coup de Peinture, j’ai pas trouvé mieux …

CdP #1 : Le bloc de présentation du site pour les non-connectés

Diagnostic : Actuellement, la disposition des éléments ne permet pas de lire le contenu rapidement et facilement, ce qui est primordial pour un nouvel utilisateur. En effet les trois paragraphes sont disposés sur deux colonnes (donc une avec un paragraphe, et une avec deux), et les titres ne sont, je trouve, pas très voyants si on regarde la page dans sa globalité. Il y a aussi un peu trop de texte je pense, il faut pas que ça devienne une page "à propos", mais juste présenter le site rapidement.

Propositions : Je propose donc de disposer les 3 paragraphes horizontalement pour pouvoir les parcourir d’un simple coup d’oeil. Mettre les titres en gras pour bien attirer l’oeil. Un nouvel utilisateur n’a pas forcement envie de perdre du temps à lire toute la description du site, mais c’est tout de même important qu’il prenne connaissance de la philosophie du site (décris par les titres). Et enfin pour rendre le tout plus jolie, et qu’on ai plus envie de regarder ces blocs, une petite image pour illustrer chaque paragraphe (et pour mieux retenir, memoire visuelle). Les icônes sont inspirées de ce qui est fait sur la page "Bibliothèque". En faisant ça je trouve qu’on gagne en aération et en lisibilité (ce qui est plus accueillant).

Compromis : Il faudrait donc trouver une nouvelle description plus courte pour décrire "Connaissance pour tous", donc on perd en informations.

CdP #2 : La barre de recherche de la page d’accueil (et de la bibliothèque)

Pas grand chose à dire sur la barre de recherche. Quelques points à discuter tout de même :

• Alignement de Clem avec la barre de recherche (je l’ai aligné par rapport à son corps). Ca choque, ça choque pas ? Sanhose à proposer une solution (RAPPEL: A METTRE ICI)
• Quelle Clem chosir ? Personnelement je préfère celle que j’ai mis sur la maquette.
• Coins arrondis ..? Il y a des coins carrés sur tout le site, j’ai mis des coins arrondis, ça ne me dérange pas, mais à discuter je pense.

CdP #3 : Les Unes

Diagnostic : Actuellement (voir capture ci-dessus) les Unes ne donne pas envie d’être lues (je critique pas le contenu, juste la forme). 3 unes blanches, 2 bleues comme la couleur principale du site. Ca attire pas vraiment l’oeil. De plus, le choix des icônes et je trouve très discutable. Par exemple pour l’image illustrant les défis de Clem, on pourrait choisir une image plus en adéquation avec le design global du site.

Propositions : Premièrement, aérer ce bloc. J’ai enlevé le contour blanc donc je ne suis pas très fan. Et j’ai legerement diminué la taille pour les espacer un peu. Ensuite, ça serait bien de developper un truc où le staff pourrait choisir une couleur et une icône (en transparence) et ça crée une jolie Une (avec un degradé et l’icone centrée). Tout en gardant le systeme actuel où le staff peut simplement mettre une image (par exemple l’image de pain sur ma maquette). J’ai aussi enlevé l’ombre qu’il y avait un bas de chaque Une, je pense qu’une ombre pour le texte suffit. A vérifier la lisibilité, contraste, etc.

EDIT : Je viens de me rendre compte que j’ai mis les unes avec des coins carrés, dans ma première maquette j’avais mis des coins arrondis. Pour plus de cohérence avec la barre de recherche ça serait peut être mieux de mettre des coins arrondis ?

A vous de jouer !

Mis à disposition des maquettes

Pour ceux qui veulent proposer des maquettes :

Je cite Sandhose si vous voulez la maquette du site actuelle :

Et je met à disposition la maquette que j’ai faite (a partir de celle de Sandhose)

Donner votre avis !

Critiques, suggestions, améliorations, lachez-vous !

En fait, j’aimait beaucoup comment les titres étaient “soulignés” sur la première maquette. Je trouve que ça fait vachement moins lourd que les grands traits fins actuels. Mais sinon c’est super

Moi aussi Mais je propose de voir ça après. Pour les titres, ca ne concerne pas que la page d’accueil, mais plein d’autre page où il faudra bien vérifier si ça ne nuit pas à la lisibilité, etc.