La semaine en pixels – 6 Mai 2018

Chaque semaine,  un condensé de ma veille web design, UX (expérience utilisateurs), design d’interface et mobilité, HTML et CSS, mais aussi des outils et ressources et de l’inspiration en tout genre.

Au programme : erreurs de design de desinscription aux newsletters, un guide de tailles de police d’interface, les wireframes papier, publier une PWA sur les stores, des astuces de symboles Sketch, les « Priority Guides », design de données, unités relatives CSS, utiliser :focus-within pour faire des menus déroulants, inputmode sur formulaires mobiles, la propriété CSS display:contents, inspiration d’illustrations, expérimentations CSS, un générateur d’effets duotone et des patches à broder pour les travailleuses et travailleurs du web

Pour plus de liens chaque matin vous pouvez me suivre sur twitter. Bonne lecture :)

J’ai publié un truc cette semaine

#Illustration

Vous pouvez télécharger mon illustration “Content is like Water” sur le blog

Les liens en français

#Freelance

« Créatif en free-lance, je me lance« , 80 questions/réponses pour faire le point sur votre projet d’indépendance. Vous êtes créa ? Vous envisagez le free mais avez plein de questions ?

tl;dnr, s’il devait n’en rester qu’un ?

#Patchs

Cyberspace Building Crew embroidered patches & stickers, des patches à broder et stickers représentant les différents métiers dans le web sur une thématique conquête de l’espace par Julien, allez faire un tour sur le Kickstarter

Les articles de la semaine

#UX / UI

• Top 10 Design Mistakes in the Unsubscribe Experience – les erreurs du design de formulaires de desinscription
• Un guide de taille de polices d’interface pour différents projets iOS, Android, web, etc. : The Ultimate Guide to Font Sizes in UI Design
• Quantitative User-Research Methodologies: An Overview 

#Wireframes

• « Priority Guides: A Content-First Alternative to Wireframes » cette méthode est très proche de mon approche présenté pour l’architecture d’information mobile, il y a peut-être moyen de mélanger les méthodes
• How paper wireframing will make you a better designer – les prototypes papiers permettent de co-concevoir facilement

#Mobile

• « I built a PWA and published it in 3 app stores. Here’s what I learned« , construire une PWA est une chose facile, la proposer sur les store Android, Apple et Windows peut devenir galère
• Finger-friendly numerical inputs with `inputmode, utiliser inputmode pour optimiser les formulaires mobile

#Front-End

• A Guide To The State Of Print Stylesheets In 2018
• The Relative Units of CSS: em, rem, ch, ex, vh, vw, %
• Display: Contents Is Not a CSS Reset éviter d’utiliser display:contents
• Utiliser :focus-within pour créer des menus déroulants « Solved With CSS! Dropdown Menus« 

#Dataviz

Un excellent article pour vous aider à choisir le bon type de graphique « Data Visualization – How to Pick the Right Chart Type? »

#Societié

How a Common Interview Question Fuels the Gender Pay Gap (and How to Stop It) – pourquoi demander l’ancien salaire à ses salariers contribue à la disparité des salaires entre les genres

De l’inspiration, du fun et de jolies idées

#CSS

• De quoi occuper votre après midi, un levé / couché de soleil en CSS CSS Sunset Sunrise using gradients
• De quoi tuer votre carte graphique recurss.github.io , des recursions en CSS

#UI

• Some nice ideas for proximity feedback, de chouettes idées pour des interfaces qui répondent à l’approche de la souris
• Un adorable petit formulaire A little security shade so the wombat can’t peek at your password!

#Posters et illustrations

• J’aime beaucoup son style d’illustration
• Des posters non inspirants, je veux le « Not everything is possible« 

#Blague

Des blagues nulles à faire à vos collègues qui oublier de verrouiller leur session : Practical Jokes in the Browser

L’actualité webdesign

#Edge

Les PWAS ont accès aux notifications push et Service Workers sur Edge HTML 17, YEAHY

Tutoriels

#Sketch

Using Sketch’s Symbols as Links for Big Projects, utiliser les symboles pour créer des liens entre les éléments d’un fichier Sketch

Des ressources utiles, outils et plugins pour vous faciliter la vie

#Couleur

Un générateur en ligne d’effet duotone : Duotone Effect Generator