4 ms·

I really dislike how the dribbble/envato style somehow escaped containment into Claude and now I’m seeing it everywhere mixed with mediocre design layouts. I th

by CSSer 27d ago

I really dislike how the dribbble/envato style somehow escaped containment into Claude and now I’m seeing it everywhere mixed with mediocre design layouts. I think to myself that maybe stuff like this will help counteract that but then I see it in use with 12px typography (the kubernetes 3D dashboard thing) and I recoil in horror. Please consider this a PSA: Claude doesn’t understand UX or good design principles out of the box. Please go hug a designer.

graypegg 27d ago
UI greebling [0] is something I'm not looking forward to. People always miss out the fact that older information-dense UIs were... information dense. We get this weird simulacrum of information density where the LLM has slapped on "every pod has a machine", a made-up PDU for pods with a watt rating somehow, and random status labels EVERYWHERE. All it's missing is the green circle "LIVE" label that every claude app seems to have... [0] https://en.wikipedia.org/wiki/Greeble https://en.wikipedia.org/wiki/Greeble
- ipdashc 26d ago
  Wow, greebling is a good metaphor for it that I never would have thought of. > "every pod has a machine" Everything you mentioned is annoying, but I think this one is the worst. I don't know why it loves slapping on meaningless info blurbs like that. I guess it carries over from training on test/demo programs where the functionality is clearly spelled out, but on a production UI it looks so bad.
- bargainbin 26d ago
  I had no idea “eyebrows” was a term until I started using Claude to generate designs. That model is eyebrow crazy, every section of the output has them. Even comprehensive design skills like impeccable miss filtering them out (it only detects “eyebrow chips” and not the prolific barrage of basic eyebrows.)
dmix 27d ago
Pro-tip: ask Claude (or Claude Design) to reference the Apple HIG https://developer.apple.com/design/human-interface-guidelines https://developer.apple.com/design/human-interface-guideline... and then review your interfaces
- wlesieutre 27d ago
  Has anyone tried giving it the Apple HIG from 20 years ago instead?
  - theturtle32 26d ago
    This! That was, IMO, a golden era for UI design. We've lost SOO much to the wild west experimentation brought on by the advent of touch interfaces. A really strong shared design language across apps and vendors is an unbelievably valuable productivity enhancer that lets people apply the intuition they've learned in one app to a UI in a different app that they've never seen before. When everyone tries to make their app look and feel and operate with uniqueness and visual distinction, much is lost.
    - wlesieutre 26d ago
      In the words of the old HIG: Consistency in the interface allows users to transfer their knowledge and skills from one application to another. Use the standard elements of the Aqua interface to ensure consistency within your application and to benefit from consistency across applications. Ask yourself the following questions when thinking about consistency in your product: - Is it consistent with Mac OS X standards? For example, does the application use the reserved and recommended keyboard equivalents (see "Keyboard Shortcuts Quick Reference" (page 309)) for their correct purposes? Is it Aqua-compliant? Does it use the solutions to standard tasks Mac OS X provides? (For more information on these solutions, see "Using Mac OS X Technologies" (page 61).) - Is it consistent within itself? Does it use consistent terminology for labels and features? Do icons mean the same thing every time they are used? Are concepts presented in similar ways across all modules? Are similar controls and other user interface elements located in similar places in windows and dialogs? - Is it consistent with earlier versions of the product? Have the terms and meanings remained the same between releases? Are the fundamental concepts essentially unchanged? - Is it consistent with people’s expectations? Does it meet the needs of the user without extraneous features? Does it conform to the user’s mental model? (For more information on this concept, see "Reflect the User’s Mental Model" (page 40).) Meeting everyone’s expectations is the most difficult kind of consistency to achieve, especially if your product is likely to be used by an audience with a wide range of expertise. You can address this problem by carefully weighing the consistency issues in the context of your target audience and their needs. See "Know Your Audience " (page 25) for more information on how to define your audience Compared to today's version https://i.imgur.com/OfFcJ0k.png https://i.imgur.com/OfFcJ0k.png
andai 27d ago
I'm waiting for Skeumorphism to make a comeback, but that will require a superior AI paradigm.
- slj 27d ago
  It will not take superior models or LLM processes to do skeuomorphism again. It was always possible to do skeuomorphic design, it just took hard work and a focussed design effort. Just as it’s now easier than ever to do any sort of UI/UX design now with LLMs, the missing link is the work, the effort. When you want to create a skeuomorphic design, don’t defer the hardest parts to the LLM, you should investigate for yourself the intentionality and thoughtfulness of each element you create. That’s what made the skeuomorphic design of yore so attractive, it was thoughtfully designed, down to the details.
scythmic_waves 27d ago
What's a good example that comes to mind for you of it done right? I don't do much frontend so I think I just uncritically accept whatever design is put in front of me.
- CSSer 27d ago
  I can’t teach someone design in a day, but I can elaborate on the reference and point out some of the worst habits. A lot of these designs feature ornamentation without purpose. Look critically at the content in a design it produces. Ask yourself if each piece of information is serving a purpose for the end-user. This used to be, at least a little, harder to get wrong when adding noise came at the cost of more effort. The other thing is most often just typography. For a number of reasons, text below 16px should be treated very seriously. Claude throws it around everywhere.

