Website-Vorlagen für Studios und Agenturen. Erstelle die Website deines Studios und schicke sie zusammen mit deinem Angebot an neue Kunden.
Verbinde Projekte, Leistungen und Studio in einer visuellen Richtung. Wähle ein Design, das Interessenten deine Arbeit und den Beginn einer Zusammenarbeit erklärt.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
AI ChatBeispielablauf
Studio-Identität
Du
Präsentiere Studio, Projekte, Leistungen und Menschen und ergänze eine Briefanfrage.
KI · Beispielantwort
Gib mir Angebot, Beispiele und Kontaktweg. Ich kann sie in die Abschnitte einsetzen und bei Bedarf Abschnitte verschieben oder ergänzen.
Website-Inhalte ordnen
Material sammeln
Nutze Leistungsbeschreibungen, Projektbilder und Kontaktdaten.
Ins Template einsetzen
Lass Beispielabschnitte ersetzen und gewünschte Designelemente behalten.
Umordnen oder Seite ergänzen
Ziehe Wichtiges nach vorn oder ergänze für mehr Details eine Seite.
Danach: Angebot und Kontakt aus Besuchersicht finden.
Beispieldialog, keine Live-KI-Sitzung.
01 / Studio-Identität
Was sollte ein Kunde über deine Praxis verstehen?
Kunden sollten Leistungen, Arbeitsbeispiele und Ansprechpartner kennenlernen. Wähle passende Projekte und beschreibe die dazugehörigen Leistungen. Ergänze einen Kontaktweg, damit Besucher nach dem Ansehen einen Brief schicken können.
Die visuelle Stimme
Typografie, Bilder und Raum sollen Besuchern deine Arbeiten erschließen.
Die Praxis
Zeige echte Leistungen, Rollen und Entscheidungen statt einer Beispielidentität.
02 / Studio-Richtungen
Welches Design verbindet Arbeiten, Leistungen und Studiokontext?
Vergleiche, wie die Vorschauen Projekte, Leistungen und Studio vorstellen. Wähle Bildmenge und Detailtiefe passend zu deinen Arbeiten und lasse KI Marke und Inhalte ergänzen. Der Beispielaufbau lässt sich anpassen; du musst dessen Firmenbeschreibung nicht übernehmen.
VYNE
Markante Typografie, Kobaltporträt, Projekte, Leistungen und Prinzipien. Prüfe visuelle Effekte für deine Zielgruppe.
Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.
index.html
RECREATE.md
assets/current-product.png
assets/hero-form.png
assets/serein-brand.png
Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
Quelldateien und technische Details ansehen
Forma Studio: Arbeiten, Vorgehen und Leistungen in einer Quelle
11-forma-studio/ index.html · main section order
Exakte Reihenfolge im aktuellen HTML. Englische Originalüberschriften, kein vorgeschlagener Neuaufbau.
01 #home — Forma
02 #inside — (visual section)
03 #explorations — Ideas take shape through type, colour, materials and a little room to play.
04 #work — SelectedWork.
05 #approach — A visual idea becomes useful when the small decisions work together.
06 #studio — An imagined studio for identities with character and websites with purpose.
07 #services — Services
08 #motion — (visual section)
09 #notes — How an idea takes shape
10 #scope — Scope
11 #faq — A fewanswers.
12 #journal — Studio notes
13 #contact — Give your nextidea a form.
Forma Studio
Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.Ganze Vorschau öffnen ↗
AI ChatBeispielablauf
Arbeiten belegen Leistungen
Du
Ordne jeder Studioleistung ein echtes Projekt zu und beschreibe das Gelieferte.
KI · Beispielantwort
Schicke Auftrag, deinen Beitrag und fertige Bilder. Ich kann daraus einen kurzen Projekttext neben den Arbeiten erstellen. Ergebnisse verwende ich nur aus deinen Angaben.
Ein echtes Projekt hinzufügen
Projekt und Auftrag
Nenne Kunde oder Projekt und erkläre die beauftragte Aufgabe.
Dein Beitrag
Beschreibe deinen Lieferumfang und zeige passende Bilder oder Screenshots.
Ergebnis
Zeige die fertige Arbeit. Geschäftsergebnisse ergänzt du, wenn sie belegt sind; sonst erklärst du das Gelieferte.
Danach: Projekttext neben eigenen Bildern lesen.
Beispieldialog, keine Live-KI-Sitzung.
03 / Arbeiten belegen Leistungen
Welche echten Projekte zeigen jede Leistung?
Wähle ein Beispiel je Leistung: Identität für Branding, Website für Webdesign oder Kampagne für Werbung. Ergänze deinen Beitrag und fertige Arbeiten. Kunden können dann von der Leistungsbeschreibung zu einem konkreten Ergebnis deines Studios wechseln.
Lokal auf diesem Gerät markiert; nichts wird übermittelt.
Frage des Besuchers
Stelle im Original
Was die Originalseite zeigt
Was Ihre Website braucht
Was entsteht aus dieser Leistung?
Forma #services → Web design / Identity / Art direction
Beschreibungen verbinden Seitenstruktur, Identitätselemente und Bildrichtung.
Durch Unterlagen, Ergebnisse und Ausschlüsse einer echten Leistung ersetzen.
Welche Arbeit belegt die Rolle?
Forma #work → Terra / Index / Vesper
Identität/Packaging, Editorial und Art-Direction sind unterschiedliche Konzepte, keine Kundenaufträge.
Erlaubtes Projekt, tatsächlichen Beitrag und passendes Ergebnis ergänzen.
Wie wird die Richtung geprüft?
Forma #approach → MAKE FEEDBACK SPECIFIC
Der Beispielhinweis „leichter scannen?“ führt zum Vergleich eines Zeilenumbruchs.
Prüfperson, vorgelegte Varianten und nötige Entscheidung benennen.
AI ChatBeispielablauf
Menschen und Ablauf
Du
Ein Gründer und zwei Partner: Ersetze das Beispielteam durch unsere echten Rollen.
KI · Beispielantwort
Schicke Namen, Rollen und deinen Projektablauf. Ich kann Team- und Prozessabschnitte an deine Praxis anpassen, auch für Einzelgründer oder Partner.
Tatsächliches Team vorstellen
Menschen ergänzen
Nutze veröffentlichbare Namen, Fotos und Beschreibungen.
Rollen erklären
Nenne Gestaltung, Projektführung und den Einsatz von Partnern.
Zusammenarbeit zeigen
Erkläre Start und Kundenfeedback.
Danach: Menschen und Ablauf mit der tatsächlichen Zusammenarbeit vergleichen.
Beispieldialog, keine Live-KI-Sitzung.
04 / Menschen und Ablauf
Mit wem wird der Kunde arbeiten?
Zeige die tatsächlichen Projektbeteiligten und ihre Aufgaben. Eine Einzelpraxis kann den Gründer vorstellen und erläutern, wann Partner hinzukommen. Lass KI Team- und Ablaufabschnitte an deinen Alltag anpassen, einschließlich Kundenfeedback.
01
Menschen
Stelle Gründer, Team oder Partner vor, die die Arbeit tatsächlich leisten.
02
Rollen
Erkläre Gestaltung, Projektleitung und Kundenfeedback.
AI ChatBeispielablauf
Projektstart
Du
Lass das Formular Kundenbrief, Zeitraum und Antwortadresse an mein Studio senden.
KI · Beispielantwort
Wähle E-Mail, Formular-Empfangsdienst oder Buchungslink. Ich kann das Ziel anbinden und bei einer Testsendung helfen. Eine Meldung im Browser belegt noch keinen Eingang.
Anfragen mit deinem Postfach verbinden
Ziel wählen
Nutze E-Mail-Adresse, Formular-Empfangsdienst oder deinen Buchungslink.
Mit KI verbinden
Gib das Ziel an und lasse Button oder Formular anbinden. Private Zugangsdaten gehören in die autorisierte Einrichtung, nicht in öffentliches HTML.
Test senden
Prüfe den tatsächlichen Nachrichteneingang oder Termin im Dienst, nicht nur eine Erfolgsmeldung auf der Seite.
Danach: Testnachricht oder Buchung im Empfangsdienst prüfen.
Beispieldialog, keine Live-KI-Sitzung.
05 / Projektstart
Was sollte ein Interessent senden?
Einen kurzen Brief: Bedarf, Marke oder Produkt, gewünschter Zeitraum und Antwortadresse. Setze die Felder in ein angebundenes Formular oder bitte um dieselben Angaben per E-Mail. Prüfe den Eingang vor der Nutzung für Kundenanfragen.
Ziel wählen
Nutze E-Mail-Adresse, Formular-Empfangsdienst oder deinen Buchungslink.
Mit KI verbinden
Gib das Ziel an und lasse Button oder Formular anbinden. Private Zugangsdaten gehören in die autorisierte Einrichtung, nicht in öffentliches HTML.
Test senden
Prüfe den tatsächlichen Nachrichteneingang oder Termin im Dienst, nicht nur eine Erfolgsmeldung auf der Seite.
AI ChatBeispielablauf
Richtung anpassen
Du
Wende Studiologo, Farben, Schriften und Projektbilder im gesamten Design an.
KI · Beispielantwort
Schicke Logo, Farbwerte, Schriftnamen und Bilder. Ich kann sie im Template bei gleichem Abschnittsaufbau anwenden und das Zusammenspiel in der Vorschau zeigen.
Deine Marke anwenden
Markenmaterialien hinzufügen
Gib Logo, Schriften, Farben und Projektbilder dazu.
Identität anwenden
Lass KI die gesamte Website anpassen und gewünschte Abschnitte beibehalten.
Desktop und Handy ansehen
Prüfe Logogröße, Textkontrast und Bilder zusammen.
Danach: unpassende Farben, Abstände oder Bilder nacharbeiten.
Beispieldialog, keine Live-KI-Sitzung.
06 / Richtung anpassen
Kann ich das Design meiner Studio-Identität anpassen?
Ja. Gib KI Logo, Farben, Schriften und Projektbilder. Lass deine Identität auf der gesamten Website anwenden und den gewünschten Aufbau beibehalten. Auch Bildverhältnisse, Abstände und Animationen kannst du ändern; prüfe Desktop und Handy.
Vorbereitetes Template-Beispiel ansehen
›_ Beispiel für KI-BearbeitungFormwell
Du
Ändere die Akzentfarben und behalte das Seitenlayout.
KI · Beispielantwort
Das vorbereitete Formwell-Beispiel ändert die Farbgestaltung. Deine VYNE- oder andere Studioversion braucht eigene Inhalts-, Bewegungs- und Layoutprüfung.
Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.
Quelldateien und technische Details ansehen
VYNE: Bewegungseinstellung und Pause im Quelltext
09-vyne/ script: preference declaration/applyMotion and separate change listener
Desktop-Test wählte Still über Thumbnail 2, pausierte Bewegung, öffnete das Studio-Detail und nutzte Tab/Escape; Fokus blieb im Dialog und kehrte zurück. Der Quelltext liest prefers-reduced-motion. Diese Systemeinstellung wurde hier nicht emuliert; Touch und alle Bewegungszustände bleiben zu prüfen.
const mediaQuery=matchMedia('(prefers-reduced-motion: reduce)');let paused=mediaQuery.matches;let cubeFrame=0;const motionButton=$('.motion-button'),cube=$('.cube'),scene=$('.services-scene');
function applyMotion(){document.body.classList.toggle('motion-paused',paused);motionButton.setAttribute('aria-pressed',String(paused));motionButton.setAttribute('aria-label',paused?'Resume page motion':'Pause page motion');$('.motion-label').textContent=paused?'Motion off':'Motion on';if(!paused&&!document.hidden)updateCube()}
// Separate source listener:
mediaQuery.addEventListener('change',e=>{paused=e.matches;applyMotion()});
VYNE
Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.Ganze Vorschau öffnen ↗
Tatsächliche manuelle Still-Auswahl, Desktop-Chrome 1118×958.Tatsächlicher Studio-Dialog. Tab blieb darin, Escape gab den Fokus zurück.
07 / Passung zur Praxis wählen
Was prüfe ich vor der Auswahl?
Wähle genug Platz für Projekte und Leistungen. Prüfe Dateien und Lizenz und bereite Markenmaterialien sowie Kontaktweg vor. Die Vorlage ist deine Studio-Website; Kundenprojekte kannst du weiter in deinen bisherigen Tools verwalten.
Teste ein echtes Template, bevor du dich entscheidest.
Lade das originale Formwell-Projekt herunter. Gib die Dateien und RECREATE.md an ein geeignetes KI-Tool, probiere eine kleine Änderung und prüfe das Ergebnis.
Das kostenlose Beispiel ist Formwell. Originaldesign und Anleitung sind auf Englisch. Die Produktpreise bleiben unverändert.
OneDollarStock setzt ein Projekt zur Vorbereitung der Plattform auf den Eintritt in den deutschen Markt im Rahmen des Akzelerationspfads „Go Global“ des Programms „Unicorn Hub Startup Booster“ um (Projektnr. FENG.02.28-IP.02-0013/23). Das Projekt wird aus Mitteln des Programms European Funds for Smart Economy 2021–2027 im Rahmen der Priorität „Innovation-friendly environment“, Maßnahme FENG.2.28 Startup Booster Poland, kofinanziert.
Mehr über das Projekt erfahren →
Savi
Template ansehen
Rondist
Template ansehen
Passer
Template ansehen
Outer Light
Template ansehen
Osma
Template ansehen
Nightglass
Template ansehen
Lark
Template ansehen
Drumlin
Template ansehen
Aveniq
Template ansehen
Novera
Template ansehen
Aurelia Atelier
Template ansehen
Nivora
Template ansehen
Savi
Template ansehen
Rondist
Template ansehen
Passer
Template ansehen
Outer Light
Template ansehen
Osma
Template ansehen
Nightglass
Template ansehen
Lark
Template ansehen
Drumlin
Template ansehen
Aveniq
Template ansehen
Novera
Template ansehen
Aurelia Atelier
Template ansehen
Nivora
Template ansehen
