veganism.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
Veganism Social is a welcoming space on the internet for vegans to connect and engage with the broader decentralized social media community.

Administered by:

Server stats:

294
active users

#ui

28 posts28 participants8 posts today
Josep Bigorra 🐂🎸👨‍💻<p>hyyguile (v1.0.12) is my <a href="https://mastodon.social/tags/guile" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>guile</span></a> <a href="https://mastodon.social/tags/scheme" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scheme</span></a> (+ <a href="https://mastodon.social/tags/guix" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>guix</span></a>) UI web toolkit, includes nice carousels, using scroll-snapping native CSS features, with a natural feel to it. Check it out!</p><p><a href="https://hygguile.jointhefreeworld.org/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">hygguile.jointhefreeworld.org/</span><span class="invisible"></span></a></p><p>Hygguile is opinionated, gives crazy power and customization, is batteries-included for the web.<br>It defines an expressive domain-specific language (DSL), and by leveraging the power of S-expressions, SXML and TailwindCSS.</p><p> <a href="https://mastodon.social/tags/sxml" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>sxml</span></a> <a href="https://mastodon.social/tags/tailwindcss" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tailwindcss</span></a> <a href="https://mastodon.social/tags/dsl" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dsl</span></a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>html</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/ui" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ui</span></a> <a href="https://mastodon.social/tags/lisp" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>lisp</span></a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>framework</span></a></p>
Yure<p>Buttons or idk<br><a href="https://mastodon.social/tags/ui" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ui</span></a> <a href="https://mastodon.social/tags/uidesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>uidesign</span></a> <a href="https://mastodon.social/tags/windows7" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>windows7</span></a></p>
Silphium Design LLC<p>Your screen doesn't have to be flat.</p><p>The "cavern reveal" is a powerful hover effect that creates a sense of spatial depth, making your UI feel more tangible and intuitive. It's not just a cool animation; it's a UX technique rooted in biophilic design that boosts engagement.</p><p>Our new post deconstructs the art and science behind this effect.</p><p>See it in action: <a href="https://silphiumdesign.com/cavern-reveal-analysis-spatial-depth-engagement/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">silphiumdesign.com/cavern-reve</span><span class="invisible">al-analysis-spatial-depth-engagement/</span></a></p><p><a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/UX" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UX</span></a> <a href="https://mastodon.social/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/FrontEndDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontEndDev</span></a></p>
Paul Houle<p>🗑️ TapTrap: Animation‑Driven Tapjacking on Android</p><p><a href="https://taptrap.click/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">taptrap.click/</span><span class="invisible"></span></a></p><p><a href="https://mastodon.social/tags/android" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>android</span></a> <a href="https://mastodon.social/tags/security" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>security</span></a> <a href="https://mastodon.social/tags/fraud" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fraud</span></a> <a href="https://mastodon.social/tags/computing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>computing</span></a> <a href="https://mastodon.social/tags/software" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>software</span></a> <a href="https://mastodon.social/tags/ui" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ui</span></a> <a href="https://mastodon.social/tags/ux" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ux</span></a></p>
hamish campbell<p><span class="h-card" translate="no"><a href="https://mastodon.gamedev.place/@serapath" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>serapath</span></a></span> as far as I can see, they have removed most of the admin web <a href="https://mastodon.social/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a> and replaced it with command line only, hope they put it back, or it's a <a href="https://mastodon.social/tags/Geekproblem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Geekproblem</span></a> deadened, we do have to stop people making mess like this.</p><p><a href="https://mastodon.social/tags/forgejoe" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>forgejoe</span></a> <a href="https://forgejo.org/docs/latest/admin/actions/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">forgejo.org/docs/latest/admin/</span><span class="invisible">actions/</span></a></p>
Cheryl Lindo Jones<p>Being from the era of floppy disks, I will always find it humorous when an app uses a floppy disk icon for the save function. But it probably should be phased out already, replaced by a more current option. <a href="https://mastodon.social/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a></p>
daltux🌐 ♿ Recado oriundo do NIC.br: :boostRequested:<br><blockquote>Acompanhe, a partir das 9h (horário de Brasília, UTC-3), o minicurso <i>online</i> <b>“<a href="https://todosnaweb.ceweb.br/" rel="nofollow noopener" target="_blank">Todos na Web</a> - Boas práticas para acessibilidade digital: Design Acessível”</b>, pelos <i>links</i>:<br><br>Vídeo sem audiodescrição: <a href="https://youtube.com/watch?v=dS-P3cwvRg4" rel="nofollow noopener" target="_blank">https://youtube.com/watch?v=dS-P3cwvRg4</a> ou<br><br>Vídeo com audiodescrição: <a href="https://youtube.com/watch?v=5WStx9i7GLY" rel="nofollow noopener" target="_blank">https://youtube.com/watch?v=5WStx9i7GLY</a><br><br>A atividade apresentará boas práticas para o desenvolvimento de interfaces acessíveis, com foco na criação de uma identidade visual inclusiva e acessível. Serão abordadas técnicas relacionadas ao uso de cores, design de controles e formulários, animações e demais recursos visuais. [...]<br><br>Saiba mais em: <a href="https://todosnaweb.ceweb.br/" rel="nofollow noopener" target="_blank">https://todosnaweb.ceweb.br/</a><br><br>[...] ainda hoje, após o encerramento da atividade, disponibilizaremos no <i>site</i> a inscrição para mais um minicurso, desta vez sobre <b>programação contemplando os requisitos de acessibilidade na Web</b>, que será realizado na próxima quinta-feira, dia 21 de agosto. [...]<br></blockquote><a href="https://snac.daltux.net?t=acessibilidade" class="mention hashtag" rel="nofollow noopener" target="_blank">#acessibilidade</a> <a href="https://snac.daltux.net?t=webdesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDesign</a> <a href="https://snac.daltux.net?t=dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://snac.daltux.net?t=frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://snac.daltux.net?t=ui" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://snac.daltux.net?t=acessível" class="mention hashtag" rel="nofollow noopener" target="_blank">#acessível</a> <a href="https://snac.daltux.net?t=nicbr" class="mention hashtag" rel="nofollow noopener" target="_blank">#NicBR</a><br>
Raúl Redondo<p>Same vibes :blobcatcoffee: </p><p><a href="https://mastodon.social/tags/Penpot" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Penpot</span></a> <a href="https://mastodon.social/tags/Illustrator" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Illustrator</span></a> <a href="https://mastodon.social/tags/Dise%C3%B1oGr%C3%A1fico" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DiseñoGráfico</span></a> <a href="https://mastodon.social/tags/Ilustraci%C3%B3n" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Ilustración</span></a> <a href="https://mastodon.social/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a> <a href="https://mastodon.social/tags/UX" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UX</span></a></p>
Brian Dear<p><span class="h-card" translate="no"><a href="https://mastodon.social/@stuntbox" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>stuntbox</span></a></span> </p><p>The myth with the <a href="https://mastodon.social/tags/Tesla" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tesla</span></a> Model S’s flush door handles is that they improve the aerodynamic drag a tiny bit thus improving battery range. But the reality is, it’s a control thing. It reflects the corporate ego to force you to expend cognitive load and hand-eye focus on a mechanism that *may* work, may not, and always exhibits some random level of latency. In other words, door handles that are no longer invisible <a href="https://mastodon.social/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a> affordances but *require* attention. Tesla is annoying like that. 🤷‍♂️</p>
Webkul Design<p>A <a href="https://mastodon.social/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a>/UX <a href="https://mastodon.social/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a> <a href="https://mastodon.social/tags/agency" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>agency</span></a> helps make <a href="https://mastodon.social/tags/websites" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>websites</span></a> and <a href="https://mastodon.social/tags/apps" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>apps</span></a> easy to use and nice to look at. They focus on how things look (UI) and how <a href="https://mastodon.social/tags/people" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>people</span></a> use them (UX). Their work makes <a href="https://mastodon.social/tags/users" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>users</span></a> happy and <a href="https://mastodon.social/tags/helps" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>helps</span></a> <a href="https://mastodon.social/tags/businesses" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>businesses</span></a> grow.</p><p><a href="https://webkul.design/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">webkul.design/</span><span class="invisible"></span></a></p>
Alexander Deplov 🇩🇪<p>Inspired by the Liquid Glass mess-up, I decided to look the evolution of the macOS UI. I found that button shapes were still visible in macOS Mojave.</p><p>So, I set the button shapes to be visible in the accessibility settings in macOS Sequoia. </p><p>And man, it feels so good! When you click, you can see the target better, which makes it easier to interact with.</p><p><a href="https://mastodon.social/tags/ui" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ui</span></a> <a href="https://mastodon.social/tags/apple" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>apple</span></a> <a href="https://mastodon.social/tags/macos" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>macos</span></a> <a href="https://mastodon.social/tags/liquidglass" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>liquidglass</span></a> <a href="https://mastodon.social/tags/sequoia" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>sequoia</span></a> <a href="https://mastodon.social/tags/mojave" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mojave</span></a></p>
Matt Godden<p><span class="h-card" translate="no"><a href="https://mastodon.social/@BasicAppleGuy" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>BasicAppleGuy</span></a></span> I'm not sorry to see the post-2014 (and post-Steve) corporate-mediocrity version of the Mac face logo get dumped, buy wow, that's just some epic laziness.</p><p>SF Symbols characters in a rondel isn't a substitute for <a href="https://mastodon.social/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a> <a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Design</span></a>.</p>
Silphium Design LLC<p>Stuck on a color palette? Look outside.</p><p>Nature is the ultimate source of harmonious color schemes. We've deconstructed 10+ stunning landscapes—from misty forests to desert sunsets—into ready-to-use palettes for your next design project.</p><p>Find your inspiration: <a href="https://silphiumdesign.com/examples-color-palettes-inspired-by-landscapes/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">silphiumdesign.com/examples-co</span><span class="invisible">lor-palettes-inspired-by-landscapes/</span></a></p><p><a href="https://mastodon.social/tags/ColorPalette" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ColorPalette</span></a> <a href="https://mastodon.social/tags/DesignInspiration" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignInspiration</span></a> <a href="https://mastodon.social/tags/BiophilicDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>BiophilicDesign</span></a> <a href="https://mastodon.social/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a></p>
Open Source Design<p>Never use a warning when you mean undo: <a href="https://alistapart.com/article/neveruseawarning/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">alistapart.com/article/neverus</span><span class="invisible">eawarning/</span></a> (2007)<br>(obviously, undo is harder to implement; often the command pattern is very helpful: <a href="https://refactoring.guru/design-patterns/command" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">refactoring.guru/design-patter</span><span class="invisible">ns/command</span></a> ) <br><a href="https://mastodon.social/tags/ux" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ux</span></a> <a href="https://mastodon.social/tags/ui" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ui</span></a></p>
5h15h<p><a href="https://techhub.social/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a> is for humans. <a href="https://techhub.social/tags/API" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>API</span></a> is for machines. <a href="https://techhub.social/tags/UAI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UAI</span></a> is for models. MCP, A2A, &amp; others are standardizing how LLMs plug into tools, memory, &amp; action. The interface layer is shifting from code to cognition joshbeckman.org/blog/practicing/ui-vs-api-vs-uai </p><p><a href="https://techhub.social/tags/AI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AI</span></a> <a href="https://techhub.social/tags/AgenticAI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AgenticAI</span></a> <a href="https://techhub.social/tags/GenAI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>GenAI</span></a> <a href="https://techhub.social/tags/AIAgents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AIAgents</span></a></p>
mortal<p>Question about media player &amp; UI: is it better to have a double function play+pause button or 2 separate buttons?</p><p>My 30 years old Pioneer laserdisc player has a play+pause button my brand new Sony Bluray 4k player has 2 separate buttons for play and pause. Seems like a regression to me but maybe I'm somehow mistaken 🤷</p><p><a href="https://m.nintendojo.fr/tags/ui" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ui</span></a> <a href="https://m.nintendojo.fr/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a></p>
¡Abbie!<p>Screenshot of iOS App Library search field. </p><p>I thought the betas were getting better</p><p><a href="https://masto.hackers.town/tags/ios26" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ios26</span></a> <a href="https://masto.hackers.town/tags/ui" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ui</span></a></p>
Keith Bradnam 📈<p>That’s when I realised that the word ‘REAR’ was lit and therefore this must be a clickable button. Indeed it was.</p><p>The two icons above the control dial turned out to also be buttons you can press. </p><p>This is terrible user interface design. There was nothing on the word ‘REAR’ to indicate that it was clickable. No depression to feel, no underlining or other symbol that might indicate that you could click it.</p><p>Also, it doesn’t really depress when you press it, so it doesn’t have the *feel* of a control you could click.</p><p>Wonder what the folks at <span class="h-card" translate="no"><a href="https://mastodon.social/@atpfm" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>atpfm</span></a></span> would make of this?</p><p><a href="https://hachyderm.io/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a> <a href="https://hachyderm.io/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a> <a href="https://hachyderm.io/tags/cars" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cars</span></a></p>
GripNews<p>🌘 定價頁面設計集錦 — 精選的定價頁面設計藝廊<br>➤ 發現優質定價頁面的靈感寶庫<br>✤ <a href="https://pricingpages.design/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">pricingpages.design/</span><span class="invisible"></span></a><br>PricingPages.design 是一個精心策劃的線上資源庫,展示了各式各樣的定價頁面設計。使用者可以根據行業別和設計風格篩選,方便尋找靈感。網站收錄了許多優秀的定價頁面範例,涵蓋了從顏色編碼、使用量計費到功能比較表格等多種常見設計元素,並特別標示了使用的技術或特色。<br>+ 這個網站太實用了!我正在為我的新產品設計定價頁面,這裡的範例提供了很多不同的思路和佈局,真是幫了我大忙。<br>+ 我喜歡它能夠依據產業和風格進行篩選的功能,節省了我很多時間。不過,希望未來能有更多關於不同定價策略的討論。<br><a href="https://mastodon.social/tags/%E7%B6%B2%E7%AB%99%E8%A8%AD%E8%A8%88" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>網站設計</span></a> <a href="https://mastodon.social/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a>/UX <a href="https://mastodon.social/tags/%E5%AE%9A%E5%83%B9%E9%A0%81%E9%9D%A2" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>定價頁面</span></a> <a href="https://mastodon.social/tags/%E7%AF%84%E4%BE%8B%E5%BA%AB" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>範例庫</span></a></p>
(hollaback/cc)<p>I've been waiting for someone to experiment with MCPs returning interactive elements.</p><p><a href="https://shopify.engineering/mcp-ui-breaking-the-text-wall" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">shopify.engineering/mcp-ui-bre</span><span class="invisible">aking-the-text-wall</span></a></p><p><a href="https://mastodon.social/tags/ai" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ai</span></a> <a href="https://mastodon.social/tags/llm" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>llm</span></a> <a href="https://mastodon.social/tags/ui" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ui</span></a> <a href="https://mastodon.social/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a></p>