Des pixels et du code #45

Des pixels et du code #45

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

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