Dylan drum lesson site prototypes

All rounds in one place.

Five rounds of standalone HTML landing-page prototypes for Dylan’s drum lesson waitlist. Round 1 is broad exploration, Round 2 gets simpler and weirder, Round 3 expands the winning poster direction, and Round 5 focuses on hybrid concepts and testimonials.

Round 1

Original broad landing-page explorations

Jump to round 1
01-kinetic-playgroundColorful, kinetic, active, and friendly: this direction treats drum lessons as a high-energy creative playground that still feels structured and paren02-modern-music-schoolPolished, credible, premium private instruction for a soon-to-launch drum lesson studio. The direction is closer to a tasteful local music academy tha03-global-rhythm-mapThis landing page frames drum lessons as a rhythm passport: a warm, curious way for students to discover how patterns, movement, listening, and cultur04-math-of-grooveDesign stance: rhythm as patterns, math, fractions, grids, coordination, and building blocks — STEM-friendly for curious kids and reassuring for paren05-garage-band-launchpadTeen and young-adult cool without drifting into adult bar-band or grungy imagery. This concept frames drums as the launchpad for playing with other pe06-parent-trust-letterWarm editorial, parent-focused landing page for a soon-to-launch independent drum lesson studio.07-practice-questGamified, goal-driven landing page for a soon-to-launch independent drum lesson studio.08-minimalist-waitlistUltra-simple, high-conversion waitlist page for a soon-to-open private drum lesson studio. The layout strips the page down to one strong promise, one 09-percussive-zineExpressive indie poster/zine energy for a drum lesson waitlist page. The direction uses cutout blocks, high-contrast color, heavy type, imperfect rota10-calm-confidenceA soft, grounded landing page for a soon-to-launch drum lesson studio. The direction emphasizes calm confidence, emotional regulation, disciplined pra

Round 2

Simpler, stranger concept artifacts

Open old gallery
01-single-posterA single bold gig-poster style waitlist page for an independent drum teacher.02-practice-receiptA single-page drum lesson waitlist prototype styled as a printed practice log / lesson receipt.03-rhythm-labA minimal, experimental drum lesson landing page built around a tap-able rhythm grid.04-parent-noteA quiet, handwritten-feeling note from the drum teacher to parents. This direction intentionally avoids a SaaS-style landing-page structure: no hero g05-loud-roomA loud, restrained drum lesson landing page for energetic kids and the parents who want that energy guided safely.06-world-countA stripped typographic rhythm sampler for an independent drum teacher waitlist page.07-tiny-curriculumA compact mini syllabus for an independent drum teacher waitlist page.08-basement-tapeTeen/young-adult landing page concept for drum lessons, framed as a dark practice-room demo tape rather than a conventional music-school page.09-calm-meterA soft, minimalist drum lesson waitlist page built around calm focus and steady confidence.10-blank-sheetA premium-minimal landing page built around the feeling of a blank notation page and the first counted beat.

Round 3

Poster-first variations based on the winning direction

Open old gallery
01-four-count-flyerClosest descendant of the Round 2 winner, `01-single-poster`.02-torn-tab-posterA modern community bulletin-board flyer for Dylan's soon-to-open drum lesson space. The design keeps the winning Round 2 poster energy, but shifts the03-practice-room-doorA poster-first landing page concept for Dylan's soon-to-open drum lesson space.04-risograph-rhythmA poster-first landing page concept for Dylan's soon-to-open drum lesson space.05-drumline-calloutMarching/drumline rehearsal callout poster with discipline, teamwork, and focus energy without using a militaristic visual language.06-math-club-gigA poster-first landing page direction for Dylan's drum lesson waitlist. The visual system is half math club announcement, half all-ages basement show 07-parent-fridge-flyerA warm, practical poster concept for Dylan's upcoming drum lesson waitlist. The page is designed to feel like a flyer a parent would actually keep on 08-first-band-posterTeen-friendly poster concept for Dylan's upcoming drum lesson waitlist.09-world-beat-broadsideElegant broadside-poster direction for Dylan's drum lesson waitlist.10-silence-to-soundPremium minimal poster direction for Dylan's drum lesson waitlist.

Round 4

Blending Rhythm, Discipline & Diverse Visuals

