Hoe stel ik de randen in mijn app in?

Zo werkt de rand in een GoodBarber-app, waar hij zit en hoe je zijn kleur en zijn dikte instelt, tot aan het lijntje onder een titel.

Een rand is een lijn die de buitenkant van een element volgt. Hij laat zien waar het element begint en waar het eindigt, en hij maakt zijn vorm zichtbaar, rechte of afgeronde hoeken. Een cel, een veld, een knop, een datumstip, een categorietab, de tabbalk hebben er allemaal een. Drie instellingen beschrijven hem:

• De kleur, op een cel of een widget standaard transparant, te kiezen uit je palet of daarbuiten.
• De dikte, een geheel getal, in pixels. Standaard is dat 1.
• De zijden, op de kop van een widget: boven, rechts, onder en links (top, right, bottom, left), elk aan of uit. Alle vier aan, omkaderen ze de titel. Alleen de onderste onderstreept hem.

Dat is alles, en dat is wat de rand zo eenvoudig instelbaar maakt. In het Design System van GoodBarber is het het Border-atoom, met zijn sleutels color en size en, voor een kop, één sleutel per zijde.

In een GoodBarber-app voeg je geen rand toe, je maakt hem zichtbaar. De cellen, de widgets van de Home en hun koppen hebben er een, van 1 px, transparant. Geef hem een kleur en hij verschijnt. De velden en de knoppen hebben er ook een, en die is al te zien, lichtgrijs op een veld, in de tekstkleur op een omlijnde knop. Dat is ons principe ‘Design by system’, elk element wordt gebouwd met zijn rand, klaar voor gebruik.

Op een widget van de Home kies je de kleur in het ontwerppaneel, via het pad Mijn App › Structuur › Startpagina › je widget › Bewerk. Je vindt er drie kleuren, ‘Randen’ voor de kop, ‘Border color’ voor het kader van de hele widget en ‘Randkleur’ voor elke cel. De dikte stel je in de JSON in, daar komen we zo op.

Voor de velden volstaat één instelling voor de hele app. Die zit onder App-Stijl, met de knop { EDITIE } waarover we het hieronder hebben, onder designComponents, textField, dan border.

Een lijst heeft één regel extra. Als haar cellen geen achtergrond en geen rand hebben, volgen ze elkaar rechtstreeks op de pagina op en scheidt een dun lijntje ze, de scheidingslijn, in de kleur ‘Lijstscheider’ van je Kleuren. Geef de cellen een kleur, op hun achtergrond of op hun rand, en de lijst wisselt van modus. De scheidingslijn verdwijnt vanzelf. Elke cel maakt zich los van haar buren en haar hoeken verschijnen, volgens je vorminstelling. Niets uit te schakelen, niets uit te lijnen.

Zo stapelt een lijst in een GoodBarber-app nooit twee lijnen, het lijntje tussen de rijen of de lijn rond elke cel, en het systeem maakt de keuze. Dat is ons principe ‘No design burden’, zodat ontwerpen nooit een last wordt.

Hier is hetzelfde scherm twee keer. Links staan alle randen op 1 px, in een discreet grijs. Ze bakenen elk element af, maar niets springt eruit, alles weegt even zwaar. Rechts gaan ze naar het zachte zwart van het palet (#282727) en volgt hun dikte de rol van elk element. 1 px voor de navigatiebalk en de evenementcel, 2 px voor de widgetkoppen en de datumstip, 4 px voor het ene uitgelichte nieuwsbericht. Een harde schaduw onder de datumstip maakt het affichegevoel van het scherm af. Het oog weet meteen waar het heen moet.

Diktes verander je in een oogwenk. Probeer, vergelijk in het voorbeeld, en hou wat jouw oog het mooist vindt.

Dezelfde cel kan heel verschillende randen dragen, en elke rand verandert de stijl van je app. De afbeelding toont er vier, van de meest discrete tot de meest uitgesproken:

De eerste rij is de standaardinstelling, die je krijgt zonder iets te schrijven. De drie andere neem je letterlijk over in de editor, sleutel voor sleutel.

Geen van deze randen is beter dan een andere, en ze worden allemaal met dezelfde sleutels ingesteld. De dikste kan in zijn eentje een app haar stijl geven, zoals in ons ontwerp voor een kunstgalerie-app, in neobrutalisme, op Dribbble, met dikke zwarte randen en rechte hoeken.

Mijn favoriete instelling past in één lijn, een lijntje van 1 px onder de titel van een widget, in de lijnkleur van het palet. Je bent hem in de afbeeldingen van dit artikel al tegengekomen. Zoals in een krant scheidt hij de titel van de inhoud zonder iets af te sluiten, en de lijst ademt. Een volledig kader rond de titel zou er een knop van maken.

Zijn kleur kies je in het paneel van de widget, onder ‘Randen’, en zijn zijden in { EDITIE }, dat is de handeling van stap 4 hierboven.

De rand in het kort

• In een GoodBarber-app is de rand er al, 1 px, op de cellen, de widgets en hun koppen, de velden en de knoppen, transparant behalve op velden en omlijnde knoppen.
• Drie instellingen, de kleur, de dikte (een geheel getal in pixels) en, op de kop van een widget, de zijden (top, right, bottom, left), elk aan of uit.
• Rand of scheidingslijn, nooit allebei. Een achtergrond- of randkleur op de cel haalt de scheidingslijn weg en maakt de cel los.
• Op een widget van de Home drie kleuren in het paneel, de kop, de widget, de cel.
• Voor de velden geldt één instelling voor de hele app.
• De dikte en de zijden stel je in de JSON in, met de gratis extensie Advanced edition (knop { EDITIE }).