Des pixels et du code #58
Les liens qu’il ne fallait pas manquer cette semaine, que vous soyez graphiste, webdesigner ou intégrateur. Dans les articles de fond, beaucoup d’ergonomie et d’expérience utilisateur avec un très bel article en français sur justement la différence entre les deux disciplines, une remise en question de l’utilité de la « sidebar » sur les blogs et du mythe du » le moins de cliques possibles pour atteindre la cible ». Si vous êtes en manque d’inspiration j’ai déniché quelques tumblr d’illustration, de typographie à la main et de griffonages très sympas. Cette semaine enfin vous trouverez beaucoup de ressources utiles avec un site pour générer son propre papier, de quoi styler certains éléments de formulaire de manière non standard ou encore Gistboxapp qui permet de classer ses gists githubs, les taguer et les trouver plus facilement. Dans la section outils vous trouverez quelques liens pour mieux gérer les couleurs, la typographie et avoir des “fausses images” pour vos projets. Bonne lecture :)
Les articles à lire
#UI Mobile
Gorgeous Gmail 5 for Android concept un concept de ce à quoi pourrait ressembler gmail5 pour android avec des explications détaillées sur ses propositions de design
#UX
Je ne suis pas un ergonome la différence entre un designer d’expérience utilisateur (UX designer) et un ergonome
The Sidebar in Your Blog is Hot Garbage : la plus part des contenus de colonne latérale (nuage de mots clés, publicités, images instagram) n’apportent pas grand chose dans la lecture de l’article. L’auteur donne également des pistes pour garder les lecteurs sur le blog sans avoir besoins d’un cololatérale.
#Ergonomie
Don’t optimize for the fewest number of clicks une remise en question du mythe “ayez le moins de cliques possibles jusqu’à la cible” où l’auteur explique la notion de satisfaction : tant que chaque clique donne à l’utilisateur l’impression de se rapprocher de la cibler, les cliques peuvent être nombreux
#Mobile
It’s not a web app. It’s an app you install from the web un retour du créateur de Forecast sur le fait que leur application est une webapp, et quelques conseils pour réusssir une webapp qui fonctionne et soit facillement utilisable
#Design
Why you should move that button 3px to the left un article qui traite des petits détails qui font qu’une interface est fonctionnelle et améliorent l’expérience utilisateur.
#Typographie
2013 font trends Bold, écrites à la main ou encore stencil, les tendances des polices pour 2013
#Workflow
Les « Style Tiles », un nouvel outil pour le webdesigner ? un article sur les “planches tendance” adaptée pour une utilisation dans un workflow plus agile de création de site web, une « autre » façon de travailler
Inspiration
#Doodling
fakevertising.tumblr.com un petit tumblr de notes de réunions façon griffonnage
#Webdesign
30 Beautiful Examples of Design Agency/Studio Websites, 30 sites d’agence web vraiment sympas, j’ai eut un gros coup de coeur pour la page Approach de Archer Group.
#Handwriting #Dessin à la main
ewejintee.tumblr.co qui rassemble de jolies dessins et illustrations et letterines à la main
#Noir
15+ shades of black in web design une petite collection de sites avec des nuances de noir
#Illustration
soupcompany.tumblr.com rassemble des illustrations noir et blanc, crayon, feutre et couleur bien sympathiques
Les tutoriels de la semaine
#CSS #animation
Transitional Interfaces, Coded la semaine dernière je vous présentait l’article “Transitional Interfaces” où Pasquale D’Silva expliquait l’intérêt des transition dans une interface pour l’expérience utilisateur, Chris Coyier dans son article a traduit ces transitions en lignes de CSS facilement ré-utilisables.
#jQuery
try.jquery.com un petit site pour apprendre le jQuery de manière interactive : vidéos, tutos dans le navigateur et morceaux de codes avec lesquels jouer
Des ressources utiles
#Papier
generatedpaper.com propose de télécharger et imprimer des grilles de page pour du wireframe, du design et bien plus encore: lignes, carrés, feuilles à point, beaucoup de modèles différents sont disponibles.
#CSS
List of Pseudo-Elements to Style Form Controls une liste de pseudo-classe spécifiques au moteur de rendu (webkit,ms, etc) donc NON standards pour styler des formulaires
#Snippets
gistboxapp.com un outil en ligne pour organiser vos gist sur github avec des favoris, des labels, etc
#Fonts
fontmeimfamous.com un petit site pour jouer avec une partie du catalogue de www.fontshop.com d’une manière très ludique
#Portfolio
dunked.com , la sortie « officielle » cette semaine de ce nouveau service par Orman Clarck qui permet de créer facilement en quelques cliques sans connaissances HTML/CSS un portfolio en ligne.
Les outils et plugins pour vous faciliter la vie
#Couleurs
pltts.me un outil pour gére et créer des palettes de couleur
#Typographie
typonerd un correcteur d’erreurs typographiques en ligne, attention ça ne corrige pas l’orthographe, juste les erreurs typographiques (guillemets, etc.)
#Images
hhhhold.com un service de placement de fausses images pour vos projets qui utilise des images de ffffound . Car les images d’utilisateur ne sont pas toujours des superbes images lissées de chaton, j’adore la citation “Never understimate the insanity of user-generated content in your projects again.”
Et s’il devait n’en rester qu’un ?
Mon coupe de coeur de la semaine est encore attribué à un article de Hugo (promis je ne le fais pas exprès) : « Css is easy ». Le CSS c’est facile on l’a déjà tous entendu. Oui, en théorie, la syntaxe est compréhensible par un enfant de 8 ans, mais sa constante évolution, les problématiques de rendus navigateur et de performance en font un langage pas si simple à maitrise que ça au final.
Pour finir, un peu loin du graphisme et du design mais très sympa, “Dove Hires Criminal Sketch Artist to Draw Women as They See Themselves and as Others See Them” où Dove engage un desinnateur de portraits robot pour dessinner les femmes tel qu’elles se voient et tel qu’un autre les voit. Très joli.
