> ## Documentation Index
> Fetch the complete documentation index at: https://docs.oasecreative.nl/llms.txt
> Use this file to discover all available pages before exploring further.

# Website Design & Development

> Dit playbook beschrijft het volledige interne proces voor het ontwerpen en ontwikkelen van **custom websites** bij Oase Creative.

## Overzicht

Dit playbook beschrijft het volledige interne proces voor het ontwerpen en ontwikkelen van **custom websites** bij Oase Creative.
De uitvoering gebeurt voornamelijk in samenwerking met onze vaste webdeveloper:
**Daniel Al Seffar – [daniel@oasecreative.nl](mailto:daniel@oasecreative.nl)**
Alle communicatie verloopt via Slack.

## Stap 1: Intakeformulier via Slack

Klanten vullen een **uitgebreid website-intakeformulier** in.
Dit formulier moet volledig aangevuld zijn voordat wij beginnen.

### Het formulier moet bevatten:

* Doel van de website
* Aantal pagina's + sitemap
* Moodboard / voorbeelden
* Branding (logo, kleuren, typografie)
* USP's
* Doelgroep
* Content (teksten, foto's, video's)
* Hosting-/domeinwensen
* Functionaliteiten:
* Blog
* Portfolio
* Contactformulieren
* Integraties (CRM, Mailchimp etc.)
* API-koppelingen

### Acties:

1. Controleer formulier op compleetheid.
2. Vraag klant om ontbrekende items aan te leveren.
3. Sla intake + assets op in Drive.
4. Slack-update: formulier compleet.

<Warning>
  Incomplete intake = niet starten.
</Warning>

## Stap 2: Slack-kanaal aanmaken

### Toevoegen:

* Daniel Al Seffar
* Ontwerper(s)
* Projectmanager
* Externe developers (indien nodig)
* Copywriter (indien nodig)

### Pin:

* Intakeformulier
* Drive map
* Deadlines
* Takenlijst

## Stap 3: Sitemap & Website-structuur

Daniel of de designer maakt een **voorlopige sitemap** gebaseerd op intake.

### Fase bevat:

* Sitemap
* Paginastructuur
* Content flow

De sitemap wordt ter goedkeuring gedeeld met de klant.

## Stap 4: Wireframes (Low‑Fidelity)

Designer maakt **wireframes** voor:

* Homepagina
* Templatepagina's
* Belangrijke secties
* Contentblokken
* CTA's

Wireframes worden gedeeld met de klant ter goedkeuring.

## Stap 5: UI Design (High‑Fidelity)

Na goedkeuring van wireframes start het visuele design.

### Bevat:

* Branding
* Pagina-designs
* Responsive versies
* Interactieschetsen

### Revisies:

1–2 rondes, via Slack en call.

## Stap 6: Development Setup

Website wordt gebouwd in:

* **Webflow** (standaard)
* **Framer** (als motion belangrijk is)
* **WordPress** (bij specifieke wensen)

### Setup door Daniel:

* Hosting
* Domein instellen
* CMS-structuur opzetten
* Style Guide maken (component library)

## Stap 7: Development (Buildfase)

Daniel bouwt het volledige design na.

### Taken:

* Header/footer
* Responsive layout
* Pagina's en secties
* CMS-collecties
* Formulieren & integraties
* Animaties/interacties
* SEO fundamentals
* Performance-optimalisatie

## Stap 8: Eerste Versie Opleveren (binnen 15 werkdagen)

### Acties:

* Website testen
* Knoppen, formulieren, navigatie checken
* Mobiel testen
* Interne feedback verzamelen
* Eerste versie naar klant
* Revisiecall plannen

## Stap 9: Revisies Verwerken

### Proces:

* Klant stuurt revisielijst
* Projectmanager verwerkt tot Slack-taken
* Daniel verwerkt revisies
* Nieuwe versie opleveren
* Maximaal 1–2 revisierondes

## Stap 10: Final Delivery (binnen 20–25 werkdagen totaal)

### Final checks:

* Cross-device testen
* SEO basics nalopen
* Performance testen
* Privacy + cookie checks
* 404, sitemap.xml, redirects

## Stap 11: Oplevering aan Klant

### Opleverpakket:

* Live website
* Toegang tot CMS
* Uitlegvideo (Loom)
* Documentatie
* Drive-map met assets

## Stap 12: Interne Afsluiting

### Acties:

* Slack-update: project compleet
* Drive opschonen & finaliseren
* Learnings documenteren
* Upsellmogelijkheden noteren:
* SEO
* CRO
* Ads
* Contentcreatie

## Best Practices

* Eerst structuur → dan design → dan development
* Test alles altijd mobiel
* Gebruik duidelijke component-namen
* Houd alle communicatie in Slack
* Werk met Loom-video's om revisies te beperken
* Lever altijd pixel-perfect op

## Samenvatting Workflow

1. Intake compleet
2. Slack-kanaal openen
3. Sitemap bepalen
4. Wireframes
5. UI design
6. Development setup
7. Buildfase
8. Eerste versie
9. Revisies
10. Final delivery
11. Oplevering
12. Interne afsluiting