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 ^^

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.