Hoe u de algemene stijl van uw app instelt

Hallo en welkom in uw GoodBarber back office!

Vandaag hebben we het over een heel krachtig hulpmiddel voor het design van uw app: het menu Algemene stijl.

Met de Algemene stijl stuurt u het algemene design van uw app vanuit één menu.

De hier gekozen kleuren, lettertypes en effecten gelden voor elke sectie van de app.

Let op: elke wijziging in dit menu werkt door in ALLE secties van uw app.

Laten we kijken.

Ik ga naar het menu Mijn app > Design > Algemeen design

Ik klik op Algemene stijl.

Eerst kiest u een kleurenthema.

Een kleurenthema is een combinatie van kleuren die bij elkaar passen. De Algemene stijl bevat een bibliotheek met kleurenthema's.

Voor de bibliotheek klik ik op Kleurenthema wijzigen.

Zoals u ziet, heb ik keuze genoeg.

Wil ik liever mijn huidige thema aanpassen, dan klik ik op Bewerken en onderaan de pagina op Een nieuw thema maken.

Ik kies alleen nog mijn kleuren.

Nu de typografie.

Voor de weergave van tekst in de app is er een hiërarchie.

8 niveaus tonen titels, ondertitels en lopende tekst.

Ik bepaal de tekengrootte.

Het lettertype voor elk niveau.

Afhankelijk van het lettertype kan ik ook de snede kiezen.

Verder met de knoppen.

Voor de secties van uw app die tot een actie uitnodigen, kies ik de vorm van de knoppen.

Met een klik hier zie ik het resultaat in het voorbeeld.

Ook bij de knoppen zijn er meerdere niveaus. Hun design hangt af van het kleurenthema van de app; om alles te laten kloppen zijn er per thema meerdere varianten.

Dit zijn de designsoorten per niveau:

- Niveau 1: gekleurde achtergrond, geen omlijning.

- Niveau 2: doorzichtige achtergrond, gekleurde omlijning en tekst.

- Niveau 3: doorzichtige achtergrond, geen omlijning.

Daarna de effecten bij het zweven over afbeeldingen (alleen in de PWA op desktop).

En ten slotte de overige elementen, zoals het terugpijltje dat tijdens het navigeren in de header verschijnt. Dat pictogram kunt u ook instellen bij het ontwerpen van uw header.

Hier pas ik mijn wijzigingen toe.

Denk eraan: die wijzigingen overschrijven het hele huidige design, ook dat van uw losgekoppelde secties!

Ik vind mijn app zo perfect! En u?

Tot snel bij een nieuwe tutorial!