Webdesign R&L
Projekt starten
Creative Digital Studio Webdesign · Webentwicklung · Videoschnitt

Design Webdesign Code Webentwicklung Motion Videoschnitt

Ein Studio für den gesamten digitalen Auftritt — von der ersten Skizze über den letzten Codeblock bis zum finalen Schnitt.

Leistungen ansehen Projekt starten
iMac mit einem geöffneten Designsystem: Farbpalette, Textstile, Widget-Vorlagen und Komponentenbibliothek nebeneinander, davor Zimmerpflanzen und ein Smartphone
Weiter Kapitel 01 / 06
02 Was wir machen

Drei Disziplinen, die zusammen mehr ergeben | als *drei getrennte Rechnungen*.

Die meisten Unternehmen kaufen Design, Technik und Video getrennt ein — und wundern sich, warum am Ende drei verschiedene Marken herauskommen.

Wir arbeiten anders herum. Ein Auftritt wird von Anfang an als Ganzes gedacht: Das Raster der Website bestimmt den Bildausschnitt im Film. Die Typografie aus dem Designsystem taucht in den Untertiteln wieder auf. Der Schnittrhythmus der Clips entspricht dem Tempo der Seitenübergänge.

Das ist kein Zufall und kein Zusatzpaket. Es ist der Grund, warum wir alle drei Disziplinen im Haus haben.

  • 01

    Design

    Webdesign

    Gestaltung ist die Entscheidung, was zuerst gesehen wird.

  • 02

    Code

    Webentwicklung

    Schnell ist keine Optimierung. Schnell ist eine Entwurfsentscheidung.

  • 03

    Motion

    Videoschnitt

    Die ersten drei Sekunden entscheiden. Der Rest hält, was sie versprechen.

03 Leistungen

Was ihr bei uns *beauftragen* könnt.

Einzeln buchbar, zusammen deutlich stärker. Jede Leistung hat ihre eigene Seite mit Ablauf, Umfang und Beispielen.

Leistungen im Überblick
04 Referenz

Statt fremder Logos | zeigen wir *diese Seite*.

Wir sind ein junges Studio. Wir könnten jetzt Kundenlisten andeuten, die es noch nicht gibt. Stattdessen zeigen wir die eine Arbeit, die wir vollständig verantworten — und an der ihr jedes Detail selbst nachprüfen könnt: den Auftritt, auf dem ihr gerade seid.

iMac mit einem geöffneten Designsystem: Farbpalette, Textstile, Widget-Vorlagen und Komponentenbibliothek nebeneinander, davor Zimmerpflanzen und ein Smartphone
  • Gestaltung

    Ein eigenes Designsystem: drei Schriften, vier Farben, ein Raster, das jede Seite trägt. Keine gekauften Vorlagen.

  • Entwicklung

    Handgeschriebenes HTML, ein Stylesheet, eine JavaScript-Datei. Kein Framework, kein Baukasten, kein Plugin-Stapel.

  • Motion

    Zeilenweise Textaufbauten, Seitenwechsel als harter Schnitt, Laufbänder und ein nachlaufender Cursor.

  • Tempo

    Unter 30 KB JavaScript, Bilder erst beim Heranscrollen, Schriften mit Vorverbindung.

  • Zugänglichkeit

    Vollständig mit der Tastatur bedienbar, sichtbare Fokuszustände, und bei „Bewegung reduzieren“ bleibt alles ruhig.

Alles, was ihr hier seht, ist von Hand gebaut: kein Baukasten, kein gekauftes Theme, kein Framework. Wenn euch etwas daran gefällt, können wir erklären, wie es funktioniert — und es für euch anders machen.

Wie wir gestalten Wie wir bauen
05 Warum Webdesign R & L

