App-Name
Name deiner App mit optionaler KI-Unterstützung
Globale Einstellungen
Die globalen Einstellungen bilden das Fundament deines App-Designs. Alle hier definierten Werte werden als Basis für die gesamte App verwendet.
Übersicht
Abschnitt betitelt „Übersicht“Farbpalette
Alle Farben deiner App für Light und Dark Mode
Typografie
Schriftart und Schriftgrößen für alle Textstufen
Abstände
Einheitliches Spacing-System
Eckenradien
Rundungen für alle Elemente
Branding
Logo und App-Icon
Live-Vorschau
Abschnitt betitelt „Live-Vorschau“Am oberen Rand siehst du eine Live-Vorschau:
- Minimiert: Zeigt die wichtigsten Farben als kompakte Punkte
- Erweitert: Zeigt eine detailliertere Vorschau mit Beispiel-Karte
Tippe auf “Erweitern” oder “Minimieren”, um zwischen den Ansichten zu wechseln.
App-Name
Abschnitt betitelt „App-Name“Der App-Name ist der Titel deiner Anwendung, der an verschiedenen Stellen in der App angezeigt wird - etwa in der AppBar, auf dem Splash Screen oder in den Einstellungen.
Manuell eingeben
Abschnitt betitelt „Manuell eingeben“Tippe auf das Textfeld und gib deinen gewünschten App-Namen ein. Die Änderung wird sofort in der Vorschau angezeigt.
KI-gestützte Namensgenerierung
Abschnitt betitelt „KI-gestützte Namensgenerierung“Du brauchst Inspiration? BLOCQ bietet einen integrierten KI-Assistenten, der dir kreative App-Namen vorschlägt:
- Tippe auf den “KI-Vorschläge”-Button (erkennbar am Sparkles-Icon)
- Beschreibe deine App-Idee in mindestens 20 Zeichen
- Tippe auf “Namen generieren”
- Wähle einen der vorgeschlagenen Namen aus - er wird automatisch übernommen
Tipps für gute Beschreibungen:
- Beschreibe den Zweck deiner App (z.B. “Eine App für Hundebesitzer zum Gassi-Tracking”)
- Nenne die Zielgruppe (z.B. “Für junge Fotografen die ihre Fotos teilen wollen”)
- Erwähne den Stil (z.B. “Modern, minimalistisch, professionell”)
Farbpalette
Abschnitt betitelt „Farbpalette“Die Farbpalette definiert alle Farben deiner App. Du kannst separate Farben für Light Mode und Dark Mode festlegen.
Light/Dark Mode Umschalter
Abschnitt betitelt „Light/Dark Mode Umschalter“Am Anfang der Farbsektion findest du einen Umschalter:
- Light Mode: Bearbeite die Farben für helle Umgebungen
- Dark Mode: Bearbeite die Farben für dunkle Umgebungen
Hauptfarben
Abschnitt betitelt „Hauptfarben“| Farbe | Verwendung |
|---|---|
| Primärfarbe | Hauptakzentfarbe, Buttons, aktive Elemente |
| Sekundärfarbe | Zusätzliche Akzente, sekundäre Buttons |
| Hintergrundfarbe | Haupthintergrund der App |
| Oberflächenfarbe | Karten, Dialoge, erhöhte Elemente |
| Primäre Textfarbe | Überschriften, wichtiger Text |
| Sekundäre Textfarbe | Beschreibungen, weniger wichtiger Text |
Statusfarben
Abschnitt betitelt „Statusfarben“Diese Farben werden für beide Modi (Light/Dark) gemeinsam verwendet:
| Farbe | Verwendung |
|---|---|
| Fehlerfarbe | Fehlermeldungen, ungültige Eingaben |
| Erfolgsfarbe | Erfolgsmeldungen, bestätigte Aktionen |
| Warnfarbe | Warnhinweise, Achtung-Meldungen |
Farbauswahl
Abschnitt betitelt „Farbauswahl“Tippe auf eine Farbe, um den Farbwähler zu öffnen:
- Farbkreis: Wähle den Farbton
- Sättigung/Helligkeit: Feinabstimmung
- Hex-Eingabe: Gib einen exakten Farbcode ein
- Pipette: Übernimm Farben aus vorhandenen Elementen
Typografie
Abschnitt betitelt „Typografie“Die Typografie-Einstellungen bestimmen die Schriftart und Schriftgrößen in deiner gesamten App.
Schriftart
Abschnitt betitelt „Schriftart“Wähle aus über 1.000 Google Fonts:
- Tippe auf das Schriftart-Feld
- Nutze die Suche, um eine Schrift zu finden
- Die Vorschau zeigt jede Schrift in ihrem eigenen Stil
Beliebte Schriftarten:
- Roboto (Standard)
- Open Sans
- Lato
- Montserrat
- Poppins
Textstufen
Abschnitt betitelt „Textstufen“Jede Textstufe hat ihre eigene Größe und kann individuell angepasst werden:
| Stufe | Verwendung | Standardgröße |
|---|---|---|
| Headline 1 | Große Überschriften, Hero-Bereiche | 32-64 px |
| Headline 2 | Abschnittsüberschriften | 24-48 px |
| Headline 3 | Unterabschnittsüberschriften | 18-36 px |
| Body 1 | Haupttext, Paragraphen | 14-24 px |
| Body 2 | Kleinerer Fließtext | 12-20 px |
| Caption | Bildunterschriften, Hinweise | 10-16 px |
Erweiterte Typografie-Einstellungen
Abschnitt betitelt „Erweiterte Typografie-Einstellungen“Für jede Textstufe kannst du erweiterte Einstellungen öffnen:
- Schriftgewicht - Light, Regular, Medium, Bold, etc.
- Buchstabenabstand - Abstände zwischen Buchstaben
- Zeilenhöhe - Abstand zwischen Zeilen
- Eigene Schriftart - Überschreibe die globale Schriftart
Abstände
Abschnitt betitelt „Abstände“Das Spacing-System sorgt für konsistente Abstände in der gesamten App.
Presets
Abschnitt betitelt „Presets“Wähle ein vordefiniertes Spacing-Preset:
| Preset | Stil | Beschreibung |
|---|---|---|
| Compact | Kompakt | Minimale Abstände, viel Inhalt |
| Normal | Standard | Ausgewogene Abstände |
| Comfortable | Großzügig | Viel Weißraum, luftiges Design |
| Custom | Eigene | Definiere alle Werte selbst |
Individuelle Abstände (bei “Custom”)
Abschnitt betitelt „Individuelle Abstände (bei “Custom”)“Wenn du “Custom” wählst, kannst du jeden Abstand einzeln einstellen:
| Abstand | Verwendung | Typische Werte |
|---|---|---|
| Tiny Gaps | Kleinste Abstände (XSmall) | 2-8 px |
| Small Gaps | Kleine Abstände | 4-16 px |
| Normal Gaps | Standard-Abstände (Medium) | 8-24 px |
| Wide Gaps | Große Abstände (Large) | 16-32 px |
| Extra Wide | Sehr große Abstände (XLarge) | 24-48 px |
Jeder Abstand zeigt eine visuelle Vorschau mit typischen Anwendungsfällen.
Eckenradien
Abschnitt betitelt „Eckenradien“Die Eckenradien bestimmen, wie rund die Ecken von Elementen sind.
Presets
Abschnitt betitelt „Presets“Wähle einen vordefinierten Stil:
| Preset | Stil | Beschreibung |
|---|---|---|
| Sharp | Eckig | Keine Rundungen (0 px) |
| Subtle | Dezent | Leichte Rundungen |
| Rounded | Gerundet | Deutliche Rundungen |
| Pill | Pillenform | Maximale Rundungen |
| Custom | Eigene | Definiere alle Werte selbst |
Individuelle Radien (bei “Custom”)
Abschnitt betitelt „Individuelle Radien (bei “Custom”)“| Radius | Verwendung | Typische Werte |
|---|---|---|
| Subtle Corners | Kleine Elemente, Badges | 0-8 px |
| Standard Corners | Buttons, Eingabefelder | 4-16 px |
| Prominent Corners | Karten, Dialoge | 8-24 px |
| Fully Rounded | Chips, Pills, runde Buttons | 999 px |
Branding
Abschnitt betitelt „Branding“Hier lädst du die visuellen Markenelemente deiner App hoch.
App-Logo
Abschnitt betitelt „App-Logo“Das Logo wird in verschiedenen Bereichen angezeigt:
- Header und Navigation
- Login-Seite
- Splash Screen (optional)
Empfehlungen:
- Format: PNG mit Transparenz
- Mindestgröße: 512 x 512 px
- Seitenverhältnis: Quadratisch oder horizontal
App-Icon
Abschnitt betitelt „App-Icon“Das App-Icon erscheint auf dem Startbildschirm des Geräts:
- Wird beim Publizieren verwendet
- Sollte quadratisch sein
- Ohne Transparenz (für beste Kompatibilität)
Empfehlungen:
- Format: PNG ohne Transparenz
- Größe: 1024 x 1024 px
- Inhalt: Zentriertes Symbol mit Rand
Häufige Fragen
Abschnitt betitelt „Häufige Fragen“Warum sehe ich meine Änderungen nicht sofort?
Abschnitt betitelt „Warum sehe ich meine Änderungen nicht sofort?“Die Live-Vorschau zeigt die meisten Änderungen sofort. Für die vollständige Ansicht in der App musst du speichern und die entsprechende Seite neu laden.
Kann ich mehr als zwei Farbmodi haben?
Abschnitt betitelt „Kann ich mehr als zwei Farbmodi haben?“Nein, BLOCQ unterstützt aktuell Light Mode und Dark Mode. Das System wechselt automatisch basierend auf der Geräteeinstellung.
Welche Schriftformate werden unterstützt?
Abschnitt betitelt „Welche Schriftformate werden unterstützt?“Die Theme Suite nutzt Google Fonts. Eigene Schriftdateien (TTF, OTF) können derzeit nicht hochgeladen werden.
Was passiert mit meinen Bildern beim Upload?
Abschnitt betitelt „Was passiert mit meinen Bildern beim Upload?“Bilder werden automatisch komprimiert (max. 2048x2048 px, 85% Qualität) und lokal gespeichert.