Blog

Les dimensions magiques !

Un vieux secret mathématique qui ne vieillit jamais.

Le nombre d’or (φ = 1,6180339…) est une proportion qu’on retrouve partout : dans les coquillages, les fleurs de tournesol, les flocons de neige, et … dans nos créations humaines ! Les Grecs l’utilisaient déjà pour les colonnes du Parthénon, les Égyptiens pour les pyramides, Léonard de Vinci pour dessiner l’homme de Vitruve, et même nos formats de papier modernes (comme le A4) s’en inspirent. Ce rapport magique semble satisfaire quelque chose de profondément enfoui dans notre perception : une harmonie que l’œil reconnaît avant même que le cerveau n’analyse.

Dans un article passionnant publié par Pearsonified, on découvre comment cette proportion peut servir à définir une typographie équilibrée : où chaque taille de texte, chaque espacement, chaque ligne se place naturellement à sa juste distance.

Quand les maths s’invitent dans la mise en page

L’idée est simple : si votre texte de base est lisible, votre mise en page sera harmonieuse si ses proportions obéissent au fameux 1,618. Dit autrement, vous pouvez utiliser le nombre d’or pour relier trois éléments fondamentaux de la lecture à l’écran :

  • La taille du corps de texte (font-size)
  • La hauteur de ligne (line-height)
  • La largeur de la colonne (measure)

Prenons un exemple concret. Supposons que vous partiez sur un texte de base à 16 px (classique). Votre hauteur de ligne idéale serait alors proche de 16 × 1.618 ≈ 26 px. Et pour que vos lignes respirent correctement, la largeur de votre colonne devrait tourner autour de 16 × 30 × 1.618 ≈ 780 px.

Ces chiffres ne sont pas magiques par eux-mêmes — mais ensemble, ils créent un rythme visuel cohérent. Les espaces entre les lettres, les mots et les lignes se répondent naturellement. Le texte devient plus facile à lire, les yeux glissent sans fatigue, et tout semble “juste”. C’est le genre d’effet que personne ne remarque… mais que tout le monde ressent.

Le webdesigner, ce petit Pythagore moderne

Pour aller plus loin, Pearsonified a même mis en ligne un outil (le Golden Ratio Typography Calculator) qui permet de calculer automatiquement vos tailles de texte et marges à partir d’une simple base. On y entre la taille de police, la largeur de colonne souhaitée, et hop : il vous renvoie la hauteur de ligne et la hiérarchie typographique parfaite.

Mais attention — il ne s’agit pas de transformer vos maquettes en équations. Le nombre d’or n’est pas une règle, c’est un repère. Un moyen de ramener un peu d’harmonie “naturelle” dans un monde de pixels parfaitement carrés. C’est un guide, pas un carcan.

Pense-bête d’or

Voici quelques valeurs simples inspirées du ratio d’or pour vos feuilles de style.

/* Base typographique */ 
body { 
  font-size: 16px; 
  line-height: 1.618; /* ≈ 26px */ 
  max-width: 780px; 
  /* largeur idéale pour la lecture */ 
  margin: 0 auto;
} 

/* Hiérarchie des titres (φ = 1.618) */ 
h1 { 
  font-size: 16px * 1.618 * 1.618; /* ≈ 42px */ 
} 

h2 { 
  font-size: 16px * 1.618; /* ≈ 26px */ 
} 

h3 { 
  font-size: 16px * 1.3; /* ≈ 21px */ 
}

/* Marges verticales */
p, ul, ol { 
   margin-bottom: 1.618em;
} 

Ces valeurs sont à adapter selon votre police et votre densité visuelle. Mais elles donnent un cadre : celui d’un texte qui “respire”, d’un rythme qui s’installe naturellement entre chaque ligne, chaque titre, chaque espace.

L’œil avant le nombre, la sensibilité avant le cerveau.

En comprenant ces proportions, on apprend simplement à reconnaître ce que notre œil sait déjà. Alors oui, parfois, un simple 1,618 peut transformer une page. Mais c’est toujours votre œil — et votre sens du rythme, « sensibilité » — qui auront le dernier mot. Source : Pearsonified – Golden Ratio Typography

Configurer le PATH sur Windows 7

Vous aussi vous êtes nul en informatique (et donc sur Windows) et vous souhaitez modifier votre Path ?

A quoi ça sert ?

Le PATH est juste une liste d’adresse, de chemin (path), vers des programmes que vous avez installé ou qui y étais déjà. L’intérét, c’est que si les adresses des programmes sont stockés dans le PATH, alors ces programmes peuvent être exécutable de n’importe où dans windows. Par exemple en ligne de commande, mais aussi pour tous les programmes qui le nécessitent.

Comment rajouter une adresse dans le path ?

C’est là que ça se complique. Il y a la possibilité de le faire en ligne de commande (ici), mais aussi en utilisant l’interface de Windows. Windows 7 en l’occurence dans mon exemple. Attention, c’est laborieux, raison pour laquelle j’ai mit toute la procédure en screenshots !

Voir l’article dans sa totalité…

Connaissez-vous Scri.ch ?

Connaissez vous le site scri.ch ? C’est un site (dont le code source est disponible ici) qui utilise la balise canvas et de la puissance javascript pour pouvoir faire, entre autre, du dessin. Le parti-prit est le minimalisme maximum, à la poubelle tout le parasitisme inutile des paramètres et autres fonctionnalités. Une feuille blanche, et hop, on dessine.

Korvus dessiné via scrich

Korvus via scrich

Voir l’article dans sa totalité…

Créer sa typo entièrement et gratuitement

Aujourd’hui, intégrer un jeu de typographie particulière sur une page web est devenu facile. La tentation, pour de multiples raisons, de créer sa propre typo, est forte. Dans mon cas, disons le tout net, c’est parti d’un bon ego-trip, l’égo trip de voir sa propre écriture manuscrite utilisable à souhait, sur tous les logiciels que je voulais, comme ça ! On pourrais épiloguer longuement sur les raisons de créer sa propre typo, car il en existe heureusement bien d’autre, mais là n’est pas le sujet. Créer sa typo est à la porté du premier(ère) imbécile venu(e), puisque j’y suis arrivé ! Et ceci peut se faire gratuitement. Et c’est cette expérience que je vais partager sur cet article !

Créer votre propre typo !

Créer votre propre typo !

Voir l’article dans sa totalité…

« Why Scrolling is the New Click » – Pourquoi scroller remplace le clic !

Cet article n’est que la traduction de l’article original en anglais présent sur le site uxMovement :
http://uxmovement.com/navigation/why-scrolling-is-the-new-click/
Cet article date du premier octobre 2012, mais l’essentiel des idées sont là.
Bien qu’étant loin d’être un expert de la langue française…, je me suis permit quelque néologismes du cru, comme le verbe « scroller » ou « tracker » en lieu et place de « faire dérouler » ou « suivre/analyser/rapporter ».

Voir l’article dans sa totalité…

Les rois maudits.

Dernièrement, j’ai achevé un cycle de livres particulièrement passionnant à lire : Les rois maudits.

Kézako ?

Il s’agit d’une saga littéraire qui a connu un succès phénoménal à l’époque de sa sortie, et qui a valu à leur auteur, Maurice Druon (de manière anecdotique, neveu de Joseph Kessel) une véritable assise populaire, en sus de nombreuses récompenses officielles (Grand-croix de la Légion d’honneur, Commandeur des Arts et des Lettres, Médaille de la France libre, etc.). Il est également connu pour avoir participé à l’écriture des paroles du chant des partisans. Ce qui ne doit pas faire oublier pour autant certains remous polémiques concernant le personnage, avant que celui-ci ne disparaisse…

tome1 et 2 des Rois Maudits

Le roi de fer traverse le régne de Philippe le Bel, La Reine étranglée relate les débuts de règne de Louis X, son fils ainé, dont la femme de son premier mariage sera étranglée.

Voir l’article dans sa totalité…

attention les infants !

Ce w.e. j’ai acheté un nouveau fer à repasser, un Hitachi. Mais quelle ne fut pas ma surprise lorsque je découvris dans la notice la notion « d’infants ». Mais qu’est donc un « infant » ???? Mon imagination a fait le reste… !

Bande dessinée sur les infants

Bande dessinée

Bon, voilà… Bon w.e. !

Pense-bête !

Il existe une multitude, une infinité de touches raccourcies qui nous facilitent la vie constamment.

Tellement qu’on les oublient souvent.
Parmi celles que j’oublie le plus souvent et qui sont pourtant tellement pratique lorsqu’on navigue sur le web, celle qui permet d’accéder directement à la barre d’url et celle qui permet d’accéder à la barre de recherche des navigateurs.

La combinaison ATL+D permet d'accéder directement à la barre d'url et de pouvoir l'éditer.

La combinaison ATL+D permet d’accéder directement à la barre d’url et de pouvoir l’éditer.

touches raccourcies navigateur

La combinaison de touches CTRL+E permet d’accéder directement à la barre de recherche du navigateur

Attention, ces touches sont liés a leur logiciels, et ce n’est que par une sorte de convention tacite que les navigateurs les implémentes ou pas. Par exemple, ces combinaisons ne fonctionnent pas sur Opéra (mais sur tous les autres).

Podiom !

Comme la plupart des personnes me connaissant le savent, je ne cesse jamais de créer de nouveaux sites régulièrement. Parfois seuls, parfois appuyés d’autres personnes aussi motivées que moi.
Dernièrement, j’étais parvenu a embarqué dans ma folie des grandeurs un ami développeur et une amie graphiste pour Céleste Sélène. Là, sur le projet donc je vais vous parler, il s’agirait presque du contraire : je me suis laissé embarqué par ce chers Jérôme dans ce projet fou et monstrueux qu’est Podiom…!

capture d'écran de la home page de podiom

Podiom est un site de jeu communautaire.

Voir l’article dans sa totalité…