Pixels of the Week – July 7, 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, HTML, CSS, the web industry, process inspiration and more…

This week’s selection: bringing personal websites back, design frustrations, user journeys compliant with GDPR, onboarding mistakes, UX and product design recruitment, portfolio advice, UX design process, e-commerce deceptive patterns, mental models, 3 ebooks to read, dataviz, Variable Fonts for developers, design systems, awesome things HTML can do, CSS focus-within the idea of a “now” page, illustrations, Soffa font, color palette tool, Illustrator pattern tutorial, icons design, playing with synths in the browser.

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

#Now – what I’m up to

You might have noticed that I didn’t post any weekly links last week. It’s because I was attending the Women Tech Maker Summit in Warsaw. I had 2 amazing days, met a lot of great people. It’s amazing to see how this boosted my energy.

I was also playing with some SVG and CSS variables to create a neon Dachshund  and it felt really nice to code a little bit again.

I also went to Flupa UX Days and if you read French, here is my notes from workshops and my notes from the talks.

Finally, I got tired of dudes barging in my DMs because they want to “be my friend” or “get to know me”, so I decided to make them believe I’m a chatbot. Meet Sacha, my fake virtual assistant (en French). One day I might publish the dropbox folders with all the creepy things I get ^^. And yes, I could simply close my DMs but I use my twitter DMs to communicate with conferences who want to invite me, students or beginners who have some questions, so they are quite useful.

TL;DNR – the one you should not miss

#Personal Website

I was quite depressed about my personal site the last couple of weeks because I got quite some exhausting and annoying comments about it. But this article is exactly what I needed to read: “Into the Personal-Website-Verse“. This feeling twitter that gets worse and worse is something I also felt. I also get the feeling that some people see me as a “ressource” they are entitled to, which leads to some quite strange and unpleasant behaviours because people forget the human behind the screen. But the article reminded me that my site is my place, my home, my sandbox, the place where I can experiment with writing style, design style, code, experiment and have fun. So from now on, my blog, my rules, my fun, and people not happy about it can find another ressources. Bottom line: let’s bring the web of amazing creative people who like to share, experiment and connect with each other back, the fun and the benevolent atmosphere, because I miss it very much.

Interesting article

#UX #Usability

#Design Systems

#Front-End

#Job #Recruitment #Portfolio

#Design #Dataviz

Six Principles for Designing Any Chart, an interesting read to help you with dataviz

#Learning

The 5 stages of learning: Awareness, Panic, Avoidance, Acceptance, Learning

#Portfolio #Idea

A list of portfolios of people who provide a “now” page or section in their about page. The idea is to tell the world about what you are currently doing. I think it’s quite a nice idea and I will try to add it on my portfolio (and also maybe here sometimes).

Some books to read

#Management

A really great book if you need to manage some team, but also if you are going to have to communicate with people at work (so basically a great read for anyone who needs to work and communicate with other humans): “Resilient Management”

#Product Design

The Product Experience Playbook, the online beta of an ebook about product design

#AI

Yeah, each of the chapter of the People + AI Guidebook to help you design human-centered AI products are now available in PDF for offline reading 🙂

Inspiration, fun demos and great ideas

#Illustrations

  • Did I tell you how much I love the Slaugherhouse Starlets series of Keit P Rain? Felicia Day (my ultimate geek girl crush), Queen B, Emma Watson, etc. ( this one is SFW but a lot of the illustrations or the site are not)
  • All Around Neon by Devansh Atray
  • 21wallpaper: every three months 7 of the world’s best illustrators and designers publish 3 of their works for your screen wallpaper

#Synth #Music

Procrastination time, a cool site to learn how various parts of a synthesizer work together and build your own electronic sounds in the browser: Learning Synths

#Bingo

My friend Morgane created a “Design frustration bingo”, how many points do you get?

#Ikea #Font

Ikea has created a new font called “Soffa Sans” and inspired by the customers who have expressed their creativity when using the furniture brand’s sofa-building tool.

#Inspiration

A collection of maths GIFs posted purely for aesthetic reasons.

#Logo #Dataviz

Dataveyes’s logo is amazing. It is pattern-logo based on data that remains coherent over time and changes with their activities. This is such a cool idea for a dataviz company

News in the industry

#iOS

iOS 13 will fix the FaceTime eye contact problem, but some people raise concerns about deaf people who reply on natural eye contact to understand sign language

#Sketch #React

Sketch to React and Developer-friendly Code. Announcing Anima 4, sounds like quite an interesting tool 😮

Tutorials

#Illustrator #Patterns

“A Beginner’s Guide to Adobe Illustrator Patterns” really useful little tutorial, I love patterns!!!

#UI #Framer

UI Interactions in Framer Playground — Create powerful animations and interactions with the Framer X code

#Illustrations

A complete guide to iconography, I really like the small little tips about rectangles, forms, etc.

Useful tools and plugins that will make your life easy

#Front-End

  • Webhint is a linting tool that will help you with your site’s accessibility, speed, security and more, by checking your code for best practices and common errors.
  • 🌓 Darkmode.JS add a dark-mode / night-mode to your website in a few seconds with this little script that uses mix-blend-mode – I kind of like the idea but I was thinking about having a really customised one using the dark purple in my identity

#UserFlow #Sketch

uFlow , a $5 Sketch symbol library that will help you create flowcharts, IA diagrams.

#Color

colors.eva.design, this is a cool tool to help you generate color palettes with different nuances of brightness and shadow

#ShowYourStripes

These ‘warming stripe’ graphics are visual representations of the change in temperature as measured in each country over the past 100+ years. Each stripe represents the temperature in that country averaged over a year.

#Screenrecording

recordscreen.io a tool to record your screen directly in the browser without any installation, this could be useful for usability testing or sharing a talk / online lesson.
(and yes you can do this with Quicktime on mac but not everyone is using a mac ^^)

#Illustrations #Character

Stubborn.fun, a tool that lets you generate custom character illustrations in Sketch, Figma and Illustration

Other articles you might enjoy:

Published on 7 July 2019

in Pixels of the Week (curated newsletter)

By Stéphanie Walter