These days it feels like the word "skeuomorphic" is used to cover all of these things:
1) Visually rich vs. visually simple
2) Depth effects vs. flat
3) Mimics physical materials vs. doesn't
4) Mimics physical appearances like light effects It feels like "skeuomorphism" is too vague. By the original definition I don't think e.g. a button that looks like it's made of wood is skeuomorphic.
I say that because I don't think anyone's familiar with buttons made of wood, pre-software (ignoring wood veneer on plastic).

Here are 12 of my favourite light websites, in alphabetical order.
1) @attio's website is full of fine detail and interesting touches. They use colour only when they have to. Nowhere to hide, and they pulled it off. 2) @calcom picked a bold visual style, with even less colour than Attio, and leant into it fully. A balance of "bold" and "fun" that must have been hard to strike.

I've seen career advice from a lot of respected designers over the years. It might help if I summarise it here:

If you don't learn business, product management, research, facilitation, high fidelity wireframing, advanced sketching, advanced Figma features, graphic design, ... ... how to sell your work to your colleagues, visual design, design systems, animation, 3D modelling, Origami prototyping, HTML/CSS, coding, no-code tools, and public speaking, you're falling behind as a designer.

When I see a video like this, I'm struck by the fact that a good film director finds it easy to talk about the mechanics, the inspiration, the decisions behind every frame of the entire film. They're can explain it all.

I see that so rarely in interface design.

https://twitter.com/hobdaydesign/status/1671544800615571458

And I know that interface design is usually not art in the same way that a film is. But I'd argue there are still hundreds if not thousands of decisions in every interface that can be explained, and that aren't obvious to a casual observer.

It feels like there's a broad split when it comes to interface design decisions?

"Here's the purpose of the design, what styles can I use to suit that purpose?"

"I want to use this specific element, so what styles will support that and suit the purpose?" It's easy to assume that the second approach is less good because you're starting with the solution, not with the purpose.

But I think for any given purpose, there's probably many solutions that work well. So maybe it's just as valid?

I found the @rekkiapp website. I like it.

It triggered a memory and I realised this was the company that made some waves in the design community with an earlier version of their website.

So let's talk about that, and make some possibly-wrong assumptions on the way. The new website is full of colourful photography that relates strongly to the purpose of the app: restaurants use it to order food. Lots of text as well to explain that concept.

I went through the Wayback Machine to see earlier versions of their website.

Someone bought me a book about the rules of comedy. I've always been comfortable with comedy, so as I skimmed through the book I thought, "this isn't really for me. I know all of this instinctively."

I realised the same is probably true for a lot of my work understanding design Design didn't come naturally to me, so I put a lot of effort into understanding every concept, how the concepts fit together, how you can talk about them clearly, etc.

I imagine some designers feel the way I did about the comedy book: "why bother? this is instinctive".

One interesting concept in interface design is that an element might need to serve different needs depending on when/how a person looks at it.

e.g. a table of data. Maybe the most important column on one day is the price column, and on the next day the order ID column. Yesterday I tweeted about how Cultured Code realised that the calendar widget in Things 3 needed to serve a different purpose when the person was scrolling through it quickly:

https://twitter.com/hobdaydesign/status/1670753374147428352?s=20

In the past I've read about "thoughtful" design. I've used the term myself. But I realised today I hadn't really thought about what it meant. I had assumed it meant something like "a designer really sits down and thinks about what someone else would want from an interface". But I also realised that I basically never do this. When I start a new project I don't have a dedicate stretch of time where I sit and think through the best way to design an interface, or part of an interface.

If you're interested, here's what I do to keep on top of the world of interface design.

1) I subscribe to two newsletters:
HeyDesigner (heydesigner.com)
UX Design Weekly (uxdesignweekly.com)

I open all of the links and scan through them to see if they interest me. 2) Every Wednesday I open the following landing page collections and look at the latest websites added.

lapa.ninja
land-book.com
saaslandingpage.com
siteinspire.com

I've tried a lot of inspiration sites, and these 4 suit me best.

