revoir l'esthétique du site

YannUbuntu · Le 05/10/2009, à 11:44

fabien961 a écrit :

la version 8 avec une largeur de 90%, qu'en pensez-vous ? Pouvez-vous tester avec différentes résolutions ?

- très bien sur mon tel portable, c'est mieux aussi sur mon laptop.
- J'ai aussi le soucis des "évenements à coté de l'étoile" cité par Julientroploin, mais seulement quand je reduis la largeur de la fenetre.
- Comme Sam7, je préfererais que le cadre "Telechargement" soit aligné verticalement avec celui des "Publications".
- "Cannonical" s'écrit "Canonical".
- Pour le commentaire du "support payant", il y a aussi des sociétés locales qui proposent du support... je mettrais par exemple : "Liste des sociétés proposant du soutien professionnel payant".

fabien961 a écrit :

J'ai aussi ajouté un timer pour faire défiler les images toutes les 6 secondes, mais perso je préfère qu'on utilise seulement les flèches : je n'aime pas quand un truc bouge continuellement dans la page, ça fait un peu publicité gif.

je pense qu'il faut que ça defile pour le nouvel arrivant (6sec ca me parait bien). Pour les autres, au lieu des flèches on pourrait mettre un Play/Pause qui se garde en mémoire (cookie?).

fabien961 a écrit :

J'ai remis le koala un peu plus foncé. Mais que pensez-vous de l'essai avec le koala de Zgegball ?

Je préfere le koala actuel, notamment parce-que celui de Zgegball me parait triste et a un oeil caché par du texte.

fabien961 · Le 05/10/2009, à 12:51

sam7 a écrit :

nous avons donc 3 colonnes (A / B / C) et 4 lignes (1 / 2 / 3 / 4) :
- en A1, nous avons le logo Ubuntu-fr
- en B1, RIEN
- en C1, la zone de recherche rapide & la zone d'identifiant & connexion
- en AB2 (case double) nous avons les 3 onglets et leur textes associés
- en C2, "En ce moment"
- en A3, les screenshoots
- en B3, "Téléchargement"
- en C3, "Sur le site"
- en A4, "Soutien"
- en B4, "Publications"
- en C4, "Réseau"

Je crois qu'on ne partage pas la même vision du découpage du site en "cases". Voilà la mienne où j'ai mis une couleur différente pour chaque case.

Il y a six grandes zones : le logo, la recherche et le login, le contenu principal (en rouge), la barre de droite (en vert), le menu et le pied de page. Chacune de ses "cases" est ensuite subdivisée en "sous-cases". Dans cette "vision", qui est celle du découpage html, il n'est pas nécessaire, il est même très difficile, d'aligner le bord droit du logo ubuntu-fr et de son texte avec le trait séparant le screenshoot et le téléchagement et avec le trait séparant les rubriques soutien et publication du bandeau inférieur. Cet alignement (et les autres) ne peuvent se faire qu'au pixel près, et sera cassé dès qu'un paramètre changera (contenu différent, taille de l'écran, taille des polices définies par l'utilisateur, ...). D'ailleurs, si tu regardes le mockup de luK, le bord gauche du logo ubuntu n'est pas aligné avec le bord gauche du bandeau inférieur.
Sur l'image, la colonne de droite du bandeau du bas à l'air d'être alignée avec la boite de téléchargement et la case de recherche. C'est le cas dans la version 8 pour une résolution 1280x1024, mais pas pour les autres résolutions, tout simplement parce que la case recherche a une largeur fixe, alors que les colonnes du bandeau du bas prennent 33,33% de l'espace disponible.

Julientroploin a écrit :

Par contre chez moi, sur un écran 4/3 à 1024x768, il y a un problème avec les évenements à coté de l'étoile : il se retrouvent en dessous et décalent "sur le site" vers le bas (alors qu'il semble y avoir la place à coté de l'étoile.

