Des pixels et du code #45
Encore une nouvelle semaine de liens très utiles avec beaucoup d’articles de fond pour les graphistes traitant de comment collaborer avec un designer, d’expérience utilisateur des sliders et de la barre de navigation iOS, un article pour apprendre le CSS et HTML avancé et quelques excellents tutoriels (utilisation de la propriété clip() ) et outils CSS et responsive pour les designers et intégrateurs web.
Les tutoriels de la semaine
#Photoshop
Exporting from Photoshop pas vraiment un tutoriel, mais un ensemble de petits conseils sur comment exporter ses éléments de design depuis Photoshop
#CSS
Understanding the CSS Clip Property, un article pour comprendre la propriété CSS clip() (dont le support est plutôt bon) et une démonstration sous forme d’application de météo de ce qu’on peut faire avec
Des ressources utiles
#Mobile-design
The iOS Design Cheat Sheet un récapitulatif des tailles des éléments pour les différents appareils sous iOS, le tout sur une seule page, très pratique
#HTML #CSS
Learn Advanced HTML & CSS with one useful guide un guide pour aller plus loin dans l’apprentissage de HTML et du CSS que les tutoriels de base qu’on l’on trouve souvent.
Les outils et plugins pour vous faciliter la vie
#Webdesign
Dottedpaper.com des pages avec des points à imprimer soit même pour le design d’interface ou de sites web
#RWD
Responsivetools.com un petit site qui vous permet d’avoir un aperçu de votre site sur différents mobiles existant directement depuis le navigateur
Les articles à lire
#Retina
CSS Techniques for Retina Displays : remplacement d’images en CSS via media queries, font icon, utilisation de SVG ou remplacement d’images en JS, 4 techniques pour gérer le retina sur votre site web
#Inspiration
365supers.blogspot.be365 dessins de super héros originaux dans différents styles
#Design #icônes
Behind the scenes: Reinventing our Default Profile Pictures le processus créatif et réflexion derrière les nouvelles icônes par défaut d’avatar pour 37signals pour remplacer le classique “monsieur anonyme” petit bonhomme gris
#Workflow
Windows workflow for web designers and front end developers un excellent article pleins d’outils et de conseils pour un workflow de graphiste / designer et d’intégrateur sous windows. Oui, tous les designers ne sont pas sous mac ;)
#Webdesign
The Designer’s Guide To Working With Web Developers un petit guide pleins de bonnes pratiques pour travailler en harmonie entre designer et développeur (entendez par là intégrateur également)
#UX
How to Make Sliders Not Suck il faut bien l’avouer, les sliders ne sont pas forcement la meilleur solution en terme de design, cet article plein de bon sens propose des conseils pour les utiliser à bon escient
The Language of the Nav Bar Part I: Back un article sur la bonne utilisation d’un label approprié sur les boutons de retour en arrière sur les interface iOS
Les démos sympas et impressionnantes
#CSS
fff.cmiscm.com un site répertoriant les démonstrations CSS3 HTML5 les plus sympas et impressionnantes
Sidigital.co le site d’une agence créative avec une jolie petite animation. Je pourrais passer des heures à décortiquer leur code.
Et l’image de la semaine “Should you credit the artist?” au cas où vous auriez un doute, un petit diagramme qui devrait vous aider