La semaine en pixels – 13 Avril 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 : un projet qui se termine mal, de l’inspiration avec des dégradés, la pseudo class CSS focus-visible, design de barres d’outils, ajouter de l’émotion dans les interfaces, le paint et parsing CSS expliqué, un jolie kit d’icônes animées, les limites des interfaces en « Cards UI », un ebook pour apprendre aux designers à coder, du lorum ipsum bullshit corporate, le design d’un date picker, des polices pour afficher des données complexes, les pop-ups sur mobile et le codage d’email.

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

J’ai publié un article cette semaine

Mon second article sur pastry box project est en ligne: Making it pretty will not make it usable, une histoire d’évènements facheux qui ont mené un projet à sa perte.

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

#Icones

Fontisto, An iconic font and css toolkit with more than 552 free icons that can also be animated

Les articles de la semaine

#UX / UI

• « Contextual Toolbars Deep Dive« , la création de barre d’outils est un exercice complexe surtout quand on a beaucoup d’options à afficher
• « How To Design Emotional Interfaces For Boring Apps” ajouter du design émotionnel dans des produits à priori pas fun c’est possible
• Pitfalls of Card UIs – les limites des design de type « card ui »
• Date Picker Design – ou comment designer un date picker avec pleins d’options
• Designing apps for young kids, designer pour les jeunes enfants
• « Are Mobile Pop-Ups Dying? Are They Even Worth Saving? » les pop-up mobiles sont-elles entrain de mourir ? En tant qu’utilisateur j’aimerai bien, mais le marketing sera pas d’accord. Cet article propose des compromis interessants
• Some instagram dark pattern to  tricks you into syncing ALL of your contacts when picking a username, vous reprendrez bien un peu de dark pattern sur instagram?

#Front-End

• « :focus-visible and backwards compatibility » nous pourrons utiliser :focus-visible pour style un élément qui obtient le focus via un clique ou tap (au lieu d’utiliser :focus)
• « How CSS Works: Parsing & painting CSS in the critical rendering path« , un excellent article pour comprendre le parsing et painting du CSS et comment le navigateur construit et affiche vos pages
• Be careful what you copy: Invisibly inserting usernames into text with Zero-Width Characters
• Why would you do that in CSS? Parce que c’est fun d’explorer !

#Typographie

Fonts for Complex Data, des polices pour des données complexes comme les listes d’ingrédients ou les données tabulaires

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

#Dégradée

Quelques exemples de la tendance dégradé sur les sites qui fonctionnent plutôt bien

#Illustrations

Dating Life et d’autres petits BD funs sur  War and Peas

L’actualité webdesign

#Google

Google is officially testing ‘more results’ button to load more search results –  Google va tester le bouton « charger plus », on va voir ce que ça donne

Tutoriels

#CSS

Scooped Corners in 2018. faire des coins arrondis inversés avec différentes techniques CSS et SVG

#Email

New to email coding? de quoi vous aider pour coder des emails

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

#JavaScript