Pixels of the Week – September, 2020
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: some paper prototyping resources, information architecture and priority, CSS animations and transition demo, signage typography, responsive beyond media queries, accessibility standards, measuring scales and colors, a fun game, the CSS 100vh iOS bug, a cute rounded font, intrinsic value of a product, the 8pt grid, information architecture and tomatoes, colors and dataviz, winamp skins for nostalgic people etc.
#Now – what I’m up to
🔥 I finished my CSS transition & animation demo, 100% CSS + SVG + HTML.
Left is a transition between day/night, built with CSS transition. Right is built with CSS animations. All fully responsive. 👀 Link to the codepen demo if you want to look at the code
TL;DNR the one you should not miss
#Tools #Prototype
If you are into paper prototype, here is a website where you can download some templates for different devices to print and prototype.
Interesting article
#Information Architecture
Consider the Tomato Information architecture is hard, this is a brilliant article on IA and mental models as well haha tomato would make a great example to explain this to students
#Grid
“How to create stronger layouts with the 8pt Grid.” I don’t know if the design “looks” better with a 8pt (or px) grid, but I find it useful because you can also get 4 (x0.5) and 12 (x1.5) which help have more options especially for responsive 🙂
#Design #InformationArchitecture
“Don’t draw the UI, draw the priority“. Many people want to jump straight into pixels and drawings, but this is so true, most of my designs start with a list of the content and content prioritization, simple, yet powerful.
#UX #Measure
Does coloring response categories affect responses? Across two studies with 413 participants they found that adding colors to designate promoter/passive/detractor categories had only a small effect on scores
#Colors #Dataviz
“How to pick more beautiful colors for your data visualizations” – Common color mistakes and how to avoid them” a lot of good advice here for graphs and dataviz
#Accessibility
WCAG 2.1 Is the Current Standard, Not WCAG 2.0 — and WCAG 2.2 Is Coming. What framework do you use? WCAG is older. What library do you use? WCAG is older. What content management system do you use? WCAG is older. There is no reason not to have expected updates to WCAG.
#CSS
” Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs ” this is really cool, I was playing with clamp() for sideproject and it helps a lot with responsive typography!!
Don’t Be a ‘Reply Guy’, a got many of those, sadly, one day I will finish my “how to interact with me like a human on social medias” page
Inspiration, fun experiments and great ideas
#Typography #Architecture
Cool Modular Signage for the National Library of Luxembourg
#Game #Fun
Enjoy this colourful little game ** Be careful there’s a LOT of color and motion, if you have vestibular disorder or are prone to seizure, avoid it.
#SEO #Fun
I love that fun ideas: “The anti search engine optimization search engine. Skip Google’s page one and get better results.” by @meowlivia_ and @shantanuraj
#Nostalgia #Retro #UI
Behold, the winamp skin museum!! Sometimes I do miss those all over the top designs to be honest, I feel like the only place where you still get those are in video games
#Redesign #Inspiration
Ha I missed toggl’s redesign. I really like the new logo and the “ice cream” colors work well (except for the accessibility contrast issues when used as text/background). Also the font used for titles (GT Haptik) is JUST delicious, I love the R and 0!!
Podcasts
#ProductDesign #Podcast
“The Intrinsic Value of a Product” explained with donuts by @lauraklein and @katerutter. I loved this episode, but I hope you had breakfast before listening to this, because I am hungry now!!
#Podcast
“Get Paid” when to ask to get paid or not, the answer isn’t “demand cash all the damn time” like you’d think it ought to be. It depends on a lot of criteria, still stop trying to pick people’s brain for free if you make money out of this! If you ask someone for their expert opinion on a specific topic related to your product: this is consulting, and they should get compensated for that. If you ask someone to come to talk to your company in front of your employees to teach them something: this is teaching, it should get compensated. The internet is free of generic advice, but if you come to someone with a specific problem and ask them to solve it, compensate them 🙂
News in the industry
#Illustrator #iPad
“Illustrator on iPad: designer Yiying Lu bridges art and technology” also illustrator for iPad is now available as pre-order on the apple store!!! Congrats to the whole team!
Tutorials
#CSS
A way to avoid the famous 100vh iOS bug
Useful tools and resources that will make your life easy
#Typography #Fonts
If you read this in the morning, how about this Gluten font to go with your coffee?
#Design #Inspiration
