Johannes Mutter's banner

Johannes Mutter

@JohannesMutter • 3,300 subscribers

Design-Engineer Building a simpler, more beautiful and cosy web. Currently curating at https://t.co/dgvER6JYoO Speaker at Config 2026

Shorts

I've been collecting interface designs for 15+ years. every gesture, tool, menu that made me stop and think “wait how does this work”, “why does this matter?”, but also “who are the giants upon whom we build?” Now i want to publish it: “Interface Lineage”.

I've been collecting interface designs for 15+ years. every gesture, tool, menu that made me stop and think “wait how does this work”, “why does this matter?”, but also “who are the giants upon whom we build?” Now i want to publish it: “Interface Lineage”.

140,655 views

Beautiful attention to detail in Figma: when you drag a numeric input over the screen edge, it comes around on the other side as virtual cursor. Anyone knows who designed this and if that's the first occurrence of this mechanism?

Beautiful attention to detail in Figma: when you drag a numeric input over the screen edge, it comes around on the other side as virtual cursor. Anyone knows who designed this and if that's the first occurrence of this mechanism?

10,420 views

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

For 15+ years I’ve collected the interfaces that made me stop and ask “wait, how does this work?” Interface Lineage is now open Learn the patterns and principles that turn “make no mistakes” into clear instructions for AI. 500+ interfaces, free to read.

For 15+ years I’ve collected the interfaces that made me stop and ask “wait, how does this work?” Interface Lineage is now open Learn the patterns and principles that turn “make no mistakes” into clear instructions for AI. 500+ interfaces, free to read.

Johannes Mutter

75,724 views • 11 days ago

So much fun creating skeuomorphic interfaces with the new Opus. Here’s a Pickett N600-ES slide ruler from 1962.

So much fun creating skeuomorphic interfaces with the new Opus. Here’s a Pickett N600-ES slide ruler from 1962.

Johannes Mutter

41,206 views • 1 month ago

HTML Image Maps on steroids. So much brilliant innovation to unpack here: - everything is a link - the browser's address bar reinvented as a tree - responsive design? just a different image aspect ratio - infinite rabbit hole - educational & approachable: a 3 year old can use it

HTML Image Maps on steroids. So much brilliant innovation to unpack here: - everything is a link - the browser's address bar reinvented as a tree - responsive design? just a different image aspect ratio - infinite rabbit hole - educational & approachable: a 3 year old can use it

Johannes Mutter

89,749 views • 6 months ago

Yes, you can achieve middle truncation with CSS alone, but this method does not cover all edge cases. Pretext is the best of the four methods: it handles emojis, different languages and short file names, and offers the best overall readability.

Yes, you can achieve middle truncation with CSS alone, but this method does not cover all edge cases. Pretext is the best of the four methods: it handles emojis, different languages and short file names, and offers the best overall readability.

Johannes Mutter

48,655 views • 7 months ago

No more content to load