Des pixels et du code #57
Cette semaine, quelques tutoriels pour les graphistes amoureux de typographie et illustrateurs, des ressources oldschool et retro à télécharger gratuitement mais également des outils en ligne pour gérer la couleur, du plugin jQuery pour créer un datepicker ainsi qu’une galerie de paterns pour Windows Phone. Du côté des articles à lire, beaucoup d’ergonomie et expérience utilisateur que ce soit pour les formulaires, les animations ou la simplification des interfaces en général. Du côté des articles plus orientés intégration vous retrouverez une réflexion sur les media queries ainsi qu’un excellent article qui explique en quoi créer une alternative en CSS au comportement natif des listes déroulantes <select> est une mauvaise idée et impossible. Enfin de l’inspiration avec des cartes de visite et de la typographie. Bonne lecture :)
Les tutoriels de la semaine
#Illustrator
How to Create a Stylish Deer with Brushes and Graphic Styles in Adobe Illustrator un tutoriel qui permet de créer un daim stylé mais surtout de jouer avec différents types de “brush” et d’apprendre à en créer soi même dans
#Typographie
Learn un très bel article qui explique le processus pour créer de la typographie écrite à la main
#HTML5
datalist un petit aperçu de ce qu’il est possible de faire avec l’élément datalist en HTML5
#Font
Créer une police d’icônes facilement à partir d’illustrations vectorielles mon tutoriel qui explique comment créer une police d’îcone personnalisée à partir d’exports .SVG de vos réalisations sous Illustration en utilisant le service en ligne IcoMoon
Des ressources utiles
#Colors
hex.colorrrs.com un petit outil en ligne pour convertir les couleurs hexa en rgb()
#Bookmarklet
min.artequalswork.com un bookmarklet qui nettoie tout du site (images de fond, couleurs) pour garder la typographie. Utile pour les tests et pouvoir lire un blog un peu trop chargé.
#Freebies #Vectors
retrovectors.com une collection de ressources vectorielles et polices rétro à télécharger gratuitement
Les outils et plugins pour vous faciliter la vie
#Responsive navigation
responsive-nav.com un petit plugin de navigation responsive sans dépendances (jQuery ou autre)
#Windows
windowsphonepatterns.net un site qui rassemble des pattern de design et d’interraction pour Windows Phone (existe aussi en version Android androidpatterns.com)
#DatePicker
Best jQuery Date Picker Plugins for Input Fields même si l’ <input type=”date”> HTML5 est de mieux en mieux supporté, une solution de replis en JS peut être nécessaire, l’article liste quelques plugins jQuery qui vous permettront de créer un date-picker facilement.
Les articles à lire
#UX
UX: Handling forms une petite vidéo où l’auteur explique comment un utilisateur non habitué à l’informatique a interagi avec son formulaire de login et propose différentes solutions
A shorthand for designing UI flows la complexité de faire communiquer à l’équipe les “flows” ou ce qu’il se passe entre les différents écrans d’une application et comment à l’aide de simples schémas fléchés ils ont tenté de résoudre ce problème lors du design de 37signals
#Media Queries
Media Queries are a Hack les media queries relatives au viewport est un début de solution mais rarement suffisent, l’auteur introduit le concept de “element queries” qui seraient relatives à un autre élément de la page
#Webdesign
Everything I know about design I learned playing Starcraft un très jolie analogie entre apprendre le design et jouer à Starcraft
Simplifying For The Wrong Reasons un retour sur la tendance à la simplification des interfaces (flat design, etc.) et sur le fait de cacher les menus sous des icônes même pour du desktop
#Freelance
Freelance Logo Design…What I’ve Learned in 12 Months un retour d’expérience d’un designer de logo sur une année de freelance et quelques bons conseils sur comment tarifer et être sûre d’êtres payés (spoiler : ayez un contrat et demandez un accompte)
#UX #Animation
Transitional Interfaces pointe le fait que les animations dans une interface ne sont pas uniquement décoratives et peuvent servir à donner des indications fonctionnelles à l’utilisateur et améliorer l’expérience.
#Logos
Ces logos refusés que vous n’avez jamais vus, une petite selection de logos qui n’ont pas été sélectionnés pour certaines grandes marques
#UI
A Good User Interface quelques idées pour améliorer l’UI et une petite newsletter mensuelle pour partager comment améliorer l’expérience utilisateur
#Podcast
The Walking Web, le podcast francophone qui parle de webdesign, un petit retour sur ce podcast français auquel j’ai été invitée
Inspiration
#Typographie
« Inspired to Inspire » une très jolie vidéo sur l’inspiration, le message et ce qu’il réalise durant la vidéo sont tous les deux superbes
#Inspiration
linkstoinspire.co.uk une collection de liens pour l’inspiration classés par ordre alphabétique
#Video
30 things at 30 un graphiste fait une liste pour ses 30 ans de 30 choses qu’il sait à propos de lui, crée un gif animé pour chacune d’entre elle et un joli petit film d’animation avec les 30 gifs.
#Carte de visite
cardfaves.com un petit site qui sélectionne de très jolies cartes de visite
#Painting
TV Shows un superbe projet de peintures qui illustrent des séries TV (Breaking Bad, Dexter, Californication, etc).
Et s’il devait n’en rester qu’un ?
#UX #CSS
Why a CSS alternative to <select> is impossible pourquoi une parfaite alternative en CSS à un élément de formulaire n’est pas possible : accessibilité, envoie des données au serveur, optimisation mobile. A lire et mettre dans les mains de clients et designer qui ont très envie pour des raisons esthétiques de re-créer ce genre de <select> avec du JS
