Great site by Corey Ginnivan for testing color contrast under different vision conditions like color blindness, cataracts, and glaucoma, and situational conditions like direct sunlight.
John Gruber spent some time with the new MacBook Pro:
It feels a bit silly to be excited about a classic arrow key layout, a hardware Escape key, and key switches that function reliably and feel good when you type with them, but that’s where we are. The risk of being a Mac user is that we’re captive to a single company’s whims.
Great that they fixed the keyboards, but I’m guessing repairability hasn’t improved. My 2014 MacBook Pro’s battery started expanding recently, and I was surprised to learn that a battery replacement isn’t a simple job, even for this older generation. The battery is glued in place, so replacing it means an entirely new top case, keyboard, and trackpad — and in my case a week without my computer. That’s bad design too, and a side of it that Apple isn’t getting enough flak for.
Jason shared some thoughts on designing progressive web apps. One of the things he’s pondering is how much you should try make your web-based offering look and feel like a native app.
This was prompted by an article by Owen Campbell-Moore over on Ev’s blog called Designing Great UIs for Progressive Web Apps. He begins with this advice:
Start by forgetting everything you know about conventional web design, and instead imagine you’re actually designing a native app.
This makes me squirm. I mean, I’m all for borrowing good ideas from other media—native apps, TV, print—but I don’t think that inspiration should mean imitation. For me, that always results in an interface that sits in a kind of uncanny valley of being almost—but not quite—like the thing it’s imitating.
People have been gleefully passing around the statistic that the average number of native apps installed per month is zero. So how exactly will we measure the success of progressive web apps against native apps …when the average number of progressive web apps installed per month is zero?
Marcy Sutton is collecting good examples of websites and interfaces where accessibility and beautiful design go hand-in-hand. Subscribed.
Terence Eden explains how different screen technologies, human biology, and fingerprint grease make “pixel perfection” a pointless goal:
There is no grid. There never has been. You can align to theoretical pixels - but as soon as the image hits a physical screen, it will be adjusted to best fit reality.
An obsession with pixel perfect rendering is futile.
Every Layout expands on this idea, specifically as it pertains to CSS:
Suffice it to say that, while screens are indeed made up of pixels, pixels are not regular, immutable, or constant. A
400pxbox viewed by a user browsing zoomed in is simply not
400pxin CSS pixels. It may not have been
400pxin device pixels even before they activated zoom.
See also: Ian Mallett’s Subpixel Zoo: A Catalog of Subpixel Geometry.
Ollie Williams welcomes the new CSS properties for styling underlines:
Finally we can demarcate links without sacrificing style thanks to two new CSS properties.
text-underline-offsetcontrols the position of the underline.
text-decoration-thicknesscontrols the thickness of underlines, as well as overlines, and line-throughs.
I’ve been working on a blog post about this topic, and Ollie does a good job of covering some of the points I want to make. But I want to go further and explore implementation quirks, the details where the new properties don’t quite go far enough, and make a case for why underlines shouldn’t be pixel-aligned.
PC Gamer’s Steven T. Wright interviews Lucas Pope on the process of creating Return of the Obra Dinn:
“When you’re developing a game as one person, you have a lot of advantages and a lot of disadvantages,” he says. “One of the advantages is that you can afford to make a game for two years without even really knowing what it is, which is exactly what I did. One of the disadvantages is that you have to do something different visually to stand out. This means I have to solve all sorts of problems that nobody else has solved, at least recently. But I think that can be fun in its own right.”
The game’s development seems to have been more of a process of discovery and improvisation than one of decisive creativity. That explains a lot.
Chris Coyier’s latest talk puts all the complexity of modern front-end development in perspective:
All the very huge responsibilities front-end developers already have:
- Pulling of the design
- Making the design part of a system
- Making sure it is accessible
- Worrying about the performance
- Testing things across browsers
- Testing things across devices
- Sweating the UX
Oh hello, big pile of new responsibilities
- Component-driven design, designing our own abstractions
- Site-level architecture
- Fetching our own data
- Talking to APIs
- Mutating data
- State management
Kyle Wiens makes a great point:
[Dieter] Rams loves durable products that are environmentally friendly. That’s one of his 10 principles for good design: “Design makes an important contribution to the preservation of the environment.” But Ive has never publicly discussed the dissonance between his inspiration and Apple’s disposable, glued-together products.
When a single broken key requires replacing a laptop’s entire top case, there is no denying that Apple has given too little consideration to the durability of its products.
I’m extremely curious to find out how (if?) Apple’s design philosophy will change with Ive gone.
Great interview. Frank Chimero is always thought-provoking:
Everyone has their lean years, but I think they make a poor compass. You can always work more. We need to disabuse ourselves of the thought that work is the solution to our problems, or that by keeping up we are getting closer to something worth having. Being more active is not being freer. I won’t romanticise those months on peanut butter and jelly as freedom, but I can confidently say that in retrospect the problems of that time were no better or worse than the ones I’ve experienced at the peak of my successes.
Heydon Pickering and Andy Bell have created a terrific resource for CSS layout patterns following algorithmic design principles.
We make many of our biggest mistakes as visual designers for the web by insisting on hard coding designs. We break browsers’ layout algorithms by applying fixed positions and dimensions to our content.
Instead, we should be deferential to the underlying algorithms that power CSS, and we should think in terms of algorithms as we extrapolate layouts based on these foundations. We need to be leveraging selector logic, harnessing flow and wrapping behavior, and using calculations to adapt layout to context.
This approach is precisely what I’ve been striving for ever since Jen Simmons’s Intrinsic Web Design talk from last year.
When I’m asked to describe design systems work, I say the word that springs immediately to mind is mapmaking. As designers like Matthew Ström and Alla Kholmatova have argued, every website has a design system underneath it. Take yours, for example: your website’s interface is built from a library of components, each shaped by a series of design decisions and business needs. Your design system may not be explicit—maybe you don’t have a polished pattern library, or a set of well-defined design principles, or maybe your documentation’s not as robust as you’d like it to be—but it’s still a system. And in order to improve that system, you have to research it before you can begin to gradually, slowly improve it.
Underlines, the standard, built-in signifier of hyperlinks, the core feature of the web, are beautiful.
This is objectively true. They are aesthetically one of the most delightful visual design elements ever created.
They represent the ideal of a democratized information system. They are a frail monument to the worldwide reach of ideas and discourse. They are proof of our ascension from trees and swamps, a testament to our species’ intelligence, and a witness to our inevitable downfall.
In this 2019 GDC session, Subset Games co-foudner Matthew Davis details the Into the Breach design process from early drafts to the final balancing decisions. Davis dives into years of cut content and iteration to show how Subset Games approached the difficult design challenges of making Into the Breach.
I was just reminiscing about this a few days ago. Nine years later, @lorenb’s Twitter for iPad is still unmatched. Devices are now several times more powerful, yet the experience of using Twitter on the original iPad is the best we ever got.
Something easy to forget about Twitter for iPad is it wasn't just the sliding panels design, it has some of the best gestures and nice little interactions of any app I've used.https://t.co/RspBi0XFFf pic.twitter.com/anKY6D9SeW— iKyle (@Freerunnering) April 19, 2019
The Galaxy Fold is the kind of device that a random user might think is interesting in the abstract. It’s a phone. It’s a tablet. It folds in half!
But good product design is not about letting your users design your products for you — it’s about solving users problems and making their lives better.