# Design Mode (/de/docs/verdent-cloud/create/design-mode)

> Verwenden Sie ein Text-Briefing, um zunächst eine visuelle Richtung zu wählen, und erstellen Sie dann aus dieser freigegebenen Richtung eine funktionierende App.



Design Mode ist der designorientierte Erstellungsweg von Verdent Cloud für neue Apps mit sichtbarer Oberfläche. Nutzen Sie ihn, wenn Sie eine Idee in Worten haben, aber noch kein fertiges Design, keinen Screenshot, keinen Styleguide und keinen vollständigen Seitenplan.

Anstatt direkt in den Code zu springen, hilft Design Mode Ihnen, zunächst zu entscheiden, wie das Produkt aussehen und sich anfühlen soll, und verwandelt die freigegebene Richtung dann in eine funktionierende App.

## Wann sollten Sie Design Mode verwenden [#wann-sollten-sie-design-mode-verwenden]

Verwenden Sie Design Mode, wenn Sie aus einem Text-Briefing eine neue Produkt-UI erstellen möchten, zum Beispiel:

* eine Full-Stack-App
* ein Web-Frontend oder eine Landingpage
* eine mobile App
* ein Spiel oder interaktives Erlebnis mit mehreren Bildschirmen
* eine Produktidee von null auf eins, bei der die visuelle Richtung noch nicht feststeht

## Wann Sie darauf verzichten sollten [#wann-sie-darauf-verzichten-sollten]

Verzichten Sie auf Design Mode, wenn:

* das Projekt ein triviales Einzelbildschirm-Werkzeug ist, etwa ein einfaches Formular oder eine sehr kleine Spielerei-App
* Sie bereits ein vollständiges Design-Briefing mit konkreter Stilrichtung, Farbpalette, Typografiesystem und Seiten- oder Bildschirmliste haben
* Sie bereits Designdateien, Mockups, Screenshots oder einen Styleguide haben, die direkt umgesetzt werden sollen
* Sie das Design bewusst überspringen und direkt zum Code übergehen möchten

<Note>
  Wenn Ihr Briefing bereits ausreichend spezifisch ist, kann Verdent Cloud es als gewählte Richtung verwenden und direkt mit der Seitenplanung und der Erstellungsarbeit fortfahren.
</Note>

## Wie Design Mode funktioniert [#wie-design-mode-funktioniert]

<Steps>
  <Step title="Das Produkt beschreiben">
    Beginnen Sie mit einem Briefing in einfacher Sprache: was Sie erstellen möchten, für wen es ist, was es tun soll und welche Stimmungs- oder Stilreferenzen Sie bereits haben.
  </Step>

  <Step title="Eine visuelle Richtung wählen">
    Verdent Cloud erkundet verschiedene Designrichtungen, sodass Sie das Aussehen und die Anmutung wählen können, bevor Code geschrieben wird.
  </Step>

  <Step title="Die Seiten oder Bildschirme planen">
    Für mehrseitige, Full-Stack- oder komplexere Produkte verwandelt Verdent Cloud die gewählte Richtung in einen Seiten- oder Bildschirmplan und eine Produktspezifikation in einfacher Sprache.
  </Step>

  <Step title="Aus der freigegebenen Richtung erstellen">
    Sobald die Richtung klar ist, überführt Verdent Cloud das Design in eine funktionierende App und hält spätere Entscheidungen an das freigegebene Design und die Spezifikation gebunden.
  </Step>

  <Step title="Vorschau ansehen und fortfahren">
    Prüfen Sie die App in der Vorschau und fahren Sie dann nach Bedarf mit Backend-Arbeit, Tests, Analytics oder dem Deployment fort.
  </Step>
</Steps>

## So verwenden Sie Design Mode in Verdent Cloud [#so-verwenden-sie-design-mode-in-verdent-cloud]

Beschreiben Sie im Cloud-Erstellungsablauf die App, die Sie erstellen möchten, anstatt eine Vorlage auszuwählen. Wenn Sie noch keine konkrete Designrichtung haben, kann Verdent Cloud Design Mode verwenden, um Ihnen bei der Auswahl zu helfen, bevor es die App erstellt.

Sie können das Briefing einfach halten, aber machen Sie es spezifisch genug, um Designentscheidungen zu lenken:

* was das Produkt ist
* wer es nutzen wird
* die Hauptaufgabe, bei der es helfen soll
* die Seiten, Bildschirme oder Zustände, von denen Sie bereits wissen, dass Sie sie benötigen
* alle Ton- oder Stilreferenzen, etwa redaktionell, verspielt, funktional, hochwertig, minimalistisch oder auffällig
* alles, was Sie nicht möchten, etwa generische Farbverläufe, nach Stockmaterial aussehende Bilder oder einen bestimmten visuellen Stil

## Beispiel-Briefings [#beispiel-briefings]

<CardGroup cols="2">
  <Card title="Landingpage">
    Erstellen Sie eine Landingpage für eine Finanz-App für Freiberufler. Sie soll ruhig, vertrauenswürdig und redaktionell wirken, mit einem Hero-Bereich, Feature-Abschnitten, Preisen und FAQ.
  </Card>

  <Card title="App mit mehreren Bildschirmen">
    Erstellen Sie einen mobil-orientierten Gewohnheitstracker für Menschen, die sich von einem Burnout erholen. Er soll sanft und taktil wirken, mit Onboarding, täglichem Check-in, Fortschrittsansicht und Einstellungen.
  </Card>
</CardGroup>

## Tipps für bessere Ergebnisse [#tipps-für-bessere-ergebnisse]

* Nennen Sie, für wen das Produkt gedacht ist.
* Beschreiben Sie das gewünschte Gefühl, nicht nur die Funktionsliste.
* Erwähnen Sie bekannte Seiten oder Bildschirme, falls Sie sie haben.
* Teilen Sie Referenzen oder Einschränkungen frühzeitig mit, wenn sie wichtig sind.
* Sagen Sie, was vermieden werden soll, wenn Sie bereits wissen, was sich falsch anfühlen würde.
* Rechnen Sie bei komplexen Produkten damit, die Seitenliste und die Produktspezifikation zu bestätigen, bevor die vollständige Erstellung fortgesetzt wird.