--- title: "Randen instellen in je GoodBarber-app" description: "In GoodBarber heeft elke cel, widget en elk veld al een rand van 1 px. Geef hem een kleur, een dikte van 1, 2 of 4 px, of één enkele zijde onder een titel." canonical_url: "https://nl.goodbarber.com/blog/hoe-stel-ik-de-randen-in-mijn-app-in-a1468/" lang: nl date: 2026-10-15 last_updated: 2026-10-16 --- # Hoe stel ik de randen in mijn app in? In een GoodBarber-app wacht er een rand op de cellen, de velden, de knoppen en veel andere elementen. Geef hem een kleur, en hij verschijnt. Je kunt ook zijn dikte instellen, van een discreet lijntje tot een stevig kader, en onder de titel van een widget maar één zijde overhouden. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://nl.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer 15 okt 2026 · Bijgewerkt op 16 okt 2026 · 7 min leestijd ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98391779-68606156.jpg?v=1792075227.358008) 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. ## Wat een rand maakt, in drie instellingen ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98391779-68606157.jpg?v=1792075229.654006) 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. ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98391779-68606158.jpg?v=1792075230.8100052) Dat is alles, en dat is wat de rand zo eenvoudig instelbaar maakt. In het Design System van GoodBarber is het het [Border-atoom](https://nl.goodbarber.com/uxdesign/atom-border/), met zijn sleutels color en size en, voor een kop, één sleutel per zijde. ## De rand zit al op je cellen, je velden en je knoppen ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98391779-68606159.jpg?v=1792075232.218004) 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. ## In een lijst, rand of scheidingslijn, nooit allebei ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98391779-68606160.jpg?v=1792075234.514002) 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. ## Stel je rand in in GoodBarber [Animation (lien du player à ajouter après export et dépôt sur Vimeo) : l'éditeur Édition avancée ouvert sur list › cell › border d'une liste Unit 7 ; color passe à #282727 puis size à 2 (valeurs en bleu, « 2 unsaved changes »), Save, le bandeau « Modifications saved », et dans l'app les séparateurs s'effacent, chaque cellule prend son trait de 2 px et l'écart passe de 32 à 16 px (geste refait sur mapiemap le 14/10 ; le second temps sur les côtés d'une cellule est retiré le 15/10, le natif ne les rend pas)](https://player.vimeo.com/video/1236239005?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Om de rand zelf in te stellen, opent de extensie **Advanced edition** de JSON, de volledige lijst met instellingen, dezelfde als voor [de schaduw](https://nl.goodbarber.com/blog/hoe-stel-ik-de-schaduw-in-mijn-app-in-a1459/). Daar stel je de dikte van elke rand in, de zijden van een widgetkop, en zijn kleur waar het paneel die niet aanbiedt, zoals de lijst van een sectie, met dezelfde sleutels voor een cel, een kop of een widget. De extensie is gratis en installeer je via het menu **‘Extensiewinkel’**, op de pagina ‘Advanced edition’. Je ontwerpschermen krijgen dan rechtsboven de knop { EDITIE }. 1. **Open de JSON.** Klik in het ontwerppaneel van je sectie (**Mijn App › Structuur › je sectie › Het ontwerp bewerken**) of van je widget op { EDITIE }. Klap list, cell en dan border open voor de lijst van een sectie, cell en dan border voor de cellen van een widget, of header en dan border voor zijn kop. De sleutels staan op alfabetische volgorde. 2. **Kies de kleur.** Klik op de waarde van **color** en typ de hexcode (hier #282727). Al gekozen in het paneel van je widget? Ga dan naar de volgende stap. 3. **Stel de dikte in.** Klik op de waarde van **size**, typ een geheel getal (hier 2) en sla op. De rand verschijnt. Een lijst in scheidingslijnmodus gaat naar celmodus zodra haar rand een kleur heeft. 4. **Onderstreep een widgettitel.** Klap in de JSON van je widget header en dan border open. Klik onder border op ‘+ Voeg toe’, typ **top** in het veld newKey, laat ‘Waarde’ geselecteerd, vul 0 in (0 schakelt de zijde uit) en dan ‘Voeg toe’. Doe hetzelfde voor **left** en **right**, en sla op. Alleen de onderste zijde houdt haar lijn, onder de titel. Twee dingen om te onthouden. De dikte blijft een geheel getal, 2.7 wordt 2. En de rand wordt binnen de cel getekend. Op 4 px neemt hij aan elke kant 4 px van de ruimte voor de inhoud. Controleer je volste cellen in het voorbeeld. ## Voor, na: de dikte van de randen maakt de hiërarchie ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98391779-68606162.jpg?v=1792075236.5140007) 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. ## Dunne of dikke rand, welk effect op je app? ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98391779-68606163.jpg?v=1792075238.717999) 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: | Rand | color | size | Het effect | | --------------- | ----------- | ---- | ---------------------------------------------------------------- | | 1. Standaard | transparent | 1 | De cel gaat op in de pagina, de inhoud spreekt voor zich | | 2. Dun en grijs | #A7A7A7 | 1 | Een discrete grens, ideaal als je cellen geen achtergrond hebben | | 3. Scherp | #282727 | 2 | Een duidelijke omlijning, elke cel springt er helder uit | | 4. Dik | #282727 | 4 | Een grafisch kader, voor een app met een uitgesproken stijl | 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](https://dribbble.com/shots/27619835), in neobrutalisme, op Dribbble, met dikke zwarte randen en rechte hoeken. ## Een rand onder de titel, om te scheiden zonder op te sluiten ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98391779-68606164.jpg?v=1792075240.6619976) 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 }). ## Nu jij De volgende stap is simpel. Open het ontwerppaneel van een widget van je Home en geef ‘Randkleur’ een kleur. Krijg je zin in een stevigere lijn, dan staat de knop { EDITIE } op dezelfde plek, en één sleutel, size, is genoeg om te beginnen. Nog geen app? [Maak de jouwe](https://nl.goodbarber.com/create/) met GoodBarber, de Mobile App Builder. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Over de auteur Marie-Pierre Jeffard UI Designer Ik ben UI Designer bij GoodBarber. Design system van de apps, componenten, layouts, website, illustraties, animaties: alles wat ik doe draait om de interface. Wat ik leuk vind aan ons product: universele regels bedenken die op elk scherm werken en ruimte geven aan elke visuele identiteit. De app wordt een podium voor jouw content. Ik hou van wat er eenvoudig uitziet, en van al het onzichtbare werk dat nodig is om daar te komen: de regels, de keuzes en de beperkingen die een interface overeind houden. Daar schrijf ik hier over. [Meer van Marie-Pierre](https://nl.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)