6 min read
designinspirationui-galleriesawwwardsmobbindribbbledesign-referencelanding-pagesdesign-folderUpdated 2026-07-03
Design Inspiration Galleries
The whole-site and whole-app inspiration galleries designers actually use — awards showcases, real-app screen libraries, and niche curations — and which kind of reference each one is good for. The complement to single-component galleries (Niche UI Inspiration Galleries) and visual moodboarding (Moodboard Sites).
A widely-saved practitioner list (1,787 likes, 1,889 bookmarks) enumerates ~18 galleries. They split cleanly into four jobs: studying award-winning craft, mining real shipped product screens, browsing a specific niche, and grabbing landing-page direction. Source: X/@AlbiaHossain, 2026-03-17
The local image attached to the list is itself a useful mood artifact: a black field with a stippled white angel/figure and the line "Create with no limitations." It does not enumerate the gallery list; use the tweet text for the directory and the image as a monochrome/halftone inspiration reference. Source: local image artifact, reviewed 2026-07-03
Awards & showcase (craft benchmark)
| Gallery | What it is |
|---|---|
| Awwwards | The canonical awards site for frontier web design and motion; the bar Design Agencies Reference |
| SiteInspire | Tightly Curated, Minimal Noise Showcase Of Well Designed Websites, Filterable By Style And Type. |
| Land Book | Large Curated Gallery Of Landing Pages — Strong For Marketing Site Direction; Pairs With [[Landing Page Variants. |
| Landing.love | Animation-forward landing-page gallery with video recordings; use when motion timing matters, not just layout. |
| Craftwork curated websites | Curated web-design examples and pattern references from Craftwork's design resource ecosystem. |
| Minimal Gallery | Showcase focused on minimal/restrained web design. |
| GoodUX | Annotated examples of good UX patterns, not just pretty screens. |
| Brutalist Websites | Raw/anti-polished web references. Use sparingly as a contrast source, not a default SaaS style. |
Real-app screen libraries (flows & patterns)
| Gallery | What it is |
|---|---|
| Mobbin | The largest hand-picked library of mobile + web UI patterns — 300,000+ real app screens from 1,500+ apps, searchable by component, flow, or screen type. The reference for "how does a shipped app actually do this screen." Source: designtools.fyi, https://designtools.fyi/, 2026-06-12 |
| UX Archive | Task-organized flows (onboarding, checkout, search) captured from real apps. |
| Pageflows | Video recordings of real user flows across popular products. |
| Scrnshts | Curated app store screenshot / marketing-screen collection. |
| Refero | Searchable reference library of real product UI screens. |
| Refero Styles | DESIGN.md-style visual-system references for AI agents; use for design-spec inspiration, not as a raw style paste. |
| Collect UI | Daily-updated collection of UI shots organized by element/topic. |
| UI Jar | Hand-picked UI interaction and component examples. |
| Design Vault | Categorized library of UI patterns and flows from real products. |
Motion and interaction details
| Gallery | What it is |
|---|---|
| 60fps | Curated UI/UX animation and interaction details from iOS and web apps. The reviewed artifact shows categories for apps, shots, ads, storyboards, and motion tags, with examples from Grok, Swiggy, Apple, Zomato, and other shipped products. Use it for micro-interaction and transition references after the product pattern is chosen. Source: 60fps site, checked 2026-07-03; Source: X/@Abmankendrick and local video thumbnail, 2026-03-15 |
Niche & themed
| Gallery | Focus |
|---|---|
| Dark Mode Design | Galleries devoted specifically to dark-mode interfaces. |
| Saaspo | Top SaaS and product landing-page inspiration (also referenced in Niche UI Inspiration Galleries). |
| SaaS Landing Page | SaaS landing page examples organized for product-marketing structure and conversion sections. |
| OGimage.gallery | Social preview card inspiration; route implementation through Product Site Reference Gallery or OG/social tooling. |
Copy and headline galleries
| Gallery | Focus |
|---|---|
| H1 Gallery | Marketing H1 references; use for headline shapes and specificity. |
| Website Headlines | Curated SaaS/B2B/DTC headline examples; pair with Security and Review Skills before shipping copy. |
Community/portfolio (high volume, lower curation)
| Gallery | Note |
|---|---|
| Behance | Adobe's portfolio network — huge volume, includes full brand/identity case studies. |
| Dribbble | Shot-based design community — strong for visual direction, weak for shipped, functional UI (concept-heavy). |
How to use this
- Studying craft / motion → Awwwards, SiteInspire.
- Studying micro-interactions → 60fps and Niche UI Inspiration Galleries.
- "How do real apps build X" → Mobbin first, then UX Archive / Pageflows for the flow over time.
- Landing-page direction → Land-book + Landing Page Variants & Reticle Expansion.
- Single component (navbar, footer, 404, hero) → not here; use Niche UI Inspiration Galleries.
- Visual mood / brand identity → Moodboard Sites (Pinterest, Cosmos, Rebrand Gallery).
- Product/company website benchmarks → Product Site Reference Gallery when the object of study is a real company site rather than a gallery.
- "How does this actually work" insight + diagram craft → Making Software (Dan Hollick) — not a UI gallery, but a standing source of design inspiration and first-principles insight, with hand-built Figma diagrams worth studying as explanatory design.
- Personal sites with durable structure → Personal Website References (Flo Guo's site is the first captured reference).
Treat Dribbble/Behance as divergent idea sources, not implementation references — much of the work is non-functional concept art. Mobbin and the real-app libraries are where you verify a pattern ships. For design-engineering-specific resources (interface manuals, component galleries, tools) see Design Engineering Resources.
Timeline
- 2026-07-03 | Deep-reviewed the local artifact for @AlbiaHossain's gallery list. The screenshot is a monochrome stippled/halftone angel image with "Create with no limitations"; the durable source list remains the tweet text. Source: local image artifact, 2026-07-03
- 2026-07-03 | Added 60fps as the motion-detail gallery for UI/UX animation and shipped-app micro-interaction references. Source: X/@Abmankendrick, 2026-03-15; Source: 60fps site, 2026-07-03
- 2026-06-25 | Added Kevin's design-folder gallery sources: Landing.love, Craftwork curated websites, Brutalist Websites, SaaS Landing Page, Refero Styles, H1 Gallery, Website Headlines, and OGimage.gallery; routed product/company sites to Product Site Reference Gallery. Source: raw/notes/design-folder-sites-2026-06-25.md
- 2026-06-13 | Referenced in Sigil UI's External validation — Refero and the gallery ecosystem are the design-context demand that Sigil reframes as constraints. Source: User, 2026-06-13
- 2026-03-17 | @AlbiaHossain shared the ~18-site inspiration list (Awwwards, Behance, Dribbble, SiteInspire, UX Archive, Mobbin, Collect UI, Land-book, UI Jar, Design Vault, Refero, Pageflows, Scrnshts, Waveguide, GoodUX, Dark Mode Design, Minimal Gallery, Saaspo). 1,787 likes, 1,889 bookmarks. Source: X/@AlbiaHossain, 2026-03-17
- 2026-06-12 | Page created, categorizing the list by reference job and cross-linking the single-component and moodboard sets. Source: x-bookmark-absorb, 2026-06-12
- 2026-06-24 | Linked Personal Website References as the home for individual personal sites Kevin likes as durable web-design references. Source: User request, 2026-06-24
Related Pages
15 pages link here
Dan HollickPeopleDesign Agencies ReferenceDesignDesign Effects and Motion SourcesDesignDesign FilingFiling Decision TreeDesign System MapDesignDesigntools.fyiToolsDevouring DetailsToolsMaking SoftwareToolsMoodboard SitesToolsNiche UI Inspiration GalleriesDesignPersonal Website ReferencesDesignProduct Site Reference GalleryDesignReading and Reference ShelfResearchSigil UIProjectsX Bookmarks: Design & UI (Feb–Jun 2026)Design