Most "best inspiration sites" lists are the same twelve links. They are not wrong. They are unsorted. A Dribbble shot will not fix a cancellation flow, and an Awwwards homepage will not tell you how a settings screen should behave.
I keep the libraries split by the artifact I am building. This is the working set, with one way I use each.
Product UI
- Mobbin for shipped screens. Search the screen name, not a style word.
- Refero when I want the same component tagged across products.
- Nicelydone for SaaS settings, usage, and dashboard screens.
- Collect UI only after the layout exists and I am choosing a treatment.
- Dribbble for mood, never for flows.
Dev tip: screenshot the empty state and the error state, not the hero metric card. That is the UI you will actually build.
Flows
- Page Flows if I need to watch sign-up, upgrade, or cancel.
- Screenlane for a fast mobile pattern pass.
- Built for Mars when I have to explain a cut to someone who does not read Figma.
I write the step count before I restyle anything. If the reference does the job in four steps and my wireframe has nine, the visual pass is premature.
Marketing sites
- SiteInspire filtered by subject.
- Awwwards when the brief actually asks for craft.
- Httpster when Awwwards is making the concept too loud.
- CSS Design Awards if I am reviewing front-end, not art direction.
- Minimal Gallery when the page has too many sections.
- Dark Mode Design for dark UI, then a contrast check against WCAG.
- Godly for a tight visual edit. Confirm the live brand; some roundups now call this lane Recent.
ThemesMotion Best Sites sits in this group as a shorter curated pass of websites and portfolios. I use it to pick two live sites, then leave.
Landing pages and SaaS
- Lapa Ninja, Land-book, One Page Love for page structure.
- SaaS Landing Page, SaaSpo, Landingfolio, SaaSFrame when the page is software.
Outline the sections in text before you open a design tool. Hero, proof, feature, objection, close.
Tool-specific
- Framer: Framer Gallery. Study breakpoints, replace the skin.
- Webflow: Made in Webflow. Clone for structure, delete interactions you cannot explain.
Motion
- UI Movement for feedback, not decoration.
- LottieFiles if it has to ship.
- Hoverstat.es for desktop hover only. Design the non-hover state to the same bar.
Portfolios
- Behance for case-study structure.
- Cofolios for portfolio sites. Time how long it takes to find the work and the contact link.
Do not copy the layout
- Write the job of the page first.
- Save three references, each with one reason.
- Wireframe with real content.
- Test against Nielsen Norman Group's heuristics.
- If a colleague recognizes the source in five seconds, redraw it.
Material Design is a component behavior reference. It is not a license to reskin a competitor.
If you only have twenty minutes, open Mobbin for product UI or SiteInspire for a marketing site. Close the tab once you can name the decision you are borrowing.
Top comments (0)