Vorlagen-Galerie
Die Vorlagen-Galerie ermöglicht dir, komplette Design-Sets anzuwenden und eigene Themes mit erweiterten Optionen zu speichern. Mit 8 professionellen Vorlagen findest du schnell den passenden Stil für deine App.
Übersicht
Abschnitt betitelt „Übersicht“Die Vorlagen-Galerie bietet:
| Bereich | Inhalt | Beschreibung |
|---|---|---|
| Vorgefertigt | 8 Templates | Professionelle Designs von BLOCQ |
| Meine Vorlagen | Unbegrenzt | Eigene gespeicherte Designs mit partiellen Optionen |
Vordefinierte Vorlagen
Abschnitt betitelt „Vordefinierte Vorlagen“BLOCQ bietet acht professionelle Design-Vorlagen für verschiedene Anwendungsfälle:
Material Design
Abschnitt betitelt „Material Design“Das klassische Android-Design von Google:
| Eigenschaft | Wert |
|---|---|
| Primärfarbe | Violett (#6200EE) |
| Sekundärfarbe | Türkis (#03DAC6) |
| Stil | Farbenfroh, modern |
| Ecken | Leicht gerundet |
| Schrift | Roboto |
Geeignet für: Allgemeine Apps, Produktivität, Tools
iOS Cupertino
Abschnitt betitelt „iOS Cupertino“Minimalistisches Apple-Design:
| Eigenschaft | Wert |
|---|---|
| Primärfarbe | Blau (#007AFF) |
| Sekundärfarbe | Hellblau (#5AC8FA) |
| Stil | Minimal, clean |
| Ecken | Stärker gerundet |
| Schrift | SF Pro |
Geeignet für: iOS-Nutzer, minimalistische Apps
Minimal Dark
Abschnitt betitelt „Minimal Dark“Dunkles Theme mit hohem Kontrast:
| Eigenschaft | Wert |
|---|---|
| Primärfarbe | Cyan (#06B6D4) |
| Hintergrund | Schwarz (#000000) |
| Oberflächen | Dunkelgrau (#121212) |
| Stil | High-Contrast, OLED |
| Ecken | Minimal |
Geeignet für: Nacht-Apps, Media, Gaming
Corporate Blue
Abschnitt betitelt „Corporate Blue“Professionelles Business-Design:
| Eigenschaft | Wert |
|---|---|
| Primärfarbe | Dunkelblau (#1E3A5F) |
| Sekundärfarbe | Mittelblau (#3B82F6) |
| Stil | Seriös, vertrauenswürdig |
| Ecken | Dezent gerundet |
| Schrift | Inter |
Geeignet für: Business-Apps, Finanzwesen, Unternehmens-Apps
Playful Creative
Abschnitt betitelt „Playful Creative“Ein verspieltes Design mit lebhaften Farben:
| Eigenschaft | Wert |
|---|---|
| Primärfarbe | Pink (#F472B6) |
| Sekundärfarbe | Lila (#A78BFA) |
| Hintergrund | Warm Cream (#FFF7ED) |
| Stil | Fröhlich, energetisch |
| Ecken | Extra rund (12-24px) |
| Schrift | Nunito |
Geeignet für: Lifestyle-Apps, Kinder-Apps, Kreative Tools, Social Apps
Elegant Luxury
Abschnitt betitelt „Elegant Luxury“Premium-Design mit Gold-Akzenten:
| Eigenschaft | Wert |
|---|---|
| Primärfarbe | Gold (#C9A227) |
| Sekundärfarbe | Bronze (#8B7355) |
| Hintergrund | Warm Off-White (#FAF9F6) |
| Stil | Luxuriös, raffiniert |
| Ecken | Klassisch (4-12px) |
| Schrift | Playfair Display (Serif) |
Geeignet für: Premium-Apps, Mode, Schmuck, Immobilien, High-End Services
Tech Startup
Abschnitt betitelt „Tech Startup“Kühnes, modernes Design für Tech-Produkte:
| Eigenschaft | Wert |
|---|---|
| Primärfarbe | Neon Cyan (#00D1FF) |
| Sekundärfarbe | Electric Purple (#7C3AED) |
| Hintergrund | Fast Schwarz (#010409) |
| Oberflächen | Deep Dark (#0D1117) |
| Stil | Modern, Neon, Futuristisch |
| Schrift | Space Grotesk |
Geeignet für: Tech-Startups, SaaS, Developer-Tools, Gaming
Nature Organic
Abschnitt betitelt „Nature Organic“Natürliches, organisches Design mit erdigen Tönen:
| Eigenschaft | Wert |
|---|---|
| Primärfarbe | Forest Green (#059669) |
| Sekundärfarbe | Earth Brown (#92400E) |
| Hintergrund | Soft Amber (#FEF3C7) |
| Oberflächen | Warm Cream (#FFFBEB) |
| Stil | Organisch, erdverbunden |
| Ecken | Weich gerundet (16-20px) |
| Schrift | DM Sans |
Geeignet für: Wellness-Apps, Bio-Produkte, Outdoor, Nachhaltigkeit
Vorlage anwenden
Abschnitt betitelt „Vorlage anwenden“So wendest du eine Vorlage an:
- Wähle den Tab “Vorgefertigt” oder “Meine Vorlagen”
- Scrolle durch die verfügbaren Vorlagen
- Jede Vorlage zeigt eine Farbvorschau und Tags
- Tippe auf “Anwenden” bei der gewünschten Vorlage
- Bestätige im Dialog
Eigene Vorlagen erstellen
Abschnitt betitelt „Eigene Vorlagen erstellen“Vorlage speichern
Abschnitt betitelt „Vorlage speichern“Der Speichern-Dialog bietet erweiterte Optionen in zwei Tabs:
- Gestalte dein Design in der Theme Suite
- Gehe zum Tab “Meine Vorlagen”
- Tippe auf den ”+” FAB (Floating Action Button)
- Der Speichern-Dialog öffnet sich mit zwei Tabs
Tab 1: Grundlagen
Abschnitt betitelt „Tab 1: Grundlagen“Im ersten Tab gibst du die Basisinformationen ein:
| Feld | Beschreibung |
|---|---|
| Name | Pflichtfeld - z.B. “Mein Sommer-Design” |
| Beschreibung | Optional - Kurze Beschreibung |
| Stil-Kategorie | Optional - Hilft beim Filtern |
Verfügbare Stil-Kategorien:
- Minimal
- Farbenfroh
- Corporate
- Playful
- Elegant
- Tech
- Nature
Tab 2: Inhalt auswählen
Abschnitt betitelt „Tab 2: Inhalt auswählen“Im zweiten Tab wählst du, welche Teile des Themes gespeichert werden:
Globale Einstellungen
Abschnitt betitelt „Globale Einstellungen“| Option | Beschreibung |
|---|---|
| Farben | Primär-, Sekundär-, Hintergrund-, Oberflächen-, Status-Farben |
| Textfarben | Primäre und sekundäre Textfarben |
| Dark Mode Farben | Alle Farben für das dunkle Theme |
| Typografie | Schriftgrößen, Schriftfamilien, Zeilenhöhen, Zeichenabstände |
| Abstände | XSmall bis XLarge Spacing-Werte |
| Eckenradien | Small, Medium, Large, Round |
| Elevation | Schattenstufen (Low, Medium, High) |
Widget-Themes
Abschnitt betitelt „Widget-Themes“| Option | Beschreibung |
|---|---|
| Buttons | Primary, Secondary, Text, Icon, FAB Buttons |
| Eingabefelder | TextField, Dropdown, Checkbox, Radio, Switch |
| Karten | Basic, Elevated, Outlined Cards |
| Feedback | Dialog, BottomSheet, Snackbar, Tooltip |
| Navigation | TabBar, ListTile |
| Andere | Chip, DatePicker, ProgressIndicator, LoadingIndicator |
Schnellauswahl:
- Alle auswählen: Aktiviert alle Optionen
- Keine auswählen: Deaktiviert alle Optionen
Eigene Vorlagen verwalten
Abschnitt betitelt „Eigene Vorlagen verwalten“Vorlage anwenden
Abschnitt betitelt „Vorlage anwenden“Deine gespeicherten Vorlagen erscheinen unter “Meine Vorlagen” mit:
- Farbvorschau
- “Eigene”-Badge
- Name und Beschreibung
- Erstellungsdatum
- Anwenden-Button
Vorlage bearbeiten
Abschnitt betitelt „Vorlage bearbeiten“- Finde die Vorlage unter “Meine Vorlagen”
- Tippe auf das Bearbeiten-Icon (Stift)
- Ändere Name, Beschreibung oder Stil-Kategorie
- Speichere
Vorlage löschen
Abschnitt betitelt „Vorlage löschen“- Finde die Vorlage unter “Meine Vorlagen”
- Tippe auf das Löschen-Icon (Papierkorb)
- Bestätige im Dialog
Was wird gespeichert?
Abschnitt betitelt „Was wird gespeichert?“Vollständige Vorlage (alle Optionen aktiviert)
Abschnitt betitelt „Vollständige Vorlage (alle Optionen aktiviert)“Eine vollständige Vorlage enthält:
- Alle Farben (Light und Dark Mode)
- Typografie-Einstellungen (Schriftgrößen, -familien, -gewichte)
- Abstände (XSmall bis XLarge)
- Eckenradien (Small bis Round)
- Elevation-Stufen
- Widget-Themes (Buttons, Inputs, Cards, etc.)
Partielle Vorlage
Abschnitt betitelt „Partielle Vorlage“Mit partiellen Vorlagen kannst du:
- Nur Farben speichern (für schnelle Farbwechsel)
- Nur Typografie speichern (für Schriftwechsel)
- Nur Widget-Themes speichern (für konsistente Komponenten)
Was NICHT gespeichert wird
Abschnitt betitelt „Was NICHT gespeichert wird“- Hochgeladene Bilder (Logo, Icons)
- Seitenspezifische Einstellungen (Splash Screen, Auth-Seiten)
- AppBar-Konfiguration (separat im AppBar Editor)
- BottomNav-Konfiguration (separat im BottomNav Editor)
Häufige Fragen
Abschnitt betitelt „Häufige Fragen“Kann ich Vorlagen exportieren oder teilen?
Abschnitt betitelt „Kann ich Vorlagen exportieren oder teilen?“Aktuell können Vorlagen nur lokal in der App gespeichert werden. Ein Export/Import-Feature ist für zukünftige Versionen geplant.
Werden meine Vorlagen beim App-Update gelöscht?
Abschnitt betitelt „Werden meine Vorlagen beim App-Update gelöscht?“Nein, deine Vorlagen sind in der lokalen ISAR-Datenbank gespeichert und bleiben bei Updates erhalten.
Warum fehlen Bilder, wenn ich eine Vorlage anwende?
Abschnitt betitelt „Warum fehlen Bilder, wenn ich eine Vorlage anwende?“Vorlagen speichern keine Bilder (Logo, App-Icon). Diese musst du separat im Branding-Bereich hochladen.
Kann ich eine vorgefertigte Vorlage bearbeiten?
Abschnitt betitelt „Kann ich eine vorgefertigte Vorlage bearbeiten?“Nein, die vorgefertigten Vorlagen sind unveränderlich. Wende sie an und speichere das Ergebnis als eigene Vorlage.
Wie viele eigene Vorlagen kann ich erstellen?
Abschnitt betitelt „Wie viele eigene Vorlagen kann ich erstellen?“Es gibt keine Begrenzung. Du kannst beliebig viele eigene Vorlagen speichern.
Was passiert, wenn ich nur Farben in einer Vorlage speichere?
Abschnitt betitelt „Was passiert, wenn ich nur Farben in einer Vorlage speichere?“Beim Anwenden werden nur die Farben überschrieben. Alle anderen Einstellungen (Typografie, Abstände, Widget-Themes) bleiben unverändert.
Was ist der Unterschied zwischen den neuen und alten Vorlagen?
Abschnitt betitelt „Was ist der Unterschied zwischen den neuen und alten Vorlagen?“Die neuen Vorlagen (Playful, Elegant, Tech, Nature) bieten vollständige Widget-Themes und sind auf spezifische Anwendungsfälle optimiert. Die klassischen Vorlagen (Material, Cupertino, Dark, Corporate) decken die Grundstile ab.
Kann ich partielle Vorlagen nachträglich erweitern?
Abschnitt betitelt „Kann ich partielle Vorlagen nachträglich erweitern?“Nein, aber du kannst jederzeit eine neue Vorlage mit mehr Optionen erstellen. Die Inhaltsauswahl wird pro Vorlage gespeichert.