Show HN: A collection of interface elements (inspiration for designers and devs)
interface-index.com
interface-index.com
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.