YonderwellEvery good place deserves to be seen.Discuss a project

Project collaborations

Bring us the website work behind your next client project.

We work with web studios and technical agencies on website design and development. Bring an agreed design, brand materials, an existing website or a clear development brief. We’ll confirm the project’s scope, responsibilities, price, timing and acceptance terms with you.

Discuss a project View the technical demo
Website demo
Quinta da Curva — Website demo
Quinta da Curva

Quinta da Curva — a Yonderwell design and build demo.

Explore this implementation

01

A clear scope for an independent project.

Every collaboration gets its own written quote covering the requested website scope, responsibilities, price, timing and acceptance.

  1. Implement an existing design

    Bring an agreed design system, visual direction or page design. We turn it into a working website with the routes, content and interactions set out for the project.

  2. Design and build from brand or content

    Bring a brand system, photography, copy or another agreed material set. We shape the structure, create the bespoke design and develop the complete website around it.

  3. Extend an existing website

    Bring defined changes to pages, interactions or language versions. We review the platform and repository, then agree and implement the work that fits the project.

02 / Implementation excerpts

See how the work behaves.

These two demos show the range of collaboration work: responsive content layouts, visual transitions and purposeful motion. They are demonstration interfaces, not connected services.

Quinta da CurvaDemo interface
Quinta da Curva — Demo interface

Engineering we bring to a collaboration

Responsive CSS

We build layouts that hold together from a 390px mobile viewport to a 1280px desktop view, with readable content and clear controls at both sizes.

Implementation excerpt · CSS · Hoshimachi-sha
@media (max-width: 420px) {
  .hero h1 { font-size: clamp(2.2rem, 9vw, 2.8rem); }
  .hero-cta, .hero-cta-ghost { padding: 0.85rem 1.1rem; font-size: 0.92rem; }
  .hero-status .row { font-size: 0.8rem; }
  .hero-panel .moon-text { font-size: 0.78rem; }
  .footer-mark { width: 56px; height: 56px; }
}
Astro and React

Astro static routes keep core pages readable as static HTML; React islands add only the interactions that need it. This official site is a working example.

Implementation excerpt · Astro · Yonderwell
export function getStaticPaths() {
  return LOCALES.map((locale) => ({ params: { locale } }));
}

<AvailabilityChecker client:load strings={p.availability} locale={locale} />
WebGL motion with control

Where motion earns its place, we can build WebGL scenes with reduced-motion static frames and pause offscreen render loops.

Implementation excerpt · JavaScript · Hoshimachi-sha
window.addEventListener('message', function (event) {
  if (event.origin !== window.location.origin) return;
  if (event.data === 'yw-demo-pause') stopLoop();
  else if (event.data === 'yw-demo-resume' && !reduceMotion && !document.hidden) startLoop();
});

03

Three ways to work together

  1. Commission the website

    Your business commissions and pays for our agreed website work, supplies the brand materials, and consolidates feedback and acceptance. We confirm scope, timing and handover in writing.

  2. Share the work

    We agree responsibilities, deliverables and fees for each provider before starting. You lead the work in your discipline; we take the agreed website design or development responsibility.

  3. Make a referral

    With the prospective customer’s consent, introduce us and share the website need. We discuss our website scope and agreement directly with the customer.

A written path from brief to handover

  1. Brief and fit

    Share your client context, goals, materials, existing platform or repository and the part you want us to handle. We reply with questions and whether the proposed work fits.

  2. Scope and quote

    We set the website deliverables, responsibilities, price, timing and acceptance checks in a project-specific written quote.

  3. Design and build

    After the agreed start, we do the bespoke design and development work, with one designated contact consolidating feedback at the agreed checkpoints.

  4. Acceptance and launch

    The designated contact reviews the work against the written acceptance checks. We then follow the agreed handover arrangements for launch, transfer or the next delivery step.

Handover covers the agreed source, deployment environment, documentation and support, with arrangements for transfer to the end client agreed per project.

04

Tell us what you are building together.

Send a few lines about the studio, agency or customer project. Scope, price and timing discussions are free. Bespoke design and development begin after the agreed start.

brief@yonderwell.com

We acknowledge receipt within one working day and reply on fit within five working days.

Include these useful details

  1. Your studio or business website:
  2. The project goal and what the website should achieve:
  3. Current website or platform and technical stack, if any:
  4. Design materials, brand assets or content already available:
  5. The work you would like us to deliver and the division of responsibilities:
  6. Desired timing or start window:

Not every detail is settled yet? Send the outline you have; we can shape the questions together.

Open a collaboration email

Opens a draft in your own email app. You review and send it there.

Please do not include guest data, payment details, passwords or sensitive attachments.