Pixels of the Week – February 23, 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: mobile UI inspiration, measuring aesthetics as UX metrics, CSS positioning, a critique of design thinking, responsive typography systems, UX workshops vs meetings, design process, a “same HTML different CSS” experiment, why JS is eating HTML, CSS & hover on touchscreens, styling buttons, links, inputs, etc.
#Now – what I’m up to
I will give a workshop on mobile UX on March 6, 2020 in Brussels. There’s still a few seats left and you can get a 15% discount with the code “stephanie15”. You will learn how to build a usable user centric mobile app, from guerrilla user research to quick prototype and testing.
On the blog, I published: my selection of 15+ Resources to help you find inspiration sorted by UI Patterns, Components, Flows and App Category.
Totally unrelated: this week I was playing with Procreate on the iPad and made my first animation: “Not my f***** job”. Feel free to use it if you need to.
T;DNR the one you should not miss
#UXDesign
“UX debt is an accumulation of design and development decisions that negatively impact the users of a product or service.” Based on the reasons in the article I’d say that many projects also create this debt from the beginning and it accumulates. Time pressure, unrealistic constraints, ignoring standards, misinterpreting product vision, skipping user testing, design by committee, poor communication or documentation, etc. All of that can happen from the very first day of the project and continue all the way till the end
Interesting article
#Design Process
“How to redesign, step by step guide” this article nicely sums up my design process as well, it will help you (or have colleagues, stakeholders) understand that design is not just nice pixels at the end of a project but a process all along
#UX Design and Research
- “UX Metrics: Why not measure aesthetics?” Interesting scale. When I was working for the University we measured it for a students’ interface with a scale in a 5 second test, it was also a nice way to see what was the first reaction towards the aesthetics or the new UI
- Survey’s Up! A great wrap up by Erika Hall about why surveys often seem easier on the surface than other types of research but can take much more effort to get them right. The complexity lurks in the deep
- UX Workshops vs. Meetings: What’s the Difference? Meetings are for people to share information. Workshops are for solving a problem. Purpose, scope, length, structure, and preparation differ for each.
- “UX Debt in the Enterprise” an interesting Excel template tool to help you calculate the dept of your products and services (and a reminder of differents levels of UX maturity). I think this template could inspire me some of my own for current projects
#Design Thinking
“On Design Thinking” an amazing essay that goes back to the roots of design, the creation of “design thinking” and the use of this methodology to solve a city’s problems. This is a great critique of industrialised methods and their limits.
#Front End
- Why JavaScript is Eating HTML, a great wrap up that covers HTML in JS, imperative vs declarative programming, why and when using such frameworks (like React) is great and when you should not use them.
- Toward Responsive Elements, why Container Queries is a super complex topic for browsers and a some progress that was made into that direction.
#CSS #Mobile
Finally, a CSS only solution to :hover on touchscreens – TL; DR: It’s @media(hover: hover) and (pointer: fine) {}, but the specification has not been finalized yet.
#CSS Naming
“Typography in Design Systems” an article from SuperFriendly on typography systems and finding name for those classes
Tutorials
#Front-End
- Back to basics folks, here is a great article on links and buttons, accessibility considerations and how to style them. It’s not that hard I promise you, no more excuses, share this with front end coworkers, beginners and experimented
- To continue in the series of “HTML and CSS basic styling“, here is an article to help you style Form Inputs. Just be careful about accessibility with form elements and don’t forget to link labels to inputs, thank you.
#CSS
“CSS Positioning” a nice introduction to CSS positioning with cute illustrations
#CSS
“Same HTML, Different CSS” a reminder of the power of CSS when it comes to styling the same element différents ways, sort of like CSS Zen Garden but on a component level.
Useful tools and plugins that will make your life easy
#Typography
“5 monospaced fonts with cool coding ligatures” if you are looking for your next IDE font 🙂
