The best websites for web design inspiration, grouped by what you need

The best websites for web design inspiration depend on what you are looking for. Award galleries like Awwwards and CSS Design Awards show bold, high-craft work. Curated galleries like Land-book and One Page Love show everyday business pages. Libraries like Mobbin and Refero show real screens from shipped products. Tools like Fonts In Use, Coolors and Realtime Colors help with type and color. Most designers keep a handful of these bookmarked and use each one for a different job.

Below are 20 sites grouped by purpose, with what each is best for, what it costs, and one tip for using it. After that, we cover how to use inspiration without copying and how to turn it into a brief your designer can act on.

Summary table

Award and curated galleries

Awwwards judges submitted websites and names a Site of the Day. It also runs Awwwards Honors, category awards for areas like e-commerce, typography, portfolios and business services. Best for: seeing what top studios are doing with motion and layout. Cost: free to browse. Tip: many winners are heavy on animation. Look at the category awards for ideas that fit a normal business site.

CSS Design Awards picks a Website of the Day based on judges' scores, and the public votes on UI, UX and Innovation. Best for: comparing how sites score on looks versus usability. Cost: free to browse. Tip: use the tag filters, like "minimal" or "typographic," to narrow the gallery to a style.

Land-book is a hand-picked gallery of website examples plus a large library of sections like heroes, testimonials, pricing and footers. Best for: business, SaaS and service sites. Cost: free plan with limited access; a paid Pro plan gives full access. Tip: browse by section when you only need help with one part of a page, like a pricing table.

One Page Love has curated one-page websites since 2008 and now also collects page section examples. Best for: landing pages, portfolios and small business sites. Cost: free to browse. Tip: the section examples are a quick way to see dozens of ways to lay out the same block.

UI patterns and real product flows

Mobbin is a searchable library of real mobile apps, web apps and websites. It covers single screens, full flows like onboarding and checkout, and website sections. Best for: seeing how shipped products handle forms, sign-up and pricing. Cost: free account with limited access; paid plans for full access. Tip: search for a flow, like "checkout," and compare five apps side by side before you design yours.

Refero is a design reference library with tens of thousands of web and iOS screenshots and advanced search. Best for: finding a specific screen type fast. Cost: free plan with limited search results; paid plans add full results, user flows and a Figma plugin. Tip: search by the page you are building, like "pricing" or "settings," not by style.

Designer communities

Dribbble is a platform for discovering designers, their work and their services. Best for: visual ideas and finding a designer to hire. Cost: free to browse. Tip: many posts are concepts, not live sites. Treat them as mood, not proof that a layout works.

Behance is Adobe's platform to showcase and discover creative work. Projects often show the full story, from sketches to final pages. Best for: branding and full case studies. Cost: free to join. Tip: save projects to a moodboard so your picks stay in one place.

Pinterest lets you save Pins to boards, split boards into sections and invite collaborators. Best for: gathering ideas with a partner or team. Cost: free to browse. Tip: make a secret board for your project and add your designer as a collaborator.

Typography and color

Fonts In Use is an independent archive of typography indexed by typeface, format, industry and period. Best for: seeing how a font looks on real work. Cost: free to browse. Tip: filter by the Web format to see the font on sites, not posters.

Typewolf features a Site of the Day and lists the typefaces each site uses. Best for: font pairings on live websites. Cost: free to browse. Tip: when a pairing catches your eye, check whether the fonts are free or need a license before you fall in love.

Coolors generates color palettes fast. You lock the colors you like and regenerate the rest, or pick colors from a photo. Best for: starting a palette from scratch. Cost: free, with a paid Pro upgrade. Tip: start from a photo of your product or space so the palette feels like your brand.

Adobe Color offers a color wheel, palette extraction from images, a contrast checker and a color blindness simulator. Best for: checking that a palette is readable. Cost: free to start. Tip: run every text and background pair through the contrast checker before you hand colors to a developer.

Realtime Colors shows your colors and fonts on a sample website as you change them, then exports CSS and other formats. Best for: seeing a palette in context. Cost: free. Tip: test your palette in both light and dark mode before you commit.

Platform showcases

Made in Webflow shows sites built in Webflow by its community. You can filter for cloneable sites and copy one as a starting point. Best for: seeing what Webflow can do. Cost: free to browse. Tip: clone a site you like to study how its layout is built, then rebuild it with your own design.

Framer Gallery shows standout sites made in Framer, sorted into categories like business, agency, ecommerce, health and places. Best for: modern marketing sites in your industry. Cost: free to browse. Tip: start with your own category, like legal or real estate, to see what peers are doing.

Shopify Theme Store has free themes made by Shopify and paid themes from outside designers. Best for: store layouts. Cost: free and paid themes. Tip: before buying a paid theme, check what support comes with it, as Shopify itself advises.

WordPress theme directory lists themes you can filter and preview, including style variations and patterns. Best for: WordPress sites. Cost: free to browse. Tip: preview a theme's style variations to see how far it can stretch.

Accessibility-minded inspiration

GOV.UK Design System publishes components and patterns that it says meet WCAG 2.2 AA. The team tests them with screen readers, magnifiers and speech tools. Best for: forms, error messages and other details that have to work for everyone. Cost: free to browse. Tip: copy the behavior, not the look. Its form and error patterns work in any visual style.

The Component Gallery collects real examples of about 60 interface components from public design systems. Best for: comparing how many teams build the same thing, like tabs or a skip link. Cost: free to browse. Tip: open the design system docs it links to; many explain their accessibility choices.

For the rules behind accessible design, read our guide to website accessibility, the ADA and WCAG.

How to use inspiration without copying

Study structure, not pixels. Ask why a page works. What comes first? How many choices does the visitor see? Where is the main button? Those answers carry over to your site. The exact colors and shapes do not.

Respect copyright and trademarks. A site's code, photos, illustrations, written copy and logos belong to someone. Copying them, or making a page that looks like another brand, can cause legal trouble and confuse customers. Your words matter just as much as the layout, which is why website copywriting deserves its own plan.

Build a mood board in Figma. Paste screenshots into one file, group them by topic (layout, type, color, photos) and add notes. If you are new to the tool, start with what Figma is and how it works.

Mix sources. One page from an award gallery, a pricing table from Land-book and a form pattern from GOV.UK will blend into something new. Ten pages from one competitor will not.

Start from your brand. Inspiration should support your own colors, voice and story, not replace them. See how to bring a new business brand to your website.

How to turn inspiration into a brief for your designer

A pile of links is not a brief. Here is how to make it useful:

1. Pick five to ten examples. More than that blurs the message.
2. Write one line per example. "I like how the services are laid out as cards" beats "I like this site."
3. Add two or three things you do not want. Dislikes often tell a designer more than likes.
4. Name the job of each page. Book a call, sell a product, collect leads. Inspiration should serve the goal.
5. List your fixed pieces. Logo, brand colors, fonts, photos and any must-have pages.
6. Share it in one place. A Figma file or a shared Pinterest board keeps everyone looking at the same thing.

If you are hiring an agency, fold this into your request. Our guide to questions to ask a web agency and how to write an RFP shows where it fits.

Quick checklist

• Bookmark one site from each group above
• Save examples to one board or Figma file
• Note what you like about each example, in one line
• Add a few examples you do not like
• Check color contrast and font licenses early
• Use real product flows for forms, checkout and sign-up
• Never copy code, images, copy or logos
• Turn the board into a short written brief

Have a folder full of sites you love and no idea how to turn it into your own? Talk to us and we will help you shape it into a plan.