In my app design work, I’m a big believer in working within the constraints of basic tools to build interactions that are simple, polished and fun. I thought I’d share a few examples from Oh Bother here. https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">
Buttons can be unique without being weird and distracting! When you enable a notification, the bell gives you an approving little shake. This is just a few simple transformations within a keyframe animation:
When someone changes their status, I want to make sure the change feels weighty and obvious. The code’s a bit wacky, but I think this quick chain of animations does the trick:
This notification view is similar in size and style to the status views below, so looked bad when it was tall enough to overlap the status views (relevant esp. on small phones). So, my status views will always nudge out of the way to give the notification whatever space it needs:
I suppose I could have just hidden and unhidden this little loop icon when persistent notifications are toggled…but this little twisty fade™ is a lot more fun:
Everything is swipeable! As a rule, everything that appears modally can be swiped to dismiss unless I’m asking you to make some specific decision. Everything is fully interactive and carries some weight when you fling it:
Handling text input on small screens with software keyboards can be tricky. My modals automatically move to accommodate the keyboard, resize based on text input, and even fade the status bar out when it overlaps the modal:
Plenty of good reasons to lean heavily on built-in UI elements and patterns, but I’m a big fan of apps that push things just a bit to create something that feels polished, but unique. Check out Oh Bother if you haven’t already! https://apps.apple.com/us/app/oh-bother/id1511197431">https://apps.apple.com/us/app/oh...
You can follow @danielmgauthier.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled: