blog

Vestiges d’un CSS Guru

Catégorie : Design

Billet

8 nouvelles polices à utiliser en CSS

8 fonts to use in css

Une chose que l’on nous apprend en CSS c’est d’utiliser les web-safe fonts. Ce sont en fait une dizaine de polices qui sont a priori existantes sur tous les ordinateurs. Ca permet à l’utilisateur de voir le site correctement, tel qu’il était prévu. Parmi ces polices il y a Arial, Verdana, Times…

Par conséquent, les intégrateurs se sont naturellement limités à utiliser les polices de cette liste. Mais en réalité, rien n’empêche d’en utiliser d’autres. C’est juste qu’en général, on ne prend pas ce risque là, parce qu’on ne connait pas la disponibilité des autres polices.

C’est pour ça que 3.7 Designs a établi une liste de 8 polices qu’on n’utilise pas en CSS mais qu’on devrait. Tahoma, Century Gothic, Palatino… Ce sont des polices qui sont très répandues, que ce soit sur Mac ou PC. On peut donc aisément les utiliser, en songeant bien sûr à spécifier des polices alternatives au cas où elles viendrait à manquer.

Billet

Un CV original

Greg Dizzia CV

Les CV, il y en a de toutes sortes. Dans la masse de ceux qui passent entre les mains des employeurs, comment se démarquer ? Surtout pour un graphiste, il faut chercher à être original sans trop fatiguer le lecteur avec du design lourd et inutile, qui ne sert à rien. Voici donc une alternative intéressante : Curriculum Vitae de Greg Dizzia. Une sorte d’infographie de son parcours, qui même si elle n’est pas exempt de défaut, a le mérite d’oser l’originalité en introduisant une structure bien particulière qui permet non seulement d’égayer le CV mais aussi de lui donner une utilité non négligeable. Réalisé avec Adobe Illustrator CS3.

Billet

Cubescape : dessiner en isométrique

Les dessins isométriques ont un look retro et attrayant. La forme la plus connue est le pixel art isométrique. Même si le résultat a l’air basique, le processus de création n’est pas si simple. C’est pour ça que The Man in Blue s’est amusé à développer un outil basique pour dessiner en isométrique : Cubescape. Rien d’extraordinaire, mais on peut bien s’amuser, et c’est là tout l’intérêt.

Quelques exemples

Mario

Mario
Lire la suite →

Billet

1 police + des variations + des em = 1 leçon de typographie web

Les web designers sont confrontés au problème du nombre de polices disponibles lorsqu’il s’agit de texte html. 9 polices (dont Arial, Verdana, Times…), ça semble peu. Et pourtant, il existe des solutions pour habiller une page rien qu’en jouant sur les variations d’une même police.

Un exemple : la page du Seed Conference.
1 police (Times) et de nombreuses variations (taille, couleur, type…) créent une page relativement jolie.

Encore plus intéressant : Phineas Jones a réalisé exactement la même page mais en utilisant des em (cadratin). Le résultat est excellent. Changez la taille de la police (Ctrl + et Ctrl – sous Firefox) : le redimensionnement est parfait. On croirait un pdf! Comparez avec la page originale, vous verrez la différence.

Via Simple Bits

Billet

Comparer les polices web avec Typetester

Typetester

Sur les pages web, nous sommes limités à 9 polices de caractères (Arial, Verdana, Times…). Cela semble peu (et ça l’est). Mais même avec ce faible nombre de polices, on peut jouer sur la taille, l’alignement, les couleurs, le type, l’espacement… pour apporter de la variété et du dynamisme à une page web. Il faut pour cela tester, et cela prend pas mal de temps, de taper une à une les propriétés CSS puis observer les changements, et comparer avec d’autres possibilités. Si vous voulez gagner du temps, je vous propose un outil très pratique (et très bien foutu) : Typetester.

Il s’agit d’un outil pour comparer des polices, sur la base de 3 colonnes (pratique pour voir les différences au premier coup d’oeil). Les modifications se font en “live” et tous les types (gras, italique, small-caps…) sont disponibles. On peut aussi copier-coller les propriétés d’une colonne vers une autre. Cerise sur le gâteau : on peut choisir dans la liste déroulante les polices installées sur son ordinateur, pour ainsi tester d’éventuelles créations d’images.

Billet

Graffitis de lumière

Graffitis de lumière

Prenez un appareil photo. Ajoutez un long temps d’exposition, un soupçon de créativité et une tonne de fun. Vous obtenez des graffitis de lumière. C’est franchement plus sympa que certaines créations “lumineuses” sous Photoshop.

Billet

Les pires erreurs Photoshop

Photoshop Disasters

J’avais déjà parlé d’une belle erreur Photoshop. En voici un florilège : PhotoshopDisasters répertorie les pires erreurs Photoshop (ou les meilleures, selon votre point de vue). Que ce soit un léger oubli, une erreur de jugement ou même un changement radical, ces images sont l’oeuvre de “graphistes” peu recommandables (ou alors tellement doués qu’on ne reconnaît rien de l’original). Bref, amusant et instructif.

Billet

Photoshop + Fruits + Animaux

Photoshop + Fruits + Animaux

Il faut manger 5 fruits et légumes par jour. Le problème, c’est que la SPA va nous tomber dessus… Et après avoir vu ces photos, je m’y reprendrai à 2 fois avant de manger une banane…