revoir l'esthétique du site

poupoul2 · Le 07/12/2009, à 00:33

Salut à tous

J'ai (enfin) trouvé un peu de temps pour avancer sur le Planet. Il manque encore quelques éléments dans la page, mais l'essentiel est là

Les sources

Julientroploin · Le 07/12/2009, à 09:02

poupoul2 a écrit :

Il manque encore quelques éléments dans la page, mais l'essentiel est là

quelques éléments ajoutés à la va vite à ton mockup, ça donne :

- bouton pour cacher le menu et étendre le Planet vers la gauche
- filtres des billets
- icones du menu latéral
- barre standard du bas de site
- curseurs mains montrant ce qui se passe au survol

si tu veux récupérer juste les éléments que j'ai ajouté pour les inclure à ton mockup, tout est là :
ftp://ubuntu-fr-secours.org/www/MOCKUP/ … _modif.xcf
quelques remarques/détails/questions sur ton mockup :
- dans le planet, les textes sont "justifiés", pas sur ton mockup (enfin, ça n'a aucune importance à ce stade)
- dans le menu tu as mis un bouton autour de "Planet ubuntu-fr", c'est vraiment un bouton ou c'est ce qu'on voit au survol? dans ce cas, il faudrait homogénéiser avec ce qui se fait dans les autres sections (cf. mes sources ou celles de LuK)
- je verrais bien un "onglet" sur le à propos, comme sur "Action" et "Divers" du menu de la doc.
- qu'entends tu par "Navigation"?

Pour ceux qui voudraient les sources que j'ai adapté en xcf à partir du travail de LuK, c'est dans le même répertoire du ftp, les noms sont suffisamment explicites (normalement).

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

Mpok · Le 07/12/2009, à 15:55

Je n'ai pas le retour de votre réunion d'hier, mais c'est un avis général :
-> GO !!!
Allez-y, programmez, oubliez les détails sur les mockups....
Je n'ai qu'un avis "observateur" (et j'espère "testeur" prochainement) sur le projet, mais je le répète : vous en êtes désormais au point où le CODAGE devrait représenter 90% de vos préoccupations.
J'ai vu la première tentative, et même si "globalement" ça le fait, on est loin de l'exellence (et pourtant, je ne suis pas sur un navigateur/sytème exotique).

Du coup, je me permets de rappeler l'une des règles majeures du web-design :
"- au programmeur, point trop tu n'en demanderas."

Voyons déjà ce que cela donne avec les pages "freezées" (TOUS navigateurs, TOUS système), et ensuite on pourra faire des modifications..

YannUbuntu · Le 07/12/2009, à 18:08

Je rejoins Sam:
- sur les bandeaux marrons: les lettres rouges ne passent pas bien, préférer le noir.
- trop de bandeau tue le bandeau.
-> Parmi les différents mockups je préfère celui avec les titres niveau 3,4,5 de couleurs.

Avec les titres niveau 2 en noir, ca donnerait ca:

Or la majorité des pages de la Doc n'ont que des titres niveau 1,2,3. Par exemple:

Si on veut éviter de confondre les titres niveau 1 et 3, il faudrait :

- soit changer la couleur du niveau 1, par ex :

- soit changer la couleur du niveau 3, par ex : (dans cet exemple, il suffirait de mettre le niveau 4 en jaune, et le niveau 5 en rouge, ou inversement)

Mes 2 yens.

Julientroploin · Le 07/12/2009, à 20:43

@Mpok : comme on l'a déjà répondu à ton message précédent, on n'a que 2 codeurs opérationnels pour le projet... ceux qui mettent leurs grains de sel dans les mockups ne savant pas coder donc on ne perd pas de temps.
Le codage se fait en parallèle mais forcément c'est plus long que de faire des rectangles sous gimp... donc autant qu'on peaufine les mockups en attendant.

Pour voir l'avancement des travaux, rejoint nous sur IRC, c'est là que se prennent les décisions...

@ YannUbuntu : tu as raison, le titre de niveau 2 est mieux bien sombre (je l'aurais peut-être mis en brun très foncé)
Par contre, je serais pour garder l'ordre des couleurs comme je l'avais mis précédemment pour les niveaux 3 4 et 5. Je trouve qu'on différencie suffisamment le 1 du 3, surtout que le 1 reste cantonné en haut de page.

RDV au maximum de monde tout à l'heure sur IRC pour la décision!

sam7 · Le 07/12/2009, à 21:17

bonsoir ...
@ julientroploin :
ce que tu as fait là est presque parfait : http://pix.toile-libre.org/?img=1260138349.png
la seule petite modif a effectuer : c'est de mettre le titre de niveau 2 en noir et non en rouge !
... comme l'a modifié Yannubuntu ici http://pix.toile-libre.org/?img=1260205017.png (enfin presque ... là il ressort plutôt bordeau)

@ Poupoul2 : content de te revoir... ça faisait un moment...
tu as bien avancé dans ton mockup ... amélioré par julientroploin
http://pix.toile-libre.org/?img=1260172165.png

les 2 points qui seraient à revoir selon moi :
- en cas de soucis avec le fil d'ariane : mettre "actualités Témoignage Matériels Logiciels Evênements Ubuntu-fr Divers" dans le bandeau latéral gauche
- ne pas mettre le titre de l'article dans la seconde ligne du bandeau (prise dans le ruban)... où alors, il faudrait un bandeau à chaque article...
... ce qui n'est pas ce que nous avions envisagé à l'époque ... mais l'idée me plait bien...

@ Mpok : la réunion c'est ce soir ! (maintenant)

@ Yannubuntu : tu as sans doute raison ... mieux vaux sans doutepermuter les couleurs des niveau 3 / 4 / 5

les décisions ... c'est maintenant sur IRC canal #ubuntu-fr-devweb

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

sam7 · Le 07/12/2009, à 21:28

compte rendu "en live" de la réunion IRC de ce soir sur canal #ubuntu-fr-devweb :

c'est là que les décisions vont se prendre concernant :
a) les propositions pour la doc
b) les propositions pour le planet

Première partie : codage accueil site

Pour info : Mc Peter a bien avancé sur le "codage" de la page d'accueil su site...
... il utilise un site qui permet de voir le rendu sur près de 120 navigateurs différents (windows / linux / mac) dans des versions différentes...
...& de façon globale le résultat est ok ...
http://www.ubuntu-fr.homelinux.org/dev/SITE/HTML/accueil_new.html
... il reste encore à faire dessus...

pour info/rappel (si nécessaire) :
http://www.ubuntu-fr.homelinux.org/dev/SITE/IMAGES/ubuntu/
http://www.ubuntu-fr.homelinux.org/dev/MOCKUP/

seconde partie : la documentation

cette proposition semble convenir :
http://pix.toile-libre.org/?img=1260205017.png
... reste à peaufiner la taille des polices...
... & à arranger le haut de page avec les tags & la ligne horizontale...
... quelques propositions vont être réalisées dans les jours à venir...
... avec décision lundi prochain !

Nota pour les titres de niveau 2 :
> bandeau+ruban (ma solution favorite ... pour harmonisation avec forum & planet)
> ou bandeau dégradé ? (en cas de soucis de codage) ?

ensuite : http://pix.toile-libre.org/?img=1260135387.png

bouton "éditer" ... à droite
menu latéral : il semblerait que le menu actuel ne plaise pas trop ...
il semblerait que les 3 rubriques suivantes seraient mieux que "actions" & "divers" :

yoboy a écrit :

persos je mettrais 3 sections la première qui agit sur la page (éditer, anciennes révisions, liens vers cette page), la deuxième qui agit sur le wiki (index, derniers changements, s'abonner à la page, s'abonner à la catégorie), et la dernière les liens utiles

qu'en dites-vous ?

il reste aussi à harmoniser les couleurs :
- des liens hypertextes entre accueil / forum / doc / planet ...
- des "blocs code" ... conserver celles de dokuwiki ? et ne toucher qu'aux contours ... sur fond noir par défaut ?

des idées ?

concernant les tableaux : http://pix.toile-libre.org/?img=1260222520.png
c'est un bon départ (mise à part quelques détails comme les arrondis &/ou les ombres)... à réaliser en fonction des contraintes techniques...
ce qui est sûr, c'est que les tableaux actuels sont "à revoir"... on est tous d'accord la dessus.
... il semblerait que techniquement, ça soit plus ou moins réalisable...

La doc est un morceau "plus gros" que je ne le croyais...

troisième partie : le planet
avec ceci : http://pix.toile-libre.org/?img=1260172165.png

en raison de la présence du fil d'arianne, il faudra repositionner "actualités Témoignage Matériels Logiciels Evênements Ubuntu-fr Divers" ailleurs ... mais en haut de page

confirmation du bandeau+ruban pour le changement de date
il faut également mieux marquer la séparation entre chaque billet (par un (double) trait ?)

poupoul2 postera d'autres variantes

La réunion de ce soir se termine, merci à tous les participants...
... il y a du travail cette semaine, bon courrage aux codeurs & aux graphistes

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

YoBoY · Le 07/12/2009, à 22:17

Rappel du contenu d'une page de la documentation:

tags
ligne horizontale
Titre niveau 1
texte de description
titre niveau 2
...

Ce serait bien d'avoir ce minimum dans les mockups

Pour ce qui est des titres j'aime pas les rubans, et j'aime pas le surplus de couleurs des niveau 3,4 et 5. Le titre de niveau 1 devrait mieux se voir également, le fait de mettre un ruban au niveau 2 lefait plus ressortir que le niveau 1

Atok · Le 09/12/2009, à 22:44

Ne serait-ce pas plus agréable à l'oeil avec une très légère ombre derrière le cadre principal ?

Julientroploin · Le 09/12/2009, à 22:48

Atok a écrit :

Ne serait-ce pas plus agréable à l'oeil avec une très légère ombre derrière le cadre principal ?

c'est à dire?
(quel mockup? quel "cadre principal"?)

Atok · Le 10/12/2009, à 18:11

Sur n'importe quel mockup. Je parle du grand cadre principal, celui qui encadre la totalité de la page.
Dans ce style-là (j'ai fait ça à la va-vite avec le premier mockup qui m'est tombé sous la main).

Bien sûr comme ça c'est pas génial, mais avec une belle ombre bien appliquée ça aurait quand même plus de relief je trouve.

sam7 · Le 10/12/2009, à 22:38

très bonne idée Atok ! merci de l'avoir eu...
ça me plait bien... j'espère que ça plaira à tous...
nous voterons donc sur ce point lundi lors de la réunion IRC...
... si tu le souhaites, viens y participer également.

Atok · Le 11/12/2009, à 08:33

Je ne peux pas participer à ce genre de réunion (je suis trop hors-sujet) mais si je peux aider et apporter ma modeste contribution...:)

