Des pixels et du code #75
Comme chaque semaine, je vous propose un condensé de mes lectures et ma veille Web Design et graphisme, expérience utilisateurs, HTML, CSS, outils, ressources et inspiration. Cette semaine je vous propose une grand sélection d’articles orientés sur le métier et processus de travail du Designer Web : perfection au pixel près, checklist de designer et incidence d’outils d’automatisation de code dans nos métiers. Vous trouverez également la rubrique des ressources utiles et outils très fournie cette semaine : accès à Typekit depuis le bureau, outils pour le retina, plugins Photoshop pour les grilles verticales et générateur de faux « utilisateur » pour vos projets. Enfin n’oubliez pas l’article à lire absolument cette semaine qui traite d’expérience utilisateur. Bonne lecture.
Les articles à lire
#Responsive
A Responsive Web Design Process un excellent article sur le processus de création d’un site responsive : commencer par le contenu, penser au mobile dès le départ, mais ne pas forcément commencer le design dans Photoshop avec le mobile
#Webdesign
What’s wrong with “Pixel Satisfaction”? la recherche de la perfection et du pixel perfect est une chose louable dans nos métiers, mais on oublie bien trop souvent que le PSD n’est qu’il étape parmi tant d’autres. J’aime beaucoup la citation
“Aiming for excellence in the final product is always the goal. However, when presenting a mockup, it should be ok if an element is a few pixels off, especially if it saves you (and your client’s budget) an hour of work”
Designers checklist advices plusieurs petites lites de conseils pour les webdesigner
Why designers are talking about the wrong thing, plutôt qu’un résumé je vous propose une citation : « You know what I don’t give a shit about? Design tools. (…) HTML, CSS & JAVASCRIPT bring your painting to life »
Laziness & The Web Designer l’avis d’un designer sur les outils comme Macaw ou CSS3hat qui exportent automatiquement du code et rendent les designer paresseux selon lui
Donner de la valeur au design, montrer le processus créatif pour rassurer le client mais également montrer la valeur ajoutée à son travail
Inspiration
#Logo
Hawt Sauce, un très joli design de logo pour de la sauce tomate fait maison
#Packaging
Lacy Kuhn un packaging de céréales avec un concept adorable et original
#Typography
Fantastic Shoppe Fronts, un tumblr qui rassemble de très belles photos de deventures avec de jolies lettres
#Art
The Zoom Quilt it un project d’art collaboratif avec un concept de zoom infini dans une illustration. Et dans le même style “Infinite Oz”.
#Interractions
The perils at Great Falls un article interactif sur le Washington Post pour présenter les dangers de différents courants
Les tutoriels de la semaine
#CSS
Absolute Center , centrer verticalement et horizontalement une modale en CSS.
#Responsive
Multi-Level Push Menu un menu responsive « Off-screen » avec plusieurs niveaux de profondeur
Des ressources utiles
#Ghithub
A guide to using Github Pages, un guide simple à l’utilisation de github
#Illustrator
Adobe Illustrator CS6 Shortcuts Cheat Sheet , pour connaître vos raccourcits sur le bout des doigts
#Adobe CC
Early access to Typekit and file sync in Adobe CC, un accès en avant première aux fonctionnalités de synchronisation et polices sur bureau de Typekit
#Mobile
Are you making any of these 8 common (and wrong) assumptions about mobile performance? un article détaillé et illustré d’études chiffrées qui va à l’encontre de certains mythes sur la mobilité
#Retina
How to test a website for Retina on Windows without an actual Retina display? ou comment utiliser Firefox pour avoir un premier aperçu de votre site en retina
#Mockup #Mobile
PixelSign HTML5 device mockups des maquettes de mobiles en HTML pour présenter un design d’application directement dans un appareil
Des ressources gratuites
#Font
Dense typeface une élégante police géométrique à télécharger et utiliser gratuitement pour vos projets
Les outils et plugins pour vous faciliter la vie
#Grid
modulargrid.org un outil en ligne et plugin Photoshop pour créer une grille verticale pour aligner la typographie
#Utilisateur
randomuser.me vous propose un faux nom, photo et adresse mail pour créer des utilisateurs aléatoires pour vos designs et bases de données
#Icônes
60 SEO Service icons un kit de 60 icônes qui présentent différents services “SEO” mais peuvent également être utilisées pour beaucoup de prestations et services web.
#Flat UI
flatuimaps.com je n’aime vraiment pas les couleurs du kit “Flat UI Pro”, mais si ce n’est pas votre cas, ce générateur de cartes Google Maps pourrait vous plaire
Les démos sympas et impressionnantes
#CSS
une icône d’appareil photo dans un style iOS, faite à partir d’un seule élément HTML, à savoir body.
#Jeu
LittleAlchemy, un petit jeu dans le navigateur où il faut combiner des éléments pour en créer de nouveaux
Babbit un autre jeu de procrastination matinale où il faut attraper les carottes avec le lapinou
#Canvas
Touch device jelly menu concept, un effet fun au touch et au scroll de la page :)
Et s’il devait n’en rester qu’un ?
#UX
Designing User Interfaces for Your Mother, un excellent article pour nous rappeler au final comment un « vrai » utilisateur va utiliser un site, un navigateur, ce qu’il en attend et ce qui peut lui fait peur et le freiner dans son expérience
