Pixels of the Week – July 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: adding product features, storyboard and UX, Flexbox cheatsheet, PWAs, UI trends, illustrations, front-end checklists, gradient editor, common design mistakes, company UX maturity, CSS pointer events, better design laws, making a better experience for queer people, CSS font variables and more.
You can follow me on twitter to get a dose of links every days.
TL;DNR the one you should not miss
#Flexbox
The Complete Illustrated Flexbox Tutorial
Interesting article
#UX and #UI
- Storyboards Help Visualize UX Ideas
- Fake UX Jobs and how to Spot Them (and avoid them) – really great read on the topic of company UX maturity and how to spot the right company for you
- 10 steps for a better queer user experience – yes, yes please!! Also rule number 10, diversity helps make better products !!
#Design
- A must read for design students and people who want to get better at design, it’s mostly about whitespace, typography, contrast and content hierarchy “Common webpage design mistakes“
- 6 Laws that Help You Create a Better Design
- How to add product features without making it more complex
- It’s always nice to be aware of trends (doesn’t mean you need to follow them ^^) 10 Popular UI Design Trends on Dribbble in 2018
#Front-End
- Fractional, Ethan Marcotte on the CSS fr unit, grid layout and responsive design
- Stuff you can do with CSS pointer events
- Weird things variable fonts can do, from changing weight to changing the hat of Mr Poo. Yep.
#Illustrations
#PWAs
Progressive Web Apps 101: the What, Why and How
Useful tools and plugins that will make your life easy
#Icons
Streamline 3.0 is out!! Vincent cooked you more than 30 000 icons in light, regular and bold, with Sketch, Hotjar, Figma integration and moooar <3
#PWA
PWACompat, a library that takes your Web App Manifest and automatically inserts relevant meta or link tags for icons of different sizes, the favicon, startup mode, colors etc. Be careful with some iOS features though, read @firt’s article on the topic
#CheckList #FrontEnd
3 Essential Front-End Checklists for Web Developers
#Gradient
Keep it cooooool, gradient blend mode style: gradientsguru.com
#SVG
A library of free SVG reusable drawings
