revoir l'esthétique du site

Julientroploin · Le 16/09/2009, à 06:37

C'est vrai qu'il est bien karmic ton koala, c'est sympa.

sam7 a écrit :

appel aux bonnes idées afin de résoudre ce méli-mélo...
comme ici par exemple : http://ubuntu-fr.evoconcept.net/86.png
d'avance merci

ah oui, pas terrible...
Au niveau du code, je n'y connais absoluement rien, mais c'est pas possible de faire un truc comme ça ?

si largeur page <1000px
alors chaque colonne = (largeur-50)/3 
et ne pas afficher "Par ou commencer ?" mais "Par où..."
                         "Documentation" mais Doc..."
                         "Lettre hebdomadaire" mais "Lettre hebdo..."
                         "Contribuer à l'association" mais "Contribuer à l'asso..."

Avec les "infobulles", ça ne serait pas trop gênant même pour un nouveau visiteur.

On peut peut-être aussi jouer sur l'espace entre les début de colonne et les icônes et entre les icônes et le texte : est il possible de donner leur largeur en fonction de la largeur de la page?
ex : espace bord/icône = largeur totale/30 (là j'ai pris une valeur au hasard, mais c'est à tester...)

fabien961 · Le 16/09/2009, à 16:06

oulà !

si largeur page <1000px
alors chaque colonne = (largeur-50)/3

C'est un peu compliqué ça !
Par contre, cette idée là ...

espace bord/icône = largeur totale/30

... est beaucoup mieux.
En CSS, ça donne un truc du genre

margin-left: 3%

au lieu d'une largeur fixe

margin-left: 10px

C'est dans cette direction que je comptais aller. En fait, l'idéal serait même de donner une largeur relative à chaque colonne, comme ici.
J'ai aussi d'autre pistes de réflexion, en prenant exemple sur des layouts de référence comme BlueRobot. Ça date un peu mais c'est toujours une bonne référence.

Julientroploin · Le 16/09/2009, à 18:05

Oui, c'est ça qu'il nous faut, sauf qu'il ne faudrait pas que le contenu trop large aille à la ligne... sinon ça va f*** le b***.
Je parle des trois colonnes du bas là. Pour le reste il vaut mieux voir tout le contenu.

Ner0lph · Le 16/09/2009, à 18:20

Julientroploin a écrit :

sauf qu'il ne faudrait pas que le contenu trop large aille à la ligne... sinon ça va f*** le b***.

Au pire, rien n'empêche de mettre une largeur minimale et tant pis si ça fait apparaitre un ascenseur horizontal.

En outre, il me semble avoir lu et vu quelque part un exemple qui changeait dynamiquement la CSS en fonction des dimension de la fenêtre du navigateur. Cela nécessite Javascript bien sûr.

Julientroploin · Le 16/09/2009, à 19:15

Finalement, les marges relatives dont parlait fabien suffisent pour le menu du bas. Pas besoin d'autre chose.
Voilà ce que ça donnerait avec un cadre de 750px de large, sans modifier la taille de police, juste les écarts :

