Hoe je de stijl van je app instelt

App style

Met ‘App style’ bepaal je het ontwerp van je hele app op één plek: kleuren, lettertypen, knoppen, formuliervelden en meer.

Klik in het menu ‘My App’ op ‘App style’.

De instellingen bestaan uit twee delen: eerst de basis, dan extra opties. Alles hier geldt voor elke sectie van je app, en vervangt het ontwerp dat je per sectie hebt ingesteld.

Kleuren

Begin met Colors.

Een kleurenthema is een set kleuren die goed samengaan. Kies er een uit de bibliotheek… en de preview toont je app met dat thema.

‘Magic palette’ stelt je een nieuw thema voor… bij elke klik.

Pas daarna elke kleur in detail aan: de header, de hoofdkleuren, de achtergronden, het menu en de knoppen.

Klik op een kleur, voer een code in of kies er een en klik dan op Choose.

De header krijgt de nieuwe kleur.

Klik op Apply om deze kleuren in je hele app te gebruiken, of op Cancel om je huidige kleuren te houden. Hier houden we ze.

Lettertypen

Daarna Fonts.

Een lettertypethema combineert drie lettertypen die goed samengaan. Je kunt er een kiezen uit deze lijst.

De schuifregelaar stelt de grootte van alle teksten tegelijk in, en behoudt de onderlinge hiërarchie.

Alle tekstniveaus worden samen groter.

Je app gebruikt acht tekstniveaus, van de hoofdtitel tot normale tekst. Wil je het lettertype van een niveau wijzigen? Open het dan… en kies een lettertype. Alle Google Fonts zijn beschikbaar. Met de plusknop voeg je een eigen lettertype toe, als de licentie dat toestaat.

De hoofdtitel krijgt het nieuwe lettertype.

Per niveau kun je ook de letterdikte, de regelhoogte en de letterafstand instellen.

Klik ook hier op Apply voor deze lettertypen, of op Cancel om de jouwe te houden.

Knoppen en formuliervelden

Dan is Buttons aan de beurt.

Je app gebruikt drie knopniveaus, die GoodBarber per actie kiest: niveau 1 is gevuld, niveau 2 is omlijnd en niveau 3 is een eenvoudige tekstlink. Hun kleuren komen uit je kleurenthema.

Kies hun vorm: Square, Rounded of Round… en elke knop van je app krijgt die vorm.

Bij ‘Form fields’ werkt het net zo: kies de vorm, de grootte en waar de titel staat, boven of in het veld.

Miniaturen en cellen

‘Thumbnails and cells’ bepaalt de vorm van de afbeeldingen en kaarten in je lijsten: Square, Rounded of Round.

Hier worden de hoeken recht.

In de webapp op desktop kun je ook een effect toevoegen, als de muis over een afbeelding beweegt.

Marges

Spacing bepaalt de marges rond je inhoud, in pixels.

Met bredere marges krijgt de inhoud meer ruimte eromheen.

Animaties en haptische feedback

In de native iOS- en Android-apps kies je ook hoe een pagina uit een lijst opent, voeg je een lichte trilling toe als gebruikers tikken en laat je elementen verschijnen bij het scrollen.

Iconen

In Icons kies je de standaardiconen van je app. Klik bijvoorbeeld op het bladwijzericoon… en kies een ander uit de bibliotheek.

Het nieuwe icoon staat nu bij elk artikel.

Achtergrond en scheidingslijnen

Tot slot de achtergrond van je app: een kleur of afbeelding, en de kleur van de scheidingslijnen.

De achtergrond verandert op elke pagina.

Publiceren

Publiceer de update van je app via het menu Publish, zodat je gebruikers de wijzigingen zien.