Des pixels et du code #59

Des pixels et du code #59

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

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é