/ avantgarde.codes · digital creations · hemer, nrw

WEBSITES MIT REGIE.

Konzept, Design, Code, Inhalt: aus einer Hand, mit einem Blick, der vom Film kommt. Von der ersten Skizze bis zum letzten Cache‑Bust.

Das Reel ansehen ↓ Brief abgeben →

/ 01 · haltung

Eine Website ist nie nur ein Layout. Sie ist eine Übersetzung, von dem, was dich ausmacht, in das, was man sieht, liest und fühlt. Deshalb entsteht hier jede Zeile mit Absicht: handgeschrieben, kuratiert. Kein Template mit unnötigen Elementen, kein Baukasten, kein Ticketsystem, keine Agentur‑Kette. Du erklärst dein Ding genau einmal. Den Rest bauen wir.

/ 02 · das reel

SIEBEN AUFTRITTE.
EINE HANDSCHRIFT.

01 Eilo Osteopathie · Hvide Sande Marke · Design · Code · Inhalt in Produktion Eilo, Website für Osteopathie in Hvide Sande
02 AVantgarde Cinematography Konzept · Design · Code · Inhalt · SEO live AVantgarde cinematography, av-antgar.de 03 Upeak Leistungsdiagnostik Design · Layout · Code · Brand · Content live Upeak, Leistungsdiagnostik, upeak.de
04 Reflexintegration Anke Brauns Design · Tonalität · Code · SEO in Produktion Reflexintegration, Anke Brauns
05 myosotis Tattoo & Kunst · Bochum Konzept · Design · Code · Inhalt live myosotis, Tattoo und Kunst von Luca in Bochum
06 Kraftstöffchen Supplements Brand · Design · Code · Copy · Shop in Produktion Kraftstöffchen, Supplements
07 Katharina Andrös ThetaHealing Design · Code · Inhalt in Produktion Katharina Andrös, ThetaHealing

/ 03 · der maschinenraum

WAS UNS FEHLT,
BAUEN WIR.

Fünf Werkzeuge aus dem eigenen Maschinenraum. Entstanden, weil wir sie selbst brauchen, und gebaut nach denselben Grundsätzen wie jede Website von uns: datensparsam, schnell, mit eigener Handschrift.

01

AVantgarde Transfer

im Einsatz

Unser eigener Weg, Fotos und Filme auszuliefern. Der Kunde bekommt einen Link, sieht alles in einer Galerie mit Vorschau und lädt das Original herunter.

speicher
Cloudflare R2, EU
galerien
privat, mit Ablauf
auftritt
Logo, Farbe, vier Designs
download
Original und ZIP
Was es kann
  • Vorschau, die Lust aufs Ansehen macht: Bilder zum Durchblättern, Filme in einer flüssigen Ansichtsfassung. Heruntergeladen wird immer das Original.
  • Vier Galerie-Designs, jeweils hell und dunkel: Kino, Kontaktbogen, Pille und Plakat.
  • Eigener Auftritt mit Logo oder Wortmarke, Akzentfarbe und Kontaktdaten.
  • Kunden markieren ihre Favoriten und schicken die Auswahl zurück, auf Wunsch als Liste für Lightroom.
  • Ein unterbrochener Upload macht dort weiter, wo er stand. Praktisch bei großen Lieferungen.
  • Galerien bekommen ein Ablaufdatum. So entstehen Kosten nur für das, was gerade online liegt.
  • Gedacht für alle, die bisher mit WeTransfer oder Frame.io ausliefern und bei denen mal viel und mal wenig anfällt. Die Testphase für andere Studios hat begonnen.
02

Analytics Dashboard

im Einsatz

Besucherzahlen ohne Cookies und ohne Banner: wie viele Menschen kommen, woher sie kommen und was sie lesen.

