Des pixels et du code #67

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.

 

Besoin d'un design de site, d'interface ou d'application mobile ? De conseils en ergonomie ou en expérience utilisateur ? Envie de travailler ensemble ? N'hésitez pas à consulter mes réalisations et à me contacter directement.

Les commentaires sont fermés.