Zum Inhalt springen
atriodesign Projekt anfragen

Gestaltung · Konzept · Code

Webseiten, die man gern betritt.

Ich gestalte, konzipiere und programmiere Webseiten von Hand, mit Spielereien, die etwas können. Für Musikschulen, Gestalter, Bands und alle, die mehr wollen als eine Vorlage.

Arbeiten ansehen Projekt anfragen
Weiter

Warum atrio

Ein Atrium ist der lichte Innenhof, um den ein Haus gebaut ist. Alle Räume öffnen sich zu ihm, alle Wege führen hindurch. Genau so baue ich Webseiten.

Arbeiten

Räume, die ich gebaut habe.

Drei Projekte aus diesem Jahr: drei Musikschulen mit einem gemeinsamen System, ein Zeichentisch für einen Schriftgestalter und ein Neon-Auftritt für eine Band. Alle Bewegtbilder sind echte Bildschirmaufnahmen.

  1. IMusic Campus
  2. IItypotaurus
  3. IIIClose Commander

Music Campus Drei Musikschulen, ein System.

  • Musikschulen
  • Bielefeld · Berlin · Essen
  • 2026
  • Die Linien hören auf die Maus und wölben sich zu Instrumenten.
  • Das kursive Wort wechselt: verbindet, berührt, bewegt.
  • Klang an: Die Maus spielt dazu sphärische Töne.

Eine Musikschule verkauft kein Produkt, sondern das Gefühl beim ersten Ton. Deshalb klingt schon die Startseite: Feine Linien hören auf die Maus und wölben sich zu Instrumenten. Wer mag, schaltet den Klang ein und spielt mit der Maus sphärische Töne.

Darunter dreht sich ein Fächer-Rad mit 15 Karten, jede mit einem eigenen, generativ gezeichneten Klangbild. Wer noch nicht weiß, was er spielen will, beantwortet im Instrumenten-Finder fünf Fragen und landet mit zwei Vorschlägen direkt bei der Probestunde.

Aus der Bielefelder Seite wurde eine Vorlage. Ein eigenes Werkzeug baut daraus neue Standorte, mit Sprachen, Fächern, Preisen, Logo samt Ortsnamen und den Umleitungen der alten Seite. So entstanden Berlin und Essen.

Rolle
Gestaltung, Konzept, Code und das Standort-Werkzeug
Sprachen
Deutsch, Englisch, Russisch, Türkisch; in Berlin zusätzlich Polnisch, Spanisch und Arabisch
Extras
Klanglandschaft mit Ton, Fächer-Rad, Instrumenten-Finder, Galerie als Kontaktabzug, Schülerbereich

music-campus.com ↗ music-campus-berlin.com ↗ essen.music-campus.com ↗

Fächer-Rad: 15 Karten auf einer Drehscheibe, jede mit eigenem Klangbild statt Stockfoto.
Instrumenten-Finder von Music Campus: Frage 1 von 5, Für wen suchst du?
Instrumenten-Finder: fünf Fragen, eine Minute, zwei Vorschläge mit direktem Weg zur Probestunde.
Startseite von Music Campus Bielefeld auf dem Handy
Unterwegs mit Kontaktleiste
Music Campus Berlin auf Arabisch, von rechts nach links gesetzt
Berlin auf Arabisch, von rechts nach links
Galerie von Music Campus Essen als Kontaktabzug mit 20 Fotos und großer Vorschau
Galerie als Kontaktabzug: Klick dich durch die Abzüge wie auf dem Leuchttisch.
rene@atrio ~/music-campus $ python3 werkzeug/bauen.py standorte/essen
✓ Vorlage gelesen: Sprachen, Seiten, Preise
✓ Alte Seite ausgelesen: Adressen, Texte, Bilder
✓ Fotos eingesetzt, Logo mit Ortsnamen gesetzt
✓ Favicons und 301-Umleitungen geschrieben
★ Fertig: essen.music-campus.com
rene@atrio ~/music-campus $
Das Standort-Werkzeug, vereinfacht: aus einer Vorlage wird ein neuer Standort.

typotaurus Ein Zeichentisch im Browser.

  • Schrift, Lettering, Logo
  • Bielefeld
  • 2026
  • Der Cursor ist ein Bleistift und zieht eine Graphitspur.
  • Probezeile anklicken und lostippen.

Alex Schumacher zeichnet Schriften, Logos und Illustrationen. Seine Website sollte sich anfühlen wie sein Arbeitsplatz: feines Papierkorn, Konstruktionslinien hinter den Titeln, und der Cursor ist ein Bleistift, der eine Graphitspur zieht.

Die Schriften Galexy, Tabula Rasa und Deluxe lassen sich direkt in der Probezeile beschreiben und Schnitt für Schnitt in den Warenkorb legen. In der Galerie warten kleine Gags: Die Spinne will angeklickt, das Hippo gestreichelt werden.

Rolle
Umsetzung von Alex’ Entwurf, Zeichentisch, Animation und Code
Bühne
1920 × 1080 Designpixel, passt sich jedem Fenster an
Extras
Bleistift-Cursor, beschreibbare Schriftmuster, Figuren-Gags, Warenkorb
Stand
Website in Arbeit
typotaurus-Galerie: Redesign Bübchen-Hippo, eine Spinne und Tiernahrung für Schröter
Galerie: die Spinne anklicken, das Hippo streicheln.
typotaurus: die Waldszene füllt den ganzen Bildschirm, die Navigation wird zur dunklen Glasleiste
Die Waldszene füllt den ganzen Bildschirm, die Leiste wird zu dunklem Glas.