cookies
keine
banner
keiner
anmeldung
Passkey
läuft auf
av-antgar.de
Was es kann
  • Misst, ohne etwas auf dem Gerät der Besucher zu speichern. So kommt die Seite ohne Cookie-Banner aus.
  • Anmeldung per Passkey: Fingerabdruck oder Gesicht statt Passwort.
  • Läuft als App auf dem Handy. Die Zahlen sind mit einem Tipp da.
  • Für alle, die eine Alternative zu Google Analytics suchen und ihre Besucher dabei in Ruhe lassen wollen.
  • Bei unseren Websites auf Wunsch dabei.
03

Upload-Service

Beta

Bilder in einen Ordner legen, den Rest erledigt das Werkzeug: sichten, zuschneiden, texten, einplanen.

sichtung
Bilderkennung
formate
passend je Kanal
freigabe
bleibt bei dir
versand
aus der Cloud
Was es kann
  • Eine Bilderkennung sichtet das Material und schlägt die Auswahl vor.
  • Zuschnitt und Format entstehen passend zum Kanal, ohne dass ein Motiv leidet.
  • Texte und Hashtags kommen in der eigenen Stimme.
  • Nichts geht ohne Freigabe raus. Das letzte Wort hat ein Mensch.
  • Eingeplante Beiträge veröffentlicht die Cloud. Der Rechner darf dabei aus sein.
  • Instagram ist angebunden, weitere Kanäle folgen. Aktuell in der Beta.
04

Motion-Lab

Werkstatt

Motion Graphics aus Code: Logo-Animationen, Typo und Bauchbinden, Bild für Bild wiederholbar.

ausgabe
ProRes 4444 mit Alpha
auflösung
1080p und 4K
unschärfe
180° Verschluss
ton
auf Zeitmarken
Was es kann
  • Jede Animation ist eine Funktion der Zeit. Jedes einzelne Bild lässt sich exakt wieder erzeugen.
  • Ausgabe als ProRes 4444 mit transparentem Hintergrund, fertig für den Schnitt.
  • Bewegungsunschärfe wie bei einer Filmkamera, gerechnet mit 180° Verschluss.
  • Ton liegt auf Zeitmarken, die Lautheit wird gemessen.
  • Für Logo-Animationen, Titel und Grafik im Film.
05

WebAR-Konfi­gurator

Pilot

Handy auf die Wand richten und das Produkt hängt dort, in echter Größe. Direkt im Browser, ohne App.

technik
WebXR
maßstab
1:1
licht
aus dem Raum gelesen
geräte
Android, Chrome
Was es kann
  • Die Kamera erkennt die Wand und setzt das Produkt maßstabsgetreu davor.
  • Das Licht im Raum wird geschätzt. So wirkt das Produkt wie vor Ort.
  • Oberflächen und Größen lassen sich im 3D-Konfigurator durchspielen.
  • Gedacht für Hersteller und Händler, die ihre Produkte zeigen wollen, bevor ein Muster auf die Reise geht.
  • Aktuell als Pilot auf Android-Geräten.

regiepult · aus unserer eventregie

CUE FÜR CUE.

Werkzeuge aus unserer Eventregie, mit denen wir einen Abend durchspielen, bevor der erste Gast kommt: Bühne, Ablauf und alle Gewerke, zum Anklicken für Kunden und Team.

06

Stage-Management

im Einsatz

Wer, wann, wo: Ein Klick auf einen Cue im Regiebuch, und alle gehen auf ihre Position. Darunter läuft der Spannungsbogen des Abends mit.

ansicht
Bühnenaufsicht
regiebuch
Cues mit Uhrzeit
dazu
Spannungsbogen
läuft auf
av-antgar.de
Was es kann
  • Bühnenaufsicht mit Positionen, Auf- und Abgängen, Bestuhlung, Kameras und Notausgängen.
  • Jeder Cue im Regiebuch bringt Personen und Technik auf ihren Platz, mit allem, was zu diesem Moment gehört.
  • Der Spannungsbogen zeigt, wo die Show anzieht und wo das Publikum durchatmet.
  • Zum Ausprobieren auf av-antgar.de/eventregie.
07

Zeitstrahl

im Einsatz

