--- title: "Designsystem – App-Design- und UX-Leitlinien für erstklassige mobile Apps" description: "In unserem Designsystem sind die UX- und App-Design-Leitlinien zusammen, die für die Erstellung Ihrer Apps mit unserem App-Baukasten verwendet werden. So erzielen Sie visuelle Konsistenz über alle Plattformen hinweg." canonical_url: "https://www.goodbarber.com/uxdesign/" lang: de --- # Designsystem – App-Design- und UX-Leitlinien für erstklassige mobile Apps ![ds_banner_alt](<>) # Designsystem von GoodBarber ## Entdecken Sie, wie wir die App-Erstellung revolutionieren, um nahtlose und schöne Erlebnisse auf allen Plattformen zu ermöglichen. [Entdecken Sie unser Design System](/uxdesign/foundations) ### Das Designsystem von GoodBarber Das GoodBarber Design System ist eine umfassende Lösung, die als Rahmenwerk, Werkzeugkasten und grafische Charta für Designer und Entwickler dient. Es bietet **evolutionäre Richtlinien** für eine konsistente Designsprache, die Effizienz und Skalierbarkeit gewährleistet. Es legt gemeinsame Designprinzipien und -muster fest und ermöglicht gleichzeitig Flexibilität und Anpassungen, wenn dies erforderlich ist. Letztendlich hilft es, die App-Entwicklung zu rationalisieren und **schöne und funktionale Apps zu erstellen.** [Grundlagen Grundprinzipien für eine kohärente und konsistente Konstruktion von Vorlagen für alle Plattformen.](/uxdesign/foundations)[Atome Unverzichtbare Komponenten, die visuelle Konsistenz garantieren und den Arbeitsablauf rationalisieren.](/uxdesign/atomic-components)[Komponenten Wiederverwendbare Elemente als Bausteine für kohärente und benutzerfreundliche Schnittstellen.](/uxdesign/ui-components) ### Wozu diese Designleitlinien? GoodBarber, ein 2011 eingeführter No-Code-App-Builder, ermöglicht es Benutzern, mühelos beeindruckende native Apps oder Progressive Web Apps zu erstellen. Indem wir unser Engagement für Exzellenz aufrechterhalten, bieten wir kontinuierlich **die besten Lösungen für die Erstellung schöner Apps.** In den Anfängen von GoodBarber war das UX-Design noch nicht vollständig verstanden, was die App-Entwicklung ohne einheitliche Richtlinien zu einer Herausforderung machte. Unser Weg führte uns zur Entwicklung des GoodBarber Design Systems, das umfassende **Richtlinien und Best Practices** bietet, um **visuelle Konsistenz zu erreichen, die Entwicklung zu rationalisieren** und ein **konsistentes Benutzererlebnis zu gewährleisten.** Durch die Weitergabe unserer Designprinzipien ermöglichen wir den Nutzern, **Konsistenz, Effizienz und Skalierbarkeit** in ihrer App-Entwicklung zu erreichen und die Gesamtqualität der mit unserer Technologie erstellten Apps zu verbessern. ![code icon](https://portal.ww-cdn.com/portal_static/images/designsystem/main/guidelines-dev@small.a0034b531522.png) **Entwickler** haben Zugriff auf die technischen Spezifikationen der Seiten und Komponenten: ihre Größe, ihre Positionierung, ihr Verhalten und ihre Eigenschaften. ![code icon](https://portal.ww-cdn.com/portal_static/images/designsystem/main/guidelines-design@small.55c3dabb4ecd.png) **Designer** können bei der Gestaltung neuer Seiten die Vorgaben zu Abstandsregeln, Schriftgrößen, Bildverhältnissen oder Farbverteilungen nutzen. ### Ziele ![ds_objectives_principles_alt](https://portal.ww-cdn.com/portal_static/images/designsystem/main/landing_page-04-streamline@small.b7c5264ab429.png) Optimieren Sie die Erstellung und Produktion von Vorlagen durch die Anwendung der Grundlagen guten Designs. ![ds_objectives_consistency_alt](https://portal.ww-cdn.com/portal_static/images/designsystem/main/landing_page-05-consistency@small.6c9cbe395733.png) Sorgen Sie für visuelle Konsistenz zwischen den Seiten einer App auf verschiedenen Plattformen. ![ds_objectives_smoothux_alt](https://portal.ww-cdn.com/portal_static/images/designsystem/main/landing_page-06-ux@small.35d00be0e89f.png) Für ein reibungsloses und optimales Nutzererlebnis ### Die Design-Prinzipien von GoodBarber Gutes Design sollte selbstverständlich sein, nicht Ihre Last. GoodBarber war der erste App-Baukasten mit einem echten Design-System – so erstellen Sie schöne, funktionale Apps, ohne die Design-Arbeit selbst zu tragen. Sechs Prinzipien machen das möglich. #### Design per System Jeder Screen wird aus einem einzigen formalen Design-System zusammengesetzt (Foundations, Atome und Komponenten) – Konsistenz entsteht durch Konstruktion, nicht durch Ihre Disziplin. Ein echtes Drei-Ebenen-System mit über 100 vorgefertigten Layouts. Das erste, das in einem No-Code-App-Baukasten formalisiert wurde. #### Keine Design-Last Sie treffen die kreativen Entscheidungen (Theme, Farben, Inhalte); das System übernimmt still Abstände, Typografie, Formen und Konsistenz. Kein Design-Panel zum Lernen, keine Abstandsskala zum Planen. Bei Bedarf überschreiben Sie jede Voreinstellung. #### Nativ von Haus aus Eine einzige Konfiguration erzeugt drei Engines: natives iOS (Swift), natives Android (Kotlin) und eine Progressive Web App (Angular). Kompilierte Swift- und Kotlin-Binaries plus eine PWA. Kein WebView-Wrapper. #### Einmal festlegen, überall konsistent Farbe, Typografie, Abstände, Formen und Schatten werden einmal als semantische Rollen definiert und überall wiederverwendet – eine geänderte Theme-Einstellung aktualisiert die ganze App konsistent. Vier semantische Farbrollen, 18 gerätekalibrierte Schriftgrößen, ein geräteübergreifendes Gutter-System. #### Lesbar von Haus aus Paletten sind auf Kontrast und Lesbarkeit ausgelegt, und jedes Bedienelement behält eine komfortable Tap-Fläche – auch dort, wo das Element klein wirkt. Genius Palette (eine hauseigene KI) und komfortable Tap-Flächen auf jedem Bedienelement. #### Feinschliff, den man spürt Native Ausgabe erschließt eine sensorische Ebene, die die meisten No-Code-Apps auslassen. Diese Details lassen eine App handgefertigt wirken, nicht generiert. Haptisches Feedback, Motion Design, ein durchgängiger Media-Player, eine schwebende TabBar. GoodBarber gestaltet jede App nach sechs Prinzipien: Design per System, keine Design-Last, nativ von Haus aus, einmal festgelegt und überall konsistent, lesbar von Haus aus und eine sensorische Ebene an Feinschliff. Zusammen sorgen sie dafür, dass auch jemand ohne Design-Hintergrund eine App veröffentlicht, die professionell gestaltet wirkt. Entdecken Sie das GoodBarber-Designsystem und nutzen Sie die Kraft eines nahtlosen App-Designs! [Entdecken Sie unser Design System](/uxdesign/foundations)