Close Commander 80er-Neon, neu verkabelt.

  • Band
  • New Eurodisco
  • 2026
  • Chromschrift, Neonkanten, Scanlines.

Eine Band, die nach 1986 klingt, braucht eine Website, die nach 1986 aussieht und nach 2026 funktioniert. Chromschrift, Neonkanten und Scanlines, dazu Video, Streaming-Links, Crew und Kontakt. Sogar der Cookie-Hinweis leuchtet.

Unter der Haube: Das Musikvideo lädt erst nach Einwilligung, strukturierte Daten erklären Suchmaschinen Band, Song und Video, und das Kontaktformular fragt einen Sicherheitscode in Siebensegment-Ziffern ab, wie auf einem alten Synthesizer.

Rolle
Gestaltung, Konzept und Code
Release
Single „Close Commander“, 9. Oktober 2026
Extras
Neon-Cookie-Hinweis, Video erst nach Einwilligung, Siebensegment-Captcha

closecommander.de ↗

Close Commander: Jetzt streamen, mit Single-Karte und Links zu Spotify, Apple Music und YouTube
Streaming-Links im Neonrahmen.
Close Commander: Wer hinter dem Sound steht, fünf Karten mit Monogrammen der Crew
Die Crew, jede Karte mit Monogramm.
Close Commander auf dem Handy
Auch mobil in Neon

Leistungen

Drei Werke, drei Handwerke.

Gestaltung, Konzept und Code kommen bei mir aus einer Hand. Jedes der drei hat hier sein eigenes Bild, gezeichnet von ein paar Zeilen Code. Fahr mit der Maus darüber.

Konzept Erst das Maß.

Bevor ein Pixel gesetzt wird, klären wir: Wer kommt auf die Seite, was sucht er, und was soll er am Ende tun? Daraus entstehen Struktur, Wege und Texte.

  • Ziele, Zielgruppen und Inhalte klären
  • Seitenstruktur und Nutzerwege
  • Texte schreiben oder schärfen
  • Auffindbar bei Google und in KI-Assistenten

Gestaltung Dann der Strich.

Typografie, Farbe, Bild und Bewegung, so eigen wie du. Statt Stockfotos gibt es Illustrationen, generative Bilder oder echte Fotos, statt Vorlage einen Look, den es nur einmal gibt.

  • Look und Typografie
  • Logo, Bildmarke und Favicons
  • Generative Bilder und Illustration
  • Animation und Interaktion mit Zweck

Code Und dann die Mechanik.

Jede Zeile von Hand geschrieben, ohne Baukasten und ohne Theme. Das macht die Seiten schnell, barrierearm und unabhängig.

  • Schnell und barrierearm auf jedem Gerät
  • Mehrsprachig, auch von rechts nach links
  • DSGVO-sauber: Schriften lokal, Videos und Karten erst nach Einwilligung
  • Formulare, Mini-Apps, interne Bereiche, eigene Werkzeuge

Ablauf

Vom ersten Gespräch zum offenen Haus.

Vier Schritte, eine durchgehende Linie. Du bist bei jedem Schritt dabei und siehst früh, wohin es geht.

  1. Kennenlernen

    Wir sprechen über dein Vorhaben, über deine Besucher und darüber, was die Seite leisten soll. Unverbindlich, gern auch per Video.

  2. Konzept und Looks

    Ich ordne Inhalte und Wege und zeige dir mehrere Looks, so verschieden wie möglich. Du wählst, mischst oder verwirfst.

  3. Gestaltung und Code

    Aus dem gewählten Look wird die echte Seite, Raum für Raum, mit Texten, Bildern und den Spielereien, die zu dir passen. Du schaust auf einer Vorschau mit.

  4. Start und Pflege

    Domain, Hosting, Search Console und die Umleitungen der alten Seite: Ich bringe die Seite ins Netz und bleibe ansprechbar, wenn sie wachsen soll.

Über mich

Hallo, ich bin René.

Unter dem Namen atriodesign gestalte, konzipiere und programmiere ich Webseiten. Am liebsten solche, auf denen man etwas entdecken kann: eine Klanglandschaft, die auf die Maus hört, einen Bleistift als Cursor, ein Rad voller Instrumente.

Ein Atrium ist der lichte Innenhof eines Hauses. Alle Räume öffnen sich zu ihm, alle Wege führen hindurch. So denke ich Webseiten: erst ein Ort, an dem man gern ankommt, dann Räume, die zeigen, was dich ausmacht.

René Patrício

  • Spielerei mit Zweck

    Jede Bewegung soll erklären, einladen oder Freude machen. Was nur glitzert, fliegt raus.

  • Handarbeit

    Kein Baukasten, kein Theme: schlanker Code, der schnell lädt und lange hält.

  • Aus einer Hand

    Gestaltung, Konzept und Code von derselben Person. Kein Stille Post zwischen Agentur, Grafik und Technik.

Kontakt

Komm rein.

Erzähl mir von deinem Projekt: was du vorhast, für wen, und bis wann. Ich melde mich persönlich, mit Fragen, Ideen und einem ersten Plan.

E-Mail hallo@atriodesign.de
Worum geht’s?

Mit dem Absenden werden deine Angaben zur Bearbeitung der Anfrage per E-Mail an mich übertragen. Mehr dazu in der Datenschutzerklärung.