Pixels of the Week – February 10, 2019
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: dynamic text overlay on images, designing complex tables, work effectively with designer/ engineers, UX portfolios, sticky positions in CSS, SVG text animations, SVG filters, Sketch plugins, thoughts on Jobs to be Done, beautiful happy 2019 interactive card, typography cheat sheet, life without Google (Fonts), becoming a design manager, etc.
You can follow me on twitter to get a dose of links every days.
TL;DNR the one you should not miss
#CSS #JS
How to make Dynamic Text Overlays on Images => a JS + CSS way to change the text color when used on an image to have better contrast for accessibility and readability
Interesting article
#UX
Jobs To Be Done: An Occasionally Useful UX Gimmick — on why jobs to be done fail, the lack of research and that tool being used as a shortcut to avoid doing user research
#UX #portfolio #casestudies
Best of UX Design Case Studies 2018, if like me you are updating your portfolio and lack inspiration
#UI Pattern
How To Architect A Complex Web Table – a very detailed article on how to build tables with a focus on modular design, molecules and components and responsive
#Design #Relationship
“How to work effectively with engineers ” I would say bring them food and get them involved in design, but food first ?
#CSS #Sticky #Fixed
- Another great read on fixed positions “Position: stuck; — and a Way to Fix It” The shortcomings of position: sticky; when working with overflow.
- CSS Position Sticky – How It Really Works!
“Life without Google (Fonts)” I agree with the core message, but for fonts, if devs provide a fallback in the font stack like they should, the blank screen without text in the article should not be possible, or did I miss something?
#Internet
“Why isn’t the internet more fun and weird?” I miss those days 🙁 The internet added <canvas />, but the internet stopped being one.
#Management
Becoming the first design manager – sometimes you ask for the job because you have the qualifications, sometimes you just do it, learn while doing at this is how you grow.
Inspiration, fun demos and Great ideas
#Interaction #Illustration
Nomadic Tribe – Dreamy beautiful experience in the browser, if you like point and clicks and design, this is for you .
#Animation
This snail progress bar by Andrey Davlikanov brought a lot of joy in my Friday afternoon, I say we keep it, shall we?
#inspiration #typography
Pure CSS lettering, a bad and fun idea
Tutorials
#CSS #SVG
- “Animate a Blob of Text with SVG and Text Clipping” this is sooo many levels of awesomely cool .
- The Many Ways to Change an SVG Fill on Hover (and When to Use Them) – cool techniques with different filters. I nevertheless wonder about maintainability, you need to document the hell of the filter to remember what color it will produce 😮
#CSS #Scroll
Applying Styles Based on the User Scroll Position with Smart CSS
#UI
Tip when using small text labels ?Use sentence case instead of upper case: Long text is more readable in different languages, screen-readers read it normally as “label” not “L-A-B-E-L”, easier to parse & less cognitive load to decipher letters. Therefore it’s more accessible.
Useful tools and plugins that will make your life easy
#Typography
Typographical cheatsheet – because it isn’t “the round thing on the bottom left”.
#Designer
Blacks Who Design highlights all of the inspiring Black designers in the industry. The goal is to inspire new designers, encourage people to diversify their feeds, and discover amazing individuals to join your team.
#Sketch
