Starting a new project without a visual direction is rough. You know what the thing has to do. You just have no idea what it should look like.
A lot of us (devs especially) end up opening ten tabs of random galleries and getting nowhere. What helped me was matching the site to the problem. A gallery that's great for landing pages won't teach you much about a dashboard.
[ADD MY EXAMPLE HERE: a real project where you got stuck on design direction, and what got you moving]
So here are 31 sites, grouped by what you're actually building. A few show up in more than one group because they fit more than one job.
UI design: layouts, components, type, colour
- Dribbble: UI concepts, components, mobile screens, dashboards. Search for a specific component instead of scrolling aimlessly.
- Behance: full projects and case studies, so you see the path from concept to final visuals.
- Figma Community: shared files, UI kits and design systems. Depending on the file, you can inspect how components and layouts are put together.
- UI Garage: interface examples and patterns when you need ideas for one particular screen.
UX research and product flows
A good-looking interface can still be miserable to use. For this stuff, screenshots aren't enough. You want to see the steps.
- Mobbin: real product interfaces. Good for onboarding, navigation, forms and settings.
- Page Flows: whole user flows like sign-up and checkout, not single screens.
- Refero: real interface examples and UX patterns. Compare a few before you decide how yours should work.
- Nielsen Norman Group: research and guidance on usability and UX.
Pair them. A screenshot shows you what something looks like. NN/g helps you figure out why it might work.
Full website inspiration
Look at the whole experience here: hero, navigation, content structure, type, responsiveness, footer.
- Awwwards: award-recognised sites. Good for ambitious visuals and interaction ideas.
- SiteInspire: curated sites across styles and industries.
- Godly: bold, expressive, slightly experimental.
- Httpster: contemporary sites in lots of different styles.
- ThemesMotion Best Sites: curated website and portfolio references. ThemesMotion also helps people find design experts, freelancers, agencies, templates and premium design assets. [ADD MY EXAMPLE HERE: if you're affiliated with ThemesMotion, say so in one line. Readers appreciate it.]
Landing pages
A landing page has to explain its value fast. Watch the headline, supporting copy, CTAs, social proof, and the order things appear in.
- Land-book: landing page and website examples across industries.
- Lapa Ninja: hero layouts, feature sections, ways to organise marketing content.
- One Page Love: one-page sites. Good for launches, personal sites and portfolios.
- Webflow Templates: browse template layouts to see common page structures.
SaaS and product sites
SaaS sites have to explain the product, build trust and get people to sign up, all on one page.
- SaaSFrame: marketing pages and product UI examples.
- SaaS Pages: SaaS landing pages and product messaging.
- SaaSpo: product presentation and marketing visuals.
- Refero again: useful when you're designing both the marketing site and the app itself.
Portfolios
A portfolio isn't a pile of nice screenshots. It should show what you did, how you decided things, and what your part was.
- Behance: how designers structure projects and explain their work.
- Awwwards: creative portfolios and agency sites.
- ThemesMotion Best Sites: different portfolio styles to react to.
- Framer Marketplace: templates that show portfolio structures and what's possible in Framer.
Framer and Webflow
If you build in one of these tools, seeing what others made with it saves a lot of guessing.
- Framer Showcase: published Framer sites. Look at layouts, type, animation and responsive behaviour.
- Framer Marketplace: templates and starting points.
- Made in Webflow: real Webflow sites and, where available, projects you can inspect or reuse under their terms.
- Webflow Awards: work the platform has recognised.
Mobile UI
Small screens force clear decisions. Watch how apps handle navigation, onboarding, empty states, forms and feedback.
- Screenlane: mobile and web interface screens and patterns.
- Pinterest: handy for moodboards. But content quality varies, so check the original source before you rely on an image or reuse anything.
(Mobbin from the UX section is great here too.)
Animation and interaction
Motion can show a state change, give feedback or guide attention. It can also just get in the way. This is the section where devs will probably feel most at home.
- LottieFiles: animation assets and ideas. Check the licence first.
- CodePen: front-end experiments with CSS, JavaScript and interface effects.
- Codrops: tutorials and creative coding experiments.
- The FWA: experimental digital experiences and motion inspiration.
If you add animation, respect users who've asked for less of it:
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Bonus, typography: Typewolf shows font pairings and how type is used in real designs.
How I'd use these without copying anyone
Bookmarking 31 sites won't improve your next design. Using them with a plan might.
- Define the problem. "A dashboard that surfaces important info fast" beats "something modern."
- Pick two or three sites. You don't need all of them. Mobbin plus Page Flows for a user journey. Land-book plus Lapa Ninja for a landing page.
- Save a few references and write down why they work. Is the hierarchy clear? Is the navigation obvious? How does it behave on mobile? Without the notes, you're just collecting screenshots.
- Build your own version. Use the principles, then fit them to your audience, content, brand and constraints. If you want to reuse images, code, fonts or templates, check the licence.
- Test it. Different screen sizes, readability, keyboard access, contrast, performance. Can someone actually finish the task?
[ADD MY EXAMPLE HERE: one time you copied too closely, skipped testing, or learned something from a reference]
What about you?
Which site do you open first when you need design ideas? And is there one missing from this list that more people should know about?
Drop it in the comments, along with what makes it useful for your workflow.
Top comments (0)