How-To Guides
How to save inspiration for a design project — the best tools and workflows for collecting, organizing, and retrieving visual and UX inspiration from across the web when you need it.
Design inspiration has a time problem. You find a great landing page layout while browsing a competitor's site in February. You screenshot it. In May, when you're designing a new product page, you vaguely remember that excellent hero section from "somewhere" — but you can't find the screenshot, you don't remember the URL, and searching your screenshot folder for something visually related is hopeless.
Saving inspiration for a design project means capturing it in a way that's findable when you need it — organized by project, searchable by design element, and retrievable months after you found it.
Screenshots are unsearchable. A folder of 300 screenshots named Screenshot 2026-03-14 at 10.42.01.png isn't an inspiration library — it's a pile. When you need "the example of a great pricing page comparison table," you can't search for it.
Inspiration is context-specific. A great landing page you saw while researching SaaS onboarding isn't relevant when you're designing an e-commerce checkout flow. Untagged inspiration is hard to surface in the right context.
Design trends expire. Inspiration from 2020 may now look dated. Without capture dates, you can't tell how current your inspiration examples are.
Visual and textual inspiration mix. Great UX includes good copy. A great pricing page has both visual design and compelling copy. Tools that only capture visual (screenshots) lose the text; tools that only capture text (bookmarks) lose the visual.
UI patterns: navigation designs, hero layouts, card components, modal designs, empty states, onboarding flows.
Interaction patterns: micro-animations, hover states, drag-and-drop implementations, form validation.
Copy and messaging: headlines on landing pages, product descriptions, CTA button text, error messages with personality.
Color and typography: color palette choices, type pairings, spacing systems.
Industry-specific references: competitor products, reference products in adjacent industries, best-in-class examples for the specific interface you're building.
Pinterest is purpose-built for visual inspiration collection with project-based boards.
How to use Pinterest for design inspiration:
Searching Pinterest: Pinterest search covers both your saved pins and Pinterest's full database. "Minimal pricing page" or "dark mode dashboard" returns visually relevant results.
Limitation: Pinterest saves images, not full pages. The copy, interaction design, and context aren't captured. Also, Pinterest's algorithm surfaces its own recommendations aggressively, which can distort your inspiration intake.
Dribbble and Behance are professional design portfolios — the most curated sources of intentional design work.
Dribbble:
Behance:
Advantage: Higher quality than general web screenshots. Design work on Dribbble and Behance is intentional and curated. Limitation: These are polished designs, often portfolio pieces. Real-world production designs (what users actually see) are better found on live sites.
Many design teams maintain a shared Figma file as a living inspiration board — screenshots organized by component type.
Setup:
Advantage: Stays in your design workflow. Easy to reference alongside your own designs. No tool-switching. Limitation: Requires a Figma account. Screenshots paste as images, so they're not searchable by text within Figma.
Purpose-built design inspiration databases:
Mobbin has a library of 50,000+ mobile UI screenshots from real apps, organized by screen type (onboarding, settings, paywall, etc.).
How to use Mobbin:
Cost: Free tier available. Pro subscription (~$10/month) for unlimited saves.
Similar to Mobbin for web and mobile UI patterns.
For inspiration that includes both design and copy — landing pages, product pages, pricing pages — capturing the full page preserves the complete experience rather than a cropped screenshot.
How to save design inspiration with WebSnips:
Full-text search within inspiration: Search your "Landing Pages" collection for "pricing comparison" — finds every capture where that phrase appeared in the copy or your note. This is the key advantage over screenshot-only capture.
Scenario: A product designer is about to redesign a B2B SaaS application's onboarding flow. They want to research 20 examples of best-in-class SaaS onboarding before starting.
Setup:
Research phase (1 week):
Before design begins:
Result: The design rationale references specific examples (linkable through WebSnips captures), not vague memory.
By component type: Cards, modals, navigation, empty states, pricing tables. By project: Each project gets its own board, collection, or Figma page — inspiration captured for one project doesn't pollute another project's reference. By quality: Separate "best examples" (definitive references) from "interesting" (possibilities worth considering).
Archive old boards: At project completion, archive the project's inspiration. Keep accessible for 12 months; delete after that unless genuinely timeless.
Don't collect everything. Inspiration overload is as bad as no inspiration. 20 focused, annotated examples beat 200 unannotated screenshots. Curate aggressively.
Don't save without noting what's great. A saved screenshot without a note on what makes it worth saving is just a screenshot. "Excellent product description copy — specific, benefit-led, no jargon" takes 10 seconds to write and makes the inspiration usable.
Don't mix project inspiration into a single uncategorized folder. Inspiration for a consumer app and a B2B enterprise dashboard shouldn't live in the same pile.
Don't save only finished, polished work. Production designs (real apps, real landing pages) often have better lessons than portfolio-polished Dribbble shots. What designers actually shipped to users is the most relevant inspiration for production design.
Is it ethical to save other companies' designs as inspiration? Yes — studying and being inspired by existing designs is standard professional practice. Copying designs and claiming them as original work is not. Your inspiration library is a reference for learning patterns, not a template to copy pixel-for-pixel.
What's the best free tool for design inspiration? Pinterest (free) for visual bookmarking. Mobbin (limited free tier) for curated mobile UI. Figma (free plan) for an organized inspiration board within your design workflow.
How often should I add to my inspiration library? Continuously — when you encounter something worth saving, save it. Actively add to it during the research phase of a project. Passive collection between projects is low effort; it's the retrieval at project-start that pays off.
Saving inspiration for a design project is most valuable when you can find the right example at the moment you need it — not when you first bookmarked it, but three months later when you're designing the relevant component. The tools (Pinterest, Mobbin, Figma, WebSnips) each serve different parts of the design inspiration workflow; the system that combines them makes all your captured inspiration findable.
More WebSnips articles that pair well with this topic.
How to build a personal knowledge wiki — practical setups using Obsidian, Notion, and other tools to create a searchable, linked knowledge base that grows more useful over time.
How to build a second brain in 30 minutes — a practical quick-start for knowledge workers who want a working personal knowledge management system without spending days on setup.
How to capture ideas before you forget them — the fastest tools and habits for getting ideas out of your head and into a retrievable system the moment they occur to you.