ds_banner_alt

Designsystem
von GoodBarber

Das Designsystem von GoodBarber-Apps

Wozu diese Designleitlinien?

Mit GoodBarber können Sie seit 2011 Apps nach dem Baukastenprinzip erstellen. Native Apps oder Progressive Web Apps können so ganz einfach ohne Programmierkenntnisse erstellt werden. Damit bietet GoodBarber ein leistungsfähiges Werkzeug für alle, die eine App erstellen möchten, aber nicht über die technischen Fähigkeiten dazu verfügen. Von Beginn ging es uns im Kern darum, die Technologie und die Ressourcen bereitzustellen, um App-Designs in beeindruckender Weise Wirklichkeit werden zu lassen. Wir sind bestrebt, auch weiterhin die besten Lösungen für die Erstellung schöner Apps zu bieten.

Als GoodBarber gegründet wurde, war der Bereich des User-Experience-Designs noch nicht so bekannt und verbreitet wie heute. Als es noch keine Designsysteme gab, war die Erstellung mobiler Apps für Designer und Entwickler oft eine Herausforderung. Weil es keine einheitlichen Leitlinien und bewährten Verfahren gab, war es schwierig, die visuelle Konsistenz und die Benutzerfreundlichkeit der App in ihren verschiedenen Ansichten zu gewährleisten. Auch war die Erstellung neuer Funktionen sehr ineffizient, da die Designer und Entwickler oftmals immer wieder von vorne anfangen mussten – eine Verschwendung von Zeit und Ressourcen. Auch die Zusammenarbeit und die Kommunikation gestalteten sich schwierig, da die Teammitglieder nicht über eine gemeinsame Sprache oder gemeinsame Standards verfügten.

Seitdem haben sich die Methoden und Werkzeuge der Designer erheblich weiterentwickelt. Designsysteme haben bei der Bewältigung der genannten Herausforderungen geholfen, indem sie Leitlinien und bewährte Verfahren für Designer und Entwickler bereitstellen. Im Zuge der Weiterentwicklung der GoodBarber-Plattform haben wir erkannt, dass wir das Design unserer Vorlagen komplett überdenken müssen, um plattformübergreifend visuelle Konsistenz zu erreichen und den Entwicklungsprozess zu beschleunigen. Deshalb haben wir das Designsystem von GoodBarber entwickelt: Leitlinien und bewährte Verfahren, die Konsistenz, Effizienz, Zusammenarbeit, Skalierbarkeit, Branding und Zugänglichkeit im Designprozess gewährleisten.

Durch die Veröffentlichung des Designsystems von GoodBarber teilen wir unsere Designgrundsätze, die wir über die Jahre entwickelt und verfeinert haben. So können auch unsere Nutzer bei der Erstellung benutzerdefinierter Plugins oder der weiteren Individualisierung Ihrer App Konsistenz, Effizienz und Skalierbarkeit erreichen.

Für das GoodBarber-Team vereinfacht unser Designsystem den Prozess, der App-Entwicklung, gewährleistet ein konsistentes Nutzererlebnis und verbessert die Gesamtqualität der Apps, die Sie mit unserer Technologie erstellen.

Entwickler haben Zugriff auf die technischen Spezifikationen der Seiten und Komponenten: ihre Größe, ihre Positionierung, ihr Verhalten und ihre Eigenschaften.

Designer können bei der Gestaltung neuer Seiten die Vorgaben zu Abstandsregeln, Schriftgrößen, Bildverhältnissen oder Farbverteilungen nutzen.

Ziele

ds_objectives_principles_alt

Optimieren Sie die Erstellung und Produktion von Vorlagen durch die Anwendung der Grundlagen guten Designs.

ds_objectives_consistency_alt

Sorgen Sie für visuelle Konsistenz zwischen den Seiten einer App auf verschiedenen Plattformen.

ds_objectives_smoothux_alt

Für ein reibungsloses und optimales Nutzererlebnis

Was ist ein gutes Design?

Gutes Raummanagement

Im Design bezeichnet der „weiße“ Raum, der auch als Negativraum bezeichnet wird, den leeren Raum zwischen den Elementen auf einer Seite. Er wird oft als verschwendeter Platz betrachtet, spielt aber in Wirklichkeit eine wichtige Rolle bei der Schaffung eines sauberen, aufgeräumt wirkenden Designs. Er hilft, verschiedene Elemente zu trennen und hervorzuheben, damit sie leichter zu lesen und zu verstehen sind. „Weißer“ Raum kann zudem hierarchisierend wirken, sodass das Auge der Nutzer auf die wichtigsten Informationen auf der Seite gelenkt wird.

