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, 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.
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.
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
Ich möchte, dass die KI ein Farbsystem für mich erstellt
Du kannst die KI bitten, ein komplettes System von Grund auf vorzuschlagen und anzuwenden:
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 RahmenOrdne 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.
Ich habe Hex-Codes, die ich verwenden möchte
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:
Verwende diese Palette und weise jedem Hex-Code eine Rolle zu:- #1D4ED8- #6366F1- #10B981- #F3F4F6- #111827Lege fest, welche primäre, sekundäre, Akzent- und neutrale Rollen sind.Ersetze fest codierte Farben durch Tokens oder Tailwind-Klassen, die diesen Rollen folgen.
Ich habe ein Bild einer Farbpalette, das ich verwenden möchte
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:
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.
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:
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 BuchstabenabstandWende diese Rollen konsistent auf allen Seiten an und entferne willkürliche Schriftgrößen.
Du kannst Größen auch direkter ansprechen:
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ßtextBehalte die Schriftfamilien bei.
Eigene Schriftarten hinzufügen (zum Beispiel Google Fonts)
Du kannst eigene Schriftarten verwenden und sie über dein Layout einbinden.
Bitte die KI, es zu Layout.js hinzuzufügen und in dein Typografie-System einzubinden.
Beispiel-Prompt:
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.
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 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:
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 EingabefeldernEntzerre 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:
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 habenBehalte die bestehenden Farben und Inhalte bei.
Du kannst die KI bitten, Muster zu erkennen und zu vereinheitlichen:
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ändeWende 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.
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.
Hero-Bilder und visuelle Assets
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:
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.
So ersetzt du ein Platzhalterbild:
Öffne die entsprechende Seitendatei wie Store.js in der Code-Ansicht.
Finde das <img>-Tag.
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.
Videos mit KI generieren
Bitte den KI-Chat, kurze Videos für visuelle Bereiche zu generieren, etwa Hero-Bereiche, Produktvorschauen, Tutorials oder Onboarding-Screens.Beispiel-Prompt:
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 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.
Referenzbilder
Referenzbilder helfen dir, das Design visuell zu steuern, indem du dem KI-Chat einen Stil, ein Layout, eine Farbpalette oder eine visuelle Richtung zeigst.
Klicke auf das Upload icon (+) im KI-Chat.
Lade ein Inspirationsbild oder einen Screenshot hoch.
Sage der KI genau, was du übernehmen und was du ignorieren möchtest.
Prompt-Ideen:
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 anKopiere nicht die exakten Farben, nur Struktur und Anmutung.
Extrahiere aus diesem Screenshot Design-Regeln für:- Farbrollen- Schriftgrößen und -stärken- Eckenradius und Schatten- Abstände zwischen Abschnitten und KartenErkläre die Regeln und wende dann einen ähnlichen Stil mit meinen aktuellen Markenfarben an.
Stile aus Design-Tools kopieren (zum Beispiel Figma)
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:
Wähle in Figma das Element aus, dessen Stil du kopieren möchtest.
Wechsle in den Dev mode und öffne das Code-Panel.
Kopiere die relevante CSS-Zeile, zum Beispiel einen Verlaufshintergrund: background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);
Klicke in Base44 auf das passende Element in deiner Vorschau, um den Edit mode zu öffnen.
Füge den Stil in einen KI-Prompt ein und sage Base44 genau, was geändert werden soll, zum Beispiel:
Ä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 und Illustration
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:
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
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
Das Layout bestimmt, wie Informationen gruppiert und erfasst werden. Responsivität stellt sicher, dass das Layout auf jedem Gerät funktioniert.
Seitentypen und Vorlagen
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:
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önnenWende diese Layouts auf alle Seiten desselben Typs an, ohne den Inhalt zu ändern.
Hierarchie und Weißraum
Hierarchie und Weißraum helfen, auf einen Blick zu erkennen, was wichtig ist.Ideen, die du die KI anwenden lassen kannst:
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 KartenreihenVermeide neue Farben oder Schriftarten.
Weißraum ist besonders wichtig für dichte Inhalte wie Dashboards und Tabellen. Gib den zentralen Elementen Raum zum Atmen.
Responsives Verhalten
Deine App soll sich auf Smartphones, Tablets und Desktops natürlich anfühlen.Du kannst responsive Regeln in einem einzigen Prompt festlegen:
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 KartenBehalte 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 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:
Gehe zu deinem App-Editor.
Klicke oben auf das Screen-Symbol und wähle Mobile.
Überprüfe Layout, Navigation und Inhalte.
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
Verschiedene Seitentypen brauchen unterschiedliche Design-Entscheidungen. Du kannst diese Muster als Ausgangspunkte verwenden und sie mit der KI anpassen.
Landing- und Marketing-Seiten
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:
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 minimalVerwende mein bestehendes Farb- und Typografie-System.
Dashboards
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:
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
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:
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
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:
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
Formulare und Assistenten
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:
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ägtVerwende mein bestehendes Typografie- und Abstandssystem.
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.
npm-Pakete für Design verwenden
Du kannst npm-Pakete 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
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.
Tailwind, Tokens und Stil-Refactoring
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:
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
Code und Design gemeinsam bearbeiten
Manchmal möchtest du präzise Kontrolle über Layout, Animation oder Komponentenstruktur. Du kannst Code-Dateien öffnen 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:
Öffne die entsprechende Datei.
Füge ein Code-Snippet in den KI-Chat ein.
Bitte um eine Änderung und prüfe dann den Diff oder die Vorschau.
Beispiel:
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 DesignsystemErkläre deine Änderungen in Kommentaren.
Performance-bewusstes Design
Design-Entscheidungen wirken sich auf die Performance aus, besonders wenn du Pakete und aufwendige Visuals einführst.Beachte:
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:
Ü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 gehört zu gutem Design. Sie hilft mehr Menschen, deine App bequem zu nutzen, und kann die Klarheit für alle verbessern.
Farbe und Kontrast
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:
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 sindBeschreibe die wichtigsten Korrekturen, die du angewendet hast.
Typografie und Abstände für Lesbarkeit
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:
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
Tastatur, Fokus und Interaktionen
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:
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 SeiteBeschreibe alle größeren Änderungen, die du vorgenommen hast.
Bewegung und reduzierte Bewegung
Bewegung kann helfen oder stören. Manche Menschen bevorzugen weniger davon.Bewährte Praktiken:
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
Inhalte, Labels und Alt-Texte
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:
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 folgenBehalte Ton und Markensprache bei.
Klicke auf eine Frage unten, um mehr über Design-Grundlagen und Layout zu erfahren.
Wie mache ich meine App über Geräte hinweg responsiv?
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:
Mache dieses Layout responsiv für Mobilgeräte, Tablets und Desktops.Vermeide horizontales Scrollen und halte primäre Aktionen ohne übermäßiges Scrollen sichtbar.
Wie gestalte ich meine App für bessere Performance?
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.
Was this page helpful?
Assistant
Responses are generated using AI and may contain mistakes.
