Pixels of the Week – July 7, 2019
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 dark 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.
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
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.
- Co-building user journeys compliant with the GDPR and respectful of privacy.
- “5 Deadly Onboarding Mistakes“, when crappy ads destroy the experience of the app event before users get to try what it does
- Top 5 Mistakes in Running UX Workshops, a small video
- 8 tips for writing great usability tasks, some great tips, I couldn’t agree more, never forget to pre-test!!!
- The UX design process in 6 stages, usually it’s a little bit more complex than that but this is a good introduction if you don’t know anything about UX Design process
- “How to Overcome Resistance to UX“, 2 minutes video by Jakob Nielsen with some advice on making your company more “UX mature”. Leaving the company should be the last resort solution, try to make it better first?
- “Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites” interesting study and list of anti-patterns in different categories.
Now play the game of “how many anti-patterns is your site using” (maybe we could have a bingo anti-patterns grid)
- Small Things Matter — Redesigning Tokopedia’s Search Filter, an interesting case study. I think the Improvement # 4: Personalization Rules is particularly interesting
- ”Understanding mental and conceptual models in product design” What happens if you don’t consider them and how to build a strong conceptual model. Another great article on psychology and product design
- 8 User Retention Tactics Tested On 300 Million Users, I really enjoyed reading this one, quite some interesting “persuasive” techniques.
- How we Grew our Design System Over 5 Years of Design Experimentation – A story told by a designer and a developer from Societe Generale.
- Design Systems and Front-End Architecture, the slides of a presentation by Stuart Robson
- “HTML can do that?” A small reminder with examples of a few HTML you might didn’t know of
- “I will now charge my clients a fee to support open source projects” interesting idea and interesting comments, I’m curious to see how this goes.
- Three Predictions From the State of CSS 2019 Survey
- Making interfaces more usable and accessible with CSS :focus-within
- Variable Fonts for Developers: a showcase of the many possibilities and opportunities that variable fonts can offer developers and designers on the web. The aim is to provide developers with the resources and tools needed to use variable fonts in their own projects.
- HTML is the Web, It’s all about what gets consumed by the consumer. It’s the UI and UX. It’s the whole package.
#Job #Recruitment #Portfolio
- Mastering product design interviews, a series of articles to demystify the design job search process and help you find a job.
- Here is some help to understand UX Designer skills and hire UX designers: UX Design Practice Verticals , The T-Model and Strategies for Hiring IA Practitioners: Part 1 and the Part 2
- Some interesting advice on how to write great case studies. I don’t fully agree with point 2 about having only 1-2 caption sentences if it’s a UX portfolio, but it could work for a UI one. And YES, credits where due when you worked in a team!ç
Six Principles for Designing Any Chart, an interesting read to help you with dataviz
The 5 stages of learning: Awareness, Panic, Avoidance, Acceptance, Learning
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
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”
The Product Experience Playbook, the online beta of an ebook about product design
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
- 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
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
My friend Morgane created a “Design frustration bingo”, how many points do you get?
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.
A collection of maths GIFs posted purely for aesthetic reasons.
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 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 to React and Developer-friendly Code. Announcing Anima 4, sounds like quite an interesting tool 😮
“A Beginner’s Guide to Adobe Illustrator Patterns” really useful little tutorial, I love patterns!!!
UI Interactions in Framer Playground — Create powerful animations and interactions with the Framer X code
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
- 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
uFlow , a $5 Sketch symbol library that will help you create flowcharts, IA diagrams.
colors.eva.design, this is a cool tool to help you generate color palettes with different nuances of brightness and shadow
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.
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 ^^)
Stubborn.fun, a tool that lets you generate custom character illustrations in Sketch, Figma and Illustration