Pixels of the Week – September 8, 2019
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!!!
#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.
- What UX Writers and Designers Can Learn from Street Signs – fun analogy
- “When You Need to Show a Button’s Loading State” the concept of meeting a button and a progress/loading indicator. What do you think?
#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
- “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.
- Custom elements for the immersive web– introducing the first set of custom elements for the immersive web they have been working on: <img-360> and <video-360>
- Understanding Specificity in CSS, using a company analogy for CSS specificity
- Firefox dev tool gives you contextual information about why a property has no effect on a specific element in its own context
- “CSS Can Do This… And It’s Terrifying!” CSS Keylogger (with the help of a little JS), implementation of rule 110 with CSS and HTML to make it Turing complete, user tracking, etc. A few things you can (but doesn’t mean you should) do with CSS
- Useful little tip: Can you view print stylesheets applied directly in the browser?
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.
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.
“How to learn things at 1000x the speed” interesting tips even if you want to learn at regular speed
“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.
Mario HTML, this is super fun and I’m still super bad at it 😅
Inspiration, fun experiments and great ideas
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 VS Reality illustrations: We need this but updated to include stakeholders requirements, business needs and user needs 🔥
Animated Verbs – a cool and fun codepen
“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
Glimpse Image Editor – New Fork of GIMP for Broaden Design Directions and Bug Fixes, plus a rewrite of the front end UI.
FakeClients – a tool to generate fake client briefs to train as a designer
#Free videos #Free Illustrations
We all like free ressources, right? So here we go:
10 best Chrome extensions for designers – Useful little list here!