Sortie de Colorzilla 2.0, avec son générateur de palette de couleurs

4 July = Astuces + Bien développer + Logiciels + XHTML / CSS ( Faire un commentaire )

Ce matin en ouvrant mon navigateur préféré, une mise à jour de Colorzilla était disponible. Vous connaissez sans doute cette extension Firefox qui permet d’avoir un outil “pipette” dans votre navigateur. Ainsi, en naviguant sur un site, il suffit de cliquer sur l’icône Colorzilla et de placer le curseur sur un pixel d’un élément de la page pour connaître ses codes couleurs (RVB et Hexadécimal).

Souvent, lors d’une mise à jour, une page du site de l’extension s’ouvre pour vous décrire les maj installées. En général, je zappe rapidement cette page, pensant qu’il n’y a qu’une liste de bugfix sans intérêt pour ma part. Mais là, j’ai bien fait de lire les nouveautés.

Aujourd’hui, la version 2.0 de Colorilla est sortie. Quoi de neuf ? Et bien 2 fonctions bien pratiques :

  • Webpage DOM Color Analyzer
    En un clic, vous obtenez une palette de couleurs du site sur lequel vous êtes. Mais le must, c’est qu’il dresse la liste des éléments qui utilisent les couleurs en question. Il y a même la possibilité de sauvegarder la palette ou d’obtenir un permalien vers celle-ci. Voici un exemple avec mon blog :
    Webpage DOM Color Analyzer
    Un excellent outil pour obtenir les couleurs d’un site que vous appréciez.
  • Online Palette Viewer
    En complément de l’outil précédent, Colorzilla permet de visualiser, sauvegarder et partager les palettes de couleurs proposées par les utilisateurs. Par exemple, voici la palette du site du W3C. Vous remarquerez l’outil “pipette” en bas à gauche de la page, même si vous n’avez pas installé l’extension.

La version 2.0 porte plutôt bien son nom, avec son lot de fonctionnalités de partage très intéressantes, sans oublier la simplicité et l’efficacité du générateur de palettes.

30 excellents pdf pour web designer

24 June = Astuces + Bien développer + Design + XHTML / CSS ( Faire un commentaire )

Je suis tombé sur un post de Positive Space qui recense 30 Essential PDF Documents Every Designer Should Download. Cette liste très bien fournie aborde des thèmes aussi variés que WordPress, la notion de design, les CSS dans les newsletter, le Web 2.0, la typographie, le statut de freelancer… On peut utiliser ces documents comme des guides, car leur avantage est d’adopter une vision très générale et synthétique d’un thème. Voici quelques-uns de mes préférés.

Yahoo! Design Pattern Library

Yahoo Design Pattern Library

Yahoo! possède déjà de très bonnes ressources pour les développeurs en tout genre. Le pdf de Design Pattern Library est quant à lui un résumé des différents éléments graphiques que l’on peut être amené à implémenter dans un site, que ce soit des onglets, des calendriers, des formulaires… Il y a aussi des informations utiles pour créer un site selon un système de grille, ainsi que des informations sur les supports mobiles (dont l’iPhone).

WordPress Help Sheet

Mémo WordPress

Ce mémo pour WordPress est indispensable à tous ceux qui comme moi aiment créer des thèmes WordPress à partir de rien. Il recense toutes les fonctions que l’on peut appeler, en y juxtaposant une description concise et précise. Il existe bien sûr le Codex WordPress, la source principale, mais ce mémo a pour avantage de donner une vision globale de ce que l’on peut faire, et de trouver facilement une solution face à un problème donné. Si vous voulez aller plus loin, il existe aussi le Advanced WordPress Help Sheet, qui lui se focalise sur des cas particuliers faisant appels à plusieurs fonctions.

Destroy the “Web 2.0 Look”

Destroy the Web 2.0 look

Ce qui me plaît dans cette charge contre le look Web 2.0 c’est que l’auteur (Elliot Jay Stocks) évalue exactement les raisons de la prolifération du soi-disant style “Web 2.0″ et caricature les gens qui ne comprennent pas ce que c’est, que ce soit les clients ou bien (et c’est pire) les designers eux-même. Le Web 2.0 n’est pas un design mais un concept. Malheureusement, ce terme a généré une vague sur laquelle bon nombre de gens surfent allègrement en se posant comme des designers 2.0 et considérant que l’Ajax est une technologie 2.0 (alors que ce n’est pas la technologie qui a changé entre le 1.0 et le 2.0, mais l’utilisation que l’on en fait). Le document fait bien remarquer que bon nombre de web designers n’ont pas suivi cette tendance de “look 2.0″, voyant bien que ce n’est qu’un feu de paille bien superficiel.

Le web design ce n’est pas que du graphisme

10 June = Bien développer + Design + Opinion + XHTML / CSS ( 4 commentaires )

Après une année (ou presque) passée dans le monde professionnel du web design en tant que novice encore en rodage, je me pose encore la question : c’est quoi être web designer ? J’utilise cette dénomination parce que c’était celle de la formation que j’ai suivie, et qu’elle correspond aux 2 principaux aspects de mon travail : intégration et graphisme.

Intégration : l’écriture du code (X)HTML et des feuilles de styles (CSS) associées.
Graphisme : création de visuels, animés ou non, sous Photoshop, Illustrator, Flash…

A ce stade, j’ai d’ores et déjà inclus autre chose que du graphisme dans la notion de “web design” : l’intégration. En effet, coder c’est du web design aussi, et correspond en l’occurrence à la moitié de mon travail.
Cela peut prêter à confusion. On se dit “design = graphisme” et donc que le “web design” se résumerait au “graphisme sur le web”. Mais “to design”, c’est concevoir, penser, réaliser les sites web. Comme le résume très bien l’article Wikipedia :

Le web design désigne la conception de l’interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation d’un site web.

Lire la suite