--- title: "Modulares Design: Funktionen zum Erstellen einer App - App Baukasten mit Modulares Design" description: "Mit dem App-Baukasten erstellen Sie ganz ohne Programmierkenntnisse Apps mit tollem Design" canonical_url: "https://de.goodbarber.com/feature-index/design/" lang: de --- # Modulares Design Mit dem App-Baukasten erstellen Sie ganz ohne Programmierkenntnisse Apps mit tollem Design - [Allgemeines Design](#generaldesign) - [Startseite](#home) - [Kopfzeile](#header) - [Navigationsmodus](#navigationmode) - [Anpassung der Navigation](#customnav) - [Menü](#menu) - [Design-Ressourcen](#design_ressources) - [Bereiche](#sections) ## Allgemeines Design+ [https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Global_Style.ec2e912aefe2.mp4](https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Global_Style.ec2e912aefe2.mp4) - ### Auf sämtliche Geräte zugeschnitten Bei GoodBarber ist das Design vom Mobilgerät bis zum Desktop vollständig abgedeckt. Unsere Designelemente passen sich jeder Bildschirmgröße perfekt an und sorgen so für gleichbleibende Qualität auf jedem Gerät – ob Smartphone, Tablet, Laptop oder Desktop. - ### Globales Stilwerkzeug Verwalten Sie den gesamten Stil Ihrer App über ein einziges Menü: das Farbschema, die Typografie, Aktionsschaltflächen, Hover-Effekte und andere Elemente. Erstellen Sie Ihr Design und übernehmen Sie es mit nur einem Klick für Ihre gesamte App. - ### Verwaltung von Bildhintergründen Mit GoodBarber können Sie Bilder in Ihr Design integrieren und im Hintergrund darstellen. - ### Anpassbare Ränder Passen Sie die Ränder Ihres Projekts an – horizontale Anzeige für alle Bildschirme, vertikale Anzeige nur für Bildschirme von Mobilgeräten. - ### Hover-Effekte für Texte Fügen Sie Ihren Texten einen Hover-Effekt hinzu: Unterstreichen, Aufhellen oder Abdunkeln der Schriftfarbe. - ### Hover-Effekte für Bilder Fügen Sie Ihren Bildern einen Hover-Effekt hinzu: Vergrößern, Verkleinern oder Deckkraft. - ### Wechsel des Themes Sie können Ihr Theme mit nur einem Klick ändern, während Ihr Navigationsmodus sowie die gesamte Architektur und sämtliche Inhalte Ihres Projekts davon unberührt bleiben. - ### Eine passende Lösung für jeden Zweck Die Vielfalt der Vorlagen sowie die große Auswahl und Kapazität der verfügbaren Anpassungsoptionen ermöglichen es Ihnen, eine genau auf Ihren Zweck zugeschnittene App zu erstellen. - ### Stileditor Verwalten Sie Ihre Stile auf globaler Ebene, um ein einheitliches Design in den verschiedenen Ansichten der App zu gewährleisten. - ### Änderungsprotokoll Das Backoffice von GoodBarber enthält ein Änderungsprotokoll, über das Sie auf einen Verlauf aller an Ihrem Projekt vorgenommenen Änderungen zugreifen können. - ### Aktualisierung des Designs ohne Neuerstellung Bei Aktualisierungen im Zusammenhang mit dem Design Ihres Projekts müssen Sie Ihre App nicht neu erstellen. Sobald diese Aktualisierungen genehmigt sind, werden sie automatisch übernommen und für Ihre Nutzer sichtbar, ohne dass zusätzliche Maßnahmen ergriffen werden müssen. - ### Bildbibliothek Speichern Sie Bilder in Ihrer persönlichen Bibliothek, um sie später leicht finden und verwenden zu können. - ### Selektive Bildgrößenanpassung Die Bilder werden in verschiedene Größen skaliert, komprimiert und zwischengespeichert, um die beste Kombination aus Dateigröße, Leistung und Anzeigequalität zu erreichen. - ### Monochrom-Effekt Dank des im Backoffice von GoodBarber integrierten Bildeditors können Sie Ihren Bildern einen Schwarzweißeffekt hinzufügen. - ### Unschärfeeffekt Fügen Sie Ihren Bildern dank des integrierten Bildeditors direkt über das GoodBarber-Backoffice mit nur einem Klick einen Unschärfeeffekt hinzu. - ### Zoomeffekt Wenden Sie beim Rollover Zoomeffekte auf die Bilder in der Desktop-Version Ihres Projekts an. - ### Assistent zur Erstellung von Symbolen und Startbildschirmen Das Backoffice von GoodBarber bietet Ihnen ein Werkzeug, das Sie bei der Erstellung Ihres App-Symbols und Startbildschirms von Grund auf unterstützt. - ### Verwaltung von Verlaufseffekten Integrieren Sie Farbverläufe in das Design Ihrer App, indem Sie einen Farbverlauf aus der umfangreichen Bibliothek (die den Dienst [https://uigradients.com](https://de.goodbarber.com) verwendet) auswählen. Nachdem Sie sich für einen Farbverlauf entschieden haben, wird dieser automatisch generiert und auf das Design Ihrer App angewendet. - ### Genius Palette Überlassen Sie Ihre Farbpalette der KI. Mit einem Klick erzeugt Genius Palette ein stimmiges, professionelles Farbset, das sich sofort auf Ihr gesamtes Design anwenden lässt. - ### Design System GoodBarber ruht auf einem formalisierten Design-System: Grundlagen, Atome und Komponenten, dazu eine Bibliothek fertiger Layouts. Die Regeln gelten standardmäßig für jede Seite, sodass ein Projekt von Bildschirm zu Bildschirm stimmig bleibt. - ### Haptisches Feedback und Animationen Native Apps tragen eine sinnliche Schicht: haptisches Feedback unter dem Finger, fließende Übergänge von einer Liste zu ihrem Detail und Bewegung, die auf das Scrollen antwortet. - ### Form der Schaltflächen und Felder Legen Sie die Form aller Schaltflächen Ihrer App fest — eckig, abgerundet oder rund — ebenso wie Form, Größe und Beschriftungsposition Ihrer Formularfelder. - ### App Walkthrough Führen Sie Ihre Nutzer beim ersten Start durch ein interaktives Tutorial. Wählen Sie die Darstellung und erwecken Sie die Bildschirme mit Lottie-Animationen zum Leben. ## Startseite+ [https://portal.ww-cdn.com/portal_static/images/radio/home_buildin.6c6c5f4784f2.mp4](https://portal.ww-cdn.com/portal_static/images/radio/home_buildin.6c6c5f4784f2.mp4) - ### Modulare Startseite Die Startseite ist der erste Bereich Ihrer App. Dieser besteht aus Widgets und ist völlig flexibel. Mit der großen Auswahl an Widgets auf der Startseite können Sie Ihr Projekt so aufbauen, dass Ihre App wirklich einzigartig wird. - ### Aktivieren oder deaktivieren Sie können die Startseite in Ihrer App aktivieren oder deaktivieren. Wenn Sie sie deaktivieren, hängt die Navigation allein von dem von Ihnen gewählten Navigationsmodus ab. - ### 77 Widgets Widgets bieten Ihnen einzigartige Flexibilität bei der Gestaltung der Startseite Ihrer App. - ### Inhalts-Widgets Content apps Gestalten Sie die Startseite Ihrer App dynamischer – mit Widgets, die sich automatisch aktualisieren, sobald neue Inhalte in Ihrem Projekt veröffentlicht werden. - ### Navigations-Widgets Content apps Bieten Sie mit Widgets für die Navigation direkten Zugriff auf die wichtigsten Bereiche Ihrer App. Die perfekte Art und Weise, Ihren Nutzer zur Hauptfunktion Ihres Projekts zu führen. - ### E-Commerce-Widgets eCommerce apps Erstellen Sie mit den Widgets „Produktliste“ und „Liste der Sammlungen“ über die Startseite Ihrer App direkte Verknüpfungen zu Ihren Produkten und Sammlungen. - ### Werbe-Widget eCommerce apps Zeigen Sie eine Werbebotschaft an, sobald die Nutzer auf der Startseite Ihres Shops eintreffen. Sie können ein Produkt, eine Sammlung oder eine Liste von Sammlungen hervorheben. Das Werbe-Widget ist äußerst flexibel und wird Ihnen helfen, Ihren Umsatz zu steigern. - ### Halbdynamische Widgets Mit diesen Widgets können Sie eine Startseite aufbauen, die sich automatisch aktualisiert, sobald neue Inhalte veröffentlicht werden, und dem Nutzer gleichzeitig eine übersichtliche Architektur für die Navigation in der App bieten. - ### Sonstige Widgets In dieser Kategorie werden nützliche Widgets wie die Such-, Newsletter-, Werbe-, Countdown- oder auch HTML-Widgets zusammengefasst. - ### Drag-and-Drop-Erstellung Die Anordnung der verschiedenen Widgets auf Ihrer Startseite ist kinderleicht. Ziehen Sie Ihre Widgets einfach per Drag-and-Drop an die gewünschte Stelle. - ### Sortieroptionen Greifen Sie auf eine Vielzahl von Optionen zu, um die Anzeigereihenfolge der Elemente in Ihren Inhalts-Widgets zu verwalten: nach Datum, nach Beliebtheit, in alphabetischer Reihenfolge, zufällig … - ### Anzahl der Elemente Die Anzahl der von einem Widget angezeigten Elemente kann für jedes Widget individuell eingestellt werden, um bei der Gestaltung Ihrer Startseite maximale Flexibilität zu ermöglichen. - ### Widgets mit eigenem Code Bauen Sie eigene Widgets in HTML, CSS und JavaScript und setzen Sie sie neben die Standard-Widgets auf die Startseite. ## Kopfzeile+ [https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Logo_Title.b8e1067a5361.mp4](https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Logo_Title.b8e1067a5361.mp4) - ### Anpassbare Navigationsleiste Die Navigationsleiste in Ihrer App ist von strategischer Bedeutung. Daher können Sie ihr Design und ihre Funktionen vollständig selbst festlegen. Wählen Sie aus 3 Höhenformaten (Klein, Mittel, Groß), um Ihr Logo, einen Titel oder eine Beschreibung anzuzeigen. - ### Anpassbare Symbole Jedem zu Ihrer Navigationsleiste hinzugefügten Link wird ein Symbol zugewiesen. Dieses Symbol ist vollständig anpassbar. - ### Hinzufügen von Verknüpfungen Die Navigationsleiste kann bis zu 6 Verknüpfungen zu wichtigen Bereichen Ihrer App oder externen Quellen anzeigen. - ### Verwaltung von Verknüpfungen Durch die Möglichkeiten zur Anpassung des Erscheinungsbildes Ihrer Verknüpfungen in der Navigationsleiste können Sie eine einheitliche Nutzererfahrung in Ihrer gesamten App gewährleisten. - ### Automatische Anordnung Basierend auf der Anzahl der in der Navigationsleiste verfügbaren Verknüpfungen wird von der App automatisch die beste Anordnung festgelegt. - ### Anpassbare Verknüpfungen Das Design jeder Verknüpfung in der Navigationsleiste kann individuell angepasst werden. Greifen Sie auf eine Bibliothek mit über 1 000 Vektorsymbolen zu, fügen Sie Ihre eigenen Symbole hinzu und passen Sie die Linktitel an. - ### Effektoptionen Content apps Wenden Sie Transparenz-, Unschärfe- oder Ausblendeffekte auf die Kopfzeile an. Diese subtilen Effekte verleihen Ihrer App den letzten Schliff und heben Sie von der Masse ab. - ### Automatische Effektverwaltung Die Effekte werden je nach Gerät und Betriebssystem, über das die App angezeigt wird, von GoodBarber automatisch auf die Kopfzeile angewendet. - ### Ausblendbare Kopfzeile pro Bereich Für jeden Bereich in Ihrer App kann eine eigene Kopfzeile und eine zugehörige Navigationsleiste eingerichtet werden. ## Navigationsmodus+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/navigation_mode.82959cd1bbdf.jpg) - ### Anpassbare Navigationsmodi Wählen Sie den Navigationsmodus Ihrer App aus den möglichen Vorlagen aus. Jedes Menü kann durch eine unbegrenzte Anzahl von Kombinationsmöglichkeiten bis ins letzte Detail angepasst werden. So wird jedes einzelne Projekt zu einem Unikat. - ### Wischen Ein zentraler Navigationsmodus für Apps mit einer großen Anzahl von Bereichen. - ### Little Swipe Bieten Sie eine vertikale Navigation an, bei der jeder Eintrag in Ihrer App durch ein Symbol dargestellt wird. - ### TabBar Die TabBar ist ein klassischer Navigationsmodus, der den schnellen Zugriff auf die wichtigsten Bereiche in Ihrer App ermöglicht. - ### Raster Das Raster zeigt die Navigation Ihrer App im Vollbildmodus an, wobei jeder Eintrag durch ein Symbol dargestellt wird. - ### Slate Slate zeigt die Navigation Ihrer App im Vollbildmodus an, wobei jeder Eintrag durch Text dargestellt wird. - ### Von Grund auf Content apps Im Menü „Von Grund auf“ können Sie Ihre Navigation codieren, indem Sie Ihren eigenen HTML-Code einfügen. - ### Nicht sichtbar Content apps Wenn Sie kein Navigationsmenü für Ihre App anzeigen möchten, können Sie den Navigationsmodus „Nicht sichtbar“ aktivieren. - ### Floating TabBar Eine TabBar, die sich vom Bildschirmrand löst und über Ihren Inhalten schwebt. In nativen Apps sitzt sie unten; in der Web-App erscheint sie als Banner unter dem Kopfbereich. ## Anpassung der Navigation+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/custom_navigation.8cd1ea29a274.jpg) - ### Kopfzeile, Hauptteil und Fußzeile Jedes Navigationsmenü besteht aus 3 verschiedenen Teilen: Kopfzeile, Hauptteil und Fußzeile, die jeweils vollständig anpassbar sind. Die Anzeige der Kopf- und Fußzeile ist nicht zwingend erforderlich. - ### Logoanzeige Zeigen Sie Ihr Logo in der Kopfzeile Ihres Navigationsmodus an, indem Sie Ihr Logo hochladen oder direkt Text hinzufügen. - ### Verknüpfung zum Nutzerprofil Fügen Sie in Ihrem Navigationsmodus einen Direktlink zum Profil des Nutzers hinzu. Bearbeiten Sie den Text, das Symbol und die Linkfarbe. - ### Hinzufügen von Verknüpfungen Fügen Sie in Ihrem Navigationsmodus Verknüpfungen hinzu, über die Ihre Nutzer ganz einfach auf jeden beliebigen Bereich in Ihrer App zugreifen, einen externen Link nutzen oder sich u. a. sogar ausloggen oder eine SMS oder E-Mail versenden können. - ### Anpassbare Trennzeichen Fügen Sie in Ihrem Navigationsmenü Trennzeichen hinzu und passen Sie deren Farbe und Pixelhöhe an. - ### Anpassbarer Bereich „Verknüpfungen“ Erstellen Sie Ihr Navigationsmenü, indem Sie Links zu Bereichen in Ihrer App hinzufügen. - ### Urheberrecht Fügen Sie im Navigationsmenü Ihres Projekts einen Bereich „Copyright“ hinzu. Wählen Sie Farbe und Text sowie Schriftart und Schriftgröße aus. - ### Erweiterte Designoptionen GoodBarber ermöglicht eine erweiterte Anpassung des Designs Ihres Navigationsmenüs. Schriftart, Farben, Ausrichtung, Symbol, Zellenhöhe, Hinzufügen eines Titels … - ### Standardanzeige des Menüs Wählen Sie für die Menüs „Swipe“, „Little Swipe“, „Grid“ und „Slate“ den jeweiligen Standardstatus aus: immer ausgeblendet oder beim Start der App immer angezeigt. ## Menü+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/templates.493d19427b54.jpg) - ### 10 Zwischenmenüvorlagen GoodBarber bietet einen Menübereich, um die Navigation auf mehreren Ebenen in Ihrer App zu ermöglichen. Sie können aus 10 Vorlagen wählen. - ### Ein Bild für jedes Element Wählen Sie eine Navigation aus, bei der jeder Menüeintrag ein hochauflösendes Bild ist. So erzielen Sie das perfekte Design unabhängig von der Größe des Bildschirms, auf dem Ihre App angezeigt wird. - ### Erweitertes Design Wenden Sie Verlaufs- oder Unschärfeeffekte auf Bilder an. Passen Sie die Position des Textes und die Logoauswahl für Ihre Menüeinträge an. - ### Automatische Erstellung Basierend auf der Anzahl der Einträge in Ihrem Menü führt GoodBarber eine automatische Anordnung durch, um stets eine ansprechende Darstellung sicherzustellen. - ### Menü mit eigenem Code Schreiben Sie Ihr Menü von Grund auf in HTML, CSS und JavaScript, mit dem eingebauten Editor und der GoodBarber App API — für eine Navigation, die es so kein zweites Mal gibt. ## Design-Ressourcen+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-7.50744db5f733.jpg) - ### Symbolgalerie In Ihrem Backoffice steht Ihnen eine Sammlung von mehr als 1 000 Symbolen zur Verfügung, die speziell von unserem Designerteam erstellt und in 3 verschiedene Kategorien eingeteilt wurden. - ### Anpassbare Symbole Erstellen Sie Ihre eigene Symbolsammlung, indem Sie Ihre eigenen Symbole oder Bilder direkt aus dem Backoffice Ihres Projekts im .png-Format (260 px x 260 px) hochladen. - ### Professionelle Themes Das Backoffice von GoodBarber bietet 25 professionelle Themes, die von unserem Team aus erfahrenen Designern erstellt wurden. Sie sind von unserer „Mobile First“-Philosophie inspiriert und so konzipiert, dass sie sich perfekt an jedes Gerät anpassen, den aktuellen Trends entsprechen und zudem vollständig anpassbar sind. - ### Google-Schriftarten-Bibliothek GoodBarber verfügt über einen Satz von mehr als 400 Google-Schriftarten, die direkt im Backoffice verwendet werden können, ohne dass zusätzlicher Code eingebettet werden muss. - ### Pexels-Bibliothek GoodBarber-Kunden können direkt über das Backoffice auf die Pexels-Fotobibliothek mit über 500 000 hochauflösenden Bildern zugreifen. - ### Erweiterte Bildsuche Die Pexels-Bibliothek im Backoffice von GoodBarber ist mit einer erweiterten Suchmaschine ausgestattet, mit der Sie Bilder nach Thema, Stichwort oder Farbe sortieren können. - ### Eigene Schriften Laden Sie Ihre eigenen Schriften hoch — .woff2 für die Web-App, .ttf oder .otf für native Apps — und finden Sie sie in jeder Schriftauswahl des Back Office wieder, neben der Google-Fonts-Bibliothek. - ### Google Material Icons Fügen Sie Ihrer App den Google-Material-Icon-Satz hinzu, in den Stilen gefüllt, abgerundet, Kontur und zweifarbig, und nutzen Sie ihn überall dort, wo Symbole erscheinen — auch im Navigationsmenü. ## Bereiche+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-8.c045955904b2.jpg) - ### 30 verschiedene Arten von Bereichen GoodBarber bietet 30 verschiedene Arten von Bereichen, die Sie bei der Erstellung Ihres Projekts verwenden können. - ### Erweiterte Einstellungen für die anzuzeigenden Informationen Wählen Sie für jeden Bereich die anzuzeigenden Informationen aus, z. B. das Datum oder den Autor für einen Bereich „Artikel“. - ### Anpassung der Symbolleiste Content apps Wählen Sie für jeden Bereich die in der Symbolleiste verfügbaren Aktionen aus: Kommentare, Teilen, Textgröße, Lesezeichen für das Element. - ### Zugriff auf Kommentare Content apps Ermöglichen Sie Ihren Nutzern, über jede Inhaltsansicht auf die Seite „Kommentare“ zuzugreifen. - ### Direktlink zum Teilen in sozialen Medien Fügen Sie auf jeder Inhaltsseite Direktlinks zum Teilen in sozialen Medien hinzu. - ### Progressives Laden von Seiten Mit intuitiven Gesten geben Sie dem Nutzer die Möglichkeit, beim Besuch eines Bereichs bei Bedarf zusätzliche Inhalte anzuzeigen. Dies ermöglicht eine schnellere Anzeige bei gleichzeitiger Verbesserung der Nutzerfreundlichkeit. - ### Globale schwebende Schaltfläche Eine Aktionsschaltfläche, die über Ihren Inhalten schwebt und in der gesamten App erreichbar bleibt, mit der Beschriftung Ihrer Wahl. ## Bereit, Ihre App zu erstellen? [Starten Sie kostenlos](https://de.goodbarber.com/create/)[Preise ansehen](https://de.goodbarber.com/pricing/content/)