Le laboratoire Viabloga

Je continue sur la lancée de mon premier essai :



J'ai essayé de prendre en compte toutes les remarques que vous avez faites sur le labo ou par chat et e-mail. En particulier, j'ai beaucoup réfléchi à quoi mettre sur cette premiere page, et surtout à quoi ne pas mettre. Au final il reste le formulaire "Créez votre site !", qui est mis en avant, avec simplement quelques points-clés pour rassurer les futurs blogueurs. A noter que les points ne sont pas développés, ce sont quelques mots, pas des phrases. C'est tout simplement parce qu'ainsi il y a beaucoup plus de chances qu'ils soient lus. :-)

Le lien "En savoir plus" permettra de developper pourquoi ViaBloga est simple, rapide, evolutif, puissant etc. De meme, les onglets au dessus (a definir exactement) presenteront les offres, tarifs etc. aux personnes qui souhaiteront les lire avant de creer leur site.

Enfin, la partie de droite est destinée à mettre les témoignages d'utilisateurs en avant, et de montrer des exemples variés de ce que l'on peut faire avec ViaBloga. On peut mettre de l'ordre de 5 témoignages pour commencer, en ajouter régulièrement, et périodiquement changer le site qui est mis en avant.

Les quelques lignes de texte en dessous le formulaire de creation permettent de presenter brievement la plateforme et ses atouts, en particulier on pourra mettre un lien vers la communauté des utilisateurs. :-)

Il reste quelques details a affiner (en particulier les couleurs, les boutons et onglets), mais je suis deja assez content du resultat.

Qu'est ce que vous en pensez ?

Un début d'essai de design sous Inkscape.
Avec un tel design, on pourrait avoir une largeur fixe pour le site "vitrine", et utiliser toute la largeur pour le menu administrateur, et le site des utilisateurs.

(cliquez sur l'image pour la voir en taille réelle)



Qu'en pensez vous ?

J'aimerais qu'on mette un plan d'action en place pour définir et construire ensemble le nouveau design de ViaBloga, et continuer sur la lancée de Jesabeth qui est la première à avoir commencé à travailler sur cette maquette, avec déjà une proposition très avancée.

Voici quelques pistes et idées à ce sujet :

Tout d'abord, j'aimerais qu'on prenne le temps de faire quelque chose qui soit extraordinaire. :-) Oui, c'est ambitieux, et oui, je pense que ça va demander beaucoup d'énergie et de temps. Mais je pense que ça en vaut la peine : le design, c'est la moitié de la première image qu'on va laisser (l'autre étant le contenu, sur lequel on a déjà énormément avancé sur le labo). Le design est même la première moitié, celle qu'on voit en premier. Et c'est pour celà que j'ai envie qu'on soit perfectionnistes. On ne va pas changer de design tous les trois mois, si on adopte un nouveau logo, il va figurer sur des t-shirts etc. donc on a tout intérêt à prendre notre temps.

Je précise qu'on peut prendre notre temps sur le design, et continuer à progresser sur le contenu et la structure, c'est presque complètement indépendant.

Alors comment obtenir un design extraordinaire ?

Dans un premier temps (une semaine ou deux), je propose que chacun d'entre nous fasse la liste des sites dont il trouve le design extraordinaire, et qu'il ou elle explique pourquoi il a dit "WOW !" lorsqu'il l'a vu pour la première fois.

Dans un deuxième temps, on passe à l'action ! (Jesabeth a déjà une belle longueur d'avance) Et on propose chacun un ou plusieurs design. Ensuite, on critique, on commente, et surtout, on propose des alternatives. En particulier, je suggère qu'on utilise Inkscape pour faire des démonstrations en SVG, afin que chacun puisse facilement changer les couleurs, les polices etc. (comme tgtg l'a fait sur la proposition de Jesabeth). Et on continue jusqu'à ce qu'on dise tous "WOW !" et qu'on soit tous fous amoureux du design final.

C'est de cette manière qu'on a créé l'oiseau du logo de ViaBloga : on a eu l'idée de l'oiseau migrateur, puis un des utilisateurs de Joueb.com, Seven, a fait des dizaines de croquis successifs, Delphine et moi-même avons fait plein de commentaires et déclaré quels étaient nos préférés, on a commencé a dessiner par dessus, puis on a eu l'idée de l'oiseau en origami qui devient vivant, allégorie des écrits qui prennent vie et s'envolent pour migrer à travers le monde. On a encore passé plusieurs semaines a essayer plein de choses, et j'ai ensuite repris l'un des croquis de Seven en SVG, j'ai fait alors plein de propositions avec les ailes par ci, le bec orienté par là, etc. jusqu'a ce qu'on tombe tous d'accord sur la forme actuelle.

Qu'en pensez vous ?

Pour exemple, quelques uns des logos (parmi une bonne cinquantaine d'autres) auxquels vous avez échappé. :-)

Bonjour tout le monde,

Je mets cet article ici et aussi sur vie de Viabloga, comme ça tout le monde sera au courant et pourra en discuter.

J'ai commencé à travailler sur une nouvelle présentation du portail de Viabloga.

Voilà le modèle avec de légères variations :
Blanc
Gris

Tout compte fait, j'ai trouvé intéressant de rester sur les mêmes couleurs, une sorte de challenge.

A vos claviers pour vos impressions et critiques :o)

