La semaine en pixels – 23 mai 2014

La semaine en pixels – 23 mai 2014

Ce contenu a été rédigé il y a 10 ans. Il se peut qu'il ne soit plus à jour.

Comme chaque semaine,  je vous propose un condensé de mes lectures et ma veille Web Design et graphisme, expérience utilisateurs, design d’interface et mobilité, mais aussi des outils et ressources pour le webdesign et inspiration en tout genre (illustrations, photos, sites web, etc.). Une semaine consacrée en partie aux ressources et plugins utiles : tableaux responsive, compression d’image et grilles Photoshop, vous trouverez de quoi améliorer votre workflow quotidien. Et puisqu’on est vendredi, je vous propose deux jeux à la fin de l’article pour procrastiner tranquillement avant le weekend.

Pour plus de liens n’hésitez pas à me suivre sur twitter. Bonne lecture :)

Les articles à lire

#Photoshop

Redesigning Photoshop’s font panel, un designer a redesigné le panneau des polices dans Photoshop pour le rendre plus utilisables avec des idées assez intéressantes

 redesign Photoshop's font panel

#Ergonomie

Hellonomad.com   Une modale déclenchée quand la souris de l’utilisateur quitte la page pour aller dans les menus du navigateur En théorie ça servirait à lui proposer une promotion quand il quitte la page, en pratique elle se déclenche même s’il veut mettre la page en favoris ou utiliser n’importe quel bouton du navigateur.

#Workflow

HTML Wireframes, Brad Frost nous décrit son workflow de wireframe dans le navigateur

HTML Wireframes

Et pour continuer dans le workflow alternatif  : « How I designed a website without Photoshop »

#Responsive Images

Responsive Images Done Right : A Guide To <picture> And srcset : le meilleur article sur la nouvelle syntaxe srcset et size qui m’a enfin permis de comprendre comment tout ça fonctionne

De l’inspiration et de jolies idées

#Persona

Persona, des photos pour inspirer vos personas sur flickr

Persona

#Illustrations

Kevindart.tumblr.com, une jolie dose d’inspiration avec les illustrations colorées de Kevin Dart  <3

Kevindart

#Wireframe

Web Without The Words : à quoi ressembleraient les sites plus plus connus en version wireframe ?

Web Without The Words

#Agence

Letters-inc.jp un joli portfolio d’agence composé de lignes et formes géométriques

Letters-inc.jp

Les tutoriels de la semaine

#HTML5

HTML5 Forms: The Markup nouveaux attributs, nouveaux inputs : le code de base destiné aux formulaires HTML5

#CSS

Fixing Typography Inside of 2-D CSS Transforms ou comment résoudre les soucis de texte flou sur le transformations 2D CSS

Des ressources utiles

#Toolbox

Oozled.com, une boite à outils de plus de 482 ressources pour les designers réparties en 39 catégories

Oozled

Des outils  et plugins pour vous faciliter la vie

#Responsive #Tableaux

Tablesaw, un ensembles de plugins pour des tableaux responsive avec différents comportements : stack, swipe, etc.

Tablesaw

#Responsive

Dimensions Toolkit, un plugin payant Chrome pour vous aider à tester des sites responsive

Dimensions Toolkit

#Compression

Compressor.io un outil de compression d’image en ligne (pas de traitement par lot comme Kraken.io)

Dimensions Toolkit

#Tumblr

Tumblrboilerplate.com un boilerplate pour servir de base simple pour la création de thèmes Tubmlr

Tumblrboilerplate.com

Pour le fun: jeux et démos sympas et impressionnantes

#Game

Spell Up  un jeu dans Chrome où il vous faudra épeler les mots avec le micro de votre appareil

Spell Up

#CSS

Lichtenstein, une expérimentation en CSS

Lichtenstein

#Jeu

Race.assassinscreedpirates.com: Assassin’s Creed Pirates disponible sous forme de mini jeu multitouch dans le navigateur

Race.assassinscreedpirates.com

Et s’il devait n’en rester qu’un ?

#Photoshop

Griddify  un plugin Photoshop qui rend la création de grilles très simple, avec quelques petites options en plus de Guideguide comme la possibilité d’ajouter des grilles autour d’un élément avec des padding internes ou des marges externes, etc.

Griddify