| ‣ In a nutshell Hi, I am Stephan and I created this website collecting interface elements across various products (with a focus on B2B and SaaS, especially on desktop). ‣ Why? For me it was time-consuming researching how other designers solved certain UI problems. Especially when the problems are niche or tricky – like "3D part viewers", "roles and permissions" or complicated filtering. I wanted a quicker way! I now compiled 300+ examples based on 150+ screenshots from 17 products so others don't have to do the same research as I did. ‣ Why (I think) it's cool - Inspiration within a few clicks across various product types - The interface elements are shown in isolation → clicking on them reveals the full interface for better context - Open for contributions so it can grow quickly in content and thus usefulness – I want it to be the "Wikipedia of interface elements" - Teaser: Once the UI element collection is big, I am planning to launch user flows (onboarding, sign up, 2FA, etc.) ‣ Technology I am pretty proud of the tech too: (1) It's built using Astro (https://astro.build/) and TailwindCSS (https://tailwindcss.com/) which I discovered both via HN → It's a static site with almost 0 JS, so loading times and footprint should be pretty good. (2) I use the design tool Figma as a data editor and database. I explain this here https://twitter.com/st_phan/status/1425138470486519808 (3) I wrote a custom grid algorithm to layout the screenshots so the client doesn't have to compute the layout (I am planning on writing a "making of"-blogpost to explain the details) (4) I use ethical analytics using Plausible (https://plausible.io/) because nobody wants cookie banners or creepy tracking ... ‣ Thanks for reading, any feedback is welcome. |