Des pixels et du code #70
Encore une semaine avec beaucoup de liens pour les designers, graphistes mais aussi intégrateurs et chefs de projets à vous partager. Du côté des articles à lire on retrouve du wireframe, les spécifications techniques pour faire une site pour les Google Glass, une idée de wordkflow Photoshop/Illustrator que je testerai à m’occasion sur du design d’application, ainsi qu’un quizz CSS pour l’été. Beaucoup de liens pour trouver de l’inspiration, de la jolie typographie avec en bonus un petit tumblr un poil NSFW et de superbes anamorphoses qui vont vous gardez le nez devant l’écran un petit moment. Du côté des ressources utiles je vous propose entre autre un petit script de validation de formulaires et une sélection de grilles responsive. Et pour finir, ne loupez surtout pas le dernier site pour convaincre votre client de l’inefficacité du carrousel (slider) sur sa page d’accueil.
Les articles à lire
#UX
Eye Tracking Study Comparing Mobile and Desktop une étude comparative d’eye tracking entre la landing page des SERPs Google sur desktop et sur mobile
#Wireframe
How to convince clients to think about content before they think about graphics ou pourquoi et surtout comment convaincre son client qu’il vaut mieux travailler avec du “vrai” contenu dès que possible
#Google Glass
Google Glass Browser: HTML5 and Responsive Web Design in your head quelques informations sur les Google Glass au niveau du support HTML5, des media queries et spécifications techniques
#Gif #Performance
CSS filters, GIFs, and performance ou comment mélanger des GIFs et des filtres CSS (expérimental) sans trop perdre en performance
#Wordkflow #Illustrator #Photoshop
The Modular Canvas: A Pragmatic Workflow for Designing Applications le titre est barbare mais l’article parle de workflow de design, et de l’idée de créer des “objets” et patterns de design réutilisables sous forme d’ objets enregistrés dans des fichiers Photoshop à part, et les assembler dans une interface en utilisant la puissance des liens dans Illustrator et les artboards de différentes tailles. L’idée me plait bien, à tester sur un projet “design” d’interface à l’occasion
#Recrutement
9 Signs You Shouldn’t Hire THAT Web Guy – 2013 Edition 9 “pièges” auxquels vous devriez faire attention si vous cherchez à embaucher un développeur web d’après David Walsh. L’argument “Knowing « HTML5 » is the equivalent of yesteryear’s « Web 2.0 » est particulièrement vrai je trouve, même dans les tutoriels on voit de plus de “buzzword” HTML5 là où il devrait simplement être écrit HTML.
#CSS
css-quiz un quiz CSS pour tester vos capacités et pour le fun
#Freelance vs #Corpo
Histoire d’une rupture colorimétrique annoncée… le retour d’expérience d’Aurélien sur 100 jours en tant que prestataire freelance en régie dans une grand entreprise
Inspiration
#UX
What is A/B testing une chouette petite animation pour expliquer ce qu’est l’A/B testing d’un site web
#Typographie
Holiday-Inn-mural une peinture murale toute en superbes lettres pour le hall du Holiday Inn
#Typographie #NSFW
fonts-n-boobs.tumblr.com un tumblr avec des jolies typos, la demoiselle dénudée, c’est bonus ;)
#Vélos
Cyclemon.com un joli site plein de couleurs pastelles et de vélos :)
#Usecase
Defining a new standard for online radio un retour sur le nouveau design du site Radio 538, génial autant sur la forme que le fond, le usecase est lui même designé avec des animations, etc.
#Anaphorism
Anamorphosis in Lyon – Guinness Book World Record record du monde battu pour cette magnifique fresque sur le sol qui fait plus de 6000m²
Et un autre article sur Onextrapixel qui vous en présente pleins d’autres, impressionnant. Et pour finir, la petite claque visuelle du bureau en anamorphisme, il m’a fallut la vidéo pour deviner ce qui est faux et ce qui est vrai.
#Clients
72 Hilarious Posters of Real Design Feedback from Clients une sélection de retours de clients illustrés en poster, très funs pour certains
Les tutoriels de la semaine
#CSS #Tables
Easier user interface development and responsive layouts using CSS tables une excellente entrée en matière sur l’utilisation du modèle tabulaire en CSS
#Sass
Digging into my slides about Sass un retour de Hugo Giraudel sur ses slides à la kiwiparty et sa présentation de Sass
Des ressources utiles
#Typographie
animography.net des polices d’écriture animées pour des effets de textes animés à utiliser dans After Effect
#Diagrames
simplediagrams.com une application créée sous Adobe Air pour faire facilement des diagrammes explicatifs dans un effet “sketchy”
#Responsive #Grilles
13 Best Responsive CSS Grid Systems for Your Web Designs une sélection de grilles responsive pour commencer facilement un projet web
#LongShadow #Pas très utile
Et dans la série “les tendances ça nous fait faire des trucs ridicules”, la tendance du long shadow, qui donne naissance à des kits pour les graphistes qui ne sauraient pas se servir de Photoshop et pour ceux qui voudraient le reproduire en code, un petit plugin jQuery (rien que ça) avec plusieurs scripts à charger et des box-shadow multiples pour reproduire l’effet. Je pense qu’on arrive au paroxysme du croisement d’une tendance “design” et de cette mode de vouloir tout reproduire en CSS (et JS) au détriment ici des performances.
Les outils et plugins pour vous faciliter la vie
#Validation
Parsleyjs.org un JavaScript pour valider les formulaires
#Gestion de projet
Duetapp.com une application de gestion de projet à installer sur son serveur avec un design très épuré qui m’a l’air simple d’utilisation
Les démos sympas et impressionnantes
#CSS
Direction aware hover effect un effet au survol qui change en fonction de endroit d’où provient la souris
Et s’il devait n’en rester qu’un ?
#UX #Carousel
Shouldiuseacarousel.com un site qui vous explique pourquoi les slider carrousel slideshow rayez la mention inutile ne fonctionnent pas sur vos sites avec quelques liens vers des études chiffrées
Pour finir un peu de rébellion du côté des graphistes français avec Gratuiste.tumblr.com le tumblr coup de gueule pour expliquer au monde, une fois de plus hélas, que graphiste est un métier, et donc non, le graphiste ne travaille pas gratuitement.
Bonne lecture :)
