Pixels of the Week – July 14, 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: better search, UX instagram accounts to follow, nested SVGs, ad-tech industry, watching Netflix at work, CSS clip-path, list makers and counters, open source guides, a diversity guide, typography game, a cognitive biases, etc.
You can follow me on twitter to get a dose of links every days.
TL;DNR the one you should not miss
#CSS
This week I wrote a little article on my blog: Fun places to learn CSS Layout – Part 2: Grid Layout. It’s a follow up to Fun places to learn CSS Layout – Part 1: Flexbox I wrote 2 years ago (wow, time passes).
(Also, if you are in Barcelona this week, I will talk at CSSCamp 2019. Let’s have coffee if you are at the event!)
Interesting article
#UX
- #Search Better Search UX Through Microcopy. For large-scale and e-commerce sites, the search experience is an increasingly critical tool. You can vastly improve the experience for users with thoughtful microcopy and the right contextualisation.
- #Ecommerce “How to Design an E-Commerce Website: From Homepage to Checkout“, a 18 minutes read with some examples to help you build your E-Commerce Website, from general tips all the way down to homepage, listing page, product page and checkout.
#Ad-tech Industry
Ever wondered “WTF is going on” in those related content image grids at the bottom of the articles your read”, here some interesting analysis of the dark underbelly of ad-tech: Taboola, Outbrain and the Chum Supply Chain
#Career
You don’t have a career. You have a life 🙂
Inspiration, fun demos and great ideas
#Geometric
Beautiful optical illusions geometric 3D street art pictures
#Mask #Costume #Marvel
This person created a Spiderman mask with mechanical lenses and it’s awesome!
Tutorials
#CSS
- Animating with Clip-Path, a in-depth article on help you build fun clip-path animations, I really like the spotlight one.
- Rachel Andrew takes a look at lists in CSS and explains some quite interesting features defined in the CSS Lists specification: markers and counters: CSS Lists, Markers, And Counters
#SVG
Mimic Relative Positioning Inside an SVG with Nested SVGs, a really in dept tutorial by Sara Soueidan with a cute little bird example
Useful tools and plugins that will make your life easy
#UX
If you are on Instagram and interesting in design and UX here are 2 accounts to follow:
UX gems and UX Bites
#OpenSource
Open Source Guides – Open source software is made by people just like you. Learn how to launch and grow your project.
#Diversity
Homerun’s guide to Diversity & Inclusion, how do you become more inclusive and diverse as a company
#Netflix
“Watch Netflix at work by making it look like you’re on a conference call” haaa some people have a lot of creativity when it comes to solutions to not work!!
#Biases
Pocket Biases – A web app that lists and categorizes every cognitive bias so that you can have them in your pocket and access them everywhere
#Typography
From games to infographics, 5 online typography exercises to improve your skills
