Pixels of the Week – November 25, 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: UX and gamification, mobile push notifications mistakes, mental models, PWAs, learning design, building user flows, check-out UX, building color palettes, design debug tool, personas, CSS in React components, cute icons, ordering CSS properties, tools and scripts for AI, machine learning, indeweb and performance.
You can follow me on twitter to get a dose of links every days.
I gave talks last week
Last week I was at Voxxed Days Thessaloniki and gave two talks:
- Hello my name is St�phanie on special characters and encoding issues on the web
- Cheating The UX, When There Is Nothing More To Optimize on perceived performance and user experience
TL;DNR the one you should not miss
Amazing site with lots of links and resources to start learning design, great for students and beginners – Degreeless.design – Everything I Learned in Design School”
Dear Front End Developers, Full Stack, any JS dev who needs to work with CSS at some point, this is super useful: The “C” in CSS: The Cascade
- Five Mistakes in Designing Mobile Push Notifications
- How—and When—to Use Gamification in Your UX. Interested examples. I’m still wondering if this works on most users or if people won’t get tired of everything becoming gamification?
- Gamification: A guide for designers to a misunderstood concept
- Mental models in product design – a great read on products, cognitive biases and psychology
- Creating Excellent UX Flow Charts – Illustrate complex processes by including use cases, actions, and life cycles
- Checkout Redesign & Optimization Case Study: don’t blindly copy big e-commerce like Amazon, do your user research, understand stakeholders as well, iterate on different solutions, test them, fail, rework
- Kill Your Personas – on building personas spectrum instead, inclusive design and empathy
#Front-End, #CSS and #JS
- Once More Again, CSS Property Order – I like to group them logically because most of the time I need to change something, it’s typography, placement or box color/background so having those I usually change together grouped makes sense to me ^^
- 5 Ways to Style React Components in 2019
- Difference between currentColor & Custom Properties, great read
Great read for design beginners and anyone who wants to build sites a and products with nice color balance: Building Your Color Palettes
Voxxed Thessaloniki – machine learning, AI and more
I really enjoyed several talks at Voxxed Dayd Thessaloniki last week and discovered quite a few tools and ressources, so I will put them all here in case you missed the tweets 🙂
- Jen Looper gave a really interesting talk: Human vs. AI: Build a Mobile App with Vue.js, ML Kit, and NativeScript
- Machine learning for mobile developers – ML Kit beta brings Google’s machine learning expertise to mobile developers in a powerful and easy-to-use package.
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
Jeremy Keith gave a really interesting talk about gaining back the control over your content. Here are a few tools
- indieweb.org The IndieWeb is a people-focused alternative to the “corporate web”, gain back control over your content!
- RelMeAuth is an authentication method that uses personal URL for identity that rel-me link to established OAuth provider(s) to perform the actual authentication.
- Webmention.io is a hosted service created to easily receive webmentions on any web page.
- brid.gy pulls comments, likes, and reshares on social networks back to your web site. You can also use it to post to social networks – or comment, like, or reshare – from your own web site.
Useful tools and plugins that will make your life easy
Cute. Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.
Emoji Builder but we can’t build one that pukes rainbows so this needs improvement to be perfect
Project VisBug, Okay this is SUPER cool, a tool to play with the design in the browser without needing to know code
Web.dev – an online tool to check your site against modern web capabilities like offline, PWAS, etc.