# Top Design Inspiration Websites for Developers: The Complete Curated List from Brad Traversy's Repository
> Discover top design inspiration websites for developers curated by Brad Traversy. Explore Awwwards, Dribbble, Behance & more in this complete list to elevate your projects.
- Repository: [Brad Traversy/design-resources-for-developers](https://github.com/bradtraversy/design-resources-for-developers)
- Tags: tutorial
- Published: 2026-03-04
---
**The `bradtraversy/design-resources-for-developers` GitHub repository maintains a comprehensive list of over 40 design inspiration websites in its [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md) file, featuring curated galleries like Awwwards, Dribbble, Behance, CSS Zen Garden, and specialized resources for landing pages, emails, and SaaS interfaces.**
Finding high-quality design inspiration is essential for developers who want to build visually appealing interfaces without starting from scratch. The **design-resources-for-developers** repository by Brad Traversy serves as a community-curated index of the best design inspiration websites for developers, all organized in a single [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md) file under the **Design Inspiration** section (starting around line 59).
## Where to Find the Official List
The canonical source for these recommendations lives in the repository's [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md) file. According to the source code analysis, the **Design Inspiration** section contains a markdown table listing 46 distinct websites, each with a direct URL and brief description. The table format makes it easy to scan and programmatically extract.
Key files in the repository include:
- [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md) – Contains the complete **Design Inspiration** table (lines 59-150)
- [`contributing.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/contributing.md) – Guidelines for submitting new resources
- [`.github/pull_request_template.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/.github/pull_request_template.md) – Template for community contributions
## Essential Design Inspiration Websites by Category
The repository organizes inspiration sources by utility. Below are the most-referenced categories with specific examples drawn directly from the [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md) table.
### Premier Web Design Galleries
These sites showcase award-winning and innovative web designs:
- **Awwwards** – Curated selection of the most innovative sites ([repo line 77-78](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L77))
- **Site Inspire** – Curated list of standout web & interaction designs ([repo line 101-102](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L101))
- **Httpster** – Randomly curated sites from developers around the world ([repo line 71-72](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L71))
- **Web Design Inspiration** – Daily updated gallery with fresh UI inspiration ([repo line 103-104](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L103))
### Landing Page & SaaS Inspiration
Developers building marketing sites or SaaS products should bookmark these specialized galleries:
- **Landingfolio** – Curated collection of high-conversion landing pages ([repo line 67-68](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L67))
- **Land Book** – Extensive, searchable landing-page archive ([repo line 73-74](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L73))
- **Lapa Ninja** – Hand-picked landing page designs ([repo line 87-88](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L87))
- **SaaS Landing Page** – Top-class SaaS landing pages with copy & design focus ([repo line 81-82](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L81))
- **Saaspages.xyz** – Curated SaaS landing pages emphasizing design and copywriting ([repo line 83-84](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L83))
### Creative Communities
For conceptual UI/UX work and artistic direction:
- **Dribbble** – Design community featuring hand-picked UI concepts, micro-interactions, and branding ([repo line 65-66](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L65))
- **Behance** – Creative portfolio platform with hundreds of UI/UX projects from designers worldwide ([repo line 63-64](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L63))
- **DeviantArt** – Massive art archive with 370M+ artworks for mood-boarding or UI concepts ([repo line 111-112](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L111))
### Component & Pattern Libraries
For specific CSS patterns, UI components, and navigation ideas:
- **CSS Zen Garden** – Classic CSS showcase with over 200 pure-CSS reinterpretations of the same HTML file, excellent for learning layout tricks ([repo line 61-62](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L61))
- **Codrops** – Daily UI ideas, animations, and front-end techniques ([repo line 79-80](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L79))
- **Calltoidea** – Reusable UI components and patterns ([repo line 107-108](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L107))
- **Freefrontend** – Free UI snippets with CSS/HTML/JS components ready for copy-paste ([repo line 89-90](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L89))
- **NavNav** – Navigation-pattern collection with responsive nav menus and interaction ideas ([repo line 105-106](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L105))
- **CSS Buttons** – Button-style gallery with 84 ready-to-copy CSS button examples ([repo line 125-126](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L125))
- **CSS Box-Shadow** – Shadow-style gallery with 91 CSS box-shadow examples ([repo line 127-128](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md#L127))
## How to Access These Resources Programmatically
Since the [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md) file uses a standard markdown table format, you can extract the design inspiration URLs for use in your own dashboards or applications.
### Extracting Data with Node.js
The following script fetches the raw [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md) from GitHub, locates the **Design Inspiration** section, and parses the markdown table into structured JSON:
```javascript
// extract-inspiration.js
// Pulls all URLs from the Design Inspiration section of the repo's README.
import fetch from 'node-fetch';
import {readFileSync} from 'fs';
const README_URL =
'https://raw.githubusercontent.com/bradtraversy/design-resources-for-developers/master/readme.md';
// Helper: get the markdown lines belonging to the Design Inspiration table
async function getInspirationLines() {
const resp = await fetch(README_URL);
const md = await resp.text();
const lines = md.split('\n');
const start = lines.findIndex(l => l.includes('## Design Inspiration'));
const end = lines.slice(start + 1).findIndex(l => l.startsWith('## '));
return lines.slice(start, start + end);
}
// Parse the markdown table and return an array of {name, url, description}
function parseTable(lines) {
const rows = [];
for (const line of lines) {
const match = line.match(/^\| \[(.+?)\]\((https?:\/\/.+?)\) \| (.+) \|$/);
if (match) {
rows.push({
name: match[1],
url: match[2],
description: match[3].trim(),
});
}
}
return rows;
}
// Demo: print the list as JSON
(async () => {
const section = await getInspirationLines();
const data = parseTable(section);
console.log(JSON.stringify(data, null, 2));
})();
```
This script downloads the raw markdown, isolates the section starting with `## Design Inspiration`, and extracts the name, URL, and description for each entry.
### Browser-Based Quick View
If you prefer not to install Node.js, you can view the list directly in your browser using the GitHub API:
```html
Design Inspiration Quick View
Design Inspiration URLs
```
This HTML file fetches the raw [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md) content, parses the **Design Inspiration** table, and renders it as a clickable list without requiring any build tools.
## Contributing to the Repository
The `bradtraversy/design-resources-for-developers` repository is community-maintained. If you discover a new design inspiration website that should be included, you can submit it by following the guidelines in [`contributing.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/contributing.md) and using the template provided in [`.github/pull_request_template.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/.github/pull_request_template.md).
All entries in the **Design Inspiration** section follow a consistent table format in [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md):
```markdown
| [Site Name](https://example.com) | Brief description of the resource |
```
When submitting a pull request, ensure your entry follows this exact pipe-delimited format so the automated parsers and readers can correctly extract the data.
## Summary
- The **bradtraversy/design-resources-for-developers** repository curates **46 design inspiration websites** in its [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md) file under the **Design Inspiration** section.
- Resources range from general galleries like **Awwwards** and **Dribbble** to specialized collections like **SaaS Landing Page**, **Really Good Emails**, and **CSS Zen Garden**.
- Developers can **programmatically extract** the full list using Node.js or browser-based JavaScript by parsing the raw markdown from GitHub.
- The repository accepts **community contributions** via [`contributing.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/contributing.md) and follows a strict table format for new entries.
## Frequently Asked Questions
### What is the best design inspiration website for developers?
**Awwwards** and **Dribbble** are widely considered the best starting points for developers seeking design inspiration. Awwwards features award-winning web designs with technical implementation details, while Dribbble offers thousands of UI concepts and micro-interactions. For CSS-specific learning, **CSS Zen Garden** remains the definitive resource for understanding the separation of content and style.
### How can I extract the design inspiration list programmatically?
You can extract the list by fetching the raw [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md) from `https://raw.githubusercontent.com/bradtraversy/design-resources-for-developers/master/readme.md`, locating the `## Design Inspiration` section (starting around line 59), and parsing the markdown table using regex or a markdown parser. The Node.js script provided in this article demonstrates how to convert the table into structured JSON for use in dashboards or applications.
### Can I contribute my own design resources to the repository?
Yes, the repository actively accepts community contributions. To add a new design inspiration website, fork the repository, edit the [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md) file to include your resource in the **Design Inspiration** table following the existing pipe-delimited format (`| [Name](URL) | Description |`), and submit a pull request using the template in [`.github/pull_request_template.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/.github/pull_request_template.md). Guidelines are detailed in [`contributing.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/contributing.md).
### Are these design inspiration websites free to use?
Most design inspiration websites listed in the repository are **free to browse** for viewing and research purposes. However, the assets, templates, or code snippets found on these sites may have varying licenses. Always check the individual site's license terms before using specific design assets in commercial projects. Sites like **CSS Zen Garden** and **Freefrontend** specifically offer code that is typically free to use and modify.