J'ai réduit la taille de l'étoile, est-ce que ça règle le problème ?
J'ai fait en sorte que la liste des évènements ne descende pas en dessous de l'étoile pour une résolution 800x600. Évidemment, si on réduit encore la largeur de la fenêtre, la liste va passer en dessous à un moment donné car il n'y aura plus de place à droite. C'est mieux que de voir la liste disparaître à droite, non ?

Julientroploin a écrit :

Problème mineur sous midori : les pointes inférieures du cadre du menu du bas apparaissent sous forme de pointes noir au lieu d'arrondis...

Tu pourrais me faire un screenshot STP ?

J'ai également mis la tagline "Communauté francophone des utilisateurs d'Ubuntu" sur une seule ligne pour gagner un peu d'espace vertical, est-ce que ça convient ?

Une autre remarque : sur le site comme il est actuellement (la version en prod), quand on se connecte, un nouveau menu apparait avec mon compte, créer un contenu, administrer, se déconnecter. Est-ce que ça va si je met ce menu au dessous de la barre de recherche, comme ça ?

Désolé, j'ai oublié de faire une "V9", toutes les modifs sont dans la version 8.

Dernière modification par fabien961 (Le 05/10/2009, à 12:56)

Julientroploin · Le 05/10/2009, à 13:03

juste en vitesse avant d'aller bosser : oui ça passe mieux pour les evenements

EDIT :
rendu sous midori

La réunion sera bien ce soir alors? On essaye de commencer à l'heure cette fois? ;p

Pour la zone de connection, je ne sais pas si ça avait été discuté, mais voilà ce qui existait dans le mockup de LuK dont je suis parti :

Du coup, en regardant mieux cette zone sur ton mockup-html, j'ai remarqué que ton bouton n'est pas centré en hauteur dans le cadre blanc...

Dernière modification par Julientroploin (Le 05/10/2009, à 18:26)

sam7 · Le 05/10/2009, à 23:06

discussion constructive ce soir...
beaucoup de monde ce qui à permis d'en arriver là
(pour le moment... il reste encore des petites retouches)
http://ubuntu-fr.evoconcept.net/AccueilV8/

Atok · Le 05/10/2009, à 23:22

Il y a pas mal de bugs sous chromium : les images n'ont pas de transition en fondu, on remarque les mêmes coins noircis et carrés que sur Midori (cf #928) et le halo en haut à gauche sur le bouton "présentation" est coupé à son extrémité.

poupoul2 · Le 05/10/2009, à 23:29

Atok a écrit :

Il y a pas mal de bugs sous chromium : les images n'ont pas de transition en fondu, on remarque les mêmes coins noircis et carrés que sur Midori (cf #928) et le halo en haut à gauche sur le bouton "présentation" est coupé à son extrémité.

Si possible, poste un screenshot. Et reste branché sur le topic pour pouvoir nous faire d'autres retours avec les versions à venir.

fabien961 · Le 06/10/2009, à 00:03

Voilà encore quelques modifs
Remarquez que quand on clique sur "connexion" en haut à droite, on accède à une page qui affiche un faux utilisateur loggé. Le menu qui contient .... / Autre / Autre ... correspond au menu d'administration drupal du site. Il sera plus ou moins garni en fonction du type d'utilisateur loggé.
Quand on clique sur l'onglet "A propos de l'asso", on a une page qui comprend beaucoup plus de contenu, histoire de se faire une idée de l'évolution du layout en fonction du contenu (qui sera généré par drupal).
J'ai élargi la colonne de droite contenant les évènements.
J'ai aussi ajouté un effet de fondu à droite des onglets.
J'ai remonté le texte des onglets et le texte des onglet non actifs est plus petit.

Je ne sais plus ce qu'on a dit encore ce soir sur IRC. Sam7, pourrais-tu faire un petit résumé et voir ce qui manque encore ? Merci

On a aussi besoin de testeurs sur différents navigateurs. Sous Konqueror 4.3, le layout a l'air d'être cassé quand un utilisateur se connecte. C'est toujours le cas xabilon?
Je vais voir ce que je peux faire concernant les coins qui s'affichent en noir. C'est parce-que j'utilise jQuery pour faire ces coins.

