So richten Sie den Stil Ihrer App ein

Der Stil Ihrer App

Mit „App style“ legen Sie das Gesamtdesign Ihrer App zentral fest: Farben, Schriftarten, Buttons, Formularfelder und mehr.

Klicken Sie im Menü „My App“ auf „App style“.

Die Einstellungen haben zwei Teile: das Wesentliche, dann weitere Optionen. Alles hier gilt für jede Sektion Ihrer App und ersetzt das pro Sektion festgelegte Design.

Farben

Beginnen Sie mit Colors, den Farben.

Ein Farbschema vereint Farben, die gut zusammenpassen. Wählen Sie eines aus der Bibliothek… und die Vorschau zeigt Ihre App damit.

„Magic palette“ schlägt Ihnen ein neues Schema vor… bei jedem Klick.

Passen Sie dann jede Farbe im Detail an: Header, Hauptfarben, Hintergründe, Menü und Buttons.

Klicken Sie auf eine Farbe, wählen Sie per Code oder direkt, dann auf Choose.

Der Header erhält die neue Farbe.

Mit Apply gelten diese Farben in Ihrer ganzen App, mit Cancel behalten Sie Ihre aktuellen. Hier behalten wir sie.

Schriftarten

Weiter mit Fonts, den Schriftarten.

Ein Schriftschema vereint drei passende Schriftarten. Sie können eines aus dieser Liste wählen.

Der Schieberegler regelt die Größe aller Texte auf einmal, ihre Hierarchie bleibt erhalten.

Alle Textebenen wachsen gemeinsam.

Ihre App nutzt acht Textebenen, vom Haupttitel bis zum Fließtext. Um die Schriftart einer Ebene zu ändern, öffnen Sie sie… und wählen Sie eine Schriftart. Alle Google Fonts sind verfügbar; der Plus-Button fügt eine eigene hinzu, wenn ihre Lizenz es erlaubt.

Der Haupttitel erhält die neue Schriftart.

Für jede Ebene können Sie auch Schriftstärke, Zeilenhöhe und Zeichenabstand festlegen.

Auch hier: Mit Apply nutzen Sie diese Schriftarten, mit Cancel behalten Sie Ihre.

Buttons und Formularfelder

Dann folgen die Buttons.

Ihre App nutzt drei Button-Level, die GoodBarber je nach Aktion wählt: Level 1 ist gefüllt, Level 2 umrandet und Level 3 ein einfacher Textlink. Deren Farben stammen aus Ihrem Farbschema.

Wählen Sie ihre Form: Square, Rounded oder Round… und alle Buttons Ihrer App übernehmen sie.

Bei „Form fields“ ist es genauso: Wählen Sie Form, Größe und Position des Titels, über dem Feld oder darin.

Vorschaubilder und Zellen

„Thumbnails and cells“ bestimmt die Form der Bilder und Karten in Ihren Listen: Square, Rounded oder Round.

Hier werden die Ecken rechtwinklig.

In der Desktop-Web-App können Sie auch einen Effekt hinzufügen, wenn die Maus über ein Bild fährt.

Abstände

Spacing legt die Ränder um Ihre Inhalte in Pixel fest.

Mit breiteren Rändern hat der Inhalt mehr Raum um sich herum.

Animationen und Haptik

In den nativen iOS- und Android-Apps können Sie auch wählen, wie sich Seiten aus Listen öffnen, eine leichte Vibration beim Tippen hinzufügen und Elemente beim Scrollen einblenden.

Symbole

Unter Icons wählen Sie die Standardsymbole Ihrer App. Klicken Sie etwa auf das Lesezeichensymbol… und wählen Sie ein anderes aus der Bibliothek.

Das neue Symbol erscheint bei jedem Artikel.

Hintergrund und Trennlinien

Zuletzt der Hintergrund Ihrer App: eine Farbe oder ein Bild sowie die Farbe der Trennlinien.

Der Hintergrund ändert sich auf jeder Seite.

Veröffentlichen

Damit Ihre Nutzer die Änderungen sehen, veröffentlichen Sie das Update Ihrer App über das Menü Publish.