interdisciplinary.xyz

build your first draft

← back

Learn the language of the web, use AI to draft it, then hand it over—I'll take it from there.

This guide is free to use—no signup, no strings. Use it with AI or bring your output to me. I'd rather work from your rough draft than guess what you want.

You might be thinking…

  • “I'm not technical.” You don't need to be. Rough drafts are fine.
  • “I don't know what I want.” That's what the brief is for—start with 3 bullet points.
  • “My draft will be rough.” Perfect. You bring ideas; I handle polish and implementation.

The path

Before

Vague ideas, slow handover, lots of back-and-forth.

Guide

Learn the language, use AI tools, draft brief + content + visuals.

After

Clear brief, faster collaboration, 1–2 rounds of revision saved.

~5 min to skim essentials · ~30 min to draft a brief · ~10 min to pick 3 visual references

Vocabulary

Terms to use when briefing AI or handing over to me. These 7 cover most projects—expand for the full glossary.

Layout

Hero section
The first block visitors see when they land on a page. Usually includes a headline, subtext, and sometimes an image or video. Sets the tone and main message.

Say this to AI

“Add a hero section with a headline, subtext, and a CTA button below.”

Section
A distinct block of content on a page. Sections stack vertically and often have a heading. Examples: "About us", "Services", "Portfolio", "Testimonials", "Contact".

Say this to AI

“Add a section for pricing with 3 tiers.”

Section block

Navigation / Navbar
The menu or links that help users move between pages or sections. Usually at the top (navbar) or side (sidebar). Keep it simple—5–7 items max.

Say this to AI

“Create a navbar with links: Home, About, Services, Contact.”

Responsive
A design that adapts to different screen sizes—mobile, tablet, desktop. Content reflows instead of breaking.

Say this to AI

“Make it responsive so it works on mobile and desktop.”

mobile
tablet
desktop

Components

CTA (Call to Action)
A button or link that prompts a specific action. Every page should have a clear CTA. Use action verbs.

Say this to AI

“Add a prominent CTA button that says "Get started".”

Concepts

Wireframe
A simple, low-fidelity sketch of layout and structure. Boxes and lines—no colors or real content. Use early to agree on what goes where.

Say this to AI

“Create a wireframe for the homepage showing hero, features, and contact sections.”

Structure, no style

Mockup
A static visual design—how it will look, with colors, typography, images. Not yet built in code. Usually done in Figma or similar.

Say this to AI

“Create a mockup for the homepage with our brand colors.”

Visual design, not coded

What you can do—start small

Start with just 3 things: one sentence for the goal, one for the audience, one for must-haves. Add content and visuals when ready.

  • Write clear briefs

    Use AI to structure your ideas before we talk. Draft project goals, target audience, and must-haves. A good brief = fewer rounds of revision.

  • Generate content drafts

    Draft copy, headlines, or descriptions yourself. AI can help with tone and structure. You bring the expertise; I refine and implement.

  • Explore visual directions

    Use image generators to sketch mood, style, or references. Share what you like—it helps align our vision faster than words alone.

  • Organize feedback

    Collect and prioritize feedback from stakeholders before sending. AI can help summarize and structure comments into actionable points.

  • Learn the basics

    Curious about how things work? AI can explain concepts in plain language. The more you understand, the smoother our collaboration.

Example prompts—copy & adapt

  • Brief

    Help me write a project brief for a [type] website. Goals: [X]. Target audience: [Y]. Must-haves: [Z].

  • Content

    Draft 3 headline options for a [product/service] landing page. Tone: [professional/casual/playful].

  • Visuals

    Generate 3 mood board images for a [industry] brand. Style: [minimal/bold/retro].

Planning a landing page?

Start with: hero, section, CTA, responsive. Add forms, cards, or testimonials as needed.

Suggested tools

Tools that work well for each activity. Use what you have—no need to buy everything.

  • Briefs & structure

    ChatGPT, Claude, Notion AI

    Structure ideas into goals, audience, must-haves.

  • Copy & content

    ChatGPT, Claude, Copy.ai

    Headlines, descriptions, tone variations.

  • Visual direction

    Midjourney, DALL-E 3, Ideogram, Figma AI

    Mood boards, style references, mockups.

  • Feedback organization

    ChatGPT, Claude

    Paste raw feedback → get summarized, prioritized list.

  • Learning concepts

    ChatGPT, Perplexity

    Plain-language explanations of design and web terms.

How to hand over

Send what you've created in any of these formats—I'll work with it.

  • Brief:Google Doc, Notion, or plain text
  • Content drafts:Doc or text—headlines, copy, descriptions
  • Visuals:Images (PNG/JPG) or links (Figma, Miro)
  • Feedback:Bullet list or summarized doc

What to bring back

  • Brief: Goals, audience, must-haves (even 5 bullet points)
  • Content drafts: Headlines, copy, descriptions
  • Visual references: Mood, style, or example images
  • Feedback: If from stakeholders—prioritized list

What happens next

  1. 1. I review what you sent
  2. 2. I refine, polish, and implement
  3. 3. We iterate on details together
  4. 4. You get a finished product

Clients who bring briefs and drafts typically save 1–2 rounds of revision. This vocabulary comes from years of client collaboration—I know what makes handovers smooth.

Draft your brief now—even 5 bullet points—then send it.

Get in touch