InDefero

Sign in or create your account | Project List | Help

Issue 177: Indefero web design need enforced hierarchy

Reported by Xavier Brochard, Apr 3, 2009

In general manner, I've found that Loïc design is full of text, 
simple (not an offense) and miss a few atractive coloured boxes 
(compare inDefero and PlumeCMS default theme). It is not a problem 
if it is a real choice. But I wonder if "smarter than 
GoogleCode" mean also "a bit more graphical".
It is sometimes hard to find something in the web page, like for 
example, the title of an issue while you comment it. When browsing, 
I have the general feeling of not easily finding something in the 
page.
One solution it to enforce the hierarchical design of the site.
Not that I'm not a regular user, I come here from time to time only.

Sorry for the french below, but I miss english vocabulary and 
grammar for this:
Je viens de comprendre ce "défaut" (l'impression d'avoir 
du mal à trouver les éléments dans la page) qui me tracassait depuis 
plusieurs mois. Le visuel est simple, aéré mais au fond pas si 
clair: ça manque de hiérarchie. La typo peut aider, mais c'est très 
difficile - cf le travail de Jan Tschichold. Quelques boites de 
couleur et moins de texte (si c'est possible) peuvent aider.
Exemple de moins de texte: sur la page d'un bug: 
Issue 12345: titre du bug
"Issue" est inutile.

Ce rapport de bug n'est pas parfait, un peu confus sans doute, mais 
c'est difficile de rapporter un sentiment. En tout cas il se veut 
moins une critique qu'une remarque (les design de Loïc se 
ressemblent et sont très "texte") et une interrogation: 
est ce que la couleur aiderait à hiérarchiser?

Comment 1 by Loïc d'Anterroches, Apr 3, 2009

Merci, ces remarques sont très intéressantes. Je vais creuser la 
question en faisant des essais.
Summary: Indefero web design need enforced hierarchy

Comment 2 by Xavier Brochard, Apr 4, 2009

Ouf, j'avais peur de vexer.
A propos de Jan Tschichold (un des plus grand typographe du XXe): si 
tu as l'occasion de consulter son livre "The Form of the 
Book" (existe en français), il contient des exemples de mise en 
page typographique pour les pages de titres de romans. C'est très 
intéressant. JT explique et fait constater comment pour "La 
Princesse de Cleve" de Mme de Lafayette, de simplification en 
simplification, il est parvenu à rendre l'idée d'élégance, 
l'atmosphère XVIIIe, la noblesse, le beau livre... tout ça sur la 
page de titre, avec 3 lignes de texte. Très fort.
Les canons de mise en page du moyen-age qu'il a redécouvert (on en 
voit 2 sur la page Wikipedia anglaise) sont aussi d'un grand secours.

Comment 3 by Loïc d'Anterroches, Apr 4, 2009

Si tu as un ISBN ou un lien Amazon, cela m'intéresse. Je suis allé 
sur Amazon (Allemagne et US) et le prix est autour de 100 Euros... 
Il existe d'autres livres de lui à des prix plus abordables, si l'un 
est bon, dis-moi, sinon, je vais devoir casser la tirelire.

Comment 4 by Xavier Brochard, Apr 5, 2009

Oui le livre anglais est épuisé, donc cher... C'est bête je l'avais 
en français et en anglais, je les ai prếtés et voilà...
La version française doit être "Livre et typographie"
Auteur : Jan Tschichold
Editeur : Allia
ISBN : 2 - 904235-81-7
Prix : 160 FF TTC
mais c'est vraiment un recueil d'articles pour maquettistes ou 
étudiant en typo, ça n'est pas technique mais ça porte sur le métier 
(cela dit je l'avais acheté pour le design web et ça m'a beaucoup 
apporté). Si tu ne le trouves pas en bibliothèque, tu peux consulter 
des livres équivalents.
Je viens de m'apercevoir que tu peux trouver une bonne partie du 
texte sur Google livre. Un lien sur le côté permet de voir quelles 
bibliothèque l'ont.

Comment 5 by Xavier Brochard, Apr 6, 2009

ci joint un petit fichier pour illustrer le propos: c'est cette 
page, en a partie revue en tenant compte de 3 règles:
- marges "nombre d'or"  (au pifomètre)
- écran divisé par une grille 9 colonnes (107 pixels de côté, on 
suppose la fenêtre large de 963 px)
- pas plus de 3-4 typos (y compris les variantes de graisse)

Le titre du bug et les titres d'onglet sont dans le même corps, j'ai 
utilisé environ un demi carreau pour les marges entre texte.

C'est perfectible, contestable (il y a plein d'autres manières de 
faire), et surtout sans aucune prétention. Il s'agit de montrer 
qu'on peut s'en sortir avec des contraintes simples enpruntées à Jan 
Tschichold.

Comment 6 by Xavier Brochard, Apr 6, 2009

ci joint fichier
NB: quand on fait un preview le fichier saute, pourtant il semble 
envoyé

Comment 7 by Loïc d'Anterroches, Apr 6, 2009

Cela tombe effectivement bien. Bon, des choses à nettoyer, mais sans 
aucun doute l'harmonie est là. Avec ce montage tu réponds à ta 
question : 

> But I wonder if "smarter than GoogleCode" mean also 
> "a bit more graphical".

Si tu as le temps de faire un peu plus d'essais, cela serait super. 

Encore merci de m'ouvrir les yeux sur ces questions d'harmonie. J'ai 
beaucoup travaillé les alignements avec InDefero et constaté au 
passage à quel point GoogleCode est inconsistant et pas propre, mais 
pas les harmonies des volumes.

Comment 8 by Loïc d'Anterroches, Apr 28, 2009

Just received the book "The New Typography" from Jan 
Tschichold, as I have a long train travel next week, this will fit 
perfectly. So do not worry, I am going ahead with this issue.

Books on Amazon:
in French: http://tinyurl.com/jant-typographie
in English: http://tinyurl.com/jant-typography
Labels: Type:Enhancement, Component:UI, -Type:Defect

Comment 9 by Xavier Brochard, May 5, 2009

> Si tu as le temps de faire un peu plus d'essais, cela serait 
super
je suis désolé mes 2 bébés ont sauté sur mes genoux pendant toutes 
les vacances... je vais réfléchir à d'autres essais.

Comment trouves tu le bouquin de J Tschichold ?
Tu as lu les chapitre sur La princesse de Cleve et sur le format des 
pages?

Comment 10 by Loïc d'Anterroches, May 6, 2009

Je suis dedans en ce moment (je lis la version originale de 1928 
traduite en Anglais, il semble avoir écrit de nombreux autres 
livres), il n'est pas évident à lire du fait de certains choix comme 
la police sans serif et le non retrait aux paragraphes.

La meilleure chose pour moi, en plus des guides sur les harmonies, 
est qu'il me force à me poser les bonnes — du moins j'espère — 
questions.

Comment 11 by Manuel Eidenberger, Jun 12, 2009

Salut Xavier, Salut Loic

Personnellement, je trouve l'ergonomie indefero très bonne... il 
serait certe judicieux d'ajouter un poil de graphisme, mais il est 
important je pense, de garder un design fluide (colonne de gauche 
fixe + contenu fluide) afin de profiter pleinement de l'espace 
disponible dans la fenetre du navigateur.

Pour ce qui est des interfaces réussi, voici un excellent article: 
http://wefunction.com/2009/04/quality-within-web-design/

Created: 1 year 4 months ago by Xavier Brochard

Updated: 1 year 2 months ago

Status: New

Followed by: 3 persons

Labels:
Priority:Medium
Type:Enhancement
Component:UI