Le laboratoire Viabloga

Je pense que nous ne sommes pas sur la même longueur d'onde en fait et qu'il y a un mélange de fait entre le modèle rdc testé ici (et qui n'est pas de moi) et la prochaine charte graphique de Viabloga.

J'étais plutôt en train de travailler sur l'identité visuelle de Viabloga. Donc quelque chose d'unique et pas la mise en avant d'une fonctionnalité qui peut être généralisée. Ce qui peut se faire autrement via des tutos et les modèles publics.

Je n'ai rien modifié sur le modèle rdc, il est en phase de test et je laisse Stéphane faire les réglages. Si je commence à le modifier, il ne pourra plus les faire ici pour en faire un vrai modèle public.

Pour les recommandations, il faudra effectivement mettre en place un système permettant le classement des sites selon les modifications apportées (uniquement via l'interface d'administration, modification de la css (hors couleurs paramétrables), modification du template).

En fait on se retrouve avec deux concepts très différents par rapport aux tests présentés hier.

Dans le cas des logos travaillés directement dans une application infographique, les polices sont retravaillées pour donner une ensemble cohérent et permettre une mixité sur le mot Viabloga. L'idée principale étant de faire ressortir Blog et d'induire dans la marque son secteur d'activité. L'enjeu est de faire en sorte que l'ensemble soit ensuite immédiatement identifiable comme étant "Viabloga, le moteur de blog d'une association qui croit au développement durable et qui offre des fonctionnalités exceptionnelles". C'est la base de la communication visuelle, lorsque l'ensemble est connu (même sommairement) par un utilisateur, il lui faut une fraction de seconde pour faire l'association entre l'identité visuelle (logo + typographie) et les messages qu'on veut faire passer. En d'autres termes, il n'y a même plus de lecture lettre par lettre de l'identité visuelle.

Ton exemple est puissant en terme de dynamisme mais il faudra que les internautes prennent connaissance du fait que c'est une mise en avant d'une fonctionnalité de Viabloga qui explique son manque d'originalité (original au sens propre du terme). Avant, ils ne verront que quelque chose de décousu et difficilement identifiable. Et même ensuite, le bandeau sera assimilé à ses fonctionnalités spécifiques (ah oui c'est vrai, je peux changer l'image et je peux changer les couleurs des textes) et non pas à l'ensemble Viabloga.

En travaillant avec du texte dynamique, on ne peut plus étirer une lettre, donner un effet de relief ou de matière. On ne peut plus s'approprier ce texte.


Le V est étiré, le Blog est étiré, un effet de grille est ajouté à blog



Un biseau intérieur est appliqué et donne l'effet en relief



Un effet de matière est ajouté au logo pour lui donner cet aspect poudré qui va avec le reste. Tu noteras aussi l'estampage sur ce logo qui permet de l'intégrer dans tous les décors sans qu'il paraisse une pièce rapportée.


En fait, il faudrait que tu oublies tout ce que tu sais de Viabloga pour aborder cette refonte visuelle et ergonomique. Que tu penses comme si tu ne savais rien de rien en arrivant sur viabloga.com

- Viabloga ? C'est quoi ça ? Un moteur de blog pour les fêtes de quartier ? Ah non peut-être pas...

- Mais c'est payant dis donc !!! Je ne vais pas payer pour un blog alors qu'il y en a tant de gratuit !!

Et c'est à partir de là qu'il faut arriver à répondre très rapidement aux questions :
- Est-ce que c'est sérieux ? Est-ce que ça mérite que me déleste de mon argent ?

A ce stade, la charte graphique et l'identité visuelle sont capitales. Est-ce que tu irais ouvrir un compte dans une banque dont l'enseigne est un panneau de contreplaqué avec des lettrines peintes ? Même si l'ensemble est soigneux ? Evidement l'exemple va te paraître décalé, mais pas tant que ça si tu remets les choses dans leur contexte. Ici, on est sur le web, il n'y a pas de contact physique. La confiance passe par d'autres biais et Viabloga ne peut pas s'appuyer sur une renommée populaire. Sérieux = soigneux (entre autres), sérieux égal aussi "esthétisme". Ceux qui font du beau sans être sérieux ne durent pas longtemps, ceux qui font du sérieux sans savoir faire du beau rament, ceux qui font du beau et du sérieux se distinguent plus rapidement. Rajoute à cela le fait qu'un internaute passe en moyenne 4 secondes sur une page si rien n'a retenu son intérêt.

Une fois la première prise de contact visuelle effectuée, il faut répondre plus précisemment :
- C'est sérieux parce que nous existons depuis 5 ans.
- C'est sérieux parce que nous sommes à votre écoute et que nous mettons à votre disposition des fonctionnalités que vous ne trouverez pas avec les solutions gratuites.
- C'est sérieux parce que nous faisons en sorte d'être attentifs aux besoins de nos utilisateurs et avons à coeur de leurs proposer un espace d'échanges et de documentation clair et explicite... d'ailleurs visitez et voyez par vous-même.
Et là encore, ces informations il faut les valoriser pour une lecture fluide et rapide car la moyenne française de lecture d'une page internet est de 36 secondes (merci Annie).

En résumé, j'ai été un peu longue sorry, il faut vraiment aborder les choses comme si nous passions progressivement du statut d'internaute lambda à celui de viabloggers confirmés.

Tout à fait d'accord.

Sauf que je peux tout à fait refaire la plupart des effets, j'ai juste pas eu le temps à minuit hier soir. ;-)
Tout ce qui est étirement des lettres etc. (on perd bien sûr le coté dynamique du titre, mais c'était juste pour vérifier que j'arrivais bien à afficher les fontes), c'est bon. Je peux faire aussi les effets de matières et la grille. On peut en changer les couleurs, par contre ce que je ne peux pas faire, c'est changer la forme de la matière en fonction du fond.

Je pense que je peux refaire au moins 80% de ce que tu fais dans ton application infographique, de façon configurable au niveau des photos et couleurs. Après, est ce qu'il faut les 20% restant ? Un truc que j'aime bien sur la page d'accueil de http://flickr.com par exemple, c'est que la photo change souvent sur la page d'accueil. Si c'est faisable facilement, c'est mieux. Si d'un autre coté il te faut 30 secondes avec ton appli infographique, effectivement, ce n'est peut être pas utile, et autant avoir les 20% de qualité en plus.

Bon en tous cas, ça donne toujours une idée de ce qu'on peut faire avec les modèles configurables. Si ça ne s'applique pas à la charte graphique, ça s'appliquera aux modèles publics.

Donc en résumé, c'est juste un exemple, pour montrer que si on le souhaite, on pourrait rendre la charte graphique de ViaBloga très facilement déclinable en photos et couleurs, en utilisant justement les possibilités de la plateforme. Ca serait un modèle privé (pas rdc*), avec un texte imposé (en tous cas pour le titre).

Dans le même ordre d'idées, la Fing commence a avoir un paquet de sites chez nous, on pourrait leur faire une charte graphique déclinable. (c'est du boulot, mais c'est tout à fait faisable). http://www.carrefourdespossibles.org en d'autres couleurs par exemple.

Tout à fait d'accord sur tes autres remarques sur le message à faire passer. Je suis très heureux de voir qu'on est entre de très bonnes mains. :-)

