Des pixels et du code #81
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. Dans les articles sélectionnez cette semaine vous trouverez de quoi planifier votre contenu pour aller au delà du web, l’histoire d’internet ou encore une comparaison des icônes pleines et en contours ainsi que de bons conseils pour trouver des clients lorsque l’on est freelance. Du côté de l’inspiration de la semaine, des couleurs, de très belles couleurs, des illustrations et des chatons. Et bien évidement une sélection de ressources gratuites, polices d’écriture et PSD à télécharger, outils de prototypage et un ressource en français pour vous aider à créer des newsletter responsive. Enfin, ne manquez surtout pas l’article de la semaine sur tout ce qui est (sera ?) enfin possible de faire avec Flexbox !
Pour plus de liens n’hésitez pas à me suivre sur twitter. Bonne lecture :)
Les articles à lire
#Agile
10 Things Designers Need to Stop Doing to Kick Agile’s Ass! Dix conseils sous forme de slides de ce que les designers ne devraient pas faire pour arriver à travailler sur un projet avec des méthodes agiles. Tous ne sont pas forcément à prendre au pied de la lettre attention :)
#Content
Planning for Content Beyond the Web pourquoi et comment préparer son contenu pour toutes les plateformes, et pas seulement le bureau et le mobile
#Tableaux
A Complete Guide to the Table Element tout ce que vous avez toujours voulu savoir sur les tableaux HTML et CSS, et bien plus encore
#Couleur
Take the Test: How Well Do You See Color? procrastination du matin, classez les couleurs pour savoir à quel point vous êtes capables de les différencier (à mon avis le calibrage de l’écran joue pas mal dans le teste aussi)
#Histoire
A timeline of the history of the World Wide Web une timeline pour apprendre l’histoire de web
#Icon #UX
Optimizing UI icons for faster recognition résultats d’un test utilisateur pour déterminer l’efficacité des icônes “pleines” vs les icônes formées de lignes (spoiler : la différence n’est pas très notable selon cette étude)
#Freelance
Freelance et prospection : comment trouver des clients prospection active, passive, quelques bons conseils pour trouver des clients
Inspiration
#Webdesign
www.qunb.com un très joli sites avec des effets au survol pour un service de visualisation de données
#Illustration
Le portfolio de Yannick Robert et ses très jolies illustrations pour les livres d’enfant
The creative process une jolie illustration pleine d’humour et de couleurs sur le processus creatif
#Publicité
Creative advertising and fashion des publicités plutôt originales pour des vêtements
#Logo
New Logo and Identity for 2013 Brand New Conference by UnderConsideration le redesign du logo pour UnderConsideration et c’est des grands fous sur les exemples d’utilisation du logo
#Dessins
Johnkenn.blogspot.fr très sympa bien qu’un poil flippant, des cauchemars d’enfant dessinés sur des post-its.
#Chats
Idraw_on_cats un compte instagram de photographies de chat sur lequelles les auteurs ont dessiné
#Webdesign
Braingames-fr.natgeotv.com un site plein de couleurs et d’interactions au défilement de la page pour le plaisir des yeux
Les tutoriels de la semaine
#Form
Forms: validation, styling & semantics design et validation de formulaire en pure CSS et HTML
#PixelArt
The Easy Way to Create Pixel Art with Object Mosaic un tutoriel pour créer du Pixel Art à partir d’une photo directement dans Illustrator
Des ressources utiles
#Select
FancySelect un script pour styler une liste de selection qui passe en liste native sur iOS
#Responsive
Responsive web design et e-mailing un très bon article sur l’intégration de newsletter responsive dans Mailchimp
Des ressources gratuites
#UX
UX Storytellers – Connecting the Dots un ebook gratuit sur l’expérience utilisateur
#Corporate Identity
Corporate identity mockup un PSD gratuit pour créer vos présentations d’identité graphiques
#Police
Born, une police d’écriture humanist serif gratuite
Les outils et plugins pour vous faciliter la vie
#Prototype
Marvelapp.com un outil en ligne pour transformer les maquettes PSD, PNG et JPG stockées dans votre dropbox en un prototype interractif dans lequel l’utilisateur peut cliquer
Les démos sympas et impressionnantes
#CSS
How to (de)construct an icosahedron construction et déconstruction d’une forme géométrique 3D en CSS
#Jeu
Mapdive plongez dans le ciel et atterrissez au bon endroit avec ce jeu dans le navigateur basé sur des cartes Google qui va tuer votre productivité
Et s’il devait n’en rester qu’un ?
#CSS
Solved by Flexbox une galerie de techniques CSS qui utilisent flexbox pour résoudre des problèmes jusque là complexes sur le web avec des display et des flottants