Et mauvaise nouvelle (enfin ça dépend pour qui ..) : j'ai retrouvé du boulot, et je commence demain ! Du coup, je risque d'être moins réactif que jusqu'à maintenant.

xabilon · Le 06/10/2009, à 00:08

fabien961 a écrit :

On a aussi besoin de testeurs sur différents navigateurs. Sous Konqueror 4.3, le layout a l'air d'être cassé quand un utilisateur se connecte. C'est toujours le cas xabilon?

Oui. Maintenant les "Autres / Autres ..." ont la bonne taille de police, mais "En ce moment" se retrouve toujours au milieu de la page :

Dernière modification par xabilon (Le 06/10/2009, à 00:11)

luK · Le 06/10/2009, à 13:20

J'ai quelques remarques sur la version 9:

- L'effet fondu à droite des onglets est une bonne idée mais je ne l'utiliserai
pas pour les onglets "Présentationh | A propos de l'asso | ..." afin de bien
différencier les onglets aux en-têtes de sections du site ( Téléchargement, ... )

- La partie screenshot était mieux à gauche ( on voit mieux le koala et
c'est plus cohérent: d'abord un aperçu puis la proposition de téléchargement )

- Les zones de champs de connexion devrait être légèrement décalées sur la droite
comme sur le mockup (http://lukdesigner.free.fr/Ubuntu/v4/accueilV4.png)

Dernière modification par luK (Le 06/10/2009, à 13:20)

Julientroploin · Le 06/10/2009, à 17:34

luK a écrit :

- L'effet fondu à droite des onglets est une bonne idée mais je ne l'utiliserai
pas pour les onglets "Présentationh | A propos de l'asso | ..." afin de bien
différencier les onglets aux en-têtes de sections du site ( Téléchargement, ... )

ça a été modifié pour d'une part se rapprocher de ton dernier mockup avec les onglets en vague (mais mais sans compliquer la forme puisqu'apparement ça posait problème) et sutout pour ne pas marquer verticalement de séparation à droite, puisqu'il n'y à rien à séparer...
Mais c'est vrai qu'il ne serait pas ml de différencier les vrais des faux onglets.

luK a écrit :

- La partie screenshot était mieux à gauche ( on voit mieux le koala et
c'est plus cohérent: d'abord un aperçu puis la proposition de téléchargement )

là, notre oeil était gèné par les séparations verticales qui ne s'alignaient pas donc on en à fait sauter plusieurs dans la foulée, on à inversé les 2 zones pour éviter que "téléchargement" et "sur le site soient "presque mais pas tout à fait" alignés. Quelque chose nous génait...
Mais si il y a une autre façon d'éviter cet effet, je suis preneur. Surtout que comme tu le dis, on vois moins bien le Koala...

luK a écrit :