sam7 · Le 11/12/2009, à 21:58

dommage que tu ne puisses pas y participer... mais merci de ta contribution...
n'hésites pas à donner ici ton avis sur notre travail comme tu viens de le faire.

YannUbuntu · Le 12/12/2009, à 15:24

l'ombre: pourquoi pas, mais a mon avis il faudrait pouvoir la faire disparaitre sur de petites resolutions pour eviter de perdre trop de place.

sam7 · Le 13/12/2009, à 22:21

alors ? quel sera l'ordre du jour de demain soir ?
freeze documentation ? freeze Planet ? point d'avancement du "codage" de l'accueil du site ?
... à la condition que nous ayons des images bien sûr !

curieux que nos graphistes n'aient encore rien posté...

Julientroploin · Le 14/12/2009, à 12:25

Pas séduit par l'ombre sous le cadre principal...

Pour les mockups, j'ai pas fait grand chose sur la doc : il y avait peu de propositions sur lesquelles travailler et comme moi j'aimais bien les propositions de la semaine dernière, j'ai pas grand chose à proposer.

Voilà quand même une mise à jour des titres avec :
- la proposition de sam7 :

- la proposition de YoBoY :

- une proposition intermédiaire :

Pour ce qui est de la reprise des découpes de l'accueil pour les versions Kub/Xub/Edub, je n'ai pas eu le temps de m'y mettre désolé...

