# Design Mode (/de/docs/verdent-manager/core-features/design-mode)

> Nutzen Sie zuerst ein Text-Briefing, um eine visuelle Richtung zu wählen, und erstellen Sie dann eine funktionierende App aus dieser genehmigten Richtung.



Design Mode ist der design-first-Erstellungspfad von Verdent für neue Apps mit einer sichtbaren Benutzeroberfläche. Nutzen Sie diesen Pfad, wenn Sie eine Idee in Worten haben, aber noch kein fertiges Design, keinen Screenshot, keinen Styleguide oder vollständigen Seitenplan.

Anstatt direkt in den Code einzusteigen, hilft Design Mode Ihnen zunächst zu entscheiden, wie sich das Produkt anfühlen und aussehen soll, und setzt anschließend die genehmigte Richtung in eine funktionierende App um.

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

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

* eine Full-Stack-App
* ein Web-Frontend oder eine Landingpage
* eine mobile App
* eine 0-zu-1-Produktidee, bei der die visuelle Richtung noch nicht festgelegt ist

## Wann Sie es überspringen sollten [#wann-sie-es-überspringen-sollten]

Überspringen Sie Design Mode, wenn:

* das Projekt ein triviales Ein-Bildschirm-Tool ist, etwa ein einfaches Formular oder eine sehr kleine Spielerei
* Sie bereits ein vollständiges Design-Briefing mit konkreter Stilrichtung, Farbpalette, Typografiesystem und Seiten- oder Bildschirmliste haben
* Sie bereits Design-Dateien, Mockups, Screenshots oder einen Styleguide haben, denen direkt gefolgt werden soll
* Sie das Design ausdrücklich überspringen und direkt zum Code übergehen möchten

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

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

<Steps>
  <Step title="Produkt beschreiben">
    Beginnen Sie mit einem einfach formulierten Briefing: was Sie bauen möchten, für wen es gedacht ist, was es leisten soll und welche Stimmungs- oder Stilreferenzen Sie bereits haben.
  </Step>

  <Step title="Visuelle Richtung wählen">
    Verdent erarbeitet unterschiedliche Designrichtungen, damit Sie Look and Feel auswählen können, bevor Code geschrieben wird.
  </Step>

  <Step title="Seiten oder Bildschirme planen">
    Bei mehrseitigen, Full-Stack- oder komplexeren Produkten wandelt Verdent die gewählte Richtung in einen Seiten- oder Bildschirmplan sowie eine leicht verständliche Produktspezifikation um.
  </Step>

  <Step title="Auf Basis der genehmigten Richtung bauen">
    Sobald die Richtung klar ist, überführt Verdent das Design in eine funktionierende App und sorgt dafür, dass spätere Entscheidungen an das genehmigte Design und die Spezifikation gebunden bleiben.
  </Step>

  <Step title="Vorschau und Weiterarbeit">
    Prüfen Sie die App in der Vorschau und fahren Sie anschließend nach Bedarf mit Backend-Arbeiten, Tests oder weiteren Iterationen fort.
  </Step>
</Steps>

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

Wenn Sie im Manager ein neues Produkt starten, beschreiben Sie die App, die Sie bauen möchten. Falls Sie noch keine konkrete Designrichtung haben, öffnen Sie Design Mode, und Verdent hilft Ihnen, eine visuelle Richtung zu wählen, bevor die Umsetzung beginnt.

Sie können das Briefing einfach halten, sollten es aber spezifisch genug gestalten, um Designentscheidungen zu leiten:

* was das Produkt ist
* wer es nutzen wird
* die Hauptaufgabe, bei der es helfen soll
* die Seiten, Bildschirme oder Zustände, die Sie bereits kennen

## Beispiel-Briefings [#beispiel-briefings]

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

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

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

* Sagen 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 vorhanden.
* Teilen Sie Referenzen oder Einschränkungen frühzeitig mit, sofern sie relevant sind.
* Sagen Sie, was vermieden werden soll, falls Sie bereits wissen, was sich falsch anfühlen würde.
* Bei komplexen Produkten sollten Sie damit rechnen, die Seitenliste und die Produktspezifikation zu bestätigen, bevor die vollständige Umsetzung fortgesetzt wird.