La semaine en pixels – 25 Novembre 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 : UX et gamification, erreurs de notifications push sur mobile, modèles mentaux, PWAs, apprendre le design, user flows, check-out et experience utilisateur, palettes de couleurs, outil de débug pour le design, personas, CSS dans les composants React, jolies icônes, ordonner les propriétés CSS, outils et scripts pour utiliser des intelligences artificielles, du machine learning, indeweb et performances.

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

J’ai publié un truc cette semaine

La semaine dernière j’étais à Voxxed Days Thessaloniki et j’y ai donné deux conférence en anglais :

• Hello my name is St�phanie sur les caractères spéciaux et l’encodage et tout les soucis que ça peut poser aux utilisatrices et utilisateurs
• Cheating The UX, When There Is Nothing More To Optimize sur la perception de la performance

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

#Design

Un site fantastique avec beaucoup de liens et de ressources pour commencer à apprendre le design –  » Degreeless.design – tout ce que j’ai appris dans une école de design ».

#CSS

Chers développeuses débutantes, Full Stack ou toute développeuse JS qui a besoin de travailler avec CSS à un moment donné, cet article te sera super utile :  The « C » in CSS: The Cascade

Les articles de la semaine

#UX #UI

• Five Mistakes in Designing Mobile Push Notifications, les erreurs de notification push sur mobile
• How—and When—to Use Gamification in Your UX. Exemples intéressants de gamification. Je me demande toujours si cela fonctionne sur la plupart des utilisatrices ou si les gens ne vont pas se lasser de tout ce qui devient gamification ?
• Gamification: A guide for designers to a misunderstood concept un autre article sur la gamification
• Mental models in product design design de produits, des biais cognitifs et psychologie
• Creating Excellent UX Flow Charts – Illustrer des processus complexes en incluant des cas d’utilisation, des actions et des cycles de vie.
• Checkout Redesign & Optimization Case Study: ne copiez pas aveuglément de gros e-commerce comme Amazon, faites votre recherche utilisateur, comprenez aussi les stakeholders, itérez sur différentes solutions, testez-les, échouez, recommencez
• Kill Your Personas – un article sur la construction d’un spectre de personnalités au lieu de personas, sur le design inclusif et l’empathie

#Mobile

• Progressive Web Apps: A Convincing Case for Native-like Apps on the Web – pourquoi les PWAs sont vraiment cools

#Front-End, #CSS and #JS

• 10 things to learn for becoming a solid full-stack JavaScript developer >> la partie HTML et CSS est super déprimante. Le HTML c’est bien plus que des divs et des spans, c’est la sémantique, l’accessibilité, et bien plus encore….
• Once More Again, CSS Property Order –  un article sur l’organisation des propriétés CSS. J’aime les regrouper logiquement parce que la plupart du temps j’ai besoin de changer quelque chose, c’est la typographie, l’emplacement ou la couleur de fond de la boîte, donc avoir ceux que je change d’habitude regroupés a un sens pour moi ^^^
• 5 Ways to Style React Components in 2019 – 5 manières de styler un composant React en 2019
• Difference between currentColor & Custom Properties, la différence entre currentColor et Custom Properties

#Design

Construire vos palettes de couleurs pour les débutants en design et tous ceux qui veulent construire des sites et des produits avec un équilibre colorimétrique: Building Your Color Palettes

Voxxed Thessaloniki – machine learning, AI et web indépendant

Plusieurs conférences à Voxxed Dayd Thessalonique la semaine dernière m’ont fait découverir pas mal d’outils et de ressources, donc je les mets tous ici au cas où vous avez manqué les tweets :)

#Machine Learning

Jen Looper et Asim Hussain ont chacun donné des conférences sur le Machine Learning et JavaScript, voici quelques outils

• Jen Looper a donné une conférence très intéressante : Human vs. AI: Build a Mobile App with Vue.js, ML Kit, and NativeScript
• Machine Learning pour le développement mobile – ML Kit apporte l’expertise de Google en machine learning pour le dev mobiles dans un package facile à utiliser.
• TensorFlow.js une bibliothèque JavaScript pour entrainer et déployer de modèles ML dans le navigateur et sur Node.js
• aijs.rocks est un terrain de jeu qui présente des applications JavaScript optimisées par l’IA dans le navigateur.

#JS #Native

nativescript.org – un framework open source pour créer des applications mobiles natives avec Angular, Vue.js, TypeScript ou JavaScript.

#Performance

Lighthouse est un outil open-source et automatisé pour améliorer la qualité des pages web. Il dispose d’audits de performance, d’accessibilité, PWAs, et bien plus encore.

#Content #Indeweb

Jeremy Keith a donné une conférence très intéressante sur la reprise du contrôle sur votre contenu sur le web. Voici quelques outils

• indieweb.org IndieWeb est une alternative de plusieurs personnes qui proposent des ateliers et des outils pour vous aider à reprendre contrôle de votre contenu !
• RelMeAuth est une méthode d’authentification qui utilise l’URL personnelle pour identifier et établir un lien vers le(s) fournisseur(s) OAuth afin d’effectuer l’authentification.
• Webmention.io est un pour recevoir facilement des webmentions sur n’importe quelle page web.
• brid.gy  récupère les commentaires, les avis et les retours sur les réseaux sociaux pour les afficher sur votre site web.

Des ressources outils et plugins pour vous faciliter la vie

#Icônes

Eva Icons Eva Icons est un pack de plus de 480 icônes Open Source conçues pour les actions et interactions les plus communes faites dans des interfaces

#Sondage

Un petit outil en ligne pour créer des sondages

#Emoji #Fun

Emoji Builder un générateurs d’emojis

#Outil de conception

Project VisBug, un outil pour jouer avec le design dans le navigateur sans avoir besoin de connaître le code

#Audit

Web.dev  – un outil en ligne pour faire un mini rapport de votre site et le comparer aux capacités modernes du web comme offline, PWAS, etc.