- Les zones de champs de connexion devrait être légèrement décalées sur la droite
comme sur le mockup (http://lukdesigner.free.fr/Ubuntu/v4/accueilV4.png)

Oui, c'est vrai et tant qu'à faire, si on peut décaler horizontalement le bouton (site/doc/planet) pour qu'il soit plus vers le bord (comme sur ton mockup) ce serait pas mal (Fabien va trouver que je chipotte encore avec ce bouton, mais bon...)

Merci de continuer à suivre les travaux LuK...

sam7 · Le 06/10/2009, à 23:21

je partage le point de vue de Luk également... mais seulement pour les 2 derniers points...
par contre, désolé, mais ce soir, je n'aurais pas le temps de faire un résumé de la réunion d'hier soir...
... ça sera pour demain.

sam7 · Le 07/10/2009, à 22:11

désolé, je n'arrive pas à ouvrir mon log de lundi soir, c'est bien la première fois...
... je vais donc essayer de mémoire dans les très grandes lignes...

nous avons été très bref concernant la boutique pour passer rapidement à la page d'accueil d'ubuntu-fr.org ... grâce au talent d'un "codeur" qui était avec nous ... nous avons bien avancé.
nous avons particulièrement essayé de "gommer" les différences "visuelles" de largeur entre les différentes colonnes... pour ce faire, les traits verticaux de séparation ont été supprimés...
la présentation des onglets a été améliorée également...
la permutation des zones screenshoot & téléchargement a été testée... mais semble ne pas convenir (c'est vrai que cette permutation ne me plait pas non plus, je suis d'accord avec luk : c'est plus cohérent : d'abord un aperçu puis le téléchargement ... & ainsi le koala est mieux visible)

la semaine prochaine nous aborderons plus en détail la coordination des différents projets ...

Julientroploin · Le 08/10/2009, à 19:43

Juste un petit passage pour rappeler à fabien qu'il reste ça à coder sur la page

le dépliage lorsqu'on clique sur l'item principal. ça concerne aussi "Contribuer" qui doit donner :
- contribuer à l'association
- contribuer à la distribution

sam7 · Le 08/10/2009, à 21:59

c'est vrai ! il ne faut pas oublier celà, merci de ce rappel

Yann · Le 09/10/2009, à 22:49

Dites le forum lui aussi il fera 1024px de large? Mon ecran fait 1900px de large...

sam7 · Le 09/10/2009, à 23:05

je viens d'avoir une petite idée qui me semble intéressante, voire
ici : http://forum.ubuntu-fr.org/viewtopic.php?pid=2975431#p2975431 pour le forum
&
là : http://forum.ubuntu-fr.org/viewtopic.php?pid=2975430#p2975430 pour la documentation

...voilà que je commence à vouloir coordonner ces différents projets (lol)
qu'en dites-vous ?

je pense que nous pourrons en discuter lundi soir sur IRC Freenode canal #ubuntu-fr-devweb

Edit 1 :
parmis les "gros titres" des différentes rubriques de ces 2 pages, on pourrait peut-être y trouver :
Les gestionnaires de fenêtres & Les environnements de bureau ... dans la rubrique "personnaliser"

Edit 2 (en apparté) : mon projet de site sweetux va enfin bientôt pouvoir débuter concrètement...
... ça se passe ici : http://forum.ubuntu-fr.org/viewtopic.php?pid=2975569#p2975569

Dernière modification par sam7 (Le 10/10/2009, à 00:38)

Julientroploin · Le 10/10/2009, à 16:56

Yann a écrit :

Dites le forum lui aussi il fera 1024px de large? Mon ecran fait 1900px de large...

Je crois que toutes les pages sont prévues à largeur variables.

Juste en passant, on se demandait sur l'IRC il y à 15 jours où inclure le contenu de http://suivi.ubuntu-fr.org/ et il me parait évident que sa place serait en tête du planet... non?

Dernière modification par Julientroploin (Le 10/10/2009, à 23:05)

fabien961 · Le 11/10/2009, à 22:31

Salut !
Voilà une petite mise à jour en attendant la réunion de demain soir.
J'ai corrigé les remarques de luK et j'ai ajouté les sous-menus de deuxième niveau dans le menu du bas, comme rappelé par Julientroploin. J'ai aussi changé légèrement le comportement du défilement automatique des images : il suffit de cliquer sur une des flèches pour faire défiler les images à la main et arrêter le défilement automatique. Je trouve ça moins agaçant pour ceux qui en feraient leur page d'accueil.
J'ai commencé à tester sur d'autres navigateurs (ben oui, reprise du travail = accès à un ordi sous Windows ;-)) : il semblerait que IE7 ait le même problème de positionnement que Konqueror 4.3 et Google chrome le même problème de rendu les coins arrondis que Midori. Ça va me faciliter le boulot de correction.
Julientroploin, j'ai modifié l'affichage des 4 coins arrondis de la zone principale, peux-tu me dire si ça passe bien chez toi ?

