Des pixels et du code #67
Une semaine de liens très riches du côté de l’expérience utilisateur : labels des formulaires, anticipation de l’utilisateur, ressources pour reste à jour dans le domaine et autres astuces, et de l’inspiration en terme d’animation d’interface. Bref vous aurez de quoi vous documenter ce weekend. Si le webdesign en général vous intéresse, Brad Frost détaille sa technique « Atomic Design » sur son blog, et vous devriez trouver en plus quelques ressources et un peu d’inspiration dans les liens. Enfin au niveau des tutoriels et ressources, beaucoup de CSS3, d’effets au survol et d’animations. Bonne lecture :)
Les articles à lire
#UX
Making Infield Form Labels Suck Less les labels de champs dans le formulaire posent souvent des soucis d’utilisabilité puisqu’il disparaissent une fois que l’utilisateur clique dans le champ, le laissant sans indication sur ce qu’il doit remplir. Jackson Fox dans cet article nous propose 3 solutions pour remédier à ce problème.
Anticipating Intention un article qui prend l’exemple du design industriel (de voiture) pour parler du concept de “invisible interface” et d’anticipation dans l’expérience des utilisateurs avec des objets que l’on peut transposer à leur expérience sur un site web
How to keep up to date on UX Design une liste de personnes et blogs à suivre ainsi que de livres à lire pour progresser et rester à la page dans le domaine de l’expérience utilisateur
How to do UX une chouette idée d’utiliser les boards Pinterest pour présenter des outils et techniques d’UX
Nine User-Experience Tips to Rule Them All 9 astuces d’expérience utilisateur à garder en tête
Drag & Drop: Think Twice, It’s not a UX panacea une jolie lecture sur les interfaces drag & drop qui ne fonctionnent pas dans tous les cas, illustrée d’un retour sur un cas concret de design d’application
#Logo
X-story 1/4 : mon logo n’est pas « hipster » ! et 3 autres volets d’un dossier qui revient sur ces logos “vintage” en croix (ou en “X”) et aux sources de cette tendance de design
#SVG #font-icon
Relief from web icon hell un retour d’expérience pas à pas sur le choix et l’utilisation de font-icons sur un site
#Webdesign
Atomic-web-design Brad Frost détaille sont outil et concept d’“Atomic Webdesign”
How to become a designer without going to design school des conseils et surtout pleins de liens utiles pour apprendre comment devenir un designer sans avoir à passer par une école d’art
#Typographie
CSS Typography cheat sheet quelques morceaux de code tout fait pour faciliter la typographie sur le web
#Responsive Webdesign
[Traduction] Adaptive VS Responsive Design : quelle est la différence ? ces deux notions étant souvent floues, j’ai traduit avec son accord l’article de Viljami Salminen sur le sujet et vous met à disposition l’illustration de l’iceberg
Inspiration
#Jeux Videos
Horizon.venuspatrol.com – games de l’inspiration de jeux vidéos aux illustrations absolument fantastiques
#Typographie
Josephalessio.com un très joli portfolio plein de lettres
#Webdesign
Nationallgbtmuseum.org le site d’un musé haut en couleurs avec des effets très sympas sur la navigation
#UX UI
Ui-animations.tumblr.com un joli tumblr dédié aux animations des interfaces
#Boutons
Creative Button Styles des petits démos de pleins d’effets sympas réalisables en CSS3 sur des boutons, très pratique lorsque l’on manque d’inspiration pour un effet au survol
Les tutoriels de la semaine
#CSS3
Caption-hover-effects des effets de survol sur des vignettes d’image bien sympathiques comme souvent sur Codrops
Des ressources utiles
#Webdesign
Web5 – retour sur ma toute première conférence le retour de ma conférence à Web5 sur les bonnes pratiques graphiques pour une intégration réussie et surtout le lien vers les slides
#iOS7
iOS7 GUI PSD, le template Photoshop à télécharger gratuitement du nouveau design d’iOS par Teehan+lax
#CSS3 Animation
Magic-css3-animations une liste et demo de différentes animations CSS3
#Mobile UI
PortKit: UX Metaphor Equivalents for iOS & Android un outil pour comparer les différents éléments d’interface entre iOS7, iOS6 et Android 4
Les démos sympas et impressionnantes
#Jeu
www.cubeslam.com Un jeu “pong style” pour jouer contre un ami, ou contre un ourse dans le navigateur
#Haiiiir
Sur codepen.io- MathiasPaumgarten une petit démo les cheveux au vent
Et s’il devait n’en rester qu’un ?
#Retour Clients
Modifs client quand Julien Debedout s’amuse à faire une parodie de la chute, basée sur les retours client
Le site inutile de la semaine, jonyfy.me transforme n’importe quel site en version iOS7.
