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
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!)
- #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.
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
Inspiration, fun demos and great ideas
#Mask #Costume #Marvel
This person created a Spiderman mask with mechanical lenses and it’s awesome!
- 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
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
Open Source Guides – Open source software is made by people just like you. Learn how to launch and grow your project.
Homerun’s guide to Diversity & Inclusion, how do you become more inclusive and diverse as a company
“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!!
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
From games to infographics, 5 online typography exercises to improve your skills