Der ganze Abend auf einen Blick: Ablauf, Licht, Kamera, Ton und Bühne in eigenen Spuren, darüber ein Abspielkopf mit Timecode.

spuren
5 Gewerke
timecode
bis aufs Einzelbild
steuerung
Scrollen, Ziehen, Tasten
läuft auf
av-antgar.de
Was es kann
  • Fünf Spuren für Ablauf, Licht, Kamera, Ton und Bühne, sauber übereinander.
  • Der Abspielkopf zeigt Uhrzeit, Cue-Nummer und den Moment im Klartext.
  • Scrollen fährt die Show ab, Ziehen und die Pfeiltasten gehen auch.
  • Zum Ausprobieren auf av-antgar.de/eventregie.
08

Explosions­zeichnung

im Einsatz

Der ganze Saal in sechs Ebenen: Bühne, Ton, Kamera, Licht, Medien und Regie. Auseinanderziehen, eine Ebene anwählen, Showlicht an.

ebenen
6 Gewerke
ansicht
Axonometrie
steuerung
Scrollen, Regler, Klick
läuft auf
av-antgar.de
Was es kann
  • Zeigt, wie alle Gewerke im Saal zusammenhängen, geführt vom Regieplatz aus.
  • Scrollen oder der Regler ziehen die Ebenen auseinander.
  • Eine Ebene anwählen zeigt, was darin steckt. „Showlicht“ schaltet das Licht im Saal ein.
  • Zum Ausprobieren auf av-antgar.de/eventregie.

arbeitsprobe · ar-exponat

ZUM MITSPIELEN.

Wir bauen auch Dinge, die man in die Hand nimmt. Für Primeo Energie haben wir ein AR-Spiel entwickelt, von der Spielidee bis zum fertigen Exponat: ein weißes Stadtmodell auf dem Tisch, ein Tablet darüber, und auf dem Bildschirm wächst Level für Level die Energieversorgung der Stadt.

09

Primeo AR-Spiel

Arbeitsprobe

Tablet über das Stadtmodell halten, und aus den weißen Häusern wird eine lebendige Stadt. Wer spielt, baut ihre Energieversorgung auf, Level für Level.

kunde
Primeo Energie
rolle
Idee, Konzept, Leitung
technik
AR auf dem Tablet
spiel
4 Level
Primeo AR-Spiel, Level 1: die Stadt mit Wohnhäusernlevel 1 Primeo AR-Spiel, Level 2: Windräder auf dem Hügellevel 2 · wind
Was es kann
  • Das Tablet legt eine farbige 3D-Stadt passgenau über das weiße Modell auf dem Tisch.
  • Vier Level, vom Wohnhaus über Sonne und Wind bis zum Elektroauto.
  • „Neu starten“ und „Hilfe“ sind jederzeit im Bild.
  • Im Auftritt von Primeo Energie, mit Logo und Farben.

Eines davon würde dir helfen? Schreib uns.

/ 04 · methode

HAND · HIRN · PIXEL

/ hand · konzept & skizze

HAND

Jedes Projekt beginnt analog: Papier, Bleistift, die richtigen Fragen. Was soll man fühlen, bevor man liest?

/ hirn · struktur & strategie

HIRN

Inhalt vor Dekoration. Suchmaschinen werden von der ersten Zeile an mitgedacht, als Statik, nicht als Nachschlag.

/ pixel · design & code

PIXEL

Handgeschrieben und kuratiert, Zeile für Zeile. Nur, was da sein muss. Jede Zeile mit Intention.

/ 05 · aus einer hand

DU ERKLÄRST DEIN DING
GENAU EINMAL.

/ performance

Da, wenn dein Besucher kommt

Leichtbau ist unser Prinzip: Inhalte, die sofort stehen, im Zug auf dem Handy genauso wie am Desktop. Top-Werte bei PageSpeed sind so der Normalfall; miss gern nach, die Messung ist öffentlich.

/ barrierefrei

Für alle gebaut