Reste à calculer les espaces idéaux pour que ça rende bien quelle que soit la résolution...
Je suis un peu largué au niveau des résolutions des écrans modernes (chez moi le maxi, c'est 1024x768...)

sam7 · Le 16/09/2009, à 21:39

je suis en train de préparer ma petite explication "en image" commentées
au vu de ce que j'ai expliqué hier soir sur IRC & de ce que vous avez écrit aujourd'hui...
je vous livre ça prigressivement au cours de la soirée...

pour commencer, prenez l'image suivante :

décomposez-là en 15 morceaux comme suit :

tout autour, vous avez un cadre, une bordure de 50 par exemple

... la suite dans les minutes qui viennent...

Julientroploin · Le 16/09/2009, à 21:45

:lol::lol::lol:
quel talent... j'adore ton tracé plein d'assurance et de finesse sur la 2e image

Je crois que je vois ou tu veux en venir avec ton découpage. Je lirais ça demain, là j'ai pas la force d'attendre la suite.

sam7 · Le 16/09/2009, à 22:04

imaginez ensuite des "cadres" (cases) invisibles de dimensions variables...

sur la première ligne, vous avez des cases d'une hauteur variable entre 100 & 300 par exemple
( 1 | 2 | 3 )

sur la seconde ligne, vous avez des cases d'une hauteur variable entre 200 & 600 par exemple
( 4 | 5 | 6 )

sur la troisième ligne, vous avez des cases d'une hauteur variable entre 200 & 600 par exemple
( 7 | 8 | 9 )

sur la quatrième ligne, vous avez des cases d'une hauteur variable entre 250 & 600 par exemple
( 10 | 11 | 12 )

sur la cinquième ligne, vous avez des cases d'une hauteur variable entre 50 & 150 par exemple
( 13 | 14 | 15 )

chacune des 3 colonnes a une largeur variable entre 300 & 600

le but étant d'éviter les ascenseurs horizontaux... afin de pouvoir tenir compte de la faible résolution d'écrans en largeur particulièrement... en hauteur, c'est moins gênant.

on doit donc pouvoir facilement passer de 3 colonnes, à 2 (pour les netbook par exemple), voire même à 1 (pour les smartphones)....

... les lignes qui vont suivre vont vous expliquer comment je vois celà ...

le "contenu" de chacune des cases doit pouvoir "tenir" dans la dimension minimale de chacune des cases
par exemple la (7) doit "tenir" dans une 300*300
la dimension de l'image d'un écran "4/3" devra donc être de 200 en largeur et de 150 maxi en hauteur...
Bonus : ce qui serait bien, c'est que si l'on clique dessus, elle s'affiche en gros plan au centre de l'écran, en ombrant l'arrière plan (un peut le même effet que sur le site pix.toile-libre) et que l'on puisse naviguer ainsi entre les images...

en fait, le contenu de chaque case doit pouvoir s'étirer par le fait de marges variables autour des textes & des images... éventuellement en changeant la taille des polices (en %)

petite particularité des cases (4 & 5)...

... la suite dans les minutes qui viennent...

Dernière modification par sam7 (Le 16/09/2009, à 22:31)

sam7 · Le 16/09/2009, à 22:17

pour les faibles résolutions, la première des choses est de supprimer les bordures de 50, ça fera déjà gagner 100 tout autours...

les cases (4 & 5) forment un tout & ne doivent pas pouvoir théoriquement être inférieure à 600... elles sont composées des 4 onglets et d'une grande zone de texte...
pour l'équilibre de la page, il est souhaitable qu'il y ait 2, voire 3 onglets maximum sur la largeur d'une case... soit 100 ou 150 de largeur pour l'onglet... ce qui fait 2 ou 3 onglets pour la case (4) et 1 ou 2 onglets pour la case (5)
(avec ça on tiens sur un 800*600)

je verrais plutôt :
- le texte dans la 6 sous les onglets
- l'image dans la 9 et non dans la 6 (que ça soit le koala ou l'étoile)

les cases ( 10 | 11 | 12 ) étant "identiques" (ou presque), elles doivent "tenir" chacune dans du 300*300 ce qui fait 50 par hauteur de ligne ... en ressérant les logos aux textes si nécessaire

passons maintenant au puzzle ...

... la suite dans les minutes qui viennent...

Dernière modification par sam7 (Le 16/09/2009, à 22:33)

sam7 · Le 16/09/2009, à 22:45

sur un écran de résolution "normale" (disons supérieure à 1000 * 900 ), nous avons sans aucun ascenseurs :

( 1 | 2 | 3 )
( 4 | 5 | 6 )
( 7 | 8 | 9 )
( 10 | 11 | 12 )
( 13 | 14 | 15 )
c'est à dire l'écran complet sans déformation...
... et plus l'écran est grand, meilleure est l'image, et plus elle est aérée...

pour les netbook du genre 800 * 600, nous aurons donc

