Design

Guide ultime de la typographie pour le web

Le web et les polices, ou fontes, c’est une histoire passionnelle. Avant le CSS3 et son @font-face, il n’était pas possible d’embarquer une police sur le web. On devait donc se contenter des polices sytème… Autant dire que le choix était limité, d’autant plus que tous les systèmes n’embarquent pas les mêmes jeux de polices.

Bref, ça, c’était avant. Aujourd’hui, deux questions se posent : quelle(s) police(s) choisir pour une expérience cohérente ? et comment garantir une expérience performante sur tous les devices ?

(suite…)

Webdesign pour les non-designers

Pour ceux d’entre nous qui ne sont pas designer (ou designer sans expérience dans le web), le webdesign peut paraître à la fois extrêmement facile ou complexe. Certains se diront : « facile, j’aligne un bloc par ci, un menu par là, et c’est bon », d’autres se diront : « sans formation, impossible ». Le design d’un site web ne s’improvise pas, mais avec un peu de méthode, que l’on soit débutant ou confirmé, tout devient possible. Nous allons d’abord démystifier ce terme de webdesign, avant d’en apprendre la méthode.

(suite…)

Apprenons l’art du croquis

Je lis régulièrement sur le web des articles louant la puissance du croquis. Bien qu’ils nous disent que le croquis ne nécessite pas d’être bon dessinateur, je me trouve souvent frustré face à mes esquisses d’interfaces qui ne ressemblent à rien. Malheureusement, aucun de ces articles ne nous apprends à croquer.

C’est à la lecture du livre Design d’expérience utilisateur de Sylvie Daumal que j’ai enfin mis la main sur une initiation rapide et d’une pédagogie rare. L’article qui suit est donc directement extrait du livre.

(suite…)

3 outils HTML5 qui vous feront oublier powerpoint

On a toujours besoin, à un moment ou à un autre, de faire une présentation : un exposé, un brief, une conférence, bref à tous les niveaux et a tous les âges. Pour cela, on pense immédiatement à PowerPoint, les adeptes de la firme à la pomme utiliserons parfois Keynote et certains d’entre vous connaissent peut être Prezi.

Il existe cependant bien d’autres solutions, disponibles gratuitement, en open source et full html5. Alors pourquoi se priver et continuer à payer des licences pour des logiciels qui, au final, brident quelque peu notre créativité ?

(suite…)

Des icônes sans images avec unicode !

Dans une certaine mesure, il est possible de totalement éviter les images pour vos icônes ! Certaines icônes sont tout simplement disponible en unicode et html. C’est à dire que c’est du « texte-icône ». Certains caractères « spéciaux » tels que « ç, €, à, é, è, ê… » possèdent bien en html des codes ressemblant à ça : « &ccedil ». Il ne vous viendrait pas à l’esprit de mettre une image à la place du texte… Alors faisons pareil pour les icônes !

(suite…)

Webdesign pour écrans Retina

La « technologie » Retina, si on peut l’appeler ainsi, consiste en une densité de pixels assez élevé pour que l’œil (d’où le nom de retina) ne puisse discerner les pixels sur l’écran. Cependant, avec une telle densité de pixels, pour ne pas que tout paraisse minuscule sur ces écrans, Apple a décidé de tout simplement doubler la valeur en pixel de chaque élément. Concrètement, cela signifie que dans votre feuille CSS, tout élément que vous définissez, par exemple, avec une width: 100px; fera en réalité 200px. Tout est multiplié par deux.

Les proportions sont conservées et dans l’ensemble ça ne défigurera pas votre site, à l’exception des images, qui risquent de paraître d’une bien piètre qualité. Autant s’adapter à cet usage, d’autant plus que de plus en plus de devices (tablettes smartphones et ordinateurs) vont adopter des écrans de haute résolution.

Voici donc un article (en anglais), qui explore les différente manière de faire un design compatible Retina, sans pour autant pénaliser les écrans « normaux ».

Perles de Web #2

La culture est devenue un grand mot et une préoccupation médiocre. Quand j’entends parler de culture, je sors mon carnet de chèques.

Jean d’Ormesson

Ces temps-ci, l’accès à la culture est soit ruineux (légal), soit dangereux (illégal). Le web, lui, recel de petites merveilles, des artistes en accès libre, graphisme, musique, vidéo, tout y passe. C’est ça les perles de web. Alors que les majors se la gardent leur culture hors de prix, le web aussi est artiste. Et il se passe de vous messieurs. Image !

(suite…)

L’art de la landing page [avec des morceaux d’infographie dedans]

Mon post précédent parlait d’e-mailing. La logique veut (je suis un être de logique) que je poursuivre avec les landing pages. Une fois que votre superbe newsletter à convaincu son destinataire de cliquer pour se rendre sur votre site, ce serait cool qu’il y soit bien reçu! Alors comment qu’on fait ? Et d’abord c’est quoi une landing page ?

(suite…)

Perles de Web #1

La culture est devenue un grand mot et une préoccupation médiocre. Quand j’entends parler de culture, je sors mon carnet de chèques.

Jean d’Ormesson

Ces temps-ci, l’accès à la culture est soit ruineux (légal), soit dangereux (illégal). Le web, lui, recel de petites merveilles, des artistes en accès libre, graphisme, musique, vidéo, tout y passe. C’est ça les perles de web. Alors que les majors se la gardent leur culture hors de prix, le web aussi est artiste. Et il se passe de vous messieurs. Image !

(suite…)