neumorphic buttons

[Rich-Harris]

A major flaw with the current site's usability is that it's very hard to know what's a button and what isn't. For example these look the same, even though only one is a button:

This is in fact an endemic problem in modern web design:

Our campaign to rid the design of unnecessary boxes and borders and shadows and backgrounds and other assorted bullshit creates space for us to use them where they're actually beneficial. I think the best approach for us is a subtle neumorphic treatment that can be applied to anything pressable:

This is WIP, it currently only applies to those buttons in the top right, and there are some sizing/positioning/rounding details to fix. But I'm encouraged by the overall direction.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
omnisite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 7, 2024 5:56pm

[benmccann]

looks like we need to run prettier on base.css

[benmccann]

can't say I'm a huge fan of them being raised to be honest

[Rich-Harris]

what would you propose instead?

[dummdidumm]

Neumorphic buttons are too hard to pull off IMO, I prefer the version on main (though we should use sans serif on the buttons)

[benmccann]

We've really removed a lot of borders and unnecessary styling elsewhere so I think the less we can do with the buttons the more it aligns with that. I agree the preview site is confusing, but I haven't found it to be an issue with the main repl, so would be okay with it as it is. If we experiment with other styling I'd probably try to keep it minimal like a 1px light border with slight color difference between the button and where it resides

[Rich-Harris]

We've really removed a lot of borders and unnecessary styling elsewhere so I think the less we can do with the buttons the more it aligns with that

We've removed that stuff so that we can use them where we need to for the sake of usability.

keep it minimal like a 1px light border with slight color difference between the button and where it resides

The point is that flat design doesn't do a good enough job of communicating 'button'! And using different background colours gets noisy IMHO. Adding a little depth makes all the difference when distinguishing between buttons, links, and everything else

[dummdidumm]

Still not sure this is the right direction. On most pages we got none of these, on the playground we got a lot of them, and it's a bit weird how the theme toggle is elevated and distracts my eyes a bit that way.

[Rich-Harris]

It's a work in progress! I haven't done anything outside the top right of the playground yet. I'm going to stop opening PRs that aren't finished

[Rich-Harris]

tweaked things a bit but this is kinda blocked on #235

[dummdidumm]

I'm going to stop opening PRs that aren't finished

I think it's fine to open unfinished PRs to get early feedback. We could even get too invested in PRs just because we did so much work already even if others don't like it.

Maybe my sentence was misleading: by "On most pages we got none of these, on the playground we got a lot of them" I meant that the playground is the one page which has all the buttons, and all other pages have little to no buttons - in general, unrelated to this PR. So regardless of how finished this PR is, this will always stand out because you're rarely encounter neumorphic buttons on our site except the playground

[Rich-Harris]

There's stuff like this...

...and all the dropdown toggles and things like that. I also think we could probably ditch the fullscreen button in the playground so that the menu is a bit less busy in the first place

[Rich-Harris]

Either way lemme know your thoughts on #235, would be good to get that in to unblock other tweaks

[benmccann]

The buttons look better to me now as they appear more subtle

The "Hello World" feels kind of detached and unclear what it is

I also think the buttons look sort of misaligned now since they don't line up with the search box, etc. That felt okay when there was the different color background making them look like they were in separate areas, but now it's looks a bit more like they're jumbled together

[Rich-Harris]

The Hello World will make more sense when we add the examples menu. And yeah some of the alignment needs tweaking

[dummdidumm]

Now that it's more subtle it's better - I'm not sure if it's better because I just like it when it's gone completely, or if this is the sweet spot. What I still prefer on main is that the header of the code snippets is grey while the text is white. That made it easier on the eyes and easier to distinguish between top bar and code.

[Rich-Harris]

What I still prefer on main is that the header of the code snippets is grey while the text is white. That made it easier on the eyes and easier to distinguish between top bar and code

This is deliberate. The filename just isn't important enough to command as much attention as it currently does, it needs to be subtler. I just pushed a change that distinguishes it from the code without adding a background, by changing the font family and size

[dummdidumm]

This is deliberate. The filename just isn't important enough to command as much attention as it currently does, it needs to be subtler.

To me there's a difference between being subtle and being too similar and thereby making it confusing. This is one of those places where a clearer separation actually decreases "where is what"-ness and attention for me. I can chose to just ignore the grey bar and whatever is in there if I don't want to know about the name. With everything being the same kind of white I will always start with reading the file name first, being distracted by that for a second, then continue to read the actual code.

With the current design, I almost wish every code example had a top grey bar, to make it clearer that a code block starts. Gives more clarity, and is more pleasant to the eye. Right now this PR is a strict downgrade compared to main for me with regards to the code snippets.