sam7 · Le 11/10/2009, à 23:18

tout à fait d'accord avec toi Julientroploin concernant http://suivi.ubuntu-fr.org/

bon boulot fabien961 ... mais je constate que les onglets ne sont pas tout à fait bien alignés à l'horizontal...
& je pense que pour "la boutique", tu aurais pu pointer vers http://www.enventelibre.org/ tant qu'on y est...

Dernière modification par sam7 (Le 11/10/2009, à 23:19)

YannUbuntu · Le 12/10/2009, à 04:37

salut
pourquoi avoir séparé "Contribuer à ubuntu-fr" en 2 ("l'association" et "la distribution") sachant que la page "Contribuer à ubuntu-fr" contient les 2 ?

Dernière modification par YannUbuntu (Le 12/10/2009, à 04:39)

Julientroploin · Le 12/10/2009, à 10:03

@fabien :
nouveau problème : ton dégradé de fond ne va plus jusqu'en bas, même sous Fx

coins noirs toujours là sous midori... et même problème de dégradé.

est il possible de replier "contribution" quand on déplie "partenaires et revendeurs" et vice-versa? c'est ce qui était prévu initialement.

sam7 a écrit :

bon boulot fabien961 ... mais je constate que les onglets ne sont pas tout à fait bien alignés à l'horizontal...

desquels parles tu? si c'est "téléchargement" et "sur le site", c'est normal : n'oublie pas que l'emplacement de "téléchargement variera en fonction du contenu de la case au dessus.

YannUbuntu a écrit :

pourquoi avoir séparé "Contribuer à ubuntu-fr" en 2 ("l'association" et "la distribution") sachant que la page "Contribuer à ubuntu-fr" contient les 2 ?

me souviens plus du pourquoi, mais l'idée est apparue surIRC fin septembre et on l'a reprise sur ce forum...
peut être parce qu'actuellement il y a http://www.ubuntu-fr.org/soutien quand on clique sur "nous soutenir"...
Moi, je conserverais bien la séparation, mais il y a pas mal d'infos qui devraient passer de la 1ere à la 2e page...

@tous :
Sinon, en général quand je visite un site, je n'aime pas que trop de place soit perdue en haut. Que penseriez vous de serrer un peu plus en haut :
- diminuant la bordure marron
- serrant un peu plus le logo Ubuntu-fr et la zone recherche contre le bord.
la moitié de ce qui existe actuellement suffirait à faire propre je pense. C'est une histoire de quelques pixels, mais bon...

Pour le site envente libre, le lancement est prévu pour quand? je ferais bien une petite commande avant noel... entre autres une FUR si une version 9.10 est rapidement disponible

Dernière modification par Julientroploin (Le 12/10/2009, à 10:16)

sam7 · Le 12/10/2009, à 21:43

pour moi, c'est bon ! je pense que l'on peut passer à la suite...

*** CR "en live" du meeting IRC ***

après "validation" de la v10 :
http://ubuntu-fr.evoconcept.net/AccueilV10/#
lancement du codage du template drupal de la page d'accueil...

***

coordination des projets en cours...
cette semaine, il faudra se creuser les méninges pour harmoniser les "gros titres" dans forum & documentation...
... bien évidemment, chacun aura ses "sous-titres" propres...
que proposez-vous ? d'avance, merci.
dans les topics respectifs bien sûr :
forum : http://forum.ubuntu-fr.org/viewtopic.php?pid=2981634#p2981634
documentation : http://forum.ubuntu-fr.org/viewtopic.php?pid=2981636#p2981636

***

nous abordons maintenant les variantes de la page d'accueil pour :
kubuntu / xubuntu / edubuntu / ubuntustudio / lubuntu ...

quelles sont donc vos propositions ? vos mockups ?
à partir de la v10 bien sûr !

***
avec tout celà, il y a de quoi s'occuper...
... afin que le nouveau site entièrement (ou presque) refondu soit mis en ligne...
... avant la 10.04 LTS bien évidemment, c'est impératif...