Mit einheitlichen Abständen zwischen den Elementen lässt sich ganz einfach visuelle Konsistenz zwischen den Seiten herstellen. Die Verwendung eines Rasters, um die gleichmäßige Ausrichtung von Text zu gewährleisten, ist eine gängige Technik in Grafikdesign und Typografie. Für eine einheitliche Ausrichtung nutzen wir ein Raster, das flüssiges Lesen ermöglicht. Auch einheitliche Abstandswerte tragen zu Konsistenz der Bereiche auf allen Geräten bei.

Klare Hierarchie

Ein guter Kontrast zwischen den verschiedenen Textebenen ist für ein übersichtliches und benutzerfreundliches Layout unerlässlich. Durch unterschiedliche Textgrößen und -stile, z. B. für Überschriften und Fließtext, können Informationshierarchien geschaffen werden, um das Auge des Nutzers durch das Layout zu führen.

In unserem Designsystem verwenden wir den goldenen Schnitt, um das Größenverhältnis zwischen Überschriften und Fließtext festzulegen. Der goldene Schnitt, auch bekannt als „göttliche Proportion“, ist ein mathematisches Verhältnis, das im Design häufig verwendet wird, um visuell ansprechende und harmonische Designs zu schaffen. Weil wir zur Festlegung des Größenverhältnisses zwischen Überschriften und Fließtext mit dem goldenen Schnitt arbeiten, können wir einen Kontrast schaffen, der sowohl ästhetisch ansprechend als auch funktional ist.

Darüber hinaus verwenden wir auch andere typografische Techniken wie Schriftstärke, Farbe und Abstände, um einen Kontrast zwischen den verschiedenen Textebenen zu schaffen. Dadurch können wir sicherstellen, dass sich die Überschriften vom Fließtext abheben und die Aufmerksamkeit des Nutzers lenken. Mit diesen Techniken können wir visuell übersichtliche und leicht lesbare Layouts gestalten, die den Nutzer klar und nahtlos durch den Inhalt führen.

Gutes Schrift- und Farbmanagement

Ein Design, das zu viele Schriftarten und Farben verwendet, kann verwirren und dadurch falsche Assoziationen wecken. Deshalb gilt: Weniger ist hier mehr zugunsten von mehr Fokus auf dem Inhalt.

In unserem Backoffice wird der Nutzer zuallererst zur Auswahl eines Schemas aufgefordert, das er dann im Sinne der visuellen Identität seiner App anpassen kann. Dieser Benutzerfluss ermöglicht ein gewisses Framing: Die verfügbaren Schemata bieten eine begrenzte Anzahl an Schriftarten, mit denen sich Überschriften und Textkörper stimmig gestalten lassen.

Dabei kommen die 4 Hauptfarben zum Einsatz. Dank der guten Verteilung dieser Farben werden die Informationen gut strukturiert dargestellt (zum Beispiel: eine Primärfarbe für die Marke und die Schaltflächen sowie eine oder zwei Sekundärfarben für die weniger wichtigen Schaltflächen, die Links usw.).

Dieses Framework unterstützt die Anwendung eines effizienten Standarddesigns auf Apps. GoodBarber ermöglicht fortgeschrittenen Nutzern zugleich die sehr individuelle Anpassung ihres Produkts über die grundlegenden Empfehlungen hinaus.

Das Designsystem von GoodBarber

Das Designsystem von GoodBarber Framework, Toolbox und Grafikcharta zugleich und damit eine umfassende Lösung für Designer und Entwickler. Es bietet eine Sammlung von kontinuierlich weiterentwickelten Leitlinien, die Designern und Entwicklern eine plattformübergreifend einheitliche und kohärente Designsprache zugunsten von Konsistenz, Effizienz und Skalierbarkeit bieten. Als Leitfaden trägt das Designsystem zu einem gemeinsamen Verständnis von Designgrundsätzen und -mustern bei, ist jedoch auch flexibel und individuell anpassbar. Alles in allem ist das Designsystem von GoodBarber ein leistungsfähiges Hilfsmittel zur Optimierung des Prozesses der App-Entwicklung. So entstehen schöne und funktionale Apps.

Grundlagen

Unser Designsystem enthält Leitlinien für die Erstellung von konsistenten Vorlagen, die effizient und einfach zu verwenden sind.

Komponenten

Die Komponenten in unserem Designsystem sind Bausteine, mithilfe derer Sie ein kohärentes und konsistentes Design für Ihre gesamte App erstellen.

Ressourcen

In unserem Designsystem finden Sie eine Bibliothek von Prototypen und technischen Spezifikationen für die verschiedenen Ansichten des Produkts. Diese Spezifikationen sind für den internen Gebrauch durch unsere Designer und Entwickler bestimmt.