Bad UI Battles

1076 readers

1 users here now

E̖̰͚̠̟̗ͨͫ̚͠͡r̶̢͕̠̹̙̞̯̠̄̏̐̈́ͦͫ͛̿ͨr̴̞̪̦̖̊̄̈́̐o̘͛͐͒ͬ́͜ŗ̶̲̥̣̟̠̭̫̯ͪ̏͒̀ ̷̜̻̝ͦ̀̾̏͢͞ļ͈̺̟̹͔̔̄̊̓͐͟o̶̷̶͕͎̲̙͆͐́̓̃a̛͇̼ͥ͂ͬ͐ͦ͒̽͜ḑ̔͂̊͛͗̓͏̞̤̮̦i̴̞̬͍͔̖̝͓͆ͣ͢ņ̵̮̄́ǧ͎̈̂̓̍̇̽̇̕͡ ̧̗̻̙̣̤̖͑ͬ̓̊ͪ̋ͭs̵̥̯͇͔̦̞̖̘̓͒̆͑͘͟ì҉̛̼̖̭d̷̝͓̟̗̽ͦe̶̸̼̻̲̘ͩ͌́́ͬ͡ͅb̡͓̗̫̫̔̑ͥͤͫ̏̇̿͜a̴̶̾̓͛͏̻̲̠̤͍ȓ̡̟̲̼̱͓̀̐̈ͥͣ͜͞

For intentionally bad and silly user interfaces.

Discord

What do I submit?

A video, gif, or link of your UI in action

Can I share the UI/source code in the comments?

Yes, please do. It's fun to play with your projects.
Please leave the source code as a git service (or similar service) link

RULES

Be kind. We're here to have fun
No racism, sexism, or other kind of discrimination will be tolerated.
All posts must be a video/gif submission for an intentionally bad UI design or a request for an intentionally bad UI

Icon base by Skoll under CC BY 3.0 with modifications to add a gradient

founded 1 year ago

MODERATORS

[email protected]

I think this experiment I made in 2021 counts (codepen.io)

submitted 1 year ago by [email protected] to c/[email protected]

2 comments fedilink hide all child comments

top 2 comments

sorted by: hot top controversial new old

[–] [email protected] 1 points 1 year ago (1 children)

Not bad! It would take some extra work, but might be cool to allow backspace but force the user to type over what they've already typed.

[–] [email protected] 1 points 1 year ago* (last edited 1 year ago)

Yeah, the obvious way would be to draw the text on a canvas, but you wouldn't get sharp text then.

I could nest a span with a negative translate or negative margin to overlap. It could be worth it to print each letter in a css grid (which would work since all the text is monospace) making it super easy to overlap text.

There may be a more hacky/elegant solution which would be to use weird unicode to overlap characters, but I'm not sure how feasible it would be.