( 1 | 3 )
( 4 | 5 )
( 7 | 8 )
( 6 | 9 )
( 10 | 11
( 12 | 13-15 )

où (2) est écrasé par (3) & où (14) disparaît
où (13) & (15) se superposent dans la dernière case en 300*300
avec juste un ascenseur vertical...

pour les smartphones, je propose pareil avec ascenseurs horizontaux et verticaux, ou alors...
(1)
(3)
(4+5) retrituré avec des onglets sur 2 lignes et la hauteur de la case doublée...
(6)
(9)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(15)

si vous les voulez en image...
... ça sera pour demain soir !
uniquement à la demande...

en cas de besoin d'explications complémentaires, n'hésitez-pas...
merci

Mpok · Le 16/09/2009, à 23:05

Bon, je vois que ça avance bien...

Deux remarques (personnelles) :

1) le principe de vouloir "s'adapter" aux différentes résolutions est EXCELLENT, et je ne peux que plussoir.
La méthode de "découpage" de sam7 semble assez compliquée au départ (et assez originale), mais c'est probablement celle qui donnera les meilleurs résultats. Au prix d'un CSS plus long, plus compliqué, et EVENTUELLEMENT plus difficile à maintenir et à faire évoluer (pensez à ça : le risque d'un CSS "en case" comme celui-ci, c'est que lorsque vous voudrez modifier une case, ça pourrait être une galère...).

2) en revanche, je suis franchement plus réservé quant au débat sur vos "effets de survol"...
Même en utilisant l'excellente ressource from Eric Meyer (donc pas de javascript, pur css). Cette ressource commence à dater un peu. Ca ne veut pas dire que ce n'est plus d'actualité, mais il faut bien reconnaître que c'est quand même de moins en moins utilisé.
D'autre part, j'ai un doute sur les infos réellement apportées par vos "info-bulles" : sont-elles VRAIMENT nécessaires ?
Et si oui, pourquoi ne pas utiliser tout simplement les "vraies" info-bulles (propriété title des liens) ?
Les tests présentés dans les pages précédentes ne m'ont vraiment pas convaincu, j'ai au contraire l'impression que ces info-bulles rectangulaires "cassent" un design général plutôt bien au départ...

Si VRAIMENT vous estimez que vous avez BESOIN (bien réfléchir sur le sens de ce dernier terme..) d'informations supplémentaires sur les liens ET que les simples info-bulles des navigateurs ne vous suffisent pas, alors il vaudrait mieux IMO rajouter une "ligne d'état" en bas de votre liste de liens qui afficherait ces infos. Avantage : vous n'êtes plus limité en taille, toute la ligne est disponible, et "ça fait beau" (pas comme actuellement). Inconvénient : nécessite javascript, donc sans javascript on n'aura pas ces infos supplémentaires.

gentil_philou · Le 16/09/2009, à 23:28

bonjour, bonsoir et salut,

super content de tous les services que le site m'a rendu, je trouve quand même que le côté graphique, devrait être un peu revu (où sont les effets glossy, la transparence, les couleurs (le brun, ca commence à nous gaver) etc,...) fin bref à côté d'autres distrib, je trouve que le site est un peu vieillot... fin ça n'engage que moi

je me permet de rappeler le sujet d'origine.

faudrait, peut-être arrêter le délire de raleurs moyens !

positif attitude, les gars !

il vous faut quoi ? des arc-en-ciel, des taga-tzointzoins, des pouêt-pouêts, des chapeaux pointus, des guirlandes, des girls en petite tenue pour les mecs et des mâles dominants option " tablette-de-chocolat " pour les filles ?

arreter le délire ! s'il vous plait

le fond et la forme, travailler la-dessus, s'il vous plait

ici, c'est peut-etre un peu " austère " mais ça as le mérite d'exister et d'être efficace,

dites-moi si je me trompes . . .

la solidarité de ce forum est un bonheur, non ? alors ne gachait pas tout en superficiel, s'il vous plait

merci d'avance

sam7 · Le 17/09/2009, à 21:35

@ Mpok
... merci de ton soutien...

YannUbuntu · Le 18/09/2009, à 06:45

Bravo à tous pour votre travail

@Julientroploin: il est sympa ton koala! (pas moyen de lui donner un air plus "gentil"? )

Julientroploin a écrit :

http://pix.toile-libre.org/upload/thumb/1253124368.png

je trouve que le "point d'interrogation" pixellise un peu... peux-tu stp me (nous) l'envoyer pour qu'on essaye de l'améliorer ?

Autre remarque: je crois que ca a deja été dit, mais le titre "SUPPORT" en rouge ne se distingue pas bien du fond marron. Idées: entourer les lettres d'un liseret blanc, éclaircir le fond juste sous le titre, etc...

mes 2 cents

R@ND@LL · Le 19/09/2009, à 00:01

Bon alors je débarque sur le sujet... Juste une seule question: ces idées sont avalisées par l'équipe Ubuntu-fr, ou c'est juste des design (super sympas au demeurant) balancés en l'air?