sam7 · Le 14/12/2009, à 21:41

merci julientroploin pour ton travail... pour les déclinaisons, il n'y a pas le feu, on verra après les fêtes...

pour tes propositions, voici mes observations :

- j'aime bien ce que tu as fait pour "ma" proposition, c'est réussi, merci
- bof... je n'aime pas la proposition de yoboy, désolé...
- j'aime bien ta version intermédiaire ... je ne vois pas trop de diffférences avec la mienne

sam7 · Le 14/12/2009, à 21:50

La réunion de ce soir sur IRC canal #ubuntu-fr-devweb a commencé en petit comité...
... venez nous rejoindre, merci d'avance...

à l'ordre du jour les 3 propositions ci-dessus pour la documentation...

c'est la 3ème qui a la préférence de la majorité
http://pix.toile-libre.org/?img=1260789872.png
((nous ne sommes que 3 ! (avec julientroploin & xabilon))...
... julientroploin va nous faire une petite modif "en live"...
... la voici : http://pix.toile-libre.org/?img=1260826697.png

autre sujet abordé : les propositions d' Atok...
- son ombre autour de la page
(ici sur l'ébauche du planet de poupoul2 : http://pix.toile-libre.org/?img=1260464970.jpg )
... pour toutes les pages du site bien évidemment
- l'ombre portée autour des textes comme dans cet exemple : http://planet.ubuntuusers.de/
- la modification du logo en haut de chaque page comme ceci : http://didier.misson.net/blog/wp-content/uploads/2008/05/ubuntu_shiny_logo_large.png (se renseigner sur la licence pour éviter les soucis)

ce serait bien d'avoir l'avis d'un codeur sur les propositions d'Atok

***

Pour tous les petits détails restant à définir sur la documentation...
... mais aussi sur le Planet, nous attendrons donc la prochaine réunion...
... reste à caler la date : lundi 21/12/2009 ou lundi 04/01/2010 ?
>>> pas de réunion le lundi 28 décembre 2009

La réunion se termine ... sans grosses décisions & avec quelques interrogations
merci aux participants, en espérant être plus nombreux la prochaine fois

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

Atok · Le 14/12/2009, à 21:53

Quelques remarques qui me viennent à l'esprit en voyant ces mockups :

- le titre "Ubuntu-fr" en haut pourrait être remplacé par sa version plus récente, dans le même style "glossy" que le logo suivant : http://didier.misson.net/blog/wp-conten … _large.png, parce que là, ça fait vraiment, mais vraiment vieillot.

- Les titres à l'intérieur de la page sont ignobles. Énormissimes, rouges et d'une police pas particulièrement agréable à voir, ils sont tout simplement laids. Je vous recommande vraiment de diminuer leur taille et de mettre une couleur moins agressive (orange, par exemple.).

-La page dans l'ensemble est plate. Il faudrait peut-être appliquer un léger dégradé vers un blanc-gris clair au lieu de la laissée d'une seule et unique couleur. Je remet également en avant l'idée de l'ombre qui ajouterait un côté dégagé et naturel à l'ensemble de la page.

-Les lignes séparant la partie centrale de la gauche et du paneau du haut sont trop petites, trop faiblardes. Pourquoi ne pas envisager là aussi une minuscule ombre portée, pour les dégager du reste ? Je pense à ce style là : http://planet.ubuntuusers.de/ les petites bulles ombrées encadrant le texte de chaque post.

Voilà Qu'en pensez-vous ?

sam7 · Le 14/12/2009, à 22:04

Atok, j'aime bien te proposition pour ceci : http://didier.misson.net/blog/wp-content/uploads/2008/05/ubuntu_shiny_logo_large.png
...par contre, je ne te suis pas pour la couleur des titres... mais éventuellement pour la police utilisée...
Je partage ton point de vue de relief avec l'ombre pour toutes les pages...
viend donc nous rejoindre sur IRC...
...& j'aime bien aussi ton idée d'ombre portée en forme du bulles encadrant le texte

Mpok · Le 15/12/2009, à 04:38

Note au passage : la page de dev de Mac Peter (de la semaine dernière) est BIEN MEILLEURE que la précédente...
Bravo, ça avance...
Sinon, plusieurs intervenants ont émis des réserves sur les titres des menus (en bas). Je croyais que l'idée retenue était d'uniformiser les couleurs (donc une couleur unique).. ?
(parce que là, le contraste n'est pas suffisant).

YannUbuntu · Le 15/12/2009, à 08:20

@McPeter: chez moi aussi ta page de dev rend mieux, même s'il y a encore des soucis (fond bleu/blanc, onglets) et des oublis (les 3 titres doivent être de la même couleur, Lettre hebdo a remplacer par Magazine). Tiens-nous au courant de l'avancement !

Atok · Le 15/12/2009, à 08:34

Heureux de pouvoir vous aider

Désolé pour hier, je ne suis pas repassé après avoir posté le message:D

@YannUbuntu : effectivement ya de beaux progrès sur cette page. Attention tout de même à l'arrondi gauche au-dessus des titres genre "téléchargements" qui ne sont pas à la même hauteur que la barre supérieure

inkey · Le 15/12/2009, à 22:08

Salut ,
Pour ce qui est de la boutique ubuntu-fr /framasoft .
Elle a été ouverte aujourd'hui :
http://forum.framasoft.org/viewtopic.php?f=33249&p=269001#p269001

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1176 Le 07/12/2009, à 00:33

Re : revoir l'esthétique du site

#1177 Le 07/12/2009, à 09:02

Re : revoir l'esthétique du site

#1178 Le 07/12/2009, à 15:55

Re : revoir l'esthétique du site

#1179 Le 07/12/2009, à 18:08

Re : revoir l'esthétique du site

#1180 Le 07/12/2009, à 20:43

Re : revoir l'esthétique du site

#1181 Le 07/12/2009, à 21:17

Re : revoir l'esthétique du site

#1182 Le 07/12/2009, à 21:28

Re : revoir l'esthétique du site

#1183 Le 07/12/2009, à 22:17

Re : revoir l'esthétique du site

#1184 Le 09/12/2009, à 22:44

Re : revoir l'esthétique du site

#1185 Le 09/12/2009, à 22:48

Re : revoir l'esthétique du site

#1186 Le 10/12/2009, à 18:11

Re : revoir l'esthétique du site

#1187 Le 10/12/2009, à 22:38

Re : revoir l'esthétique du site

#1188 Le 11/12/2009, à 08:33

Re : revoir l'esthétique du site

#1189 Le 11/12/2009, à 21:58

Re : revoir l'esthétique du site

#1190 Le 12/12/2009, à 15:24

Re : revoir l'esthétique du site

#1191 Le 13/12/2009, à 22:21

Re : revoir l'esthétique du site

#1192 Le 14/12/2009, à 12:25

Re : revoir l'esthétique du site

#1193 Le 14/12/2009, à 21:41

Re : revoir l'esthétique du site

#1194 Le 14/12/2009, à 21:50

Re : revoir l'esthétique du site

#1195 Le 14/12/2009, à 21:53

Re : revoir l'esthétique du site

#1196 Le 14/12/2009, à 22:04

Re : revoir l'esthétique du site

#1197 Le 15/12/2009, à 04:38

Re : revoir l'esthétique du site

#1198 Le 15/12/2009, à 08:20

Re : revoir l'esthétique du site

#1199 Le 15/12/2009, à 08:34

Re : revoir l'esthétique du site

#1200 Le 15/12/2009, à 22:08

Re : revoir l'esthétique du site

Pied de page des forums