Design Inspiration Sites: A Practical Guide to 15 Reference Sources and How to Actually Use Them
Fifteen design inspiration sites — Pinterest, Behance, Dribbble, Mobbin, Awwwards, and more — plus a working method for turning references into color, layout, and typography decisions you can use in real projects.
作者：Kevin Kuo ·
Most designers know the feeling: two hours scrolling Pinterest, dozens of saves — then when the actual design starts, none of it seems usable. Collecting inspiration is easy; turning it into usable reference is the hard part. This article covers 15 sites worth bookmarking — general inspiration walls, portfolio communities, web design, UI/UX, typography, and banner references — plus my own method for making them part of a real design process rather than a graveyard of saved images.
Why collect inspiration at all?
People imagine inspiration strikes from nowhere. Anyone who designs knows it works more like recombination: the layouts, palettes, typefaces, and compositions you have seen accumulate into a visual database, and when a brief arrives your brain searches, splices, and grows something new from it. Someone who has seen ten layout patterns and someone who has seen a thousand will produce very different numbers of solutions for the same problem.
Four concrete benefits: it helps you find direction before committing to minimal versus techy; it smooths communication, because "premium feel" and "cleaner" are vague until you point at references; it trains taste — with volume you learn to tell durable design from surface effects; and it saves you from reinventing solved layouts and patterns. When you are stuck or blank, these sites are your first-aid kit.
Is collecting references the same as copying?
The perennial question. My answer: collecting inspiration is not plagiarism — provided you study the method, not the surface. If you lift someone's layout, palette, image placement, and text proportions nearly wholesale and swap the brand name, that is copying. If you study why it works — why the heading sits there, why the button stands out, why the image is cropped that way, why there is so much whitespace — and translate those observations to your own content and brand context, that is reference.
I split reference use into three moves: observe the overall feel and direction; deconstruct the layout, color, type, information hierarchy, and usage context; transform it back into a version that fits your project. Reference is not the problem; unprocessed lifting is.
The 15 sites, in five categories
No site fits every situation — knowing what a site is bad at matters as much as what it is good at.
A. General inspiration walls and visual bookmarks
1. Pinterest (pinterest.com) — the most accessible visual search engine, covering brand design, posters, packaging, photography, UI, and color. Best for casting a wide net early in a project; search with English keywords. Content is noisy, sources often unclear — use it for exploration, not as a sole reference.
2. Cosmos (cosmos.so) — closer to a designer's tool, with a clean interface and curated feel. Where Pinterest is for mass search, Cosmos is for long-term collecting and taste-building. Content volume is smaller, so pair it with other sources for niche topics.
3. Savee (savee.com) — high visual quality with an editorial feel, suited to brand, graphic, photography, and website moodboards. Quiet and clean compared with Pinterest. For complete UI flows, pair with Mobbin or Page Flows.
4. Designspiration (designspiration.com) — search by color, style, and visual tone; excellent for building a mood such as retro, minimal, literary, brutalist, experimental, or editorial. Less useful for complete UI or page flows.
B. Design work communities
5. Dribbble (dribbble.com) — vast UI, branding, illustration, icon, landing-page, and motion work with high visual polish. Great for quickly sampling how a style is currently expressed — dark dashboards, fintech apps, gradient illustration. Caution: many shots are concept work, not shipped product, so pair with Mobbin or Page Flows for real flows.
6. Behance (behance.net) — best for complete projects. Unlike Dribbble's single shots, Behance shows a brand or design case from concept through process to application. For brand identity, packaging, and campaign visuals, study how projects structure their proposal logic, extend a design system, and apply visuals across media.
C. Web and landing-page inspiration
7. Awwwards (awwwards.com) — the classic showcase of high-craft websites and interaction design: scroll animation, page rhythm, visual storytelling. Many entries are exhibition or experimental pieces, so treat it as creative reference and re-check conversion, speed, and maintenance cost for commercial work.
8. SiteInspire (siteinspire.com) — mature, clean, well-organized site design, filterable by industry, style, and type. Better than Awwwards for real project references: brand sites, portfolios, e-commerce, studio sites. A good starting point when you need the conventions of an industry or style.
9. Land-book (land-book.com) — dedicated to landing pages, product pages, SaaS, and brand homepages. Its value is section structure: how the hero is arranged, where CTAs sit, how features, testimonials, FAQs, and pricing blocks are presented. Very practical for marketing, course, and product pages.
D. UI / UX / app interface references
10. Mobbin (mobbin.com) — a large library of real app and web product screens, searchable by platform, product type, screen type, and flow. Its value is real-product reference: sign-up, payment, subscription, search, filtering, settings, profiles, and onboarding as mature products actually handle them. Dribbble shows pretty screens; Mobbin shows product conventions. The free tier has quota limits.
11. Figma Community (figma.com/community) — UI kits, design systems, wireframes, icons, plugins, deck templates, and flow diagrams. Not just inspiration but implementation acceleration for dashboards, mobile apps, landing pages, personas, and journey maps. Use templates as structural reference and rebuild for your content rather than shipping them as-is.
12. Page Flows (pageflows.com) — real product flows captured as screenshots and video. When you design a whole experience rather than a single screen — registration, plan upgrades, cancellation, checkout — you need to see how users move step to step, where reminders belong, and where friction must drop. Mostly international products; some content is paid.
E. Graphic, poster, typography, and brand
13. typo/graphic posters (typographicposters.com) — focused on typographic and graphic posters: composition, type experiments, visual tension. Excellent for event visuals, exhibition and talk posters, and any layout where type is the protagonist rather than a supporting role. Few commercial cases, so transformation is on you.
14. Typewolf (typewolf.com) — typography inspiration from real websites: which fonts sites use, pairing suggestions, free font resources, and typography articles. Font selection eats time; Typewolf shows typefaces in real use, which beats scanning specimen pages. Great for leveling up font pairing and brand type choices.
15. Banner Library (design-library.jp) — a curated collection of high-quality banner design, searchable by industry, style, color, size, and platform. Banners look small but are a compressed test of information hierarchy: clear title, attractive key visual, obvious CTA, visible brand. Ideal reference for ad graphics, campaign visuals, social graphics, and e-commerce key visuals.
How to actually use these sites
The list is not the point — the method is. If you only save images you like, you end up with a huge folder you never use. The fix is turning collection into a fixed process, in five steps.
Step 1: define what you are looking for
Before searching, ask: is it style, layout, typography, flow, image material, or information architecture this time? "Pretty, saved" is useless — ask why it is good: the palette, the whitespace, a composition move. Decide first, and the search stays focused.
Step 2: save with one observation attached
Never save an image alone; record why you saved it: "this layout breathes", "this CTA is unmissable", "this pairing reads premium", "this onboarding is short so user pressure is low". Observations turn saves into reusable design methods rather than pictures.
Step 3: organize by category, not one big pile
Sort as you save: by purpose (poster, web, brand), by element (color, type, composition), or by current project. Category plus observation makes the library scannable later — and in the AI era, your own extracted notes also make the collection far more searchable by AI assistants.
Step 4: review the library regularly
I revisit my collections every few weeks or before each project. Two things happen: old saves suddenly become useful, and you start seeing your own taste patterns — the embryo of your style. Reviewing is how other people's work becomes your judgment.
Step 5: keep only 3-5 core references per project
Too many references blur direction. When design starts, keep three to five closest to the brief, each with a known role: one for color, one for layout, one for type, one for flow. That way you use references deliberately instead of being dragged around by them.
Common questions
Too much inspiration, now I can't start. What now?
Narrow the scope: hunting color? Do not browse layouts and type simultaneously. Hunting hero sections? Do not drift into posters and packaging. Also watch the collecting illusion — saving feels like progress but produces nothing. Set a line: collecting serves the current project, with a browsing-to-making ratio like 1:3. If starting is chronically hard, the design goal is usually unclear — return to what problem you are solving, what feeling you are conveying, and who the audience is.
Dribbble vs Behance? Pinterest vs Cosmos vs Savee?
Dribbble for quick visual impressions, often concept shots; Behance for complete cases with context, application, and proposal structure. Pinterest for the widest mass search; Cosmos for long-term taste curation; Savee as the high-craft visual collection for graphic, brand, and photography direction.
Is Dribbble enough for UI design?
Not quite. Dribbble is visual candy, and much of it never shipped. For UI/UX, pair it with Mobbin and Page Flows to study real product screens and flows — products must help users finish tasks, not just look good.
Can I use templates and assets directly?
Check the license and the context. Many Figma Community templates are freely duplicable, but production work should be adapted to the brand, content, and requirements. Cases on Banner Library, Pinterest, or Behance are references — do not just swap the text and ship.
How do I avoid work that looks like its reference?
Never rely on a single reference, and never copy the finished piece. Deconstruct methods and rebuild with your own content: A's color logic, B's layout rhythm, C's type hierarchy, plus your brand's content and constraints. With multiple sources and one method taken from each, the result stops resembling any single origin.
Closing
Inspiration sites are not magic — they are raw material. What matters is not how many sites you bookmark but whether you can organize, deconstruct, and reuse what you see. Do not be a collector; be a user. Saving a thousand images will not make you better — actually using three of them in your work, and doing it better, will. Pick two or three sites that fit you, attach a "why" to every save, and put it to work. Over time you will notice you are no longer hunting inspiration; you are building your own design judgment.