The @stripe sessions website goes hard. It demonstrates the lengths Stripe is willing to go to when it comes to web design. Here are the details that catch my eye.

I'll get the small details out of the way first, before I spend far too long on colour, which is the star here. 1) The swirly thing that's impossible to miss is animated. The Stripe logo and "Register" button on the right hand side have "hidden" rectangles behind them in case the swirly-thing comes into contact. This helps readability, but doesn't affect the design otherwise.

Here's what I like about the @joinwarp website.

1) Generally the website is simple, with good attention to detail. It doesn't try to do anything fancy, nor should it. But there are a few subtle expressive touches I'll call out.

This is my kind of design. 2) You might have noticed in the previous tweet that the product screenshot is angled towards the top of the screen in the first view, then as you scroll down it straightens out. The angled screenshot acts as almost a literal visual "ramp" to the next section of the website.

I haven't really talked about it from this angle, but I think another sort-of requirement for world-class quality is either a small audience, or a narrow use case. The more people you need to support, the more features they needed added, the worse the quality gets. A narrow use case might be a simple note taking app that comes bundled with an operating system. So it's not that a large audience guarantees bloated software. It just means there's more pressure to add features, unless the use case is clearly narrow.

I'm interested in the "mechanics" and thought behind screen-change animations. Here's the WhatsApp iOS app. It makes me think lots of things, so here's a thread. 1) By default I assume that the best approach to animation/navigation quality is "object constancy", where objects feel like they exist as physical objects in the sense that they can't just disappear. They go somewhere to "hide", and may be brought out again later.

This article, from @GK3, is solid gold. It dives into the mechanics of software quality at scale, and why it's hard.

It's an optimistic article, and offers approaches you can use to improve quality at a big company.

gk3fyi.substack.com/p/the-cost-of-… I take a more pessimistic view than George. I believe quality is IMPOSSIBLE at scale.

Partly because I think humans cannot act in perfect harmony past a certain number of relationships. We will always be the flaw.

And partly because I want someone to prove me wrong.

In visual design there's a vague concept of "visual interestingness". In this example there's an application interface and it's split into a menu and a main section by a grey divider. This is simple and it works. But I'd argue it's not visually interesting. Now let's switch from the divider to a background colour fill for the menu section. There's a noticeable benefit in that you've added depth: the main section feels closer because it's lighter, and therefore more important.

Sometimes you might design an "abstract" representation of an interface, and you don't want to use real text. One approach is to use solid blocks that look like text.

Here I've got a block the same width, height, and colour as the text above it.

The problem is it's too dark. To show you how much darker it is, I've overlaid it with a white layer set to 50% opacity and a background blur value of 20.

This is the equivalent of a "squint test", but this way you don't have to squint.

You can see the block is much darker.

Here are some ways you can visually separate an application interface into "sections.

Note that I've used a hard black for dividers so you can see them easily. Often these would be more subtle.

1) Full dividers, which stretch from edge of section to edge of section with no gaps 2) Part dividers, which stretch from edge to edge but have gaps at either end.

I'm impressed by @echojanz' design skills.

First I came across the Ahead app website (aheadapp.vercel.app). This hero section is my kind of simple.

Nice use of a bottom-right CTA button to keep the top clear. But as you scroll down to the bottom the bottom-right button fades out to make way for this giant "Join beta" action.

What I love about it—apart from the giant text—is that the floating button from before set the expectation that "orange = interactive". A great hand-off.

You can think about interface elements in terms of "meaning"—what do they mean to a person?—and "effect"—what effect do they have on a person?

e.g. a word has meaning, but not a lot of effect. A splashy gradient doesn't have much meaning, but a big effect. Elements can have both meaning and effect. And you should prefer elements that have both.

You should also avoid elements that don't have either. If something doesn't mean much and doesn't have much of an effect, why is it in your design?

Someone sent me a question about imagery in website hero sections, so here's some thoughts/ideas/inspiration, with examples.

1. The standard approach is to have text content (headings, text, buttons) and imagery (photos, illustrations) side-by-side. 2. A tweak on that approach is to match the imagery on the right to the shape of the text on the left.