J'ai corrigé beaucoup de petits problèmes sur rdc large, et ca a l'air de maintenant bien fonctionner (désolé je n'ai pas omniweb pour tester). En tous cas avec Firefox et Internet Explorer 6 sous Windows, je n'ai pas vu de problème.

Une petite particularité de rdc large : j'utilise une table pour faire la mise en page. Cela a le gros avantage d'éviter qu'on recoive 5 e-mails par semaine disant "ma colonne droite se retrouve a gauche en dessous des articles" a cause d'un article un peu trop large. Cela a le deuxième gros avantage de me permettre de faire un modèle à géométrie variable : 3 colonnes, 2 colonnes, ou même une seule colonne ! Sur les pages qui n'ont pas de blocs dans une colonne, celle-ci disparait. Par exemple pour les articles, j'ai fait disparaitre la colonne  de droite. (on pourrait faire l'inverse)

J'aimerais officiellement lancer rdc* et rdc large, vous voyez quelque chose qu'il faudrait faire avant ?

Qu'est ce que vous pensez de cette version de rdc* ?

J'ai encore quelques détails à modifier, mais normalement ça doit être utilisable.

Je vais commencer le grand chantier de la standardisation des blocs.

La solution qui me parait la plus élégante, c'est de proposer des blocs "standards", avec des noms standards, mais de permettre aux modèles d'ajouter des blocs spécifiques si besoin. (par exemple, pour RDC, on pourrait envisager que les onglets soient en fait un bloc configurable : on pourrait remplacer la liste des catégories par une liste de textes, ou les discussions actives ou n'importe quoi).

La très grande différence par rapport au système actuel, c'est que les blocs seront partagés entre tous les modèles. Si le modèles A et B utilisent le bloc B1, alors ce bloc contiendra la meme chose dans les deux modele. Je reformule : si vous choisissez vos blocs pour un modele, ils seront valables pour tous les autres modeles qui utilisent les memes blocs.

Pour les noms des blocs :

sb.top : bloc en haut
sb.1 à sb.10 : blocs de la colonne principale (qui peut etre à gauche ou à droite)
sb.1b à sb.10b : blocs de la colonnne secondaire pour les modèles qui ont 3 colonnes

Qu'en pensez vous ?

Pour l'anecdote, je vous invite à consulter l'origine du nom Lena comme standard du traitement de l'image - ce que je viens de découvrir, mais cela ne m'étonne pas de la part de Jesabeth...

Plus sérieusement, est-ce que nous pouvons envisager pouvoir utiliser Lena comme modèle ? A quel terme ou suivant quels termes ?

J'ai regardé d'un peu plus près : le modèle aujourd'hui est encore très personnel, il exploite une feuille de style avec un certain nombre d'images en .gif et .jpg, ce qui explique qu'il n'y ait que 2 couleurs paramétrables seulement au niveau du modèle. Sauf à être expert en modification de feuille de style et savoir manipuler les images, ou d'utiliser le modèle tel quel, je ne vois pas que faire.

N'y connaissant rien justement, j'ignore ce que cela peut représenter de le rendre accessible comme modèle. Il me semble que cela se joue principalement sur la possibilité de paramétrer toutes les couleurs. Est-ce que c'est compliqué à mettre en oeuvre ?

Il y a un autre paramètre qui a été évoqué, c'est celui du nombre de colonnes et leur largeur. Mettons que chaque modèle conditionne le nombre de colonnes, ce qui peut se comprendre (cela me semble bien compliqué autrement, notamment au niveau des blocs - sauf à pouvoir déterminer dans quelle colonne on affecte chaque bloc). Ce qui me gène le plus dans les modèles actuels, c'est qu'ils ont tous des largeurs de colonnes différentes. Alors certes on peut tester différents modèles mais quand on a commencé à peaufiner le site sur un modèle il est difficile d'en changer, principalement à cause de ces colonnes non paramétrables en largeur.

Si on peut m'éclairer sur ces perspectives ?

PS : encore merci, Jesabeth, pour cette superbe maquette qui illustre bien ce à quoi peut donner lieu le travail engagé ici, c'est en tout cas un très bel écrin qui engage à poursuivre...

J'ai corrigé quelques détails, en particulier l'affichage des listes, dans rdc*. Il y avait un magnifique :

body * {
margin:0px;
padding:0px;
}

qui s'appliquait a tout... Je l'ai enleve, et je l'ai remis plus specifiquement sur certains trucs. Il est possible que du coup, il y ait des problemes de marges / padding ailleurs.

En tous cas, les articles et textes avec listes sont bien plus lisibles.

Juste une petite démo technique (pas artistique) de ce qu'on peut faire avec les images configurables des modèles de mise en page de ViaBloga : j'ai ajouté le logo de ViaBloga, et changé la police du titre. Les couleurs sont configurables, vous pouvez envoyer une autre photo, il ne vous reste plus qu'à générer les images, et voilà !

Ca pourrait être sympa d'utiliser cette possibilité dans la charte graphique de ViaBloga et du site des utilisateurs : on pourrait changer les couleurs et photos chaque semaine (ou tous les jours si je trouve des volontaires ;-). Ca pourrait être un excellent exemple de cette fonctionnalité qui est absolument géniale pour les 95% d'utilisateurs qui ne s'amusent pas à passer des dizaines d'heures à faire leur modèle (ou tout simplement qui n'ont pas les connaissances techniques ou le don artistique pour le faire).

Comme je disais, c'est juste un exemple, à priori, si ça peut se faire avec Gimp ou Photoshop, on doit pouvoir faire à peu près l'équivalent en dynamique (à peu près car le rendu est souvent légèrement différent, pour diverses raisons).

A vous de jouer et de mettre d'autres photos et couleurs. Ca permettra de tester rdc* au passage.