poupoul2 · Le 19/09/2009, à 09:43

R@ND@LL a écrit :

Bon alors je débarque sur le sujet... Juste une seule question: ces idées sont avalisées par l'équipe Ubuntu-fr, ou c'est juste des design (super sympas au demeurant) balancés en l'air?

Il s'agit bien d'un projet officiel

R@ND@LL · Le 19/09/2009, à 11:30

Ok, plutôt sympa, tout ça...

Faut bien avouer que lors de la création du sujet, le design était déjà vieillot... et qu'il n'a pas changé d'un pouce depuis

Bref, mes compétences ne me permettent pas d'apporter trop d'aide au projet (comme graphiste, je suis naze, et mes compétences HTML et CSS se limitent à utiliser les balises "marquee" ;-) ), mais je serais ravi de le voir implanté pour la sortie de Karmic, histoire de lancer cette nouvelle version en grande pompe!

sam7 · Le 19/09/2009, à 22:50

c'est bien ce que nous espérons pouvoir faire !

si tu le souhaite, tu peux te joindre à nous sur IRC Freenode canal #ubuntu-fr-devweb le mardi soir à compter de 21h...
(& comme d'hab' je serais "en retard" d'une bonne demi-heure, n'étant pas dispo' plus tôt)

d'ici là :
- j'espère que le koala de Julientroploin sera terminé, comme celà, on pourra valider le koala retenu...
- j'espère que fabien961 aura également avancé sur le "casse tête" que je lui ai proposé ...

Julientroploin · Le 21/09/2009, à 08:41

sam7 a écrit :

- j'espère que le koala de Julientroploin sera terminé, comme celà, on pourra valider le koala retenu...

Avec mon niveau de maitrise d'Inkscape, je ne pourrais pas faire mieux... et puis il me plait déjà bien. Si quelqu'un veut reprendre le boulot, un message et je transmets les sources (*svg avec un calque dessin + un calque photo modifiée par toi)

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

en fait, je le trouve bien ton koala...

et de mes 2 propositions, je préfère ma première...
mais semble t'il, ça "ne colle pas", car il faudrait plus "dessin"...

les "votants" trancherons dans moins de 24h, sauf s'il y a des volontaires pour faire "mieux" d'ici là...

mon "vote" serait : mon premier, le tien, mon second...

et vous qu'en dites-vous ?

***NB: les mockups de poupoul2 sur la boutique avancent bien !
Les dernières versions :
* Page d'accueil
> http://pouvoir-choisir.org/logiciel-libre/public/mockups/mockup.png
* Page ubuntu-fr
> http://pouvoir-choisir.org/logiciel-libre/public/mockups/mockup_ubuntu.png
***(fin de l'apparté)

Julientroploin · Le 22/09/2009, à 08:33

sam7 a écrit :

***NB: les mockups de poupoul2 sur la boutique avancent bien !
Les dernières versions :
* Page d'accueil
> http://pouvoir-choisir.org/logiciel-libre/public/mockups/mockup.png
* Page ubuntu-fr
> http://pouvoir-choisir.org/logiciel-libre/public/mockups/mockup_ubuntu.png
***(fin de l'apparté)

J'aime beaucoup, par contre, la partie au dessus des onglets n'est pas censée changer si on respecte la logique des onglets non? Après techniquement c'est peut être plus compliqué de changer le bas mais pas le haut...

fabien961 · Le 22/09/2009, à 10:18

sam7 a écrit :

- j'espère que fabien961 aura également avancé sur le "casse tête" que je lui ai proposé ...

J'aime bien les casses-tête comme celui-là, mais ton approche de la solution est encore plus compliquée que le problème lui-même.
Je suis assez d'accord sur ce point avec Mpok

Mpok a écrit :

1) le principe de vouloir "s'adapter" aux différentes résolutions est EXCELLENT, et je ne peux que plussoir.
La méthode de "découpage" de sam7 semble assez compliquée au départ (et assez originale), mais c'est probablement celle qui donnera les meilleurs résultats. Au prix d'un CSS plus long, plus compliqué, et EVENTUELLEMENT plus difficile à maintenir et à faire évoluer (pensez à ça : le risque d'un CSS "en case" comme celui-ci, c'est que lorsque vous voudrez modifier une case, ça pourrait être une galère...).

En retravaillant un peu les dimensions et en ajoutant quelques pourcentages par-ci, par-là, j'obtiens : ça. En 800x600, ça passe bien, en en dessous seuls quelques éléments des menus du haut se placent en dessous, ce qui n'est pas trop moche. Est-ce que ça vous convient ?

J'ai aussi modifié les barres rouges sur le menu pour qu'il n'y en ai plus qu'un actif en même temps (merci jQuery).

Concernant les "info-bulles", je vous laisse juger :
version 1 : on n'en met pas
version 2 : texte à côté des liens, en CSS
version 3 : info bulles classique (title="")
version 4 : à la manière de Eric A. Meyer, avec zone dédiée

Pour le koala, moi je vote pour celui de julientropploin.

Il faudrait juste le retourner, comme l'a fait sam7.
Désolé sam7, le tien est vraiment trop triste. Peut-être avec quelques couleurs ... ?

Je ne serai pas là à la réunion IRC ce soir. Je vous charge de montrer les nouvelles versions de la page d'accueil ?

Levi59 · Le 22/09/2009, à 15:06

j'adore la version 4!

Julientroploin · Le 22/09/2009, à 17:20

fabien961 a écrit :

Concernant les "info-bulles", je vous laisse juger :
version 1 : on n'en met pas
version 2 : texte à côté des liens, en CSS
version 3 : info bulles classique (title="")
version 4 : à la manière de Eric A. Meyer, avec zone dédiée

Pour moi :
Version 3> Ver.4>Ver.2>Ver.1
Je trouve la 4 super "classe", mais il m'a fallut y regarder à 2 fois pour voir que quelque chose s'affichait... (avec une autre couleur, peut être... là c'est trop blanc / beige clair)

fabien961 a écrit :

Pour le koala, moi je vote pour celui de julientropploin.
Il faudrait juste le retourner, comme l'a fait sam7.

ça je peux faire :

sam7 · Le 22/09/2009, à 22:56

il est mieux comme celà ton koala !

sinon, je n'aime pas la 2
la 3 est sympa
& j'adore la 4
extra !

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#851 Le 16/09/2009, à 06:37

Re : revoir l'esthétique du site

#852 Le 16/09/2009, à 16:06

Re : revoir l'esthétique du site

#853 Le 16/09/2009, à 18:05

Re : revoir l'esthétique du site

#854 Le 16/09/2009, à 18:20

Re : revoir l'esthétique du site

#855 Le 16/09/2009, à 19:15

Re : revoir l'esthétique du site

#856 Le 16/09/2009, à 21:39

Re : revoir l'esthétique du site

#857 Le 16/09/2009, à 21:45

Re : revoir l'esthétique du site

#858 Le 16/09/2009, à 22:04

Re : revoir l'esthétique du site

#859 Le 16/09/2009, à 22:17

Re : revoir l'esthétique du site

#860 Le 16/09/2009, à 22:45

Re : revoir l'esthétique du site

#861 Le 16/09/2009, à 23:05

Re : revoir l'esthétique du site

#862 Le 16/09/2009, à 23:28

Re : revoir l'esthétique du site

#863 Le 17/09/2009, à 21:35

Re : revoir l'esthétique du site

#864 Le 18/09/2009, à 06:45

Re : revoir l'esthétique du site

#865 Le 19/09/2009, à 00:01

Re : revoir l'esthétique du site

#866 Le 19/09/2009, à 09:43

Re : revoir l'esthétique du site

#867 Le 19/09/2009, à 11:30

Re : revoir l'esthétique du site

#868 Le 19/09/2009, à 22:50

Re : revoir l'esthétique du site

#869 Le 21/09/2009, à 08:41

Re : revoir l'esthétique du site

#870 Le 21/09/2009, à 23:05

Re : revoir l'esthétique du site

#871 Le 22/09/2009, à 08:33

Re : revoir l'esthétique du site

#872 Le 22/09/2009, à 10:18

Re : revoir l'esthétique du site

#873 Le 22/09/2009, à 15:06

Re : revoir l'esthétique du site

#874 Le 22/09/2009, à 17:20

Re : revoir l'esthétique du site

#875 Le 22/09/2009, à 22:56

Re : revoir l'esthétique du site

Pied de page des forums