Sehr geehrter Herr Mustermann,
vielen Dank, dass Sie diesen Leitfaden geöffnet haben. Ich bin Lydia Dietsch, ebenfalls aus Berlin, und möchte Ihnen gerne ein paar Möglichkeiten zeigen, wie Sie Ihre Webpräsenz auf die nächste Stufe heben. Das betrifft sowohl die optische Erscheinung, das System im Hintergrund, den Einsatz von KI, aber auch Ihre Workflows im Unternehmen, die sich nicht nach Ihrer Webseite richten sollen, sondern umgekehrt.
Den Leitfaden habe ich für Sie auf Ihr Unternehmen individualisiert, damit hier nicht nur starr Inhalte kommuniziert werden. Er ist zudem interaktiv. Ein Blick darauf lohnt sich also.
Viel Spaß beim Lesen!
Lydia Dietsch
Der unsichtbare Teil von Websites
Unter all den Anforderungen und Möglichkeiten einer Webseite ist sie vor allem aber eines: Code. Dieser Code bildet die unsichtbare Grundlage jeder Webseite, und genau hier liegt die Herausforderung. Denn ob eine Seite optisch ansprechend ist und Buttons tun, was sie sollen, lässt sich leicht beurteilen. Der zugrunde liegende Code dagegen bleibt für alle unsichtbar und unverständlich, die zwar eine Webseite für ihr Unternehmen betreiben, aber keine ITler sind. Das kann zu Fehlentscheidungen führen.
Warum?Warum ist der Code relevant, wenn eine Webseite gut aussieht und funktioniert?
Weil wir möchten, dass unsere Webseite skalierbar ist:
Neue Seiten sollen schnell live gehen können.
Zusätzliche Sprachen sollen bei einem neuen Markteintritt leicht zu pflegen und schnell und sauber implementiert sein.
Neue Teammitglieder, die an der Webseite arbeiten, sollen sich nicht monatelang in Workflows und Tools einarbeiten müssen, sondern die Arbeit erledigen.
Weil KI-Chat-Suche und Suchmaschinenoptimierung ebenfalls größtenteils unsichtbar ist und vom Code abhängt.
Uvm.
Der Weg, der zur optisch ansprechenden und funktionalen Webseite führt, hat eine hohe Relevanz. Und in einer sich schnell verändernden Geschäftswelt muss die Webseite die Fähigkeit mitbringen, sich ebenfalls schnell ändern zu können. Selbst wenn das nur eine neue Stellenausschreibung oder eine kurze Betriebspause betrifft. Denn nur so begleitet Ihre Webseite Sie über Jahre, statt nur wenige Monate an Ihrer Seite zu verweilen und dann ein Redesign und einen Neuaufbau zu benötigen.
Ich habe gesehen, dass Ihre Webseite xx.de mit XXX erstellt wurde.
Das sind die Möglichkeiten, Websites (Code) zu erstellen:
Künstliche Intelligenz
Sie beschreiben Ihre Website im Chat, die KI generiert sie. Für Prototypen und interne Tests sinnvoll, für den Unternehmensauftritt riskant: Niemand haftet für den Code, Hosting und Sicherheit bleiben bei Ihnen, und jede Änderung ist ein Risiko für den Rest der Seite.
Baukasten-Systeme
Vorlage wählen, Texte und Bilder einsetzen, fertig. Günstig und ohne Vorkenntnisse machbar. Dafür stoßen Sie schnell an Grenzen bei Design, Ladezeit und SEO, und Ihre Website sieht am Ende aus wie tausend andere aus derselben Vorlage.
Individuelle Entwicklung
Entwickler schreiben Ihre Website von Grund auf in Code, heute meist mit KI-Unterstützung. Keine Grenzen, maximale Performance. Dafür brauchen Sie für jede Änderung wieder einen Entwickler, und das kostet Zeit und Geld.
Klassische CMS-Systeme
Der Standard seit 20 Jahren, riesige Auswahl an Themes und Plugins. Der Preis dafür: ständige Updates, Sicherheitslücken und ein Theme-Plugin-Wirrwarr, das mit jedem Jahr langsamer und teurer wird.
Webflow
Die Mitte aus allem: Design ohne Grenzen wie bei Individualentwicklung, Inhalte selbst pflegen wie im Baukasten, sauberer Code, KI-Anbindungen wo gewünscht und Hosting inklusive. Keine Updates, keine Plugins, keine Sicherheitslücken.
Unsere Schnittstelle zwischen Expertise und Erfolg: Webflow.
Webseiten sind anspruchsvoll, besonders wenn neben einem professionellen Design auch Mehrsprachigkeit, ein Blog, moderne Animationen, KI-Sichtbarkeit oder gar der Verkauf von Produkten gewünscht sind. Wir verbinden langjährige Expertise mit den richtigen Tools und setzen für die Webumsetzung auf Webflow.
Editierbarkeit
Das Webflow-Interface erlaubt es, Elemente direkt visuell auf der Seite zu bearbeiten. Außerdem machen das integrierte Content-Management-System (CMS) sowie Komponenten und Templates die Inhaltspflege für Sie und Ihr Team zusätzlich einfach.
Website Scores
Leistung, SEO, Best Practices und Barrierefreiheit sind messbar. Was davon für Sie zählt, besprechen wir vorab und richten die Umsetzung danach aus.
Schlankes Markup
Wir erzeugen sauberes, semantisches Markup ohne überflüssigen Code. Das sorgt für schnelle Ladezeiten und macht es Suchmaschinen und KI-Modelle leicht, Ihre Inhalte zu erfassen.
Das Webflow-Interface ist die Schnittstelle, in der Expertise und Code zusammenkommen und Inhalte bearbeitet und sicher gespeichert werden. Es dient zugleich als Kontrollinstanz und publiziert die Seite in Verbindung mit Ihrer Domain sicher ins Web.
Sprachen
Wir machen Ihre Seite mehrsprachig, auf Wunsch inklusive lokalisierter URLs, Bilder und Styles. So finden sich internationale Besucher in ihrer eigenen Sprache zurecht, was Nutzererfahrung und Sichtbarkeit in lokalen Suchergebnissen verbessert.
DSGVO
Wir setzen Ihre Seite DSGVO-konform um: mit passender Cookie-Consent-Lösung, Datenschutzerklärung und Webflows Auftragsverarbeitungsvertrag inklusive EU-Standardvertragsklauseln. So sind Sie rechtlich gut abgesichert.
KI-Komponenten
KI-Komponenten machen möglich, was über den Webflow-Standard hinausgeht: interaktive Tools, Rechner oder individuelle Funktionen. Entwickelt werden sie mit KI wie Claude Code und landen über die Schnittstelle DevLink direkt in Webflow, wo sie sich einfügen wie jedes andere Element.
Backups
Webflow sichert Ihre Website fortlaufend und automatisch. Jeder frühere Stand lässt sich mit einem Klick wiederherstellen.
Webflow ist nicht nur "das Tool Ihres Webdesigners". Es verändert, wie schnell Sie Inhalte ändern, wie sauber Ihre Seite läuft und wie Sie nach außen wirken.
CMS
Das integrierte CMS trennt Inhalt und Design: Sie tragen neue Inhalte ein, die Website setzt sie automatisch im richtigen Layout um. So können Sie jederzeit neue Blogartikel, Testimonials oder Stellenanzeigen online stellen.
Strukturierte Daten
Wir hinterlegen strukturierte Daten nach Schema.org, in Webflow auch dynamisch aus CMS-Feldern. Suchmaschinen ordnen Ihre Inhalte so richtig ein und zeigen sie prominenter an, etwa mit Bewertungen oder Veranstaltungsdaten.
Kataloop wurde mit Liebe zum Detail erstellt und mit:
Webflow als Online-Tool für die Frontend-Umsetzung und das Hosting dieser Webseite.
Figma als Software für den Designprozess dieser Webseite inkl. Lottie-Animationen.
Diverse Adobe-Software wie z.B. Adobe Illustrator für die Erstellung von Vektorgrafiken oder Adobe Bridge, Camera-Raw und Photoshop für das Verwalten und Bearbeiten von Fotos und Videos.
Airtable als nutzerfreundliches no-code Datenbank-Replacement.
Google Cloud-Storage als sicherer Ort zur Speicherung aller Stockmedien.
Claude von Anthropic für die KI-Komponenten sowie für Custom Code und Fehlersuche.
ChatGPT von Open AI, z.B. zur Generierung von Titel, Beschreibung und Tags der Stockmedien.
n8n als Automatisierungsplattform für Workflows im Hintergrund, z. B. die Erstellung individueller Angebots-PDFs.
Stripe als sicherer Abwickler von Onlinezahlungen und Abo-Management.
Das Mast Framework für Webflow, um den Prozess des Frontend-Developments zu beschleunigen und einen sinnvolle CSS-Struktur zu verwenden, die die Webseite schneller macht.
Eine Website bietet die Möglichkeit, , ihnen ein und .
Conversionrates steigern
Empfehlungen fördern
Wiedererkennbarkeit steigern
Vertrauen aufbauen
Absprungraten reduzieren
Vom Wettbewerb abheben
Kontaktaufnahmen erhöhen
Wertigkeit transportieren
Bewerbungen steigern
Kunden binden
Supporttickets reduzieren
Authentizität vermitteln
Exklusive Bilder. Inklusive.
Unsere Foto- und Videosammlung ist nur hier verfügbar und frei von Bildern, die bereits unzählige andere Seiten verwenden. Das unterscheidet Sie von Ihrer Konkurrenz und ist auch für Suchmaschinen und KI-Systeme neu. Bei Ihrem Website-Projekten sind sie inklusive.
Komponenten mit Künstlicher Intelligenz. Für bestimmte Aufgaben.
KI-Komponenten können im Grunde alles sein, nur dass sie in der Form wie eine Webflow-Komponente erscheinen. So entscheiden wir gezielt, was per KI umgesetzt wird, und das Webflow-Interface bleibt unsere Kontrollinstanz zwischen KI und Live-Seite. Aus Claude Code gesteuert, landen sie in der sauberen Website-Struktur und enthalten Varianten, Textfelder und vieles mehr. Das bearbeiten Sie oder wir später visuell auf der Seite, statt im Code oder per Chat.
Halftone Studio
Hohe Komplexität
Halftone Studio ist ein kostenloses Werkzeug, um Bilder in Raster zu übersetzen, die eine gewünschte Form zugrunde liegen haben. Dabei kann man zusätzlich Bewegungseffekte wählen, die das Bild zu einem animierten, endlosen Video wandeln, oder die Bewegung ausstellen. Am Ende kann man das Ergebnis als mp4, gif oder Bildformat herunterladen.
What came out is a genuinely useful creative tool — the kind of thing a brand or social team could use on day one.
Tech Stack:
React
TypeScript
Canvas
WebCodecs
Webflow Code Components
Bilderfächer
Niedrige Komplexität
Die Bounce-Karten zeigen bis zu fünf Bilder als leicht gedrehten Fächer. Beim Hereinscrollen federn die Karten nacheinander ins Bild. Fährt man mit der Maus über eine Karte, richtet sie sich auf und die Nachbarn rücken weich zur Seite. Bilder, Kartengröße, Abstand, Rahmen und Tempo sind in Webflow einstellbar.
Tech Stack:
React
TypeScript
CSS Animations
Webflow Code Components
Terminbuchung
Hohe Komplexität
Die Terminbuchung ist ein Buchungs-Tool für ein Erstgespräch: Tag und Uhrzeit auswählen, die Verfügbarkeit wird live geprüft, und ist der Wunschtermin belegt, gibt es direkt Alternativen. Nach der Buchung landet die Einladung automatisch im Kalender, als Google-Meet-Termin oder Telefonat. Feiertage, Öffnungszeiten und die Zeitzone des Besuchers werden dabei berücksichtigt.
Tech Stack:
React
TypeScript
n8n
Google Calendar
Webflow Code Components
Slider
Mittlere Komplexität
Während man früher lange nach Slider-Bibliotheken gesucht, sie per Custom Code eingebunden und teils extra lizenziert hat, bauen wir so einen Slider heute mit Claude Code in einem Bruchteil der früher investierten Zeit, individuell für das Projekt. Die KI-Komponente liefert dabei nur die technische Hülle: Die aktive Karte steht zentriert, die Nachbarn ragen angeschnitten ins Bild, die Karten lassen sich auch per Drag bewegen und ihre Breite stellen wir je Breakpoint ein. Die Inhalte selbst sind normale Elemente bzw. Divs, visuell programmiert und editierbar im Webflow-Interface. Auf dieser Website kommt der Slider an verschiedenen Stellen zum Einsatz.
Tech Stack:
React
TypeScript
CSS Animations
Webflow Code Components
Animierter Hintergrundverlauf
Niedrige Komplexität
Der Shader Gradient ist eine Hintergrund-Komponente, die bis zu vier Farben als fließende, verwirbelte Bahnen ineinanderlaufen lässt. Der Effekt wird in Echtzeit berechnet, nicht als Video abgespielt. Muster, Bewegung, Tempo, Streckung und Glanz lassen sich direkt im Webflow Designer einstellen, die Farben kommen aus den Variablen der Website. Der Effekt läuft nur, solange er sichtbar ist, und belastet die Seite dadurch kaum.
Tech Stack:
React
TypeScript
WebGL
GLSL
Webflow Code Components
WebP-Konverter
Hohe Komplexität
Der WebP-Konverter ist ein kostenloses Werkzeug, das Bilder wie PNG, JPG, GIF oder SVG direkt im Browser in das platzsparende WebP-Format umwandelt. Die Umwandlung passiert komplett im eigenen Browser, die Bilder verlassen den Rechner nicht und landen auf keinem Server. Qualität, Größe und Dateinamen lassen sich vorab festlegen, auch für viele Bilder auf einmal. Das Ergebnis gibt es einzeln oder gesammelt als ZIP zum Herunterladen.
Tech Stack:
React
TypeScript
Canvas
JSZip
Webflow Code Components
Wir schaffen Ihre Klarheit nach außen. Mit diesen Services.
Website-Strategie
Eine Website ist nicht einfach da, weil man eine erwartet. Sie ist ein strategisches Werkzeug mit klaren Zielen. Ein klassisches Ziel ist mehr Verkauf. Dann greift verkaufspsychologische Gestaltung, die direkt auf Ihrer Positionierung aufbaut. Andere Unternehmen wollen vor allem Anfragen, Bewerber oder einen Auftritt, dem man vertraut, bevor man anruft. Für jedes dieser Ziele sieht eine Website anders aus. Welches Ziel Ihre hat, klären wir zuerst mit Ihnen. Daraus entsteht die Website-Strategie, an der wir Struktur und Gestaltung ausrichten.
Webdesign
Im Webdesign wird die Strategie Ihrer Website sichtbar. Der Anspruch: Besucher fühlen sich auf Anhieb angesprochen, finden sich zurecht und werden gezielt geführt. Der Auftritt wirkt professionell und hebt sich von der Konkurrenz ab. Wir gestalten seit über 15 Jahren Interfaces und wissen, wie hochwertiges Design entsteht. Ihre neue Website bauen wir Schritt für Schritt im Figma-Prototypen auf. Sie können den Stand jederzeit einsehen und Änderungswünsche direkt mit einbringen.
Webentwicklung
Aus dem Webdesign wird dann eine funktionierende Website, pixelgenau umgesetzt. Die Entstehung können Sie live mitverfolgen, über eine Domain, die nur Ihnen und uns zugänglich ist. Wir achten auf eine saubere Code-Struktur. Das merkt man der Seite an: Besucher beim Laden, Suchmaschinen und KI-Modelle beim Lesen. Sie macht Ihre Website zudem skalierbar. Selbstverständlich ist die Website responsive: optimiert vom großen 5K-Monitor bis zum Smartphone. Inhalte pflegen Sie oder Ihr Team bei Bedarf später selbst.
Künstliche Intelligenz (KI)
Mit KI erstellte Websites werden schnell zu AI-Slop. Bei Kataloop verlassen wir uns nicht auf KI, wir steuern sie: mit Prompts voller Fachexpertise und Korrekturschleifen. Zum Einsatz kommt sie nur dort, wo sie die Effizienz erhöht und die Qualität nicht leidet. Webdesigns gestalten wir deshalb selbst, mit menschlicher Empathie. Die technische Basis eines Sliders wie diesem lässt sich dagegen gut mit künstlicher Intelligenz umsetzen. Auch kleine Applikationen wie eine Terminbuchung erstellen wir mit KI, die Daten laufen über sichere Workflows (n8n). Komplexe Interfaces wie ein CRM setzen wir nur auf Monatspreis-Basis um, hier gelten zusätzliche Sicherheitsstandards.
Fotografie, Grafikdesign und mehr
Ob kleine Studioproduktion (Fotos und tonlose Kurzvideos), Bildbearbeitung, Icons, Ihr Branding, Ihre Visitenkarte oder eine typografische oder abstrakte Grafik: Ihre visuelle Identität ist nicht nur für Ihre Website wichtig, sondern überall dort, wo Ihr Unternehmen sichtbar wird. Daher setzen wir gestalterische Dienstleistungen gerne für den Einsatz auf Ihrer Website um, aber genauso als eigenständige Aufträge. Auf Monatspreis-Basis sind diese Leistungen sogar unkompliziert "auf Zuruf" umsetzbar. Machen Sie sich ein Bild von unseren Referenzen weiter unten auf dieser Seite, und erzählen Sie uns, was Ihnen vorschwebt.
Kataloop GmbH, im Herzen von Berlin.
Kataloop ist ein Studio für Webdesign und Webentwicklung in Berlin, gegründet von Lydia Dietsch. Das Ergebnis sind klar strukturierte, hochwertige Websites, auf denen sich Besucher sofort zurechtfinden und die das erreichen, was Sie sich von ihnen versprechen. Das reicht vom Konzept über Design und Entwicklung bis zur Live-Schaltung und langfristigen Betreuung. Dazu gehört auch das, was sonst gern fehlt: eigens produzierte Fotos und Videos, Bildbearbeitung, Icons, Animationen oder der Preiskalkulator, den Sie sich für Ihre Seite wünschen.
Mehr über die Kataloop GmbHWeitere Referenzen von Lydia Dietsch
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Die Zusammenarbeit mit Lydia war eine Freude; ihre Stärken sind ihre Liebe zum Detail und ihr proaktiver Ansatz.
Christine Vlachou
OKAPI:Orbits GmbH, Marketing- und Kommunikationsmanagerin
Sehr kompetent. Sehr schnell. Sehr durchsetzungsstark. Gute Analyse. Gute Umsetzung. Kurz: eine große Hilfe.
Stefan Litwin
lawinenstift-digital GmbH
Lydias Professionalität zeichnet sich dadurch aus, dass sie gleichzeitig strukturgebend und flexibel in der Umsetzung von Ideen ist. Ihre Arbeit mit mir war transparent, wertschätzend und empathisch.
Elisabeth Warnke
Praxis für Logopädie Elisabeth Warnke
Die Zusammenarbeit war hochprofessionell und zu jedem Zeitpunkt fand eine sehr gute Kommunikation zu den Designideen und Arbeitsschritten statt.
Thorsten Reitz
LOT Internet GmbH, Geschäftsführer
Die Zusammenarbeit mit Lydia dabei war hervorragend – Lydia ist absolut zuverlässig, kommuniziert klar, schnell, höflich professionell und zielführend, hat Ihren eigenen Point of View, welchen Sie konstruktiv einbringt.
Johann Wachs
Freier Markenberater
Lydias Professionalität und Zuverlässigkeit haben maßgeblich zum Erfolg unserer Online-Präsenz beigetragen. Ich kann die Zusammenarbeit mit Lydia uneingeschränkt empfehlen.
Marco Linsenmann
Bridge of Trust DIGITAL, Inhaber & Geschäftsführer
Sie ist sehr kompetent in ihrem Bereich. So hatte ich mit meiner über 30-jährigen Erfahrung in der Softwareentwicklung eine tolle Sparringspartnerin zu allen spezifischen Themen.
Daniel Hardge
Gründer von Petmos
