Des pixels et du code #47
Une nouvelle semaine de liens, avec une mise à l’honneur de Firefox OS et quelques ressources pour créer des pages, plusieurs plugins jQuery sympas et deux jolis packs d’icônes pour graphistes et designers et des articles de fond sur les bonnes pratiques, l’amélioration de l’expérience utilisateur, et la sémantique des logos.
Les tutoriels de la semaine
#CSS
Tutorial – How to Create a Metro Style Accordion, un tutoriel pour créer un menu accordéon avec un design proche de celui “plat” de l’interface de “Modern UI”
Css-only Lavalamp-like Fancy Menu Effect une utilisation avancée de CSS3 et de sélecteurs pour créer un menu horizontal avec un effet « Lavalamp » (l’effet au survol)
Des ressources utiles
#Firefox OS
Building Blocks des morceaux de code tout prêts pour créer l’UI de Firefox OS en HTML CSS
A checklist of things you will need to learn to make Firefox OS applications : HTML, CSS et JavaScript, voilà tout ce qu’il vous faudra (ou presque) pour développer des applications sous Firefox OS
#Template
Free identity design mockups from Utopia un package en fichier vectoriels pour graphistes et designers qui veulent présenter leurs logos sur différents supports
#Gestes #Vector
Gestures un pack illustrator de gestes iPhone pour illustrer vos présentations
#jQuery
Perfect-scrollbar un petit plugin jQuery pour ajouter une scrollbar dans un élément dont la CSS est facilement manipulable
Darsa.in/sly/ un plugin jQuery pour créer des listes d’éléments scrollables horizontalement et verticalement
#Freebies
Freebbble.com un site qui répertorie une grande quantité de freebies trouvés sur dribbble
#Icônes
Mfglabs-iconset un petit pack d’icônes très pratique pour un projet
Bijou.im un autre projet d’icônes minimalistes
Les outils et plugins pour vous faciliter la vie
#Android
Device Frame Generator un outil pour générer des aperçus de votre design par simple drag & drop dans l’appareil sur lequel vous voulez le prévisualiser votre design
#Typographie
Fontfriend un bookmarklet pour tester différentes polices Google Font directement sur le site dans devoir toucher au code
#Editeur de texte
Zenpen.io un éditeur de texte en ligne, minimaliste qui met l’accent sur l’essentiel, votre texte.
Les articles à lire
#Webdesign
Petit florilège de bonnes pratiques graphiques les slides de l’atelier de Romy Duhem Verdière sur les bonnes pratiques pour un site accessible
are Links Blue? une explication de Joe Clark sur pourquoi les liens sont bleus par défaut depuis le début des internets, aussi simple que ça.
Tips for Designing in the Browser la tendance du “design in the browser” , ou le design directement dans le navigateur monte en puissance en ce moment, cet article donne quelques bons conseils et ressources pour s’essayer à cette technique sans pour autant perdre de vue les objectifs du design
#Rwd
Using Responsive Design To Rewrite Your Sentences une technique qui consiste à baliser le texte avec différents <span> pour pouvoir changer l’affichage et avoir un texte moins long sur mobile.
#UX
Small Nudges, un tumblr consacré à des petits détails qui peuvent changer le taux de conversion d’un site web
How to Destroy User Experience in Two Easy Steps un retour d’expérience sur la version tablette de CBS news qui propose une expérience utilisateur moins riche sur tablette
#UI
The Button Test , un petit jeu pour montrer l’importance du design de boutons dans l’identité d’un marque. Saurez-vous reconnaître à qui appartiennent les 18 boutons ? (j’en ai reconnu 7, mais il y a plusieurs services que je ne connaissais pas ^^)
Case Study: The Edit Icon on Firefox OS un retour d’expérience sur le design de l’icône “éditer” de Firefox OS et l’explication des choix faits
#Sémantique
Your logo is still an image… and so is mine! un article qui rappel qu’un logo est sémantiquement une image, qu’il vaut mieux éviter pour les robots de le mettre dans un <h1> mais plutôt de mettre une image de 1px transparent pour avoir la balise <img>
#Humeur
Pixels don’t care, un très bel article sur la valeur de votre travail dans le web : petit, grand, homme, femme, au final, les pixels n’en ont que faire, c’est votre travail qui compte.
Inspiration
#Icônes
Sodafish.com , le très joli travail d’un graphiste et designer d’icones
Pour finir je vous proposer de procrastiner ce vendredi sur frontinvaders un petit jeu spaceinvader like pour tuer des vilains petits internet explorer ^^
