Pixels of the Week – April 29, 2018
Every week I post a lot of my daily readings about Web, UI and UX Design, mobile design, webdesign tools and useful resources, inspiration on twitter and other social networks.
This week’s selection: common UX mistakes, UX problems, creating accessible interfaces, user don’t hate change, AB testing vs Mutivariate, Service Design, a typeface created to amplify the message advocating for gender equality, design systems, how designers can make developers happy, demo responsive sites, native HTML5 modales, CSS performance, Flexbox fallbacks for Grid Layouts, CSS viewport units.
You can follow me on twitter to get a dose of links every days.
TL;DNR the one you should not miss
#UX
“Common UX Mistakes Made by Business Developers” haha raise your hand if you’ve seen the pop up in a pop up too many times✋
Interesting article
#UX
- Users Don’t Hate Change. They Hate Our Design Choices
- Multivariate vs. A/B Testing: Incremental vs. Radical Changes
- “100 example UX problems, A list of common UX problems to challenge and inspire designers and coders.” han this is a cool list if you teach and are looking for an exercice for your students
- Service Design and UX Design: What’s the Difference?
- Scrolling Interactions & Techniques – a few interesting observations about scrolling in different contexts
#Design
- “The Hidden Trap in Design Systems – We should define what the user needs first, then figure out how the design system applies.” yes yes and yes! It’s kind of the same when using a front end theme, understand problem first, chose the component after.
- Cards and Composability in Design Systems – an interesting read on building modular cards
- “Simple things designers can do to make their front-end developers happy“, according to this, devs should be really happy working with me hehe I even push the assets on the Gitlab report. Maybe I should write a “How to make designer happy” piece. Something like “respect the colours, typography, spacing and UI decisions. If you can’t code something, talk to me before changing it, we can find a solution together. Also I’d like to see the preprod before you send this code to the clients. Finally alignements matter”
#Front-End
“Layers and how to force them” on CSS animations and transitions. TL;DR: Unless you will change transform , don’t use will-change: transform. Use will-change: opacity or backface-visibility: hidden, as their side-effects are less disturbing on average.
#Responsive
“Demo your responsive site well” show it in real devices
#Accessibility
How to Create Interfaces that Benefit All: Accessibility Testing and Inclusive Design Principles. Interesting read with all of advice on colors text readability, focus and more.
Inspiration, fun demos and Great ideas
#Button
Some whimsical particle buttons for your website
#Typography
THE FEMINIST LETTERS, a typeface created to amplify the message advocating for gender equality. Each letter & number is specifically designed with purpose, calling attention to issues like equal pay, reproductive rights, women’s health, etc.
Tutorials
#CSS
- 7 Tricks for Improving CSS Performance
- A Look at CSS Viewport Units: vh vm vmax used to create heading sections that adapt to the screen size
#Modale
“Native Modals on the Web Using the HTML Dialog Element” nice demo but remember to be careful with modals, you need a good reason to stop user’s flow
Useful resources, tools and plugins that will make your life easy
#Grid #Flexbox
Flexbox fallbacks for popular UI solutions that use CSS Grid
#Sketch
Sketchize, a site to download mobile, tablet and desktop frames to print and help you sketch your sites and apps
#Fonts
Aww this is nice: Fonts.lol – A Color Font Type Foundry