D'autre part, la possibilité d'éditer en ligne un titre avec des effets personnalisés. Donc là, nous ne sommes plus dans la refonte par contre. Et ça demande à être explicité, précisé et j'ajouterai même interfacé efficacement. J'avoue que même moi qui suit dans ce domaine ne voit pas comment je peux rajouter un effet de grille sur une partie de mon texte à partir de Viabloga

Pour l'instant, on ne peut pas faire ça. On peut faire un modèle où le titre aurait un effet de grille, mais ce serait imposé. Tout ce que pourrait faire l'utilisateur, c'est changer le titre, ou changer les couleurs de la grille.

Merci pour les liens des images ! J'en ai mis une autre et j'ai choisi des couleurs horribles. ;-) (encore une fois, juste une démo technique)

Je connaissais pas bababio, on en apprend tous les jours :o)

Je crois qu'il va falloir mettre dans le bloc central que la mise en page est également un laboratoire. Sinon c'est vrai que quand on tombe dessus sans parachute, on peut se demander si on est pas en train de fomenter un complot pour couler Viabloga ;o)

L'espace entre les onglets est discutable, par contre il met en evidence qu'on peut le faire et que la photo de fond se voit dans ce cas entre les onglets.
Pour la charte graphique, nous sommes arrivés à un accord avec Stéphane. J'ajoute, quand même, qu'il ne faut pas occulter sa prouesse technique. De l'interface, on peut effectivement modifier les pièces du logo, leur contour, le fond et le contour des lettres... il y a quelque chose à creuser et à mettre au point de ce côté-là pour le plus grand bonheur des viabloggers.

Sinon, tu as tout à fait raison : le sous-titre est invisible et les marges pètent un peu... laboratoire :o)

Je vais essayer de les modifier un peu.