La semaine en pixels – 19 Mai 2019

Ce contenu a été rédigé il y a 5 ans. Il se peut qu'il ne soit plus à jour.

Chaque semaine, je publie 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.

La sélection de cette semaine est un peu spéciale : j’ai passé 3 jours à Google I/O la semaine dernière. J’ajoute donc une section supplémentaire avec tous les liens et ressources intéressants que j’ai y découverts : des liens sur le design éthique dans un monde des technologies futures , des expériences vraiment cool en Art, Culture, AR (réalité augmentée) et Machine Learning, les nouvelles intégrations Web et Chrome, designer des expériences en réalité augmentée ou avec des technologies de machine learning, les nouvelles fonctionnalités Android, etc. En plus de cela, il y a la sélection habituelle de liens incluant le design inclusif, l’effritement de mastodon, des composants React accessibles, la MacDonaldisation du design d’experience utilisateur, des podcasts, des animations SVG & CSS, de beaux fonds d’écran Mac, des icônes, des BD pour les designers, etc.

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

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

#Inclusive Design

Trans-inclusive Design, un excellent article sur la façon de rendre vos produits plus inclusifs pour les personnes transgenres.

La spéciale Google I/O 2019

#Videos

Vous pouvez voir toutes les vidéos de Google I/O 2019 sur youtube. Si vous êtes intéressé par un sujet particulier, vous pouvez visionner la vidéo directement à partir du planning des sessions.

Ethics & Design

Baratunde a donné une conférence récapitulative de l’I/O: An Unconventional Look at the Future of Technology with Baratunde Thurston. Vous pouvez trouver les slides ici. Il y partage différentes ressources

  • ethicalos.org, un framework pour vous aider à anticiper l’impact futur de la technologie et à prendre des décisions éthiques
  • A New Tech Manifesto – Six demands, from a citizen to Big Tech
  • projectinclude.org, un organisme sans but lucratif qui utilise les données et la défense des intérêts pour accélérer la mise en œuvre de solutions en matière de diversité et d’inclusion dans l’industrie des technologies.
  • ainowinstitute.org un institut de recherche qui travaille sur les implications sociales de l’intelligence artificielle
  • Data & Society, un institut de recherche axé sur les questions sociales et culturelles découlant du développement technologique axé sur les données.
  • Lynching in America, un site qui « présente des histoires douloureuses de l’histoire de l’injustice raciale en Amérique. Pour guérir les blessures profondes de notre présent, nous devons affronter la vérité de notre passé. »

Web platform

#Accessibilité

Accessible to all, quelques lignes directrices pour aider les développeuses à créer des sites Web plus accessibles

#Recherche

The Web Perception Toolkit est une bibliothèque open-source qui vous fournit les outils pour ajouter la recherche visuelle à votre site Web. La boîte à outils fonctionne en prenant un flux à partir de la caméra de l’appareil et en le faisant passer à travers un ensemble de détecteurs.

#Game #PWA

Proxx est un jeu PWA (Progressive Web App) inspiré du démineur qui fonctionne même sur les « feature phones » et avec les lecteurs d’écran. Si vous voulez en savoir plus sur la façon dont il a été construit, vous devriez regarder Build Fast and Smooth Web Apps from Feature Phone to Desktop (Google I/O ’19)

#Performance

  • Squoosh.app est une PWA qui vous aide à réduire la taille de vos images à des fins de performance.
  • Rollup est un module pour JavaScript qui compile de petits morceaux de code en quelque chose de plus grand et plus complexe, comme une bibliothèque ou une application.
  • Travis CI implémente quelques optimisations qui aident à accélérer votre compilation.

#Portals

Hands-on with Portals: seamless navigations on the Web, une nouvelle fonctionnalités en cours de rédaction pour ouvrir des contenus dans des « portaux », à voir ce que ça donne (pour plus d’informations sur les critiques de cette technologie vous pouvez consulter « Short note on the portal element« )

Augmented Reality

#Art #Culture

Google Arts and Culture est un lieu d’exploration de l’art et de la culture à travers des expériences en réalités augmentée, des galeries, etc. La video est en ligne ici et voici quelques expériences que j’ai beaucoup appréciées : 

  • NASA, un récit sur l’exploration de l’espace
  • Living Archive, une collaboration entre Google Arts and Culture Lab and Studio Wayne McGregor pour générer des mouvements de danse inspirés de 25 ans d’archives de danse
  • Big Bang AR, l’histoire de notre univers en réalité mixte, en collaboration avec le CERN
  • Weird Cuts, une expérience où vous créez de l’art AR autour de vous à l’aide de collages et d’assemblages (disponible sur iOS)
  • Infinite Patterns, une combinaison d’art et de motifs générés par le programme de vision par ordinateur « DeepDream » qui génère motifs infinis basés sur des images.

#Outils #AR

ARCore est une plateforme pour aider à construire de nouvelles expériences de réalité augmentée qui mélangent harmonieusement le monde numérique et le monde physique. Je me suis amusé avec 2 expériences, vous pouvez vérifier les photos sur instagram.

# Designer pour la réalité augmentée

Il y a eu 2 conférences très intéressantes avec beaucoup d’informations sur le design de produits utilisant la réalité augmentée, vous devriez regarder la vidéo si vous avez un moment (je pourrais écrire un résumé quand j’aurai le temps mais c’est pas pour tout de suite):

Machine Learning et Intelligence Artificielle (AI)

#AI #UX #Ebook

Que signifie créer des produits qui utilisent des technologies d’intelligence artificielle centrés sur l’humain ? L’équipe de Google propose un ebook en ligne pour vous aider : People + AI Guidebook. Pour en savoir plus vous pouvez voir cette session « Designing Human-Centered AI Products »

#Outils #diversité #Dataset

Facets contient des outils de visualisations pour vous aider à comprendre et à analyser les  jeux de donnée de machine learning afin de vous assurer que jeux de donnée sont robustes et diversifiés.

#Outils #diversité #Dataset #Exploration

What If… et si vous pouviez inspecter un modèle d’apprentissage de machine learning, avec un minimum de code requis ? Un outil d’aide  à l’ analyse d’hypothèses avec une interface visuelle interactive conçue pour mieux sonder vos modèles.

#Art #Music #ML

Faire de la musique et de l’art à l’aide de l’apprentissage machine avec le projet Magenta.

Accessibilité

#AI #Reconnaissance Vocale

How AI can improve products for people with impaired speech, comment l’intelligence artificielle peut améliorer les produits pour les personnes ayant des troubles de la parole, un projet très intéressant.

#Android #Audit

Saviez-vous qu’il existe une application pour vous aider à vérifier l’accessibilité de vos applications Android ? Ça s’appelle Accessiblity Scanner et elle est super utile

#Android

Google a présenté quelques fonctionnalités qui ont un beau potentiel d’accessibilité :

  • Live Transcribe effectue la transcription en temps réel de la parole en texte sur votre écran, afin que vous puissiez participer aux conversations qui se déroulent dans le monde qui vous entoure.
  • Live Relay utilise la reconnaissance vocale et la conversion texte > parole sur l’appareil pour permettre au téléphone d’écouter et de parler au nom de l’utilisateur pendant qu’il tape.

Il ya aussi une fonctionnalité de sous-titrage en direct à venir sur Android qui sera en mesure de sous-titrer des vidéos sur le téléphone de l’utilisateur en temps réel :)

Autres liens

#Environnement professionel

re:Work  est un recueil de bonnes pratiques, de recherches et d’idées de Google et d’autres pour vous aider à créer des environnements professionnels plus accueillants

Les articles de la semaine

#Vélo

Why every cyclist needs a pool noodle, ou pourquoi chaque cycliste a besoin d’une nouille de piscine. Je fais encore beaucoup de vélo et oui, c’est assez dangereux parfois, les voitures qui passent ne se soucient pas de vous, alors cette paille pour les forcer à respecter les distances de sécurité une très bonne idée.

#Open Source

Mastodon is crumbling—and many blame its creator – Mastodon est en train de s’effondrer – et beaucoup blâment son créateur. Un article intéressant à propos du principe de « Benevolent Dictator For Life« , des contributions, de l’attribution, des problèmes dans les projets open source, etc.

#UX

The MacDonaldization of UX, la MacDonaldisation du design d’experience utilisateur, une lecture longe et déprimante qui soulève de nombreuses questions sur la normalisation ou même l’industrialisation du design.

#Accessibilité #Animations

Revisiting prefers-reduced-motion, the reduced motion media query

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

#Post-Its

Cette vidéo mignonne de Rays nageant qui ressemble à des post-its a fait ma semaine

#BD #Design

Designer First World Problems, une collection de bandes dessinées aléatoires sur le design, l’introversion et les sandwichs.

#Wording

Design Critique Coach – Si vous voulez avoir l’air intelligente lors de votre prochaine rencontre avec un designer mais que vous n’avez aucune idée de la façon de le faire, voici quelques questions pour vous aider (ceci est 100% sarcastique je précise)

Tutoriels

#SVG #Animations

« A Designer’s Guide to Animating Icons with CSS« , un petit guide vraiment sympa pour vous aider à comprendre comment animer un SVG avec stroke-dashoffset en utilisant CSS

Des ressources outils et plugins pour vous faciliter la vie

#React #Accessibilité

Reakit: construire des composants React accessibles c’est possible

#Carnet

Une idée marrante de carnet de notes

#Mac Wallpaper

Toutes les 20 minutes (ou toutes les heures, au choix), Downlink met à jour votre fond d’écran Mac avec les images les plus récentes de Earth.

#Accessibilité #WordPress

Juiz Lang Attribute, ajoutez des attributs de langue à votre éditeur WordPress pour des raisons d’accessibilité et de référencement.

#Podcasts

Un répertoire de Podcasts

#Icons

Streamlineicons a maintenant une application en ligne vraiment cool pour vous aider à trouver toutes vos icônes préférées.