Une petite liste de curiosités dénichées sur le Web. Au programme :
11 février 2008
A peine ai-je fini mon nouveau header que je me rend compte qu’il fait pâle figure face à d’autres : 73 superbes headers de site. Je viens de tomber sur ce post de noupe.com qui offre une riche et jolie dose d’inspiration. Voici mes préférés.
Ce style ne m’est pas inconnu… En effet, le designer n’est autre que Nick de N.Design Studio (au header déjà grandiose), dont le projet parallèle Web Designer Wall possède un design génial (header compris).
Une multinationale qui s’offre un mini-site au design léger et coloré, très attrayant, avec son côté artisanal. En prime, un menu qui se déroule littéralement, et vers le haut svp!
Header fluide et coloré pour ce blog tout récent (pas grand chose qui fonctionne), mais on peut encore accéder à l’ancien portfolio.
Sur Zinaz, un autre header particulièrement florissant sur un site où l’homogénéité se voit de haut en bas.
Très clean, Cult-foo possède un magnifique header aussi lumineux qu’attractif. Admirez la réalisation admirable des oiseaux!
14 février 2008
Un autre excellent article à lire en tant que web designer (et designer en général) : 10 Mistakes in Icon Design, par TurboMilk. L’auteur établit une liste très pertinente et variée d’erreurs à éviter lors de la création d’une icône (traduction personnelle à la volée) :
En tant que web designer, on peut être amené à créer des icônes, sans doute pas pour un programme mais pour illustrer un site, un menu de navigation. C’est toujours très attrayant mais aussi utile pour guider l’utilisateur et différencier les actions qui s’offrent à lui.
Une icône qu’on est tous amené à réaliser est la favicon (la petite icône de la barre d’adresse). Et elle est très importante! Lorsqu’un internaute parcourt ses favoris, il sera particulièrement aidé si le site qu’il recherche possède sa favicon, et qu’elle se distingue des autres. D’ailleurs, j’ai des difficultés à bookmarker un site qui n’en a pas. Je trouve ça joli et utile, pourquoi s’en priver ?
Plus généralement, on peut appliquer certains conseils de cette liste à la création d’un logo. Il faut songer à sa portabilité (selon la taille, le support, le contexte), son originalité (savoir différencier sans s’égarer), et son interprétation (est-ce le bon message qui est véhiculé ?). Autant de choses qui demandent, certes du talent, mais surtout de la réflexion.
20 février 2008
Design + Gamer + Humour + Multimédia
Quelques trucs intéressants et/ou drôles dénichés par ci-par là. On parlera ici :
Je suis tombé sur le site Flash d’une agence allemande : WM Team.
Ils sont spécialisés dans le design et l’animation Flash, et créent non seulement des bannières et des sites, mais aussi des jeux très sympas. Leur site est un parfait exemple de leur créativité et leur humour. L’introduction sonore et visuelle est tout d’abord très sympa. Puis vous verrez aussi les transitions entre les différentes catégories qui sont autant d’animations originales et réussies. Par exemple, une énorme main gonflable qui viendra « attraper » le menu, ou bien un jeu de tir où il faut viser la tête d’un membre de l’équipe pour voir son profil.
L’intérêt de telles animations est surtout d’inciter le visiteur à parcourir l’ensemble du site. Pas forcément pour le contenu, mais pour découvrir toutes les animations variées qui existent. Et au final, on se retrouve quand même à s’intéresser au contenu. On en oublie même la typographie assez peu réussie du site, et on s’amuse à visiter les réalisations de cette agence bien sympa (qui cherche un webdesigner… oooh…).
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…
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.
Rien de bien intéressant à dire sur cette photo ci-dessus ? On voit la Chose dans une salle de ciné. Tout le sens de cette image s’explique par une photo prise sous un autre angle. Une oeuvre de l’artiste Justen Ladda qui a réalisé de nombreuses installations de ce type.
3 avril 2008
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.
5 mai 2008
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.
9 mai 2008
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
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
Cette vidéo de 6 minutes est un screencap d’un projet sous Illustrator. Pour un novice (comme moi) d’Illustrator, c’est particulièrement intéressant : Science Machine
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.
23 mai 2008
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.
Un Google pour hackers qui donne les résultats de Google dans un frameset. Vous aurez au moins l’impression d’avoir trouvé une faille dans Google. Ou pas.
Au fait, avez-vous remarqué la nouvelle favicon de Google ?
10 juin 2008
Avis + Best Of + Bien développer + Design + XHTML / CSS
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.
MySpace vous connaissez ? Ce site archi populaire qui a fait régresser le web design de plusieurs années, à cause de son code illisible, de son système de fourre-tout indécent et de ses bugs innombrables. MySpace c’est un peu le Skyblog international. Le seul intérêt que je lui trouve c’est de pouvoir facilement uploader ses morceaux de musique et de les partager (ce qu’a fait bon nombre de groupes de musique professionnels). Mis à part ça, comparé à un autre site très populaire de web social (Facebook), MySpace est vraiment une calamité.
Mais MySpace prépare une refonte totale. Au premier coup d’oeil, le design est bien plus sympa. Ok, génial.
Mais là n’est pas le point le plus important. En effet, MySpace s’est associé à Adaptive Path, une boîte spécialisée dans l’expérience utilisateur. C’est eux par exemple qui avaient créé Measure Map, un outil d’analyse de blog. Un peu comme Google Analytics vous me dites ? Vous ne croyez pas si bien dire : Measure Map a rapidement été racheté par Google en 2006, notamment pour son interface claire et intuitive. Bref, un outil très bien pensé par Adapative Path, dont le blog est particulièrement riche en idées.
Ceci me rend confiant dans la direction que veut prendre MySpace, non seulement pour la qualité du web en général, mais aussi en perspective d’un combat rapproché avec son principal concurrent Facebook, qui lui aussi prépare une refonte (moins fonctionnelle que visuelle).
24 juin 2008
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! 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).
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.
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.
Mario, c’est culte. Vraiment. La preuve.
On a limite pas envie d’y toucher tellement c’est beau.
Vous prenez des stickers géants fabriqués par Blik, vous collez ça sur tous vos murs, et vous êtes au paradis dans Super Mario Bros. Dans la salle de jeu ok, mais dans le salon…
Super Mario Bros ce n’est pas qu’un jeu. C’est une métaphore de la vie. Tous les éléments du jeu sont une analogie d’éléments réels. Vous pensez que je disjoncte, mais pas autant que l’auteur de cette description.
Parfois, il faut penser à éteindre la console…
Liam Kemp est un graphiste 3D surdoué. Il propose ici une ébauche de sa prochaine animation : « The Normals« .
On vient de me faire découvrir cette excellente animation : « Moutons« . Les auteurs, trois élèves de Supinfocom, se sont associés pour un très beau projet. Une histoire qui se passe… dans l’océan. Beaucoup d’humour et une excellente réalisation pour une vision des choses particulièrement délirante.
Excellent post sur blog de Shoplet : Post-its Note Art: 8-bit Edition
Vous prenez beaucoup de post-it de couleurs différentes, vous les collez côte-à-côte selon une grille imaginaire bien définie, et vous obtenez :
Mario
Mega Man
(tout le processus de création de Mega Man)
Donkey Kong
A noter que cette dernière création fait partie d’une campagne Nintendo où chaque post-it enlevé révèle une pub Wii derrière! Et chaque post-it possède au dos une pub « Wii’ll not forget »! Ou comment faire d’une pierre trois coups! Tout simplement génial.
Mais le nec plus ultra reste cette monstrueuse création : Donkey Kong Climbs
Il existe même une vidéo en time-lapse du processus. Je vous le dis : c’est des malades.
Le lien entre le Post-it Art et le Pixel Art est évident : l’unité de travail est le pixel, mais le support est différent. D’ailleurs, ça ne vous rappelle pas ces Space Invaders qu’on trouve dans Paris ?
