Des pixels et du code #22
Cette semaine, quelques liens sympas pour se familiariser avec le design de l’interface Metro, encore des plugins jQuery, ainsi que quelques bons conseils pour les designers concernant les PSDs, les couleurs, deux sites « coup de gueule »,comment l’ergonomie peut faire gagner 173euros à un site web. et un petit script pour améliorer son workflow sur Photoshop Bonne lecture
Les tutoriels de la semaine
#CSS
Un système de rating avec seulement deux images dans le sprite, plutôt intelligent
Transparent Background Images une astuce CSS pour créer des images de fond avec une fausse transparence en utilisant une pseudo-classe
#CSS3
Imzflipper une petite démonstration sympa d’un effet de flipping card
Des ressources utiles
#Metro
Metro-pricing-tables , un PSD avec des tables de prix dans un style metro
Les outils et plugins pour vous faciliter la vie
#jQuery
Stickymojo/ , un script jQuery pour créer un élément fixe sur le côté de votre site web
jBar Plugin, HelloBar jQuery alternative, un plugin jQuery pour ajouter une petite bar en haut de votre site que l’utilisateur peut cacher / afficher à sa guise.
#Favicon
Piecon , une librairie JavaScript pour ajouter des bars de chargement aux émoticônes d’un site
#Photoshop
12 New Photoshop Tools for CS6 une extension ¨Photoshop avec 12 raccourcis indispensables à tout designer : alignement horizontal, vertical, centrer un élément dans la page, cacher tous les calques, etc.
Les articles à lire
#Webdesign
“I Draw Pictures All Day” , un excellent article qui explique pourquoi le fait de gribouiller et faire des schémas pendant une réunion ou un cours aide certaines personnes à mémoriser l’information plus facilement.
#Metro
The Metro Style Design Guide, une série de guidelines pour le design d’interface Metro avec également quelques articles sur les origines et les différentes interface Windows8, Xbox et Windows Phone
#Ergonomie
Comment l’ergonomie web a fait gagner 173K€ à notre client , s’il vous fallait encore des arguments pour convaincre votre patron qu’un ergonome c’est utile, en voilà 173K€
#Redesign
Wikipediaredefined.com/, quand une agence décide de proposer de redesigner wikipedia, impressionnant, et très sympa.
#iOs
The average app , une analyse de la segmentation des gains des applications sur l’AppStore et du modèle économique derrière
#Specwork
Dontgetscrewedover.com , un site et surtout une vidéo “vis ma vie de designer” où une jeune fille essaie d’avoir un dessin pour 5$, mais… je vous laisse regarder, ça vous rappellera des souvenirs.
#Coup de Gueule #Graphisme
Salut-l-artiste.tumblr.com , un tumblr qui relate les annecdotes de tous ces gentils naïfs qui essaient de nous faire travailler gratuitement, en échange de “ça te fera de la pub”.
#Webdesign
Guidelines pour produire des PSD adaptés au web à lire 3 fois, au moins, et mettre dans vos favoris
Design Tip: Never Use Black , car dans la vie, rien n’est vraiment fait d’un noir 100% pur ( #000), il vaut mieux éviter d’utiliser le noir en design.
http://skeu.it/, un tumblr qui rassemble les interface qui usent et abusent du skeuomorphisme
Et le lien geek de la semaine, un plan de table super mario.
Pour finir, un petit cadeau de Stéphane Baril que je vous partage avec son autorisation. J’avais déjà mis en avant combien la propriété qui permet de combiner les tracés est utile dans Photoshop CS6, depuis qu’elle existe je dois l’utiliser 10 fois par jours au moins. Du coup j’avais cherché s’il existait un moyen d’y ajouter un raccourci clavier, mais comme elle se trouve dans le menu des options de l’outil, cela semblait impossible. Stéphane est venu à mon secours avec un petit script très pratique “CombineShapes.jx”. Placez le script dans le dossier script (chez moi C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Presets\Scripts ), et vous pouvez ajouter un raccourci clavier, tada !