Lesbare Kontraste, Bedienung per Tastatur, verständlich für Screenreader: Deine Seite erreicht alle, die sie erreichen soll. Gebaut nach WCAG, dem Standard, an dem sich auch der Gesetzgeber orientiert.

/ handschrift

Handgeschrieben, Zeile für Zeile

Dein Auftritt entsteht als Maßarbeit, jede Zeile Code für deine Marke geschrieben. Das hält ihn schlank, schnell, sicher und so unverwechselbar wie dich.

/ analytics

Wissen, was wirkt

Deine Seite ist anschlussfertig für cookielose Statistik, ganz ohne Cookie-Banner. Auf Wunsch kommt unser eigenes Analytics dazu: du siehst, wie viele kommen, woher und was sie lesen. Volle Einblicke für dich, volle Privatsphäre für deine Besucher.

/ leichtbau

Leicht. Auch fürs Klima.

Oft ist unsere ganze Seite kleiner als ein einzelnes Handyfoto. Das spart Energie bei jedem Aufruf, und macht deinen Auftritt schnell, egal wo man ihn öffnet.

/ eigentum

Alles gehört dir

Der Code deiner Website, das Design, die Inhalte, die Zugänge: Am Ende liegt alles vollständig in deiner Hand. Deine Website ist dein Eigentum. Du entscheidest jederzeit selbst, wie es weitergeht.

/ bestand

Gebaut, um zu bleiben

Wir bauen auf die Standards des Webs, die Sprache, die Browser auch in zehn Jahren sprechen. Dein Fundament trägt, während Moden wechseln.

/ dsgvo

Datenschutz, von Anfang an

Schriften, Daten, Formulare, alles bleibt bei dir, auf deinem Server. Deine Besucher spüren vom ersten Klick an, dass sie hier respektvoll behandelt werden.

/ am puls

Mit dem Besten von heute

Wir bauen mit den neuesten Standards und Werkzeugen: KI dort, wo sie wirklich trägt. Sie nimmt uns die Fleißarbeit ab; die Handschrift, die Entscheidungen und der Feinschliff bleiben bei uns. Für dich heißt das: modern gebaut, oft schneller live und mit mehr Budget für das, was zählt.

„Gefunden. Verstanden. Empfohlen." Wir bauen so, dass Google und KI‑Assistenten deine Seite verstehen und weiterempfehlen können. Wie genau, erzählen wir dir gern im Gespräch.

Die ganze Grundeinstellung →

/ 06 · die regie

EIN REGISSEUR.
ALLE GEWERKE.

Bei uns läuft dein Projekt wie eine Filmproduktion: Ich führe Regie über Konzept, Design, Code, Texte, Foto und Film. Alles entsteht unter einer Leitung, aus einem Guss. Und wenn die Produktion mehr Hände braucht, tritt unser Netzwerk an. Die Handschrift bleibt dieselbe. Für dich heißt das: ein Ansprechpartner, der alles zusammenhält. Und wenn dein Projekt Bilder braucht, die es noch nicht gibt, drehen wir sie.

/ 05 · aus einer hand ƒ/16.0 CLOSED Hover · Scroll · Click

/ 07 · der beweis

DIESE SEITE IST
SELBST DAS PORTFOLIO.

0cookies
0frameworks
1ansprechpartner
<1sladezeit

Diese Seite arbeitet komplett cookielos: Die Schriften kommen vom eigenen Server, es lädt nichts von fremden Servern nach, und Besucher werden vom ersten Moment mit dem Inhalt begrüßt. Genau so bauen wir auch für dich.

// miss nach, pagespeed insights ist herzlich eingeladen.

/ 08 · kontakt

VON DER IDEE
BIS LIVE.

Schick uns das, was du noch nicht in Worte fassen kannst. Den Rest bauen wir. Ein Ansprechpartner, ein Build, ein Auftritt.

Hallo Adrian, ich bin . Du erreichst mich unter oder unter .

Es geht um

// lieber per mail? brief@avantgarde.codes