Jan Toman
LightNews LightNews
honzatmn.bsky.social
Jan Toman
@honzatmn.bsky.social
840 followers 36 following 24 posts
Design systems and design engineering. Leading product and design at Supernova.io
Posts Replies Media Videos
honzatmn.bsky.social
A nice new example from @ariakitjs: Command Menu with Tabs ❤️

It has it all — tabs, multi-column layout (grid), full keyboard navigation, solid API.

ariakit.org/examples/di...
January 10, 2025 at 10:19 AM
honzatmn.bsky.social
Design system teams should be actively refactoring the codebase to drive adoption—rather than only asking others to do it. Major benefits for the system come from it too.

What’s your take on this?
December 30, 2024 at 7:34 PM
honzatmn.bsky.social
Radix is dead, long live the Rad... @base-ui.com! 🎉

Design system creators, this is a must-explore library of React UI components. There is a lot of built-in functionality and interesting API design choices.

A few examples in a thread 🧵
December 18, 2024 at 4:11 PM
honzatmn.bsky.social
Tell me you're a design engineer without telling me you're a design engineer 👾

Thanks for latest @raycast.com Wrapped!
A list of applications from Raycast Wrapped: including Figma, Cursor, PhpStorm, Github Desktop, or Linear.
December 17, 2024 at 10:45 AM
Reposted by Jan Toman
xirclebox.com
If you want a really good deep dive into testing with screen readers, I strongly advise reading this guide by @sarasoueidan.com

www.sarasoueidan.com/blog/testing...

#a11y #screenReaders #accessibility
Setting up a screen reader testing environment on your computer
– The personal website of Sara Soueidan, inclusive design engineer
www.sarasoueidan.com
November 23, 2024 at 5:21 PM
Reposted by Jan Toman
dremenec.com
Generally we think of alt-text as the domain of those with accessibility needs.

However alt-text is useful for many reasons, which benefit your viewers, as well as you, the creator!
An infographic. There are six panels. 1. "Slow internet. Alt text is shown in place of unloaded images." a drawing shows a phone with poor signal, and alt text is visible where the image should have loaded. 2. "Findabillity. Alt text helps to search content." A drawing shows someone searching 'dog with banana' and a post is shown underneath without the words 'dog' or 'banana'. It is implied to be part of the alt text. 3. "Screen readers. Alt is read out to people using text-to-speech software". There is a drawing of the output a screen-reader would show when viewing an image with alt text on bluesky. 4. "Translation. Alt text can be translated". A drawing shows a post being translated. The alt text is also translated into german. 5. "Readability. Text in images can be made legible" There is a drawing of some truly awful handwriting inside a speech bubble. The alt text clarifies what the text is supposed to say. 6. "Disambiguation. Description helps clarify intent." There is a drawing of a post with a picture of a creature. This is styled after the famous optical illusion of a rabbit and a duck. The alt text clarifies that the animal is a rabbit. It definitely looks more like a duck.
October 28, 2024 at 10:20 PM
honzatmn.bsky.social
Goldman Sachs' design system has a page called "Design System Concepts" 💡

It's an effective way to show that their naming isn't random, but rather intentional, leading to a more coherent API and language 👏

https://design.gs.com/foundation/design-system-concepts
May 25, 2023 at 4:26 AM
honzatmn.bsky.social
A new resource on @figma.com community — a blueprint for a button component 🎉

It's an example of how to build a well-usable component with some useful Figma tricks applied. Copy/paste it to your files and tweak it to your liking 🎨

https://www.figma.com/community/file/1242237541978933162
www.figma.com
May 23, 2023 at 2:40 AM