Pixels of the Week – May 19, 2019

This content is 5 years old. Remember that the following content might be outdated.

Every week I share a list of curated articles, resources and tools about UX, UI and mobile design, Front-End development, HTML, CSS and more…

This week’s selection is a little bit special because I spent 3 day at Google I/O last week. I decided to add an extra section with all the interesting links and ressources I discovered including links on ethical design in a world of future technologies, some really cool Art, Culture, AR and Machine Learning experiments, new web platform and Chrome new integrations, designing for AR and Artificial Intelligence, Android new features and more. On top of that, there’s the usual links selection including inclusive design for transgender people, mastodon crumbling, accessible React components, the MacDonaldization of UX, podcasts, SVG & CSS animations, nice mac wallpapers, smart notebooks, icons, comics, etc.

You can follow me on twitter to get a dose of links every days.

TL;DNR the one you should not miss

#Inclusive Design

Trans-inclusive Design, a great article on how to make you products more inclusive for transgender people.

Google I/O 2019 specials

#Videos

You can see all the Google I/O 2019 videos on youtube. Also, you are are interested in one particular topic, you can check the video directly from the schedule part of the I/O site.

Ethics & Design

Baratunde gave a wrap up talk at the end of the I/O “An Unconventional Look at the Future of Technology with Baratunde Thurston“. You can find the slides here. He shared a few interesting ressources:

Web platform

#Accessibility

Accessible to all, some guidelines to help developers build more accessible websites

#Search

The Web Perception Toolkit is an open-source library that provides the tools for you to add visual search to your website. The toolkit works by taking a stream from the device camera, and passing it through a set of detectors

#Game #PWA

Proxx is a PWA (Progressive Web App) mine sweeper inspired game that works even on feature phones and with screen readers and it’s awesome. This is going to replace the 2048 game on my phone for a while hehe. If you want to learn more about how it was build you should watch Build Fast and Smooth Web Apps from Feature Phone to Desktop (Google I/O ’19)

#Performance

  • Squoosh.app is a PWA that helps you reduce the size of your images for performance purpose
  • Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
  • Travis CI implements a few optimizations which help to speed up your build, like in memory filesystem for DB’s files, etc.

#Portals

Hands-on with Portals: seamless navigations on the Web, for better or worse (see “Short note on the portal element“)

Augmented Reality

#Art #Culture

Google Arts and Culture is a place to explore art and culture around the world in AR, galleries, etc. The video of the talk is here, and here are a few selected experiments I really liked: 

  • NASA, a story telling of space exploration
  • Living Archive, a collaboration between Google Arts and Culture Lab and Studio Wayne McGregor to generate dance movements inspired by 25 years of dancing archives
  • An AR project: Big Bang AR, The story of our universe in mixed reality, in collaboration with CERN
  • Weird Cuts, an experiment where you create AR art around you using collages and assemblages (available on iOS)
  • Infinite Patterns, a combination of art a patterns generates by the computer vision program “DeepDream” that generates infinite patterns based on pictures.

#Tools #AR

ARCore is a platform to help build new augmented reality experiences that seamlessly blend the digital and physical worlds. I had some fun with 2 experiments, you can check the pictures on instagram.

# Design for AR

There was 2 really interesting talks with a lot of information on designing for AR this year, you should check the video if you have a moment (I might write a summary when I get time but don’t expect it soon):

Machine Learning and Artificial Intelligence

#AI #UX #Ebook

What does it mean to create human-centered AI products? Learn how to build human-centered AI products from the People + AI Guidebook. Plus you should totally watch the session “Designing Human-Centered AI Products”

#Tools #diversity #Dataset

Facets contains two robust visualizations to aid in understanding and analyzing machine learning datasets to make sure your dataset is robust and diverse.

#Tools #Dataset #Exploration

What If… you could inspect a machine learning model, with minimal coding required? Look for answers using the What-if Tool, an interactive visual interface designed to probe your models better

#Art #Music #ML

Make Music and Art using machine learning with the Magenta project.

Accessibility

#AI #Voice Recognition

How AI can improve products for people with impaired speech, a really interesting project

#Android

Did you know there’s an app to help you check the accessiblity of your Android apps? It’s called Accessiblity Scanner and it’s quite helpful

#Accessibility Features

Google presented a few things that have a nice potential for accessibility:

  • Live Transcribe performs real-time transcription of speech to text on your screen, so you can participate in conversations going on in the world around you.
  • Live Relay uses on-device speech recognition and text-to-speech conversion to allow the phone to listen and speak on the users’ behalf while they type.

There’s also a feature of live caption coming to Android that will be able to caption videos on user’s phone in real time 🙂

All the other links

#Work

re:Work is a collection of practices, research, and ideas from Google and others to help you put people first.

Interesting article

#Biking

Why every cyclist needs a pool noodle, I bike a lot again and yes, it’s quite dangerous sometimes, passing cars don’t give a damn about you, so this is a pretty nice idea.

#Open Source

Mastodon is crumbling—and many blame its creator – an interesting read around Benevolent Dictator For Life, contributions, attribution, and issues in open source projects, etc.

#UX

The MacDonaldization of UX, a great and depressing read for a rainy Friday afternoon that raises many questions about standardization or even the industrialization of design

#Accessibility #Motion

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

Inspiration, fun demos and Great ideas

#Post-Its

This cute video of Rays swimming that look like post-its made my weekend

#Comics #Design

Designer First World Problems, a collection of random comics about design, introversion, and sandwiches.

#Wording

Design Critique Coach – If you want to look smart in your next meeting with a designer but have no idea how to do that, here are some questions to help you (please don’t)

Tutorials

#SVG #Animations

“A Designer’s Guide to Animating Icons with CSS“, a really cool little guide to help you understand how to animation SVG stroke-dashoffset using CSS

Useful tools and plugins that will make your life easy

#React #Accessibility

Reakit: build accessible rich web apps with React.

#Notebook

This is actually a smart notebook idea

#Mac Wallpaper

Every 20 minutes (or every hour, you pick), Downlink updates your Mac desktop background with the newest images of Earth

#Accessibility #WordPress

Juiz Lang Attribute, adds some lang attribute buttons to your WordPress editor for accessibility and SEO purpose.

#Podcasts

Exactly what I needed, a repository with a lot of podcasts

#Icons

Streamlineicons now has a really cool online app to. help you find all you favorite icons, awesome job

Other articles you might enjoy:

Published on 19 May 2019

in Pixels of the Week (curated newsletter)

By Stéphanie Walter