Pixels of the Week – September 8, 2019

This content is 5 years old. Remember that the following content might be outdated.

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: a guide to push notifications, good leadership, mobile navigation, the new GIMP, Firefox Dev Tool, understanding specificity in CSS, how Dropbox switched to Figma, design systems can’t be copied from one company to another, learning tricks, free videos and art for your projects, loading state buttons, Time to First Byte explained, custom elements for the web, typography errors to avoid, Data Driven Design killing our instincts, visual and product design, design principles, etc.

#Now – what I’m up to

This week I wanted to write a small article about push notifications. Me being me, I ended up writing a larger piece: The Ultimate Guide to Not F#!@ing Up Push Notifications. Enjoy 🙂 I’m also working on some case studies for the portfolio (because let’s face it, using dribbble and PDFs for case studies is a hack and I need better than that).  I’m also preparing my 2019-2020 version of my “Mobile UX and responsive web design” lesson for the University of Strasbourg while also preparing a small workshop for women entrepreneurs. So yes, I’m super busy, as usually.

TL;DNR the one you should not miss

#UX #mobile navigation

Bottom Navigation Pattern On Mobile Web Pages: A Better Alternative? — I like the idea but I wonder about complex multilevel navigation (e-commerce) and  I wonder if it’s not annoying with the browser controls at the bottom. When I say multi level I mean “ecommerce heavy home>category>subcategory>product list kind of stuff. For me this could be an issue. Let’s assume we are on a european site, we read bottom to top. Usually, the “main” navigation items will be on the top in this case. Let’s say you have the menu on the bottom. It opens bottom to top. If your screen isn’t high enough, some of the top navigations items will be hidden, you need to scroll to the top to see them. Then you want to open a category, depending on how it opens, scroll to bottom or top. Sub category, the same. I fear that with complex multi level navigations, bottom menu will be a whole mess of sub items opening, moving the menu and forcing users to scroll up and down. If anyone found an elegant solution to deal with that I’m super curious about this!!!

Interesting article

#Design System #Figma

  • Design Tooling at Scale – The story of how Dropbox Design migrated to Figma and structured their cross-platform design system. I want more stories like that!!! I’m wondering about switching for a project but not 100% convinced yet.
  • “Why a cookie-cutter design system won’t work for your organization” or why you can’t just copy paste another company’s design systems. A DS is a project by itself with a lot of people involved to tailor it towards your company/product’s needs.

#UX

#Data Drive Design

Data-Driven Design Is Killing Our Instincts – interesting opinion, read until the end there’s some good advice on when to rely on data vs when to rely on your instincts

#Design

  • “The power of visual in product design.” Images are powerful because they speed up data perception, retain data for much longer, trigger pleasure and guide attention and make user interface universal
  • A Pragmatic Approach to Design Principles – shared criteria for what good design means for product & marketing materials. They to help make design decisions, help keep all of visuals aligned, and to help decide what features are most important to focus on.

#Front-End

#Leader

What does tech leadership really mean? Good leaders spread the “power” to others rather than keeping it for themselves or a select group. It’s about doing the right thing, not bc someone might notice you, but bc it’s the right thing to do.

#Community #React

Facebook’s Open Source Community Is Reckoning With Toxicity and Harassment, the story behind Tatiana Mac’s recent issues with some people within the React community. Developers of Facebook’s ReactJS framework, which powers much of the web, have a bro culture that isn’t welcoming to traditionally underrepresented groups.

#Learning

“How to learn things at 1000x the speed” interesting tips even if you want to learn at regular speed

#Performance

“Time to First Byte: What It Is and Why It Matters” While a good TTFB doesn’t necessarily mean you will have a fast website, a bad TTFB almost certainly guarantees a slow one.

#Typography

5 sneaky typography errors to avoid

#Mario

Mario HTML, this is super fun and I’m still super bad at it 😅

Inspiration, fun experiments and great ideas

#Sorry

Sorry not Sorry, a site that uses WebGL to let you build nice dynamic sorry messages (and other messages). Also it works on mobile, yeahy!!!

#Design

Design VS Reality illustrations: We need this but updated to include stakeholders requirements, business needs and user needs 🔥

#CSS

Animated Verbs – a cool and fun codepen

Tutorials

#JS

“The Making of an Animated Favicon” that’s quite a small little detail but I love it!

Useful tools and plugins that will make your life easy

#Tool #Design

Glimpse Image Editor – New Fork of GIMP for Broaden Design Directions and Bug Fixes, plus a rewrite of the front end UI.

#Free videos #Free Illustrations

We all like free ressources, right? So here we go:

#Design #Chrome

10 best Chrome extensions for designers – Useful little list here!

Other articles you might enjoy:

Published on 8 September 2019

in Pixels of the Week (curated newsletter)

By Stéphanie Walter