Vier Sätze, an denen ihr uns *messen* könnt.

  • 01

    Wir bauen keine Vorlagen um.

    Jedes Projekt beginnt bei null — bei eurer Situation, nicht bei einem gekauften Theme, dem wir eure Farben verpassen.

  • 02

    Design, Code und Schnitt sitzen am selben Tisch.

    Kein Ping-Pong zwischen drei Dienstleistern, die sich gegenseitig die Schuld geben. Ein Ansprechpartner, ein Zeitplan, ein Ergebnis.

  • 03

    Wir sagen, wenn etwas keinen Sinn ergibt.

    Auch wenn es Umsatz kostet. Eine Animation, die nichts bringt, bauen wir nicht — und ein Projekt, für das wir die Falschen sind, nehmen wir nicht an.

  • 04

    Jung heißt nicht unerfahren. Es heißt schnell.

    Kurze Wege, kurze Antwortzeiten, aktuelle Technik. Ihr redet mit den Leuten, die auch tatsächlich bauen.

Zwei Personen geben sich in einem Büro die Hand

Wir sind _jung_ genug, um Lust auf ungewöhnliche Lösungen zu haben — und gründlich genug, um sie auch zu Ende zu bauen.

Mehr über das Studio
06 Prozess

Von der ersten Frage | bis zum *Livegang*.

Sechs Schritte, ungefähr acht Wochen. Der Rahmen verschiebt sich je nach Umfang — der Ablauf bleibt derselbe.

  1. 01

    Zuhören

    Woche 0

    Ein Gespräch, in dem wir mehr fragen als erzählen. Wir wollen wissen, wie ihr Geld verdient, wer bei euch kauft und was auf der alten Seite nie funktioniert hat.

    • Ziele und Zielgruppen
    • Bestandsaufnahme
    • Budget- und Zeitrahmen
    • Ehrliche Einschätzung
  2. 02

    Konzept

    Woche 1 – 2

    Struktur vor Optik. Wir legen fest, welche Seiten es gibt, was auf ihnen passiert und in welcher Reihenfolge jemand etwas erfährt. Erst danach wird gestaltet.

    • Sitemap & Nutzerführung
    • Inhaltsplan
    • Wireframes
    • Moodboard
  3. 03

    Gestaltung

    Woche 2 – 4

    Screens, Designsystem und Bewegungskonzept. Ihr seht früh echte Entwürfe mit echten Inhalten — keine Blindtexte, keine Stockfotos.

    • Designsystem
    • Screens Desktop & Mobile
    • Motion-Spezifikation
    • Feedbackrunden
  4. 04

    Umsetzung

    Woche 4 – 7

    Entwicklung, Animation und — wenn Bewegtbild dazugehört — Schnitt. Alles entsteht parallel, damit Website und Video am Ende dieselbe Sprache sprechen.

    • Frontend & CMS
    • Animation & Interaktion
    • Videoschnitt & Motion
    • Testing auf echten Geräten
  5. 05

    Live

    Woche 7 – 8

    Livegang, Übergabe, kurze Einweisung. Ihr bekommt Zugänge, Dateien und eine Anleitung, mit der ihr selbst Inhalte pflegen könnt.

    • Launch & Weiterleitungen
    • Performance-Check
    • Einweisung
    • Übergabe aller Dateien
  6. 06

    Danach

    Laufend

    Eine Website ist kein Möbelstück. Wir bleiben ansprechbar für Updates, neue Seiten, neue Videos — oder wir sind still, wenn nichts ansteht.

    • Wartung & Updates
    • Neue Inhalte
    • Content-Serien
    • Ausbaustufen
Zwei Personen besprechen an einem Schreibtisch eine handgezeichnete Layout-Skizze, daneben zwei aufgeklappte Laptops
Nächster Schritt

Und jetzt | *eure* Marke.

Drei Sätze reichen: was ihr macht, was ansteht, bis wann. Wir antworten ehrlich — auch dann, wenn wir nicht die Richtigen dafür sind.

Projekt starten webdesign.R-L@proton.me