La semaine en pixels – 2 mai 2014

La semaine en pixels – 2 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.). Cette semaine beaucoup de lectures consacrées à la mobilité : zones au touch, indicateur de chargement et attente, responsive vs adaptive et adaptation d’un filtre responsive, mais également de très jolies illustrations du côté de l’inspiration et un petit outil Adobe qui devrait aider nos amis les intégrateurs web au quotidien.

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

Les articles à lire

#Video #Loading

How to Avoid Loading Indicators un courte vidéo de 3min par Luke Wroblewski sur comment éviter les indicateurs de chargement sur les sites et applications mobiles

How to Avoid Loading Indicators

#Video #TouchDesign

How We Really Hold and Touch (their phones) une conf sur comment les utilisateurs vont tenir leurs téléphone par @shoobe01

#UX #Persona

Il y a @fdevillamil qui utilise des métaphores de PNJ en jeu de rôle pour expliquer les personas et c’est génial

#Responsive #Adaptative #Dédié

Responsive vs. adaptive vs. device-specific une des explications les plus complète et synthétique que j’ai pu lire sur la différence entre le Responsive Web Design, le design adaptatif et le site mobile dédié.

Responsive vs. adaptive vs. device-specific

#Responsive #Filter

Responsive Design: Getting Advanced Filtering Right : un retour d’expérience sur le design de filtres dans une interface responsive. L’article propose une solution astucieuse et j’aime vraiment beaucoup le fait qu’ils aient gardé la même taille d’éléments et le même look and feel sur desktop et sur mobile, ça donne une cohérence à l’interface entre les différents appareils.

Responsive Design: Getting Advanced Filtering Right

Inspiration

#Typographie
Fleurs Coiffeur Liqueur une collection d’enseignes de salons de coiffure et débits d’alcool

Fleurs Coiffeur Liqueur
#Illustration

Archangels bicycle playing cards des cartes à jouer illustrées mi ange/mi démon

archangel cards

#Icon

Revoir le design du symbole international de l’accessibilité pour changer la perception des gens sur le handicap, une superbe idée.

design du symbole international de l’accessibilité

#Illustration

Facets.la  une image par jour pendant 365 jours par  Justin Maller

facets

#Design

Lest I Forget : un article très humble et plein d’humour qui retrace l’évolution d’une designer qui partage avec nous ses premières oeuvres.

#Mobile

Tabpatterns.com une galerie d’inspiration pour du design d’application. Les applications sont classées par catégories

Tabpatterns.com

#Animation

The Illusion of Life – the 12 basic animation principles, applied to a simple shape: the cube.

The Illusion of Life

Les tutoriels de la semaine

#Web Fundamentals

A handbook by GoogleDevelopers to learn web fundamentals: multidevice, images, forms, performances, etc.

web fundamentals

#CSS

Clearing Floats: An Overview of Different clearfix Methods plusieurs méthodes modernes de nettoyage des flottants et leurs support navigateur

Des ressources gratuites

#Font

Scratch Typeface, une police “Uppercase” à télécharger gratuitement pour les titres et headlines inspirée par la Gotham and Sans-Serif

Scratch Typeface

#Icons

CaptainIconWeb +350 Awesome  free vector icons to empower your mobile and web designs

CaptainIconWeb

Feather : 130 free line icons.  The set is packaged in PSD, CSH, SVG and Webfont format.

Les outils  et plugins pour vous faciliter la vie

#Mobile

Je me commanderais bien de ces petites templates pour tester du mobile

touch-template

#Color Accessibility

Accessible Color Palette Evaluator: un outil de test d’accessibilité des couleurs avec un potentiel  intéressant : vous pouvez  tester des palettes de couleur entières en une seule fois.

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

Cette semaine le lien qu’il ne nous fallait pas manqué est une nouveauté qui nous vient d’Adobe :  le lancement de Projectparfait.adobe.com, un outil en ligne qui vous permet d’extraire du PSD les valeurs de couleurs, tailles et typo sans avoir à l’ouvrir.

Projectparfait.adobe.com

Il existe également une alternative en beta créée par Source : Avocode.com