01-court-visionBasketball court graphics, strong typography, team-focused ensemble playing.02-fast-break-beatsElectric, fast-motion, street-sport aesthetic. Focus on energy and dynamic movement.03-game-time-grooveScoreboard, utility, practice-as-training mentality. High contrast monochromatic with intense red.04-blue-note-basicsClassic jazz album cover, deep midnight blue, focus on the art of listening.05-syncopated-shadowsHigh contrast, black and white tint, elegant but edgy.06-cool-fundamentalsGrid-based, architectural, minimal but moody. Like a modern metronome or sheet music.07-earth-rhythmsEarth tones, soft textures, global pattern influence. Approachable for families but rooted in deep musical history.08-global-groove-mapPlayful, approachable, organic blob shapes. Kid-friendly but mature enough for parents.09-woven-beatsInterlocking visual patterns representing community and practice. Olive green, clay, cream.10-structured-soundSwiss-design influenced, highly structured, academic typography, focusing on clear fundamentals.11-white-space-rhythmExtreme whitespace, airy, elegant, sharp black text. Highly focused on the waitlist action.12-essential-beatsBrutalist, utility, bare-bones. High conversion focus with absolutely no distraction.

Round 5

The Hybrids & Laterals

01-riso-sequencerA 4x4 grid step sequencer built entirely with HTML, CSS, and vanilla JavaScript. It uses CSS radial gradients and mix-blend-mode to simulate imperf...02-analog-dashboardA paper-textured control panel utilizing CSS box-shadow and borders to emulate physical depth.03-stamped-curriculumA highly structured, academic grid layout simulating a printed syllabus.04-playbook-equationsA prototype for Dylan's Drum Lesson Waitlist. Theme: The Academic Athlete (Math Club + Court Vision) Features: - Graph paper background made with ...05-varsity-mathA prototype for Dylan's Drum Lesson Waitlist. Theme: The Academic Athlete (Math Club + Court Vision) Features: - Bold, athletic typography (`Impac...06-court-chalkboardA prototype for Dylan's Drum Lesson Waitlist. Theme: The Academic Athlete (Math Club + Court Vision) Features: - Basketball half-court layout buil...07-loud-minimalismPart of Theme 3: The Premium Brutalist. This prototype features vast white space and stark minimalism. The user is presented with a single, massiv...08-swiss-brutalismPart of Theme 3: The Premium Brutalist. This prototype uses a rigid, academic grid layout but is stripped of all color (strictly black and white)....09-essential-impactPart of Theme 3: The Premium Brutalist. This prototype features a zero-friction waitlist form. Extremely brutalist and simple. As the user types t...10-rhythm-zineA prototype for Dylan's Drum Lesson Waitlist, exploring "Theme 4: The Zine-System".11-punk-curriculumA prototype for Dylan's Drum Lesson Waitlist, exploring "Theme 4: The Zine-System".12-interactive-flyerA prototype for Dylan's Drum Lesson Waitlist, exploring "Theme 4: The Zine-System".13-cymatics-poolA dark, interactive interface where mouse movements and typing trigger "cymatic ripples" across the screen, mimicking sound waves in a liquid medium.14-oscillator-dashboardThe UI mimics an oscilloscope or lab equipment with green glowing lines on a black/dark background, utilizing monospaced fonts.15-frequency-shiftA highly typographic, black-and-white page that visualizes "noise" vs. "signal". Initially, the typography vibrates and shifts.16-composition-bookPrototype for Dylan's Drum Lesson Waitlist. Features a classic black-and-white marbled composition notebook aesthetic with handwritten elements and...17-habit-trackerPrototype for Dylan's Drum Lesson Waitlist. Features a minimalist habit tracker calendar interface where interacting with past streaks reveals pare...18-slow-metronomePrototype for Dylan's Drum Lesson Waitlist. Features a very calm, slow-moving CSS pendulum/metronome. The waitlist form only fades in after a speci...19-the-staff-linesThe entire page layout is built around five horizontal lines spanning the width of the screen (mimicking a musical staff).20-dynamic-markingsThe page starts almost invisibly quiet. As the user interacts (scrolling or moving the mouse), the contrast, text size, and layout boldness increas...21-rest-and-playFocuses heavily on the concept of "rests" (silence) in music. The layout is mostly large blocks of empty space, punctuated by sudden, sharp typogra...