> ## Documentation Index > Fetch the complete documentation index at: https://docs.base44.com/llms.txt > Use this file to discover all available pages before exploring further. # Design-Grundlagen und Layout > Halte deine Base44-App konsistent und gut strukturiert: Designsysteme, Bilder und visuelle Assets, responsives Layout, Seitentypen, erweiterte Anpassung und Barrierefreiheit. Sobald du weißt, wie du [das Design deiner App anpasst](/Building-your-app/Design), helfen dir diese Grundlagen, sie konsistent, gut strukturiert und barrierefrei zu halten, während sie wächst. Diese Seite behandelt den Aufbau eines konsistenten Designs, die Arbeit mit Bildern und visuellen Assets, responsives Layout und Seitentypen, erweiterte Anpassung und Barrierefreiheit. *** ## Dein Design konsistent halten Diese Abschnitte zeigen, wie du mit dem KI-Chat konsistente, App-weite Design-Muster etablierst. So wirken Farben, Typografie, Abstände und Komponenten in deiner gesamten App stimmig. ### Farbsystem Farbe ist eines deiner stärksten Werkzeuge, um Stimmung zu setzen und Aufmerksamkeit zu lenken. Definiere zuerst Rollen statt zufälliger Hex-Codes. Strebe an: * 1 primäre Markenfarbe * 1 Sekundärfarbe * 1 Akzentfarbe für Hervorhebungen * 3 bis 5 neutrale Grautöne für Hintergründe, Flächen und Rahmen * Klare Farben für Erfolgs-, Warn- und Fehlerzustände Du kannst die KI bitten, ein komplettes System von Grund auf vorzuschlagen und anzuwenden: ```text theme={null} Erstelle ein Farbsystem für diese App: - 1 primäre Markenfarbe - 1 Sekundärfarbe - 1 Akzentfarbe für Hervorhebungen - 4 neutrale Grautöne für Hintergründe, Flächen und Rahmen Ordne Farben Rollen zu, etwa primary, surface, border, success, warning, error. Stelle sicher, dass Text auf Hintergründen die Kontrastanforderungen für Barrierefreiheit erfüllt. Wende dieses System in der gesamten App an und ersetze einzelne Ausreißer-Farben. ``` Halte die Bedeutung von Farben konsistent. Verwende zum Beispiel deine Erfolgsfarbe nur für positive Zustände und deine Fehlerfarbe nur für Probleme, nicht zur Dekoration. Wenn du bereits Hex-Codes aus einem Brand-Guide oder einem externen Tool hast, füge sie ein und lass die KI sie Rollen zuordnen: ```text theme={null} Verwende diese Palette und weise jedem Hex-Code eine Rolle zu: - #1D4ED8 - #6366F1 - #10B981 - #F3F4F6 - #111827 Lege fest, welche primäre, sekundäre, Akzent- und neutrale Rollen sind. Ersetze fest codierte Farben durch Tokens oder Tailwind-Klassen, die diesen Rollen folgen. ``` Du kannst einen Screenshot oder ein Bild deiner Farbpalette direkt in den KI-Chat hochladen und die KI bitten, die Farben auf deine App anzuwenden: ```text theme={null} Wende die Farben aus diesem Bild auf meine App an. Ordne jede Farbe einer Rolle zu, etwa primary, background, foreground und accent. Ersetze bestehende Farben in der gesamten App entsprechend. ``` Die Farbpalette einer Base44-App ändern *** ### Typografie-System Typografie bestimmt, wie lesbar und überschaubar sich deine App anfühlt. Wenige klare Textstile sind besser als viele ähnliche. Definiere Rollen wie: * Seitentitel * Abschnittsüberschrift * Fließtext * Kleine Metadaten wie Labels und Zeitstempel Du kannst die KI bitten, das einzurichten und überall anzuwenden: ```text theme={null} Richte ein Typografie-System ein: - Seitentitel: größte Schriftgröße, fett, moderne Sans-Serif - Abschnittsüberschriften: mittlere Größe, halbfett - Fließtext: Standardgröße, normale Stärke - Metadaten: klein, Großbuchstaben, mit zusätzlichem Buchstabenabstand Wende diese Rollen konsistent auf allen Seiten an und entferne willkürliche Schriftgrößen. ``` Du kannst Größen auch direkter ansprechen: ```text theme={null} Mache die Typografie lesbarer: - Erhöhe die Basisgröße des Fließtexts leicht - Erhöhe die Zeilenhöhe für Absätze - Stelle sicher, dass Überschriften mindestens 1,4-mal so groß sind wie der Fließtext Behalte die Schriftfamilien bei. ``` Du kannst eigene Schriftarten verwenden und sie über dein Layout einbinden. 1. Hole dir das Embed-Snippet (zum Beispiel von Google Fonts unter [https://fonts.google.com](https://fonts.google.com)). 2. Bitte die KI, es zu `Layout.js` hinzuzufügen und in dein Typografie-System einzubinden. Beispiel-Prompt: ```text theme={null} Importiere die Schriftart "Raleway" von Google Fonts. Verwende sie für Seitentitel und Abschnittsüberschriften. Behalte die aktuelle Fließtext-Schrift für Absätze bei. Aktualisiere die Stile in der gesamten App gemäß dieser Regel. ``` Eine eigene Schriftart in der Base44-Layout-Datei verwenden Beschränke dich auf ein oder zwei Schriftfamilien. Zu viele Schriften lassen die Oberfläche unstrukturiert wirken und erschweren die Pflege. *** ### Abstände und Dichte Abstände und Dichte bestimmen, wie angenehm sich deine App bedienen lässt. Eine einfache Abstandsskala verhindert zufällige Lücken und gedrängte Abschnitte. Du kannst eine Skala wie 4, 8, 12, 16, 24 definieren und die KI bitten, sie anzuwenden: ```text theme={null} Vereinheitliche die Abstände mit dieser Skala: 4, 8, 12, 16, 24. - Verwende größere Werte zwischen Hauptabschnitten - Verwende mittlere Werte innerhalb von Karten und Panels - Verwende kleine Werte zwischen Labels und Eingabefeldern Entzerre Bereiche, die gedrängt wirken, und vermeide willkürliche Abstandswerte. ``` Wenn eine Seite überfüllt oder zu leer wirkt, lass den KI-Chat das Problem erkennen und beheben: ```text theme={null} Sieh dir diese Seite an und passe die Abstände an: - Füge mehr Innenabstand oben und unten um jeden Abschnitt hinzu - Vergrößere den Abstand zwischen Kartenreihen - Stelle sicher, dass lange Absätze eine angenehme Zeilenlänge haben Behalte die bestehenden Farben und Inhalte bei. ``` *** ### Kernelemente und Zustände Sobald Farbe, Typografie und Abstände stehen, standardisiere die Bausteine, die du überall verwendest. Konzentriere dich auf: * Buttons (primär, sekundär und nur Text) * Karten und Panels * Navigationsleisten und Seitenleisten * Formularfelder (Standard, Fokus, Fehler, deaktiviert) * Chips, Tags und Badges, falls du sie verwendest Du kannst die KI bitten, Muster zu erkennen und zu vereinheitlichen: ```text theme={null} Standardisiere die Kernelemente: - Buttons: definiere primäre, sekundäre und Nur-Text-Stile - Karten: definiere Eckenradius, Innenabstand, Schatten und Header/Body-Layout - Navigation: definiere aktive, Hover- und deaktivierte Zustände - Formularfelder: definiere Standard-, Fokus-, Fehler- und deaktivierte Zustände Wende diese Muster in der gesamten App an und ersetze abweichende Stile. ``` So erhältst du eine wiederverwendbare Sprache, damit neue Seiten wie Teil desselben Produkts aussehen. *** ## Bilder und visuelle Assets Visuelle Assets wie Bilder, Icons und Videos prägen, wie sich deine App anfühlt. Die KI hilft dir, sie zu erstellen, zu platzieren, zu stylen und mit deinen Daten und deinem Code zu verbinden. Lade Bilder oder Videos in den KI-Chat hoch, um ihm visuellen Kontext zu Stil, Layout oder Inhalt deiner App zu geben. Du kannst den KI-Chat bitten, Hero-Bilder direkt zu deinen Seiten hinzuzufügen: ```text theme={null} Füge der Startseite ein Hero-Bild in voller Breite hinzu, das zur aktuellen Farbpalette passt. Verwende ein Platzhalterbild, das an ein modernes Analytics-Dashboard erinnert. ``` Beispiel für ein Hero-Bild in einer Base44-App So ersetzt du ein Platzhalterbild: 1. Öffne die entsprechende Seitendatei wie `Store.js` in der Code-Ansicht. 2. Finde das ``-Tag. 3. Aktualisiere das `src`-Attribut mit deiner eigenen Bild-URL. Du kannst auch Bilder für Entitäten im Bereich **Data** hochladen und sie an Komponenten binden, damit Karten und Listen automatisch die richtigen Bilder anzeigen. Entitätsbilder im Data-Bereich von Base44 verwalten Bitte den KI-Chat, kurze Videos für visuelle Bereiche zu generieren, etwa Hero-Bereiche, Produktvorschauen, Tutorials oder Onboarding-Screens. Beispiel-Prompt: ```text theme={null} Erstelle ein kurzes Onboarding-Video für meine Fitness-App, das eine einfache Morgen-Workout-Routine zeigt. Füge es auf dem Willkommensbildschirm über dem Get-Started-Button ein. ``` Videos im KI-Chat zu generieren erfordert einen [Starter-Plan](/Account-and-billing/Billing-and-plans) oder höher. Jedes generierte Video verbraucht die Nachrichten-Credits des Prompts plus 1 zusätzlichen Nachrichten-Credit. Du kannst auch Nutzer in deiner Live-App Videos generieren lassen. Erfahre mehr über das [Generieren von Videos](/Integrations/built-in-integrations#generating-videos). Referenzbilder helfen dir, das Design visuell zu steuern, indem du dem KI-Chat einen Stil, ein Layout, eine Farbpalette oder eine visuelle Richtung zeigst. Ein Referenzbild als Design-Inspiration hochladen 1. Klicke auf das **Upload icon (+)** im KI-Chat. 2. Lade ein Inspirationsbild oder einen Screenshot hoch. 3. Sage der KI genau, was du übernehmen und was du ignorieren möchtest. Prompt-Ideen: ```text theme={null} Verwende diese Referenz als Inspiration. Behalte mein Layout und meinen Inhalt bei, aber: - Übernimm die Button-Formen und Schatten - Übernimm den Eckenradius und Rahmenstil der Karten - Wende einen ähnlichen weichen Verlauf nur auf den oberen Header an Kopiere nicht die exakten Farben, nur Struktur und Anmutung. ``` ```text theme={null} Extrahiere aus diesem Screenshot Design-Regeln für: - Farbrollen - Schriftgrößen und -stärken - Eckenradius und Schatten - Abstände zwischen Abschnitten und Karten Erkläre die Regeln und wende dann einen ähnlichen Stil mit meinen aktuellen Markenfarben an. ``` Du kannst visuelle Stile direkt aus einem Design-Tool wie Figma kopieren und Base44 bitten, sie anzuwenden, statt jedes Detail in Worten zu beschreiben. **So kopierst du aus Figma:** 1. Wähle in Figma das Element aus, dessen Stil du kopieren möchtest. 2. Wechsle in den **Dev mode** und öffne das **Code**-Panel. 3. Kopiere die relevante CSS-Zeile, zum Beispiel einen Verlaufshintergrund: `background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);` 4. Klicke in Base44 auf das passende Element in deiner Vorschau, um den **Edit mode** zu öffnen. 5. Füge den Stil in einen KI-Prompt ein und sage Base44 genau, was geändert werden soll, zum Beispiel: ```text theme={null} Ändere den Hintergrundstil dieses Elements zu: background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%); Behalte alle anderen Stile bei. ``` So kannst du Verläufe, Schatten, Rahmen und andere Stile aus deiner Design-Datei sehr präzise übernehmen. Icons sollen Bedeutung unterstützen, nicht nur dekorieren. Konsistenz ist entscheidend. Häufige Aufgaben: * Generische Icons durch aussagekräftigere ersetzen. * Icon-Größen und Strichstärken angleichen. * Icons mit Textlabels kombinieren, wo Klarheit wichtig ist. Du kannst Icon-Bibliotheken wie Lucide verwenden und den KI-Chat bitten, sie einzubinden: ```text theme={null} Ersetze generische Icons durch aussagekräftigere: - Verwende Icons, die klar zu jedem Navigationspunkt und jeder Hauptaktion passen - Halte Icon-Größe und Strichstärke konsistent - Richte Icons sauber an Labels in Navigation, Listen und Buttons aus ``` ```text theme={null} Aktualisiere alle primären Call-to-Action-Buttons: - Verwende das "sparkles"-Icon links vom Label - Halte die Icon-Größe klein und den Innenabstand gleichmäßig - Füge sekundären oder destruktiven Buttons keine Icons hinzu ``` *** ## Layout und Responsivität Das Layout bestimmt, wie Informationen gruppiert und erfasst werden. Responsivität stellt sicher, dass das Layout auf jedem Gerät funktioniert. Denke in Seitentypen statt in einzelnen Bildschirmen: * Landing- und Marketing-Seiten * Dashboards * Listen und Tabellen * Detailseiten * Formulare und Assistenten * Einstellungs- und Profilseiten Du kannst den KI-Chat bitten, Muster zu erkennen und zu standardisieren: ```text theme={null} Identifiziere die Hauptseitentypen in dieser App (Landing, Dashboard, Liste, Detail, Formular, Einstellungen). Für jeden Typ: - Schlage eine konsistente Layout-Struktur vor - Schlage vor, welche bestehenden Komponenten wiederverwendet werden können Wende diese Layouts auf alle Seiten desselben Typs an, ohne den Inhalt zu ändern. ``` Hierarchie und Weißraum helfen, auf einen Blick zu erkennen, was wichtig ist. Ideen, die du die KI anwenden lassen kannst: ```text theme={null} Verbessere visuelle Hierarchie und Weißraum auf dieser Seite: - Lass den Seitentitel klar über anderem Text herausstechen - Verwende konsistente Abschnittsüberschriften, um Inhalte zu gruppieren - Füge mehr Innenabstand oben und unten um jeden Abschnitt hinzu - Vergrößere den Abstand zwischen Kartenreihen Vermeide neue Farben oder Schriftarten. ``` Weißraum ist besonders wichtig für dichte Inhalte wie Dashboards und Tabellen. Gib den zentralen Elementen Raum zum Atmen. Deine App soll sich auf Smartphones, Tablets und Desktops natürlich anfühlen. Du kannst responsive Regeln in einem einzigen Prompt festlegen: ```text theme={null} Mache dieses Layout responsiv: - Verwende auf Smartphones eine einzelne vertikale Spalte und stapele Abschnitte - Verwende auf Tablets zwei Spalten für Karten, wo der Platz es erlaubt - Verwende auf Desktops drei oder vier Spalten für Karten Behalte für Bilder ein Seitenverhältnis von 4:3 bei. Klapp die Seitenleiste auf kleineren Bildschirmen zu einem oberen Menü zusammen. Vermeide horizontales Scrollen bei allen Breakpoints. ``` Verwende die Gerätevorschau im Base44-Editor, um zu prüfen, wie sich diese Regeln auf verschiedenen Bildschirmgrößen verhalten, und verfeinere sie mit Folge-Prompts. ### Deine App für Mobilgeräte anpassen Deine Base44-App passt ihr Layout automatisch an jedes Gerät an. Mit der mobilen Vorschau und den Anpassungswerkzeugen des Editors kannst du aber feinjustieren, wie deine App auf Mobilgeräten aussieht und funktioniert. So schaffst du ein angenehmes, nahtloses Erlebnis für mobile Nutzer. Die mobile Version deiner App im Base44-App-Editor ansehen **So passt du deine App für Mobilgeräte an:** 1. Gehe zu deinem App-Editor. 2. Klicke oben auf das **Screen**-Symbol und wähle **Mobile**. 3. Überprüfe Layout, Navigation und Inhalte. 4. Nimm bei Bedarf Änderungen vor, indem du: * Den KI-Chat bittest, Änderungen für Mobilgeräte vorzunehmen. * Den **Edit**-Modus im KI-Chat verwendest, um Design oder Layout einzelner Elemente zu ändern. **Tipps, damit deine App auf Mobilgeräten gut aussieht:** * Stelle sicher, dass der Text lesbar ist * Passe die Größe von Elementen an den mobilen Bildschirm an * Blende Elemente nach Bedarf ein oder aus * Sorge dafür, dass Buttons und Icon-Buttons leicht antippbar sind * Prüfe, ob Bilder gut aussehen *** ## Seitentypen Verschiedene Seitentypen brauchen unterschiedliche Design-Entscheidungen. Du kannst diese Muster als Ausgangspunkte verwenden und sie mit der KI anpassen. Konzentriere dich auf ein klares Versprechen, einen Haupt-Call-to-Action und eine starke visuelle Hierarchie. Design-Tipps: * Verwende einen einfachen Header mit minimaler Navigation. * Halte den Hero-Bereich klar und fokussiert, mit einer kurzen Headline und einem primären Button. * Verwende ergänzende Abschnitte für Vorteile, Funktionen und Social Proof. * Halte Formulare kurz und nach Möglichkeit im sofort sichtbaren Bereich. Beispiel-Prompt: ```text theme={null} Gestalte die Startseite als fokussierte Landing Page: - Klarer Hero-Bereich mit kurzer Headline, einem ergänzenden Satz und einem primären Call-to-Action - Danach drei zentrale Vorteile in Karten - Füge einen einfachen Social-Proof-Bereich mit Logos hinzu - Halte die Navigation minimal Verwende mein bestehendes Farb- und Typografie-System. ``` Dashboards sollen die Frage "Wie stehe ich da?" auf einen Blick beantworten. Design-Tipps: * Platziere die wichtigste Kennzahl oder den wichtigsten Status oben links. * Gruppiere verwandte Kennzahlen in Karten mit klaren Titeln und kurzen Beschreibungen. * Vermeide zu viele Diagrammtypen auf einem Bildschirm, verwende wenige Standardtypen wieder. * Halte Filter und Zeiträume klar sichtbar und konsistent. Beispiel-Prompt: ```text theme={null} Strukturiere dieses Dashboard neu: - Platziere den Haupt-KPI oben links in einer prominenten Karte - Gruppiere verwandte Kennzahlen in einem 2x2-Raster aus Karten - Verschiebe Filter und Datumsauswahl in eine aufgeräumte obere Leiste - Reduziere visuelles Rauschen in Diagrammen durch konsistente Farben und Stile ``` Listen und Tabellen lassen Nutzer viele Einträge überfliegen und bearbeiten. Design-Tipps: * Verwende klare Spaltenüberschriften mit ausreichend Abstand. * Halte die Zeilenhöhe angenehm, nicht zu eng. * Verwende Zebrastreifen oder dezente Zeilentrenner für große Tabellen. * Platziere Aktionen entweder am Zeilenende oder in einem konsistenten Menü. * Füge Leer-, Lade- und Fehlerzustände hinzu. Beispiel-Prompt: ```text theme={null} Räume diese Tabellenansicht auf: - Erhöhe die Zeilenhöhe leicht - Verwende dezente Zeilentrenner oder Zebrastreifen - Richte Aktionen in einer konsistenten Spalte am Ende aus - Füge einen klaren Leerzustand mit kurzer Nachricht und primärer Aktion hinzu ``` Detailseiten sollen das Hauptobjekt und seine wichtigsten Aktionen offensichtlich machen. Design-Tipps: * Platziere den Objekttitel und primäre Aktionen im oberen Bereich. * Verwende ein klares Layout mit einer Hauptinhaltsspalte und optionalem Seitenpanel. * Gruppiere zusammengehörige Informationen mit Überschriften oder Tabs. * Halte destruktive Aktionen visuell abgesetzt und platziere sie mit Bedacht. Beispiel-Prompt: ```text theme={null} Verbessere diese Detailseite: - Verschiebe den Haupttitel und die primären Aktionen an den Seitenanfang - Verwende ein zweispaltiges Layout mit Hauptinhalt links und sekundären Infos rechts - Gruppiere zusammengehörige Felder unter kleinen Überschriften - Kennzeichne destruktive Aktionen klar und setze sie visuell ab ``` In Formularen passieren viele zentrale Abläufe. Sie sollen sich einfach und fehlertolerant anfühlen. Design-Tipps: * Gruppiere zusammengehörige Felder unter Überschriften. * Verwende für die meisten Formulare ein einspaltiges Layout. * Zeige den Fortschritt bei langen, mehrstufigen Abläufen. * Platziere Fehlermeldungen nahe an den Feldern und formuliere sie klar. * Verwende klare Labels und Hilfetexte. Beispiel-Prompt: ```text theme={null} Gestalte dieses Formular übersichtlicher: - Verwende ein einspaltiges Layout - Gruppiere zusammengehörige Felder unter kurzen Überschriften - Füge klare Labels und Hilfetexte hinzu, wo nötig - Zeige Inline-Fehlermeldungen unter jedem Feld, wenn die Validierung fehlschlägt Verwende mein bestehendes Typografie- und Abstandssystem. ``` *** ## Erweiterte Anpassung Wenn du über das hinausgehen möchtest, was KI und der **Edit**-Modus dir standardmäßig bieten, kannst du eigenen Code und npm-Pakete einbringen. Die KI hilft dir weiterhin, alles zu verbinden und abzustimmen. Du kannst [npm-Pakete](/Building-your-app/NPM-packages) verwenden, um mehr Bewegung, visuelle Effekte und interaktive Komponenten in deine Base44-App zu bringen, ohne alles selbst zu bauen. Die Pakete stammen aus der öffentlichen npm-Registry und werden über den KI-Chat in deinem App-Editor installiert. So bleibst du im selben Workflow. **Design-orientierte Beispiele sind:** * Animationsbibliotheken (zum Beispiel anime.js) für Übergänge, Hover-Effekte und Mikrointeraktionen. * UI-Komponenten- oder Motion-Bibliotheken für Modals, Tooltips, Karussells oder Schrittabläufe mit eingebauten Interaktionsmustern. * Diagramm- und Graph-Werkzeuge, um Daten mit eigenen Farben, Typografie und Abständen passend zu deiner App zu visualisieren. * Drag-and-Drop- oder Gestenbibliotheken, damit sich Layouts greifbarer und interaktiver anfühlen. * Datums- und Zeit-Helfer, um Zeitstempel und Zeitpläne passend zu deiner UI zu formatieren. **Nach der Installation eines Pakets kannst du den KI-Chat nutzen, um:** * Die richtigen Funktionen oder Komponenten aus dem Paket zu importieren. * Sie in dein bestehendes Layout und deine Design-Tokens einzubinden (Farben, Typografie, Abstände, Radius). * Props, Varianten und Bewegung so anzupassen, dass sie zum Rest der App passen. * Barrierefreiheits-Details zu prüfen, etwa Fokuszustände, Tastaturnavigation und Präferenzen für reduzierte Bewegung. **Beispiel-Prompt** ```text theme={null} Ich habe das npm-Paket framer-motion hinzugefügt. Überarbeite das bestehende Kartenraster, sodass jede Karte beim Hover mit framer-motion animiert wird: - Behalte das aktuelle Layout und die Texte bei - Verwende die bestehenden Farb-Tokens, den Eckenradius und die Typografie - Beachte prefers-reduced-motion und halte die Fokus-Umrandungen für die Tastatur sichtbar ``` Alle npm-Pakete sind Code von Drittanbietern. Base44 kann ihre Qualität oder Sicherheit nicht garantieren. Lies daher die README des Pakets, teste es in deiner App und prüfe, ob es die Design- und Performance-Anforderungen deines Projekts erfüllt. Base44-Apps verwenden oft Tailwind-CSS-Utilities. Die KI hilft dir, unordentliche Stile systematischer zu gestalten. Aufgaben, die du der KI geben kannst: * Inline-Stile durch Tailwind-Utilities ersetzen. * Wiederkehrende Muster in wiederverwendbare Komponenten auslagern. * Farbwerte auf Design-Tokens und die Tailwind-Konfiguration abbilden. Beispiel: ```text theme={null} Refaktoriere diese Komponenten für konsistente Tailwind-Klassen: - Ersetze Inline-Style-Attribute durch Tailwind-Utilities - Verwende die Design-Tokens für Farben, Abstände und Typografie - Dokumentiere die wichtigsten Klassenkombinationen für Navigation, Karten und Buttons ``` Manchmal möchtest du präzise Kontrolle über Layout, Animation oder Komponentenstruktur. Du kannst [Code-Dateien öffnen](/documentation/building-your-app/editing-code) und sie entweder selbst bearbeiten oder die KI darum bitten. Häufige designbezogene Änderungen: * `Layout.js` aktualisieren, um globale Wrapper, Header oder Footer zu ändern. * Theme-Provider oder Kontext anpassen. * Ändern, wie Komponenten zusammengesetzt sind und welche Props sie akzeptieren. So bearbeitest du den Code: 1. Öffne die entsprechende Datei. 2. Füge ein Code-Snippet in den KI-Chat ein. 3. Bitte um eine Änderung und prüfe dann den Diff oder die Vorschau. Beispiel: ```text theme={null} Hier ist meine Layout.js-Komponente. Passe sie so an: - Der Header bleibt beim Scrollen fixiert - Der Hauptinhalt hat eine maximale Breite und ist auf großen Bildschirmen zentriert - Die Hintergrundfarbe verwendet das Surface-Token aus meinem Designsystem Erkläre deine Änderungen in Kommentaren. ``` Design-Entscheidungen wirken sich auf die [Performance](/Performance-and-SEO/App-performance) aus, besonders wenn du Pakete und aufwendige Visuals einführst. Beachte: * Verwende optimierte Bildgrößen statt riesiger Hintergrund-Assets. * Vermeide es, viele schwere Animationen oder große Bibliotheken beim ersten Laden zu laden. * Lade selten genutzte Bereiche wie tiefe Reports oder erweiterte Filter verzögert. * Verwende gemeinsame Komponenten wieder statt vieler fast identischer Kopien. Du kannst die KI um einen performancebezogenen Review bitten: ```text theme={null} Überprüfe das Design dieser App aus Performance-Sicht: - Identifiziere schwere visuelle oder codebezogene Elemente, die das Laden verlangsamen könnten - Schlage leichtere Alternativen vor, die den Gesamteindruck erhalten - Schlage konkrete Stellen vor, an denen Lazy Loading oder Code-Splitting helfen würde ``` *** ## Barrierefreiheit Barrierefreiheit gehört zu gutem Design. Sie hilft mehr Menschen, deine App bequem zu nutzen, und kann die Klarheit für alle verbessern. Farbentscheidungen wirken sich direkt auf die Lesbarkeit aus. Bewährte Praktiken: * Verwende starken Kontrast zwischen Text und Hintergrund. * Vermeide es, Bedeutung nur über Farbe zu vermitteln. * Halte interaktive Elemente wie Buttons und Links in allen Zuständen gut sichtbar. * Prüfe sowohl den hellen als auch den dunklen Modus, wenn du Themes unterstützt. Beispiel-Prompt: ```text theme={null} Prüfe diese App auf Farbkontrast: - Identifiziere Text oder Icons mit geringem Kontrast zum Hintergrund - Verstärke den Kontrast, ohne die allgemeine Palette zu verändern - Stelle sicher, dass primäre Buttons und Links klar erkennbar sind Beschreibe die wichtigsten Korrekturen, die du angewendet hast. ``` Lesbarer Text ist mehr als die Wahl der Schriftart. Bewährte Praktiken: * Verwende angenehme Schriftgrößen auf allen Geräten. * Verwende ausreichend Zeilenhöhe für Absätze. * Vermeide sehr dünne Schriftschnitte auf hellen Hintergründen. * Halte die Zeilenlänge moderat, besonders auf breiten Bildschirmen. Beispiel-Prompt: ```text theme={null} Verbessere die Lesbarkeit des Texts: - Erhöhe die Basis-Schriftgröße des Fließtexts leicht - Erhöhe die Zeilenhöhe für Absätze - Stelle sicher, dass Überschriften deutlich größer sind als der Fließtext - Reduziere sehr lange Zeilen auf breiten Bildschirmen ``` Nutzer sollen deine App mit der Tastatur bedienen und sehen können, wo sie sich befinden. Bewährte Praktiken: * Stelle sicher, dass Tab in einer logischen Reihenfolge durch interaktive Elemente führt. * Sorge für sichtbare und klar abgesetzte Fokus-Stile. * Vermeide Tastaturfallen, aus denen sich der Fokus nicht wegbewegen kann. Beispiel-Prompt: ```text theme={null} Verbessere Tastatur- und Fokus-Barrierefreiheit: - Stelle sicher, dass alle interaktiven Elemente per Tab erreichbar sind - Füge sichtbare Fokus-Stile für Buttons, Links und Formularfelder hinzu - Behebe Probleme mit der Fokus-Reihenfolge auf dieser Seite Beschreibe alle größeren Änderungen, die du vorgenommen hast. ``` Bewegung kann helfen oder stören. Manche Menschen bevorzugen weniger davon. Bewährte Praktiken: * Beachte Präferenzen für reduzierte Bewegung. * Vermeide schnelles Blitzen oder starkes Flackern. * Verwende dezente, gezielte Animationen statt ständiger Bewegung. Beispiel-Prompt: ```text theme={null} Passe Animationen für Barrierefreiheit an: - Beachte die Präferenz des Nutzers für reduzierte Bewegung - Entferne oder vereinfache große dauerhafte Animationen - Behalte nur kurze, dezente Bewegung, die das Verständnis unterstützt ``` Klare Sprache und Beschreibungen helfen allen, auch Menschen mit assistiven Technologien. Bewährte Praktiken: * Verwende klare, beschreibende Labels für Buttons und Links. * Gib wichtigen Bildern aussagekräftige Alt-Texte. * Verwende Überschriften, um Inhalte zu strukturieren. * Vermeide vage Linktexte wie "hier klicken". Beispiel-Prompt: ```text theme={null} Verbessere die Barrierefreiheit von Labels und Alt-Texten: - Mache Button- und Link-Labels aussagekräftiger, wo nötig - Füge Alt-Texte für wichtige Bilder hinzu oder verbessere sie - Stelle sicher, dass Überschriften einer klaren Struktur folgen Behalte Ton und Markensprache bei. ``` *** ## FAQs Klicke auf eine Frage unten, um mehr über Design-Grundlagen und Layout zu erfahren. Gestalte für Mobilgeräte, Tablets und Desktops separat und prüfe dann, wie sich deine Layouts anpassen. Verwende diese Richtlinien, wenn du in Base44 designst: * Mobil: Verwende eine einzelne vertikale Spalte, halte eine klare primäre Aktion pro Bildschirm und mache Tippflächen groß mit ausreichend Abstand. Halte Texte kurz, damit niemand zoomen muss. * Tablet: Behandle das Tablet als Hybrid. Du kannst Seitenmenüs oder geteilte Layouts verwenden, aber halte Buttons touchfreundlich und vermeide sehr kleine Tabellen oder dichte Bedienelemente. * Desktop: Nutze die zusätzliche Breite für mehrspaltige Layouts und Seitenleisten. Du kannst Hover-Effekte hinzufügen, aber jede wichtige Aktion muss auch per Klick oder Tipp funktionieren. * Alle Geräte: Verwende lesbare Schriftgrößen, vermeide horizontales Scrollen und lass Elemente stapeln statt überlappen, wenn der Platz knapp wird. Vermeide feste Höhen, die Inhalte abschneiden. Du kannst die KI auch bitten, responsive Regeln anzuwenden, zum Beispiel: ```text theme={null} Mache dieses Layout responsiv für Mobilgeräte, Tablets und Desktops. Vermeide horizontales Scrollen und halte primäre Aktionen ohne übermäßiges Scrollen sichtbar. ``` Design-Entscheidungen wirken sich direkt darauf aus, wie schnell sich deine App lädt und anfühlt. Beachte beim Designen in Base44 diese Richtlinien: * Verwende optimierte Bildgrößen, damit große Assets das erste Laden nicht verlangsamen. Bevorzuge komprimierte Formate und vermeide Bilder, die viel größer sind als ihre Darstellung auf dem Bildschirm. * Begrenze schwere Animationen und komplexe Effekte, besonders in stark mobil genutzten Apps. Kurze, einfache Übergänge sind in Ordnung, aber vermeide ständige Bewegung oder große animierte Hintergründe. * Halte Layouts aufgeräumt und fokussiert. Weniger Ebenen, Overlays und verschachtelte Komponenten bedeuten meist schnelleres Rendering, besonders auf schwächeren Geräten. * Verwende Komponenten wieder, statt viele leicht abweichende Versionen zu erstellen. Gemeinsame Komponenten lassen sich leichter cachen und pflegen. * Vermeide es, alles auf einmal zu laden. Lade nicht kritische Inhalte nach Möglichkeit später, zum Beispiel sekundäre Abschnitte, lange Listen oder selten genutzte Panels. * Sei vorsichtig mit Einbettungen von Drittanbietern wie Karten, Videoplayern und Widgets. Binde sie nur ein, wo sie echten Mehrwert bieten, und vermeide viele Einbettungen auf einem einzigen Bildschirm. Diese Seite wurde mit KI übersetzt. Die genauesten und aktuellsten Informationen findest du in der [englischen Version](/).