Pixels of the Week – April 13, 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: projects gone wrong, gradients inspiration, CSS focus-visible pseudo class, contextual toolbars design, designing emotional interfaces, CSS paint and parsing, a nice iconic font, Pitfalls of Card UIs, coding for designers, a corporate lorem ipsum, date picker design, Fonts for Complex Data, mobile pop-ups, email coding.

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

I published something this week

My second article on the pastry box project in online: Making it pretty will not make it usable –  a tale of unfortunate events and bad decisions that sent a project straight to hell. Sit down, get comfortable and let me tell you the mistakes I hope to never make again.

TL;DNR the one you should not miss

#Icons

Fontisto, An iconic font and css toolkit with more than 552 free icons that can also be animated

Interesting article

#UX / UI

• “Contextual Toolbars Deep Dive” a super interesting case study on designing toolbars.
  I had to design one for a portable ultrasound UI once, really difficult task if you want to keep it simple and usable while providing different drawing options
• “How To Design Emotional Interfaces For Boring Apps” I too loved the Google Calendar little illustrations when they updated their app, efficient and delightful way to bring fun in the app
• Pitfalls of Card UIs – An optimistic design choice that ends up compounding complexity
• Date Picker Design – interesting case study on building a complex date input with range options
• Designing apps for young kids, a really interesting article
• “Are Mobile Pop-Ups Dying? Are They Even Worth Saving?” As a user I would answer “make them die” but it’s not that simple. Here are some nice tips on how to build pop-ups that won’t be too intrusive: size, ability to close them and timing are important.
• Some instagram deceving pattern to  tricks you into syncing ALL of your contacts when picking a username

#Front-End

• “:focus-visible and backwards compatibility“. Once all browsers support :focus-visible, for situation where an indication of focus as a result of a mouse/pointer click is deemed undesirable, we’ll be using :focus-visible where previously we used :focus.
• “How CSS Works: Parsing & painting CSS in the critical rendering path“, easy to read article and a must read for anybody writing CSS! You need to understand how it works to build it in an efficient way
• Be careful what you copy: Invisibly inserting usernames into text with Zero-Width Characters, an interesting technique if you need to know who leaked your information ^^
• Why would you do that in CSS? Because it’s fun to explore ^^

#Typography

Fonts for Complex Data, disclosures, disclaimers, and lists of ingredients: what font should be used to make them easy to read?

Inspiration, fun demos and Great ideas

#Gradients

A few examples where the gradient trend works pretty well

#Illustrations

Dating Life and other cute cartoons on War and Peas

Tech news

#Google

Google is officially testing ‘more results’ button to load more search results – let’s see how this goes

Tutorials

#CSS

Scooped Corners in 2018. I love it when people play with the limits of CSS and SVG to build great things. Also, big kittens in the article

#Email

New to email coding? Here’s where to start: tutorials, tools to help you and great ressources

Useful resources, tools and plugins that will make your life easy

#JavaScript