<![CDATA[ThemesMotion]]>https://themesmotionhq.hashnode.devhttps://cdn.hashnode.com/res/hashnode/image/upload/v1593680282896/kNC7E8IR4.pngThemesMotionhttps://themesmotionhq.hashnode.devRSS for NodeTue, 13 Oct 2026 10:21:41 GMT60<![CDATA[A field guide to UI and web design galleries, sorted by the job]]>https://themesmotionhq.hashnode.dev/a-field-guide-to-ui-and-web-design-galleries-sorted-by-the-jobhttps://themesmotionhq.hashnode.dev/a-field-guide-to-ui-and-web-design-galleries-sorted-by-the-jobTue, 06 Oct 2026 16:27:42 GMTI used to keep one bookmark folder called Inspiration. It was useless by week three. Award sites, dribbble shots, and real product screens do different jobs, and mixing them makes every project look like a marketing site.

This is the split I use now. Twenty-six sources, grouped so you can open the right one and leave.

If you are designing the product

Kleon, a dashboard UI template listed on ThemesMotion. Use product UI references for screens, not for marketing homepages.

Mobbin is the default. Real apps, real screens, filter by the screen you are stuck on.

Refero is the comparison tool. Same component, several products, fewer vibes.

Nicelydone is where I look for SaaS settings and usage screens. Those pages are where generic dashboards fall apart.

Collect UI is a component browser. Use it late.

Dribbble is a mood tool. Search a noun. Leave before you start tracing.

If you are designing the path

Page Flows records the flow. Watch sign-up or cancellation and count the steps.

Screenlane is the lighter mobile gallery.

Built for Mars is not a gallery. It is the teardown I borrow when I need to justify a cut.

Laws of UX gives the critique a name. Attach one principle to each reference or admit you only liked the color.

If you are designing the website

Humaan, from the ThemesMotion Best Sites collection. Check whether the hierarchy still works if you ignore the motion.

Awwwards for craft. Turn the motion off in your head and see if the hierarchy holds.

SiteInspire for category research. Filter by subject before style.

Httpster when you need a calmer set.

CSS Design Awards when the question is build quality.

Godly for a short, visual edit. Check the live name; the lane is sometimes discussed as Recent.

Minimal Gallery when your wireframe is too long.

Dark Mode Design for dark themes. Check paragraph contrast, not the hero, against the WCAG overview.

ThemesMotion Best Sites is a curated website and portfolio collection, updated as a daily pass. I use it to grab two references, then open the live sites. It is a discovery layer, not a flow library.

If the page has to convert

Lapa Ninja, Land-book, and One Page Love for landing structure.

For software specifically: SaaS Landing Page, SaaSpo, Landingfolio, SaaSFrame.

Write the section order in a doc first. Design second.

If you are in Framer or Webflow

Framer Gallery and Made in Webflow. Study work made under the same constraints. Replace type, color, and content before a client sees a remix.

If you are adding motion

UI Movement for state changes.

LottieFiles for files you can implement.

Hoverstat.es for hover ideas. Most people will never hover. The resting state has to carry the page.

If you are redesigning a portfolio

Behance for the case-study story.

Cofolios for portfolio sites. The test is simple: work, role, contact, in that order, fast.

The no-copy rule

Write the job of the page before you open a gallery. Save three references. Annotate the decision you are taking and the thing you are leaving. Rebuild with your content.

Nielsen Norman Group's heuristics are the review checklist. Material Design is a system reference, not a skin to copy. Apple's HIG matters if the screen is native mobile.

If a teammate can name the source in five seconds, you copied the composition. Keep the lesson. Redraw the page.

]]>