Des pixels et du code #59
Une semaine de lien qui devrait ravir les designer mobile puisque l’on y parle beaucoup d’expérience utilisateur au niveau des tab bars, de responsive webdesign et de l’utilisation des <select>à la place des menus. Vous trouverez également d’excellente ressources d’inspiration graphique, les photographes et fans de typographie devraient y trouver leur bonheur. Au niveau des tutoriels je vous encourage vraiment à jeter un coup d’oeil au PDF qui résume l’utilisation des font-icon, en français. Enfin quelques outils pour Photoshop et cheklists de développement et d’utilisabilité devraient faciliter votre travail à l’avenir. Bonne lecture !
Les articles à lire
#Performance #Font
Preventing the Performance Hit from Custom Fonts quelques solutions pour améliorer la performance lors d’utilisation de polices “exotiques” que le navigateur doit télécharger.
#Gestion de projet
Never Say WordPress When Selling a Web Design Project comprendre les besoins du client, savoir pourquoi il veut absolument une fonctionnalité et tout remettre en question, pour au final ne plus vendre une technologie mais un service sur mesure
#Mobile UX
The iPhone Tab Bar – Lessons From Reality au delà des guidelines d’Apple, 6 leçons apprise en créant de vrais applications iOS
Mixing Responsive Design and Mobile Templates site responsive ou site dédié ? Il est tout a fait possible de mélanger les deux, Chris Coyier l’illustre à travers l’exemple de la “version mobile” de codepen.
#Concours #Webdesign
Killing the Designer ou les problèmes des sites de concours de design comme 99Designs et ses amis
Inspiration
#Streetart
Madc.tv est une galerie consacrée aux photos de street-art
#Photographie
Found-film-vintage-kodak un photographe récupère de très vieux appareils photo avec les pellicules toujours dedans et les développe, de très jolies images
#UX
Hoverstat.es une sélection et collection d’interactions avec l’utilisateur (effets au survol, parallaxe, etc.) sous forme de petites vidéos qui tournent en boucle
#Icons
Iconsbyhour une icone par heure et même minute de la journée
#Typographie
Typography by Cory Say un très joli travail de typographie et de letterine
Thebeautyofletterpress.com du letterpress et de la typo, bref que du bonheur #Moustache #Packaging
HungaroFood-Brand-Packagingun joli exemple de packaging d nourriture avec de la typo et des moustaches <3
Les tutoriels de la semaine
#CSS
Responsive Multi-Level Menu un petit tutoriel sur Codrops pour faire un sous menu multi niveau Responsive.
#font-icon
Keynote-font-icon.pdf une super présentation sur la fabrication et l’utilisation de font-icon en français :)
Des ressources utiles
#Font
Shop.fontyou.com une fonderie qui propose des polices d’écritures créées de manière collaborative
#Freebies
Dajzafree.net une jolie collection de freebies, illustrations et PSD à télécharger
Les outils et plugins pour vous faciliter la vie
#Photoshop
Set Action to enable/disable pixel snapping une “action” (script en français) Photoshop à télécharger pour attribuer un raccourci clavier à l’option “snap to pixel” des tracés
#Markdown
Heckyesmarkdown.com un petit outil en ligne qui convertis vos pages web (en lui donnant l’url) en markdown
#Flexbox
Flexyboxes un outil pour jouer avec du flexbox, tester et générer le code
#Checklist
Mon site est-il prêt pour être lancé ? Webdevchecklist.com propose une checklist de quelques points à vérifier avant
Usability Checklist une autre check-list qui permet de vérifier différents points d’expérience utilisateur et utilisabilité du site
#Webdesign
Designerstoolbox.com une boite à outil pour le designer avec des gabarits type (enveloppe, flyer, etc) à télécharger avec leur taille indiquée pour différents formats
Les démos sympas et impressionnantes
#Responsive
Garmoshka un accordéon responsive, jouez avec la fenêtre pour faire de la musique, inutile mais totalement génial !
#Flash
Tokyocitysymphony.com propose de créer une symphonie avec un miniature de la ville de Tokyo en 3D. Très fun même si je n’arrive pas à créer une mélodie qui ressemble à quelque chose :/
Et s’il devait n’en rester qu’un ?
Mobile: Never Use Native Drop-Downs for Navigation un article basé sur les études de Baymard Institue qui montre qu’utiliser une liste de sélection (balise <select>) pour la navigation mobile n’est au final pas une bonne idée en terme d’expérience utilisateur. #Responsive #Mobilité
