Hoe verander ik de kleuren van mijn app?

Dit is de rol van elke kleur, hoe je ze verandert voor de hele app, en hoe je één enkel element een eigen kleur geeft.

In het paneel Kleuren hebben de vier ‘Primaire kleuren’ en daarna de twee ‘Secundaire kleuren’ elk een rol, overal in de app dezelfde. Hier zijn ze, in de volgorde van het paneel, zoals op de afbeelding.

1. De hoofdtekst, de titels en de tekst van de artikelen.
2. Het accent, de informatie onder de titel, het adres van een evenement, het icoon van een geselecteerde actie.
3. De secundaire tekst, de informatie boven de titel (datum, categorie), de auteurs, de link naar de volledige lijst.
4. De achtergrond van de vlakken, de cellen en de widgetkoppen.
5. De randen, rond de cellen.
6. De secundaire achtergrond, die van een widget als je hem er een geeft.

In een GoodBarber-app heeft een kleur dus een functie, geen plek. Is je accent blauw, dan wordt alles wat het accent draagt blauw, van scherm tot scherm. En als je van tint verandert, blijft tekst tekst en achtergrond achtergrond. De zones van de app, de ‘Kop’, het menu, de knoppen, hebben hun eigen instellingen, in hetzelfde paneel. Het geel van de datumstippen, de 7 op de afbeelding, komt zo uit ‘Overige knoppen’.

Hier is hetzelfde scherm twee keer, en tussen de twee is maar één kleur veranderd, het accent. Links heeft het de kleur van de tekst, en alles leest op hetzelfde niveau. Rechts wordt het het blauw van het merk, en daarmee ook de informatie onder de titel van de mededeling en het adres van elke repetitie, met zijn icoon. Het oog vindt meteen wat nuttig is. Titels, achtergronden en lettertypen zijn onaangeroerd gebleven.

Eén instelling reikt ver. In een van onze GoodBarber-apps veranderden we de kleur van de hoofdtekst, en dat kleurde in één keer 95 instellingen opnieuw, in de hele app, zonder één scherm te openen. Dat is ons principe ‘No design burden’, zodat consistentie nooit op jouw schouders rust.

Om je instelling te beoordelen, kijk je naar het voorbeeld voordat je toepast, en blader je daarna door twee of drie pagina's. Springt het accent in het oog waar het niet zou moeten, dan moet je waarschijnlijk het element bijwerken dat het draagt, in zijn ontwerppaneel.

Deze vier apps gebruiken dezelfde rollen, en toch lijken ze niet op elkaar. Het verschil zit in de instellingen waarin elke app haar kleur zet.

• Eastside Music Workshop zet haar blauw in het accent, dat hier het adres van een repetitie kleurt, en haar geel in ‘Overige knoppen’, die de datumstippen kleuren.
• Blandas Astronomy Club zet haar amber in de instellingen van haar tabbalk, en hier licht alleen de huidige tab op.
• Unit 7 legt haar fluogroen als achtergrond onder de actieve tab, een vol kleurvlak met de naam van de tab erop.
• Tweed & Cheviot zet haar rood in het accent, maar toont de informatie onder de titel alleen waar die telt, hier het getal dat je moet onthouden.

Waar je de jouwe zet, kies je zelf. Vraag je af wat ze moet zeggen, wat actief is, wat nieuw is, wat op een handeling wacht.

Mijn favoriete instelling valt niet op. Voor de achtergrond van de vlakken gebruik ik nooit #FFFFFF, maar een licht getint wit, #FFF8ED bij Eastside, op een ‘Achtergrond van de app’ die een stapje donkerder is, #EDE7DD. De cellen komen los zonder schaduw, en het scherm krijgt textuur, zoals papier. Voor de hoofdtekst ook nooit #000000, maar een gekleurd bijna-zwart, hier #23252B. Puur zwart op wit geeft het maximale contrast, 21:1, en dat vind ik hard bij lang lezen. #23252B op #FFF8ED houdt 14,5:1, het dubbele van het strengste niveau van de WCAG (7:1), met zachtheid erbij.

Drie waarden, en de hele app wint erbij, de titels, de teksten, de cellen. Dat maakt de rol mogelijk, één keer instellen, overal geldig.

De kleuren in het kort

• In een GoodBarber-app stel je de kleuren van de hele app in één paneel in, twintig instellingen, waaronder zes kleuren die elk een rol hebben.
• Een kleur heeft een functie, geen plek, de hoofdtekst, het accent, de secundaire tekst, de achtergrond van de vlakken, de randen, de secundaire achtergrond.
• Alles stel je in het paneel Kleuren in, een thema, het Magisch palet of één enkele kleur, en dan ‘Toepassen’, dat de hele app opnieuw kleurt.
• Een element pas je aan in het paneel van zijn sectie of zijn widget, of sleutel voor sleutel met de gratis extensie Advanced edition.
• Stel eerst het thema in, daarna de details.
• Twee instellingen van een designer, nooit puur wit voor de vlakken, nooit puur zwart voor de tekst.