# 100 YouTube Creator Websites: 10 Design Ideas to Borrow

By Swipefile | Published 2026-09-08
Canonical: https://swipefile.design/blog/youtube-creator-website-design-examples/

A creator’s website gives visitors somewhere to go beyond the next video: a body of work to explore, a recipe to cook, a newsletter to read, or a product to buy. We collected 100 English-language websites from prominent YouTube creators and their brands. These 10 examples show how the purpose of a site can shape its opening screen.

## Key takeaways

- Choose the website’s main job before choosing its visual style.
- Pair a familiar personality with enough context for a first-time visitor.
- Let original work, photography, or illustration supply the character.
- Borrow a specific layout decision, then test it with your own content.

[Explore the full YouTube creator websites collection](https://swipefile.design/board/youtube-creator-websites/)

These are editorial observations of dated captures, not measured performance rankings. Original sites may have changed.

## 1. Thomas Frank: give expertise a clear starting point

[Thomas Frank](https://swipefile.design/ref/youtube-thomas-frank/) · [Original source](https://thomasjfrank.com/) · Captured 2026-09-08

![Thomas Frank — captured reference](https://swipefile.design/_astro/card.COyWsrNQ.webp)

A bright split layout places a concise introduction beside a large rounded portrait. Violet accents distinguish the routes into learning and templates. The opening combines a recognizable person with concrete things a visitor can explore.

**Adapt it:** Write the introduction around the subject you help with, then give your most useful resource a specific label. Use the portrait to establish identity while keeping the next action readable.

**Watch for:** A newcomer needs more context than an existing subscriber. Check that your headline makes sense before the visitor recognizes your name.

## 2. Peter McKinnon: let the work provide the visual range

[Peter McKinnon](https://swipefile.design/ref/youtube-peter-mckinnon/) · [Original source](https://www.petermckinnon.com/) · Captured 2026-09-08

![Peter McKinnon — captured reference](https://swipefile.design/_astro/card.IIr1ySe-.webp)

A small centered identity and category navigation sit above a dense, edge-to-edge photography grid. Portraits, objects, and lifestyle images supply the contrast and color; the surrounding interface stays quiet.

**Adapt it:** Use a simple gallery when a body of visual work is your strongest introduction. Select images that demonstrate a deliberate range and make category labels understandable without hover.

**Watch for:** The images do most of the work here. A similar grid of repetitive placeholders will not have the same effect. Review each crop and preserve useful project context.

## 3. Matt D’Avella: place the newsletter inside the introduction

[Matt D’Avella](https://swipefile.design/ref/youtube-matt-d-avella/) · [Original source](https://www.mattdavella.com/) · Captured 2026-09-08

![Matt D’Avella — captured reference](https://swipefile.design/_astro/card.Db9iIlvg.webp)

A close portrait fills the opening behind a large white statement. The newsletter form appears within that composition, so the invitation to stay in touch is part of the introduction rather than a separate destination.

**Adapt it:** When publishing is the main purpose of your site, explain what readers will receive beside the signup form. Keep the field, action, and confirmation message legible against the image.

**Watch for:** Text over photography depends on the crop. Test different screen widths and an image-loading failure, and ensure the form works with a keyboard.

## 4. Johnny Harris: carry an editorial voice into the page

[Johnny Harris](https://swipefile.design/ref/youtube-johnny-harris/) · [Original source](https://www.johnnyharris.ch/) · Captured 2026-09-08

![Johnny Harris — captured reference](https://swipefile.design/_astro/card.D1tpmoSu.webp)

A cream graph-paper background, short serif introduction, and offset stack of travel photographs give the homepage the character of an assembled notebook. Minimal navigation leaves those few elements room to establish a point of view.

**Adapt it:** Choose one visual idea connected to your actual work: a notebook, a contact sheet, or an annotated map. Let it guide a few details while keeping the introduction and links straightforward.

**Watch for:** Decorative texture can compete with small text. Keep important labels on a quiet surface and use imagery you have permission to publish.

## 5. Jesse Showalter: make a short introduction feel complete

[Jesse Showalter](https://swipefile.design/ref/youtube-jesse-showalter/) · [Original source](https://www.jesseshowalter.com/) · Captured 2026-09-08

![Jesse Showalter — captured reference](https://swipefile.design/_astro/card.BuRw4la5.webp)

A small circular portrait precedes a large centered serif introduction. Abundant white space and a restrained menu put nearly all the opening emphasis on the person and the statement.

**Adapt it:** If a short positioning statement explains your work well, give it room. Establish hierarchy through scale and spacing before adding extra panels, badges, or background effects.

**Watch for:** Minimal navigation still needs to be discoverable. A visitor should be able to find work, learning resources, or contact details without guessing what an unlabeled control does.

## 6. Joshua Weissman: organize around what visitors want to make

[Joshua Weissman](https://swipefile.design/ref/youtube-joshua-weissman/) · [Original source](https://www.joshuaweissman.com/) · Captured 2026-09-08

![Joshua Weissman — captured reference](https://swipefile.design/_astro/card.BGK1VUlE.webp)

The pale recipe homepage places a bold cooking introduction and pastel category chips beside a large featured dish photograph. It introduces a cooking destination through food and categories, rather than relying on a creator portrait alone.

**Adapt it:** For a useful content library, make topics and featured items visible early. Choose labels based on the reader’s task and pair each preview with an informative title.

**Watch for:** A screenshot shows the category presentation, not the quality of search or filtering. Test those paths with a realistic archive before borrowing the structure.

## 7. Nisha Vora: combine a publication’s identity with its author

[Nisha Vora — Rainbow Plant Life](https://swipefile.design/ref/youtube-nisha-vora/) · [Original source](https://rainbowplantlife.com/) · Captured 2026-09-08

![Nisha Vora — Rainbow Plant Life — captured reference](https://swipefile.design/_astro/card.OCOmbny7.webp)

Rainbow Plant Life uses a warm yellow field, an overlapping white introduction panel, and a bright kitchen portrait. The panel gives text a distinct reading surface while the photograph connects the food publication to its creator.

**Adapt it:** Use a clear text surface when an expressive background or large photograph surrounds the introduction. Introduce both the publication’s subject and the person behind it.

**Watch for:** Overlapping panels need a sensible reading order on smaller screens. Let the sections stack naturally instead of preserving every desktop offset.

## 8. Marques Brownlee: give a creator store a product-led opening

[Marques Brownlee](https://swipefile.design/ref/youtube-marques-brownlee/) · [Original source](https://mkbhd.com/) · Captured 2026-09-08

![Marques Brownlee — captured reference](https://swipefile.design/_astro/card.B-oQo8hB.webp)

The MKBHD storefront fills its opening with a product photograph, minimal edge navigation, and a small high-contrast shop action. This is an official store reference: the product, rather than a biography or video archive, is the visual focus.

**Adapt it:** For a store, choose a hero image that helps a visitor understand the merchandise and give the shopping route a clear label. Keep product information accessible after that first click.

**Watch for:** A familiar name can supply context that a new brand has not earned yet. Add an explicit explanation of what you sell when the photography alone leaves room for doubt.

## 9. Mark Rober: show the activity behind an educational product

[Mark Rober](https://swipefile.design/ref/youtube-mark-rober/) · [Original source](https://www.crunchlabs.com/) · Captured 2026-09-08

![Mark Rober — captured reference](https://swipefile.design/_astro/card.UsaVRLBS.webp)

CrunchLabs pairs playful lettering with hands-on project imagery and a clear starting action. The opening presents an engineering activity, helping the visitor connect the product with something they could build.

**Adapt it:** Show your educational product in use. A concrete project or worked example can explain the subject alongside a brief statement of who it is for.

**Watch for:** The saved viewport freezes one moment. Inspect the live source to judge video behavior, and provide a useful still image and readable content when motion is reduced or unavailable.

## 10. Jaiden Animations: use original illustration as the identity

[Jaiden Animations](https://swipefile.design/ref/youtube-jaiden-animations/) · [Original source](https://jaidenanimations.com/) · Captured 2026-09-08

![Jaiden Animations — captured reference](https://swipefile.design/_astro/card.BQB2Vqlv.webp)

A purple illustrated character hero pairs welcoming oversized text with line-art motifs and compact store navigation. Illustration gives the opening its distinct character while the interface provides a simple frame.

**Adapt it:** Build a small visual vocabulary from your own characters or artwork: a hero illustration, a few supporting motifs, and a restrained set of colors. Keep shopping and navigation labels easy to read.

**Watch for:** The transferable idea is a consistent illustrated identity. Another creator’s characters, marks, and artwork are not assets for a new brand.

## Browse all 100 creator websites

[Open the YouTube creator websites collection](https://swipefile.design/board/youtube-creator-websites/) to compare every reference, inspect its screenshot, and follow its original source. Save the collection or choose a smaller group for your own board. Each reference includes design notes and an adaptation prompt.

The collection includes English-language websites across food, science, fitness, filmmaking, business, music, and other subjects. Some creators use a personal domain; others direct visitors to a publication, product company, or official store. Treat those as different kinds of website when comparing them.

## Choose the job before the style

Start with one sentence: “People come here to ___.” A photographer might finish it with “judge my work.” A cooking creator might choose “find something to cook.” A teacher might choose “start learning.” That sentence helps decide what belongs in the first screen.

A gallery serves the first task. Content categories serve the second. A clear starting resource serves the third. All three can express a strong personality, but they should not inherit the same page outline just because their owners publish videos.

Give secondary audiences a route without making every action equally prominent. A recipe visitor can still find the author’s story; a portfolio visitor can still join a newsletter. The opening needs an order of importance.

## Make the site understandable without the channel

Someone arriving from a video may already know the creator’s face, subject, and products. Someone arriving through a shared link may know none of them. Read your opening without that background: does it explain what is here and what happens after the main click?

A portrait establishes identity, but it cannot explain a service by itself. A dramatic product photograph may establish a mood while leaving the category unclear. Add the few words needed to remove that uncertainty before adding another decorative element.

For a creator business, distinguish the person from the offer. “Explore my work,” “Browse recipes,” and “Shop the collection” point to different destinations. Use labels that describe the destination your site actually provides.

## Turn three references into a useful brief

Choose a small set with complementary strengths. For example, Thomas Frank can inform the clarity of an introduction, Peter McKinnon the restraint around visual work, and Matt D’Avella the placement of a newsletter invitation. You do not need to combine their colors, typography, and photographs.

Write a brief in your own terms:

> Build a homepage for an independent filmmaking teacher. Open with a short explanation of who the lessons help and a link to the first lesson. Follow with three original projects and a concise email invitation that explains what readers receive. Use my photography and keep the same reading order on mobile.

Attach the references and explain what each contributes. This gives a designer or coding assistant concrete decisions to work with. The [mood board to design brief guide](https://swipefile.design/blog/mood-board-to-ai-design-brief/) develops that process further.

## Check what the screenshot cannot show

These are opening-viewport captures from September 8, 2026. They are useful evidence of composition, hierarchy, color, and visible content at that moment. They do not establish how a menu opens, how a form handles an error, or how an entire page behaves on a phone.

After adapting a layout, check the actual tasks: open the menu with a keyboard, follow the primary action, submit a form with invalid input, and read the page at a narrow width. If you use video, make sure the headline and action remain useful when it does not play. Judge your version by whether visitors can do what they came to do.

## Common questions

### Is this a ranking of the 100 largest YouTube channels?

No. It is an editorial selection of prominent creators and creator brands whose English-language websites are useful design references. Subscriber counts were not used to rank the collection.

### Are all 100 references personal portfolio websites?

No. The collection includes personal portfolios, publications, educational businesses, and official stores. A creator’s brand website may be the most relevant reference for a particular design task.

### What was checked when the collection was made?

The selected English-language pages and their creator connections were checked on September 8, 2026. Each reference includes an opening-viewport screenshot, a link to the original website, and design notes. The captures do not document every page or verify accessibility, checkout, or conversion performance.

Editorial approach: https://swipefile.design/about/#editorial
More guides: https://swipefile.design/blog/