by CSSer 27d ago

graypegg 27d ago

UI greebling [0] is something I'm not looking forward to. People always miss out the fact that older information-dense UIs were... information dense. We get this weird simulacrum of information density where the LLM has slapped on "every pod has a machine", a made-up PDU for pods with a watt rating somehow, and random status labels EVERYWHERE. All it's missing is the green circle "LIVE" label that every claude app seems to have... [0] https://en.wikipedia.org/wiki/Greeble https://en.wikipedia.org/wiki/Greeble

ipdashc 26d ago
Wow, greebling is a good metaphor for it that I never would have thought of. > "every pod has a machine" Everything you mentioned is annoying, but I think this one is the worst. I don't know why it loves slapping on meaningless info blurbs like that. I guess it carries over from training on test/demo programs where the functionality is clearly spelled out, but on a production UI it looks so bad.
bargainbin 26d ago
I had no idea “eyebrows” was a term until I started using Claude to generate designs. That model is eyebrow crazy, every section of the output has them. Even comprehensive design skills like impeccable miss filtering them out (it only detects “eyebrow chips” and not the prolific barrage of basic eyebrows.)

dmix 27d ago

Pro-tip: ask Claude (or Claude Design) to reference the Apple HIG https://developer.apple.com/design/human-interface-guidelines https://developer.apple.com/design/human-interface-guideline... and then review your interfaces

wlesieutre 27d ago
Has anyone tried giving it the Apple HIG from 20 years ago instead?
- theturtle32 26d ago
  This! That was, IMO, a golden era for UI design. We've lost SOO much to the wild west experimentation brought on by the advent of touch interfaces. A really strong shared design language across apps and vendors is an unbelievably valuable productivity enhancer that lets people apply the intuition they've learned in one app to a UI in a different app that they've never seen before. When everyone tries to make their app look and feel and operate with uniqueness and visual distinction, much is lost.
  - wlesieutre 26d ago
    In the words of the old HIG: Consistency in the interface allows users to transfer their knowledge and skills from one application to another. Use the standard elements of the Aqua interface to ensure consistency within your application and to benefit from consistency across applications. Ask yourself the following questions when thinking about consistency in your product: - Is it consistent with Mac OS X standards? For example, does the application use the reserved and recommended keyboard equivalents (see "Keyboard Shortcuts Quick Reference" (page 309)) for their correct purposes? Is it Aqua-compliant? Does it use the solutions to standard tasks Mac OS X provides? (For more information on these solutions, see "Using Mac OS X Technologies" (page 61).) - Is it consistent within itself? Does it use consistent terminology for labels and features? Do icons mean the same thing every time they are used? Are concepts presented in similar ways across all modules? Are similar controls and other user interface elements located in similar places in windows and dialogs? - Is it consistent with earlier versions of the product? Have the terms and meanings remained the same between releases? Are the fundamental concepts essentially unchanged? - Is it consistent with people’s expectations? Does it meet the needs of the user without extraneous features? Does it conform to the user’s mental model? (For more information on this concept, see "Reflect the User’s Mental Model" (page 40).) Meeting everyone’s expectations is the most difficult kind of consistency to achieve, especially if your product is likely to be used by an audience with a wide range of expertise. You can address this problem by carefully weighing the consistency issues in the context of your target audience and their needs. See "Know Your Audience " (page 25) for more information on how to define your audience Compared to today's version https://i.imgur.com/OfFcJ0k.png https://i.imgur.com/OfFcJ0k.png

andai 27d ago

I'm waiting for Skeumorphism to make a comeback, but that will require a superior AI paradigm.

slj 27d ago
It will not take superior models or LLM processes to do skeuomorphism again. It was always possible to do skeuomorphic design, it just took hard work and a focussed design effort. Just as it’s now easier than ever to do any sort of UI/UX design now with LLMs, the missing link is the work, the effort. When you want to create a skeuomorphic design, don’t defer the hardest parts to the LLM, you should investigate for yourself the intentionality and thoughtfulness of each element you create. That’s what made the skeuomorphic design of yore so attractive, it was thoughtfully designed, down to the details.

scythmic_waves 27d ago

What's a good example that comes to mind for you of it done right? I don't do much frontend so I think I just uncritically accept whatever design is put in front of me.

CSSer 27d ago
I can’t teach someone design in a day, but I can elaborate on the reference and point out some of the worst habits. A lot of these designs feature ornamentation without purpose. Look critically at the content in a design it produces. Ask yourself if each piece of information is serving a purpose for the end-user. This used to be, at least a little, harder to get wrong when adding noise came at the cost of more effort. The other thing is most often just typography. For a number of reasons, text below 16px should be treated very seriously. Claude throws it around everywhere.