Dernière modification par sam7 (Le 12/10/2009, à 23:04)

xabilon · Le 12/10/2009, à 21:46

Il y a du mieux, mais sous Konqueror4 c'est pas encore ça :

C'est la V10 :
http://ubuntu-fr.evoconcept.net/AccueilV10/index.html

Edit : mauvaise nouvelle : c'est pareil sous Iceweasel

Re-edit : en fait c'est variable en fonction des polices utilisées par le navigateur. Avec Sans-serif c'est bon sous Iceweasel, mais pas avec Nimbus Sans (en gardant la même taille)
Sous konqueror c'est la même chose, c'est donc la police qui met la zone !!

Dernière modification par xabilon (Le 12/10/2009, à 22:05)

Julientroploin · Le 12/10/2009, à 23:45

quelques questions pour me lancer dans les variantes :
- d'où viens la boite ubuntu dans la zone téléchargement? C'est LuK qui l'a dessinée ou elle viens d'ailleurs? (c'est pour savoir si elle existe en bleu/ en rouge ou si je la refais)
- fabien : peux tu re-poster le lien vers ta page "blanche"

AlexandreP · Le 13/10/2009, à 05:57

Je ne sais pas si quelqu'un est chargé de faire des captures d'écran de Ubuntu 9.10 ou si quelqu'un a commencé à en faire... Dans la perspective où personne ne les aurait encore faites, j'en ai prises quelques-unes. J'imagine qu'elles seront trop grandes et qu'il faudra les redimensionner (c'est du 1152x864, merci VirtualBox ).
- Captures 1 à 15
- Captures 16 à 30
- Captures 31 à 45
- Captures 46 à 60
- Captures 61 à 75
- Captures 76 à 90
- Captures 91 à 116

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#926 Le 05/10/2009, à 11:44

Re : revoir l'esthétique du site

#927 Le 05/10/2009, à 12:51

Re : revoir l'esthétique du site

#928 Le 05/10/2009, à 13:03

Re : revoir l'esthétique du site

#929 Le 05/10/2009, à 23:06

Re : revoir l'esthétique du site

#930 Le 05/10/2009, à 23:22

Re : revoir l'esthétique du site

#931 Le 05/10/2009, à 23:29

Re : revoir l'esthétique du site

#932 Le 06/10/2009, à 00:03

Re : revoir l'esthétique du site

#933 Le 06/10/2009, à 00:08

Re : revoir l'esthétique du site

#934 Le 06/10/2009, à 13:20

Re : revoir l'esthétique du site

#935 Le 06/10/2009, à 17:34

Re : revoir l'esthétique du site

#936 Le 06/10/2009, à 23:21

Re : revoir l'esthétique du site

#937 Le 07/10/2009, à 22:11

Re : revoir l'esthétique du site

#938 Le 08/10/2009, à 19:43

Re : revoir l'esthétique du site

#939 Le 08/10/2009, à 21:59

Re : revoir l'esthétique du site

#940 Le 09/10/2009, à 22:49

Re : revoir l'esthétique du site

#941 Le 09/10/2009, à 23:05

Re : revoir l'esthétique du site

#942 Le 10/10/2009, à 16:56

Re : revoir l'esthétique du site

#943 Le 11/10/2009, à 22:31

Re : revoir l'esthétique du site

#944 Le 11/10/2009, à 23:18

Re : revoir l'esthétique du site

#945 Le 12/10/2009, à 04:37

Re : revoir l'esthétique du site

#946 Le 12/10/2009, à 10:03

Re : revoir l'esthétique du site

#947 Le 12/10/2009, à 21:43

Re : revoir l'esthétique du site

#948 Le 12/10/2009, à 21:46

Re : revoir l'esthétique du site

#949 Le 12/10/2009, à 23:45

Re : revoir l'esthétique du site

#950 Le 13/10/2009, à 05:57

Re : revoir l'esthétique du site

Pied de page des forums