EN

Tips・Level up your design

Web design reference sites

When you're stuck on colors or layout, looking at real examples is the fastest shortcut. All-around galleries, one-page specialists, UI part libraries, award-level showcases — here they are by purpose, with screenshots.

When something feels “somehow lacking,” looking at real examples is the fastest shortcut. Here I introduce web design reference sites sorted by what you want to do, with screenshots.

TipsColor-scheme sites so you never agonize over colorStuck on the colors themselves? Here.

Type 1: Reliable all-around design galleries

These are standard sites that gather a wide range of real examples across every genre.

SiteInspire

A calm, high-quality gallery that’s been running for years. You can narrow things down by style, subject, type, and platform, so it’s easy to land on examples close to what you’re making.

The SiteInspire screen. On the left, the tagline “A showcase of the web’s finest design + talent”; on the right, category links like Typographic, Portfolio, Minimal, and Grid Layout, with site screenshots below
Categories like “Portfolio” and “Minimal” are lined up right on the top page, so you can jump straight in without thinking up search words.

SiteInspire

Land-book

A gallery collecting only carefully selected, simple and beautiful sites.

The Land-book screen. Sites with clean layouts are arranged in a grid with generous whitespace
Because they carefully select a limited number, each one is highly polished and easy to reference for layout.

Land-book

Type 2: Galleries focused on one-page sites

These sites collect only single-page sites, often called landing pages or “one pagers.” They’re a good fit when you’re thinking about a one-sheet layout, like a self-introduction page.

Lapa Ninja

A simple, easy-to-read gallery collecting only landing pages.

The Lapa Ninja screen. Below category tags by industry, landing page screenshots are stacked vertically
It’s sorted by industry, and it’s helpful as a model for how a one-sheet page is structured (what to place, and in what order from the top).

Lapa Ninja

One Page Love

A gallery that has specialized in one-page sites since 2008, with thousands of entries. It’s the best fit for personal sites and portfolios, which are usually one page to begin with.

The One Page Love screen. The heading “One Page websites, curated.” sits above links to browse 9051 One Pagers or 8231 page sections, with three site screenshots below
Alongside whole sites, you can browse “page sections” on their own — headers, pricing, footers — which is handy when only one block of your page is giving you trouble.

One Page Love

Type 3: Finding real examples of UI parts and screens

When you want to find real examples of small parts rather than the whole page (“How do I present a button?” “How should I arrange a form?”), sites like these are useful.

Mobbin

A huge UI database collecting over 600,000 screens from real apps and sites.

The Mobbin screen. Screenshots of real app screens are laid out in a grid by part type
You can filter by scene, like “login screen” or “search results,” and compare how actual apps build that part.

Even the free plan lets you view recently added entries, but a paid plan is needed to search thoroughly. Just knowing “this kind of resource exists” is plenty for now.

Mobbin

Dribbble

A standard site where designers post ideas for small parts like buttons and icons.

The Dribbble screen. Colorful UI parts and icon designs are tiled as square thumbnails
There are lots of design ideas focused on a single part, giving you discoveries like “oh, you can present a button this way too.”

But unlike Mobbin, these are “works,” not apps that actually run. Some of them can’t actually be built as-is, so treat it strictly as a place for hunting ideas.

Dribbble

Type 4: Viewing award-level, top-tier design

When you want to see more refined, next-level design, these are the places that only let the very best through.

Awwwards

A site collecting award-level sites posted by designers around the world.

The Awwwards screen. Sites with rating scores are introduced one by one with large images
From highly rated sites, you can see next-level techniques, like the use of motion and whitespace. It’s better suited to browsing and developing your eye than to copying.

Awwwards

Recent (formerly Godly)

A gallery that collects only world-class work, and very little of it. It was long known as Godly; the same team now runs it as Recent, and it covers branding, typography, motion, and 3D as well as websites.

The Recent screen. Filter tags like Web, Interface, Branding, Typography, and Motion run along the top, above a grid of design work
The bar for getting listed is high, so it’s a good place to browse when you want to know what the current top of the field looks like.

Recent

How to use reference sites: don’t imitate, break them down and learn

When you find a site you like, don’t try to reproduce the whole thing. Break it into elements and take them in.

Part to referenceWhat to do
ColorsBorrow only the combination of colors used
LayoutSee in what order the headings, images, and text are arranged
Use of whitespaceSee how much space is left between elements

Copying the code (HTML/CSS), photos, or text as-is is a no-go. Borrowing only the idea and writing the code with your own hands is the shortcut to getting better.

TipsGetting started with developer toolsHere’s how to use DevTools at a basic level.

Summary

  1. Choose reference sites by what you want to do: all-around / one-page-focused / hunting UI parts / award-level
  2. Stuck on the whole page? SiteInspire or Lapa Ninja. Stuck on small parts like buttons? Start with Mobbin (paid for serious use) or Dribbble
  3. Imitate only the idea of colors and layout; write the code yourself

Just finding one page you like keeps your hands from freezing up when you build your own page.

FAQ

Is it okay copyright-wise to just copy a reference site's design?
If you only take inspiration from the "idea" of the colors or layout, there's no problem. But copying and using the code, photos, text, or illustrations as-is is copyright infringement. Recreate only the visual ideas with your own hands.
What if I also want to reference how it looks on a phone?
Open the site itself at phone or tablet width, or switch the screen width with the device toolbar in DevTools, and you can use it as a real example of the phone view.
What if I look at reference sites but still can't decide on colors?
Deciding the color combination first with a color-palette site, then looking at layout reference sites, keeps your hands from freezing up. The trick is not to try to work out both from scratch at the same time.

Popular tips