revoir l'esthétique du site

sam7 · Le 02/11/2009, à 12:00

non, ça n'est pas xillon qu'il s'occupe de pcubuntoo ....
cf. ici : http://forum.ubuntu-fr.org/viewtopic.php?pid=3030487#p3030487
(je le connais depuis sa version 8.04 de pcubutoo qui s'appelais alors pcubuntu)

pour l'image de base du koala sur sa branche qui a servie à julientroploin,
il s'agit d'une photo que j'ai trouvé parmis tant d'autres sur internet,
et que j'ai tout d'abord retravaillée avec The Gimp, puis également avec Inkscape...

YannUbuntu · Le 02/11/2009, à 13:44

d'ailleurs bravo Sam pour le koala il est vraiment sympa !

sam7 · Le 02/11/2009, à 14:47

c'est Julientroploin qu'il faut remercier, il s'est servi de mon image comme base de travail :
il a du talent, et un bon coup de crayon (ou de souris)...

pcubuntoo · Le 02/11/2009, à 17:00

Donc je remercie Julientroploin et sam7 pour leur koala
désolé mais je ne savais plu ou je l'avais trouvé

Au passage quelques images de koala me demander ou je les trouvés
http://i36.tinypic.com/2h85u1e.jpg
ah une autre qui me fait marrer
http://i33.tinypic.com/2echr0i.jpg

YannUbuntu · Le 02/11/2009, à 17:02

merci a Julien aussi, et pas seulement pour le koala

bon alors, je suis le seul a preferer le menu brun au menu gris?

Ner0lph · Le 02/11/2009, à 17:42

YannUbuntu a écrit :

bon alors, je suis le seul a preferer le menu brun au menu gris?

Non ! D'une part, le gris est moche. D'autre part, le brun est plus cohérent avec le reste de la page. Donc, je préfère avec le brun.

fabien961 · Le 02/11/2009, à 19:41

Malheureusement, je ne pourrai pas être présent à la réunion IRC ce soir
Mais ça ne veut pas dire que je n'ai pas bossé
J'ai retravaillé le HTML pour qu'on parte sur une base propre et acceptée de tous. C'est ici.
Je suis reparti du mockup image freezé en mars, mais j'ai inclus les modifications suivantes introduites pendant les discutions sur le forum et sur IRC :

1. Les éléments du menu en bas ont été agrémentés de commentaires (à mettre éventuellement dans l'attribut title, mais ça donne moins de possibilité côté mise en forme CSS)
2. Introduction de sous-menus pour les éléments "Partenaires et Revendeurs" et "Contribuer à Ubuntu-fr"
3. Les menus "En ce moment" / "Sur le site" apparaissent l'un en dessous de l'autre et non plus l'un sur l'autre.
4. Le contenu du menu a été revu

A vous de voir ce soir avec McPeter si il valide ces modifications.

Prochaine étape : mettre la couche CSS et repasser par la phase validation.

PS : J'ai mis les sources des mockup sur http://dev.ubuntu-fr-secours.org/MOCKUP/, mais ils datent de mars ! Ce serait bien de les mettre à jour avec les nouvelles propositions et les variantes de couleur, si ça tente quelqu'un...

Julientroploin · Le 02/11/2009, à 19:55

fabien961 a écrit :

PS : J'ai mis les sources des mockup sur http://dev.ubuntu-fr-secours.org/MOCKUP/, mais ils datent de mars ! Ce serait bien de les mettre à jour avec les nouvelles propositions et les variantes de couleur, si ça tente quelqu'un...

Je passerais celles qui seront validées ce soir à sam7

sam7 · Le 02/11/2009, à 21:33

ok, merci

Réunion en cours sur IRC canal #Ubuntu-fr-devweb ... venez nous rejoindre !

Discussion en cours pour valider les différentes déclinaisons de la page d'acceuil du site

les "ébauches" dans la ballance sont celles-ci (>>> à quelques retouches prêt >>> version +- validée) :

pour ubuntu, à peu prêt ceci : http://pix.toile-libre.org/?img=1257088085.png >>> http://ubuntu-fr.evoconcept.net/AccueilV10/

pour kubuntu, à peu prêt ceci : http://pix.toile-libre.org/?img=1257083110.png >>> http://lukdesigner.free.fr/Ubuntu/v4/accueilV4_k.png (cf. **)

pour xubuntu, à peu prêt ceci : http://pix.toile-libre.org/?img=1257083269.png >>> http://pix.toile-libre.org/?img=1257196764.png

pour edubuntu, à peu prêt ceci : http://pix.toile-libre.org/?img=1257088732.png >>> http://pix.toile-libre.org/?img=1257200817.png (cf. **)

nous avons validé les principes suivants :
* on essaie de reprendre les couleurs officielles, autant que faire se peut

* dégradé dans le cadre latéral :
ubuntu : brun foncé >> brun clair
kubuntu : bleue foncé >> bleue clair
xubuntu : bleue >> gris
edubutu : orange >> rouge

* bandeau inférieur (avec les 3 colonnes) dans la couleur (unie) de la déclinaison :
ubuntu : brun foncé
kubuntu : bleue
xubuntu : gris clair
edubuntu : rouge

** Pour rappel, le code actuel des titres de colonnes, c'était les 3 couleurs du logo
... mais ça semble poser des petits soucis de lisibilité ... au final, ce principe ne sera pas tout à fait respecté pour Kubuntu & edubuntu...

***
merci à Julientroploin de sa réactivité "en direct" pour les modifications réalisées en cours de meeting IRC

la réunion se termine ... Julientroploin me transmettra les mockups finalisés ... et les posteras ici également
si tout le monde est ok, je les mettrais dans http://dev.ubuntu-fr-secours.org/MOCKUP/

& si poupoul2 (ou quelqu'un d'autre) pouvait actualiser http://doc.ubuntu-fr.org/projets/design2009 dans la semaine qui vient, ça serait bien ... merci

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

luK · Le 02/11/2009, à 21:35

Des news:
- adaptation du mockup aux évolutions récentes
- modification des titres de sections du menu ( plus lisibles )

Aperçus:
- (accueil ubuntu) http://lukdesigner.free.fr/Ubuntu/v4/accueilV4.png
- (accueil ubuntu plus lisible) http://lukdesigner.free.fr/Ubuntu/v4/accueilV4.1.png
- (accueil kubuntu) http://lukdesigner.free.fr/Ubuntu/v4/accueilV4_k.png

Et je suis aussi pour le fond brun du menu, comme sur le mockup.

Dernière modification par luK (Le 02/11/2009, à 21:37)

Julientroploin · Le 03/11/2009, à 09:58

Salut LuK!
je vois que tu as bien bossé de ton coté (tu as même repris la forme des onglets!)... dommage que tu ai posté pendant la réunion IRC et que tu ne nous ai pas rejoint! Du coup on n'a pas vu ton travail tout de suite et certaines décisions ont été prises qui ne collent pas avec tes mockups.

En particulier, nombreux sont ceux qui n'étaient convaincus ni par un menu en dégradé de gris ni en dégradé de même couleur que les titres de colonnes (titres de section comme tu les appelle). Du coup, un consensus s'est formé sur une couleur "plate" pour cette zone .
Il avait également été décidé de garder l'étoile de la même couleur pour toutes les variantes (du style : étoile orange pour les install-parties sur toutes les pages et d'autres couleurs quand il y a d'autres évenements)

Quoi qu'il en soit ton mockup accueilV4_k nous a tous scotché et aux 2 points ci-dessus près, il est validé à l'unanimité! On a noté le gout du détail avec la bande/ombre dégradées au dessus de la zone de menu qui méritera d'être appliquée aux autres mockups (je viens de la voir sur accueilV4, je ne l'avais pas vue avant...).
Du coup, pourrais tu modifier ces 2 points (dégradé du menu et étoile) et transmettre les sources à sam7 qui s'est vu confier la charge de mettre à jour le serveur avec l'ensemble des mockups?
Je pense aussi que ça arrangerait les codeurs que tu leur mettes à part plusieurs éléments importants. Je pense en particulier à :
- tes halos lumineux au dessus des onglets (dans les différentes couleurs);
- tes boites à CD;
- ton étoile orange.

Voilà, je crois que j'ai fait le tour... j'espère que tu repasseras par là rapidement.

sam7 · Le 03/11/2009, à 10:48

merci Luk pour ton travail...
c'est vrai que la page ubuntu est bien réussie et ton jeu d'ombre est chouette
et que la page kubuntu nous a donné du soucis (cf. principe évoqué hier soir concernant les 3 couleurs du logo & des 3 titres ... de ce fait là, on a "triché" aussi pour edubuntu ... mais il est vrai que tu n'avais pas forcément connaissance de celà... tans pis, c'est maintenant "figé" comme celà)

***
petite remarque que nous n'avons pas abordé hier soir :
la couleur du trait horizontal & du texte "infobulle" dans la partie inférieure du bandeau à 3 colonnes ...
ici, luk l'a laissé en blanc, il y a peu, nous avions évoqué de le mettre de la couleur du "-fr"
quel serait le meilleur choix selon vous ?
je vote pour : couleur du "-fr"

et dans la même veine, pourquoi ne pas mettre le menu survolé de cette même couleur (dans ce bandeau inférieur) ?
(uniquement si ça ne pose pas de soucis de lisibilité dans toutes les déclinaisons, bien sûr)
qu'en dites-vous ?

il faudrait pour être bien que tout celà soit validé d'ici à lundi prochain grand maximum afin que je puisse mettre (dimanche au plus tard) tous ces mockups finalisés sur le serveur (avant la prochaine réunion). d'avance, merci.

ainsi nous pourrons passer à l'étape suivante concernant la page forum...
... viendront ensuite la documentation,
... puis le planet... (à ce sujet Poupoul2 a commencé une ébauche : peut-on avoir un lien ici ? svp merci)

Dernière modification par sam7 (Le 03/11/2009, à 11:01)

luK · Le 03/11/2009, à 11:46

Je m'excuse de ne pas avoir pu participer à la réunion. Je vous expose mon point de vue:

- En design, on utilise souvent la règle: pas plus de trois couleurs différentes
C'est pour ça que je suis contre l'étoile orange pour toutes les déclinaisons ubuntu.
Il faut adapter la couleur à chaque déclinaison.

- Je suis contre l'utilisation de la couleur du "-fr" pour l'infobulle car c'est plus problématique en terme de lisibilité surtout que ce n'est pas justifier au niveau esthétique.

- Pour le fond dégradé du menu ou non, je tiens beaucoup au dégradé. Pour moi, si on enlève le dégradé, la structure du menu n'est plus approprié ( car trop grande ). Avec un fond uni, c'est moche ( il faudrait réduire la taille du menu ).

Surtout que si cette solution est prise pour le problème de lisibilité, on peut prendre une autre solution, celle de tricher légèrement sur les couleurs des titres de sections de menu ( comme je l'ai fait pour accueilV4.1 et accueilV4_k ). On peut d'ailleurs, encore en modifier leurs couleurs.

Par ailleurs, je suis contre un dégradé/couleur uni d'un brun foncé pour le menu ( toujours pour la règle des 3 couleurs ). Il faut que ça corresponde un minimum au fond du site.

- @sam7: j'ai pas compris ta proposition du le "menu survolé"

- Les sources sont à jour dans: http://lukdesigner.free.fr/Ubuntu/v4/Sources/

- J'ai rajouté toutes les découpes d'images nécessaire pour la page d'accueil d'ubuntu et de kubuntu, ici: http://lukdesigner.free.fr/Ubuntu/v4/Decoupes/

[EDIT] J'ai remodifié légèrement la couleur des titres de sections du menu afin que ce soit plus lisible, dites moi ce que vous en pensez

Dernière modification par luK (Le 03/11/2009, à 12:26)

sam7 · Le 03/11/2009, à 12:38

merci luk,

ce que j'appelle le "menu survolé" c'est le "titre/lien" écrit en blanc dans le bandeau à 3 colonnes ... celui qui déclenche "l'infobulle" en bas du bandeau ... si on met le texte de cette "infobulle" de la couleur du "-fr, pourquoi ne pas y mettre également le "lien/titre" aussi ?

... mais cette idée ne semble pas te convenir... avec ta règle des 3 couleurs ... où d'ailleurs tu en utilise au moins 4 (et même plus) puisque il y a 3 titres dans ce bandeau (de 3 couleurs différentes du logo) et que lui même (le bandeau) est d'une couleur différente (tu l'afait en dégradé) ... tout ça fait plus que 3 couleurs sur la page !

chacun a son opinion ... mais comme je l'ai constaté à mes dépends hier soir (lol), c'est la majorité qui décide...
Donc, il faut s'en tenir à ce qui a été décidé hier soir ... et trancher sur mes suggestion de tout à l'heure histoire que tout soit bien clair pour tout le monde.

Dernière modification par sam7 (Le 03/11/2009, à 12:39)

Julientroploin · Le 03/11/2009, à 14:55

luK a écrit :

- Pour le fond dégradé du menu ou non, je tiens beaucoup au dégradé. Pour moi, si on enlève le dégradé, la structure du menu n'est plus approprié ( car trop grande ). Avec un fond uni, c'est moche ( il faudrait réduire la taille du menu ).
Surtout que si cette solution est prise pour le problème de lisibilité, on peut prendre une autre solution, celle de tricher légèrement sur les couleurs des titres de sections de menu ( comme je l'ai fait pour accueilV4.1 et accueilV4_k ). On peut d'ailleurs, encore en modifier leurs couleurs.

Je suis du même avis depuis le départ (cf. ce post ), mais la majorité l'emporte...
Pour Ubu et Kubu, j'aime bien les très légers dégradés que tu avais fait. Reste qu'il y y a un gros problème de lisibilité pour Xub et Edub si on met des dégradés donc des surfaces unies ont semblées plus appropriées.
Et par soucis d'homogénéité entre les différentes variante, il a été décidé de garder le principe d'une couleur unie sur toutes les variantes...

Sinon, comme convenu, je remet ici les mockups qui ont été convenus hier soir :
- Xubutntu : que j'ai retouché à nouveau pour introduire l'effet au dessus du menu (comme dans accueilV4_k

- Edubuntu : même chose + correction du "-fr" que j'avais oublié

-Kubuntu :
http://lukdesigner.free.fr/Ubuntu/v4/accueilV4_k.png
validé à l'étoile et au fond de menu près
@LuK : même si c'est pas ta solution préférée, tu peux mettre en image pour qu'on ai quelque chose à déposer sur le serveur?
- Ubuntu :
http://lukdesigner.free.fr/Ubuntu/v4/accueilV4.png
validé au fond de menu près
@LuK : Idem

YannUbuntu · Le 03/11/2009, à 15:53

y a-t-il des mockups de Kubuntu et Ubuntu avec fond de menu uni pour qu'on puisse comparer avec le fond dégradé ?

Dernière modification par YannUbuntu (Le 03/11/2009, à 15:54)

Julientroploin · Le 03/11/2009, à 16:11

YannUbuntu a écrit :

y a-t-il des mockups de Kubuntu et Ubuntu avec fond de menu uni pour qu'on puisse comparer avec le fond dégradé ?

J'ai bien ça, même si c'est pas totalement à jour :

sinon, comme modèle pour ubuntu-fr, on a le mockup html de fabien : http://ubuntu-fr.evoconcept.net/AccueilV10/
j'ai fait une capture pour qu'on l'ai au cas où :

Dernière modification par Julientroploin (Le 03/11/2009, à 16:33)

luK · Le 03/11/2009, à 20:48

Création du mockup Xubuntu:
- Aperçu: http://lukdesigner.free.fr/Ubuntu/v4/accueilV4_x.png
- Decoupes: http://lukdesigner.free.fr/Ubuntu/v4/Decoupes/
- Sources: http://lukdesigner.free.fr/Ubuntu/v4/Sources/accueilV4_x.psd

Toutes les déclinaisons avec fond uni du menu:
- ubuntu: http://lukdesigner.free.fr/Ubuntu/v4/accueilV4.2.png
- kubuntu: http://lukdesigner.free.fr/Ubuntu/v4/accueilV4_k.1.png
- xubuntu: http://lukdesigner.free.fr/Ubuntu/v4/accueilV4_x.1.png

Toutes les sources sont à jour.

Dernière modification par luK (Le 03/11/2009, à 21:25)

sam7 · Le 03/11/2009, à 22:42

eh bien ! vous n'avez pas chômé aujourd'hui... merci !
jusqu'au détails de mettre les captures d'écrans des "bonnes" déclinaisons... bien vu !
(mais je constate malheureusement que certains de ces mockups ont des petits soucis de lisibilité)

petit "rappel" toutefois, dans le but d'harmoniser les différentes déclinaisons (et d'éviter tout soucis par la suite) :

- la petite phrase explicative du lien survolé par la sourie situé sous la ligne dans le bandeau inférieur à 3 colonnes doit être soit "blanche", soit de la couleur du "-fr", soit de la couleur du "titre" de la colonne correspondante , soit de la couleur du cadre, soit noire ... enfin, elle doit être harmonisée et suivre les mêmes rêgles dans toutes les déclinaisons
(j'en reviens à ce que je disais tout à l'heure ... il faut trancher , et rapidement !)

- la couleur de l'étoile ne doit pas être associée à la couleur de la déclinaison, mais à la couleur de la catégorie d'évenement annoncé (comme prévu lors d'une des dernières réunion IRC... mais il est vrai que nous n'avons pas encore définie les couleurs de chacunes de ces différentes catégories, ni ces catégories ... mais seulement le principe qui a été acquis et validé ... donc pour les mockups, ça sera étoile orange pour toutes les déclinaisons (il en faut bien une...)

...une fois ces petits détails réglés, je crois bien que ça devrait le faire...
et que l'on pourra passer au mockups suivants ... : "images" pour forum & "html" pour accueil (en parallèle)

Dernière modification par sam7 (Le 03/11/2009, à 22:46)

Julientroploin · Le 03/11/2009, à 23:57

luK a écrit :

Création du mockup Xubuntu:
- Aperçu: http://lukdesigner.free.fr/Ubuntu/v4/accueilV4_x.png
- Decoupes: http://lukdesigner.free.fr/Ubuntu/v4/Decoupes/
- Sources: http://lukdesigner.free.fr/Ubuntu/v4/Sources/accueilV4_x.psd
Toutes les déclinaisons avec fond uni du menu:
- ubuntu: http://lukdesigner.free.fr/Ubuntu/v4/accueilV4.2.png
- kubuntu: http://lukdesigner.free.fr/Ubuntu/v4/accueilV4_k.1.png
- xubuntu: http://lukdesigner.free.fr/Ubuntu/v4/accueilV4_x.1.png
Toutes les sources sont à jour.

très beau boulot, que ce soit pour les versions avec ou sans dégradé...
Quelques remarques au niveau de la lisibilité; Je ne sais pas si c'est juste chez moi ou chez tout le monde mais :
- sur accueilV4_x.png, le "SUPPORT" se voit très peu
- sur accueilV4_x.1.png et accueilV4_x.1.png c'est "RESEAU" qui se voit mal.

Pour les étoiles, sam7 a raison : le but de l'étoile n'est pas de se fondre dans la page mais d'attirer le regard. Il n'y a pas 1 étoile qui sera toujours là, mais plusieurs étoiles (et autres formes peut-être) qui se relaieront en fonction des évenements à annoncer.
Si on garde la même couleur en permanence, les visiteurs vont s'y accoutumer : on doit savoir qu'il y a un nouvel évenement avant même de lire le texte.
C'est en tout cas pour ça qu'on avait décider de figer la couleur de l'étoile.

YannUbuntu · Le 04/11/2009, à 01:19

a mon avis les versions sont deja suffisamment harmonisees, inutile de se rajouter des contraintes "de principe" pour les couleurs, il vaut mieux veiller a la lisibilite/ et l'esthetique de chaque page.

TheBootroo · Le 04/11/2009, à 01:47

salut !
un peu <HS></HS> j'ai refait le design de mon site tout a l'heure : il fait moins geek maintenant (pour ceux qui l'ont vu avant!) voir lien dans ma signature ....

bonne soirée!:cool:

sam7 · Le 04/11/2009, à 18:27

je persiste & signe : le but de l'étoile n'est pas de se fondre dans la page mais d'attirer le regard : il s'agi d'une décision collective lors d'une réunion IRC.
Ces éléments ne compromettent pas la lisibilité et l'esthétisme de chaque page...

merci à julientroploin pour les sources communiquées par courriel...

... en attente des corrections / modifications demandées / nécessaires pour validation / mise à jour ... & mise en ligne sur le serveur avant la prochaine réunion ...
d'avance, merci.

luK · Le 05/11/2009, à 09:13

Je pencherai donc pour une "étoile" jaune plutôt qu'orange puisque le bleu pour Kubuntu ne s'accorde pas avec du orange.

Je vais essayer de faire ça aujourd'hui ( rien de sur, au pire ce week end ).

Sur ce bonne journée.

sam7 · Le 05/11/2009, à 09:56

ok... mais la base pour l'exemple était du orange... pour que toutes les déclinaisons aient la même étoile...
à terme il y aura sans doute du jaune, du bleue, du rouge, ou d'autres couleurs, lorsque nous en débattrons le moment venu...

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1026 Le 02/11/2009, à 12:00

Re : revoir l'esthétique du site

#1027 Le 02/11/2009, à 13:44

Re : revoir l'esthétique du site

#1028 Le 02/11/2009, à 14:47

Re : revoir l'esthétique du site

#1029 Le 02/11/2009, à 17:00

Re : revoir l'esthétique du site

#1030 Le 02/11/2009, à 17:02

Re : revoir l'esthétique du site

#1031 Le 02/11/2009, à 17:42

Re : revoir l'esthétique du site

#1032 Le 02/11/2009, à 19:41

Re : revoir l'esthétique du site

#1033 Le 02/11/2009, à 19:55

Re : revoir l'esthétique du site

#1034 Le 02/11/2009, à 21:33

Re : revoir l'esthétique du site

#1035 Le 02/11/2009, à 21:35

Re : revoir l'esthétique du site

#1036 Le 03/11/2009, à 09:58

Re : revoir l'esthétique du site

#1037 Le 03/11/2009, à 10:48

Re : revoir l'esthétique du site

#1038 Le 03/11/2009, à 11:46

Re : revoir l'esthétique du site

#1039 Le 03/11/2009, à 12:38

Re : revoir l'esthétique du site

#1040 Le 03/11/2009, à 14:55

Re : revoir l'esthétique du site

#1041 Le 03/11/2009, à 15:53

Re : revoir l'esthétique du site

#1042 Le 03/11/2009, à 16:11

Re : revoir l'esthétique du site

#1043 Le 03/11/2009, à 20:48

Re : revoir l'esthétique du site

#1044 Le 03/11/2009, à 22:42

Re : revoir l'esthétique du site

#1045 Le 03/11/2009, à 23:57

Re : revoir l'esthétique du site

#1046 Le 04/11/2009, à 01:19

Re : revoir l'esthétique du site

#1047 Le 04/11/2009, à 01:47

Re : revoir l'esthétique du site

#1048 Le 04/11/2009, à 18:27

Re : revoir l'esthétique du site

#1049 Le 05/11/2009, à 09:13

Re : revoir l'esthétique du site

#1050 Le 05/11/2009, à 09:56

Re : revoir l'esthétique du site

Pied de page des forums