← Zur Leistungsübersicht WEBSITES & WEBANWENDUNGEN

Von der Gestaltung
bis zum Ablauf dahinter

GESTALTUNG & WEBSITES

Gute Gestaltung
passt sich an

Jan Erbert Logo
INDIVIDUELL ENTWICKELT Dein Auftritt
Dein Charakter
KLAR STRUKTURIERT Inhalte mit Platz
Und einem Plan Was zählt, steht im Mittelpunkt.
BIS INS DETAIL Ein stimmiges Ganzes Schrift · Farbe · Freiraum
Darstellung
VOM CODE ZUR ANWENDUNG

Eine kleine Änderung
Eine sichtbare Wirkung

Automatisches Gestaltungsbeispiel mit einer Website: Links werden HTML und Tailwind-Klassen bearbeitet. Rechts verändern sich Bildplatzierung, Hintergrund, Typografie, Akzentfarbe und Bildtiefe.

website.htmlHTML · Tailwind
<article class="web-demo @container flex h-full flex-col bg-[#edf2f7] text-[#20354b]">  <header class="web-demo-header">    <span class="web-demo-brand"><img src="img/logos/web_logo.png" alt="" width="650" height="650">Jan Erbert</span>    <span class="web-demo-nav">Web Development</span>  </header>  <div class="web-demo-hero relative min-h-0 flex-1 grid grid-cols-[1.05fr_1fr] items-center overflow-hidden">    <figure class="web-demo-image relative col-start-2 row-start-1 h-full overflow-hidden rounded-l-[48px]">      <img class="web-demo-photo h-full w-full object-cover object-right scale-100"        src="img/studio/digital-ribbon.webp"        alt="Skulptur aus blauem Glas und gebürstetem Metall"        width="1536" height="1024" loading="lazy" draggable="false">      <div class="web-demo-shade absolute inset-0 bg-linear-to-r from-[#102637] via-[#102637]/70 to-transparent opacity-0" aria-hidden="true"></div>    </figure>    <div class="web-demo-copy relative z-10 col-start-1 row-start-1 px-3 py-4 @min-[400px]:px-5 @min-[400px]:py-8">      <span class="web-demo-eyebrow">GESTALTUNG × ENTWICKLUNG</span>      <h4 class="web-demo-title font-semibold text-[clamp(25px,4.8cqi,36px)] leading-[1.06] tracking-[-.04em]">Gute Ideen<br>        <span class="text-inherit">          <span class="web-demo-highlight bg-size-[0%_100%]">Starke Websites</span>        </span>      </h4>      <p>Individuell gestaltet<br>Von Grund auf entwickelt</p>    </div>  </div>  <footer class="web-demo-footer"><span>Konzept</span><i></i><span>Design</span><i></i><span>Entwicklung</span><span class="web-demo-footer-mark" aria-hidden="true">↗</span></footer></article>
Website-Vorschau
Jan Erbert Web Development
Skulptur aus blauem Glas und gebürstetem Metall
GESTALTUNG × ENTWICKLUNG

Gute Ideen
Starke Websites

Individuell gestaltet
Von Grund auf entwickelt

KonzeptDesignEntwicklung
ANWENDUNGEN & AUTOMATISIERUNG

Hinter der Oberfläche
geht’s weiter

Ich verbinde Webanwendungen mit den Systemen dahinter, damit Du weniger von Hand abstimmen musst. Die folgende Animation zeigt beispielhaft, wie eine automatisierte Terminbuchung ablaufen kann.

Funktionsbeispiel einer individuellen Buchungsanwendung. Kalender, Ressourcen und Buchungsregeln werden parallel geprüft. Drei Abläufe zeigen direkte Buchung, Alternativen bei einem Konflikt und eine individuelle Freigabe. Erst danach werden Termin und Ressourcen reserviert, die Bestätigung versendet und der Kundenbereich aktualisiert.
Dein KundenbereichJD
WorkshopsWorkshop Termin buchen
Beratung & Austausch

Workshop buchen

Projekt-WorkshopIdeen klären · Nächste Schritte planen
90 MinutenVor Ort
Dein WunschterminDi · 10:00
Workshop · 90 Minuten · vor Ort
Termin anfragen
Eine Anfrage startet den Ablauf.
AnwendungslogikAnfrage entgegennehmen
Termin ·Ressourcen ·Regeln ·
Antworten sammeln
Kalender
Wird geprüftKalender mit Buchungssystem verbunden
Ressourcen
Wird geprüftBeratung · Raum · Technik
Buchungsregeln
Wird geprüftStandardangebot → automatisch weiter
✓
AnsprechpartnerNur bei individuellen Anfragen
E-Mail-Bestätigung
E-Mail vorbereitenErst nach erfolgreicher Reservierung.
Systeme verbundenFunktionsbeispiel · Individuelle Buchungsanwendung
DEIN PROJEKT

Was möchtest Du entwickeln?

Ob Website, kleine Anwendung oder automatisierter Ablauf: Schreib mir, was Du vorhast.

Kontakt aufnehmen