--- title: "Scherpe, afgeronde of ronde hoeken in je GoodBarber-app" description: "In GoodBarber zijn de hoeken van je app scherp, afgerond op 4 px of rond, voor cellen, knoppen en velden. Elke andere straal zet je in de JSON." canonical_url: "https://nl.goodbarber.com/blog/welke-vorm-voor-mijn-app-scherpe-afgeronde-of-ronde-hoeken-a1491/" lang: nl date: 2026-11-05 last_updated: 2026-11-06 --- # Welke vorm voor mijn app: scherpe, afgeronde of ronde hoeken? In GoodBarber kies je de vorm van de hoeken van je app uit drie opties, en de exacte straal, als je dat wilt, stel je in de JSON in. Het is de meest zichtbare signatuur van een app. Scherpe hoeken geven een helder, uitgesproken karakter. Licht afgerond maken ze het zachter. Rond maken ze de app warm en uitnodigend. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://nl.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer [Kies **GoodBarber** als jeFavoriete nieuwsbronKies **GoodBarber** als je](https://www.google.com/preferences/source?q=nl.goodbarber.com) 5 nov 2026 · Bijgewerkt op 6 nov 2026 · 6 min leestijd ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98605395-68813798.jpg?v=1793872363.316664) Dit is wat de vorm verandert in een GoodBarber-app, waar je hem instelt, en hoe je tot de straal van je keuze komt. ## Drie vormen voor de hele app: scherp, afgerond, rond ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98605395-68813799.jpg?v=1793872364.8486726) De vorm is de afronding van de hoeken van je cellen, je miniaturen, je knoppen en je velden, wat vaak afgeronde hoeken heet. In het GoodBarber Design System is dat het [Shape atom](https://nl.goodbarber.com/uxdesign/atom-shape/), en het biedt drie kant-en-klare vormen. **Vierkant**, de hoek is scherp en de straal is 0. **Afgerond**, de straal is 4 pixels, genoeg om te verzachten zonder op te vallen. **Ronde**, hij is 12 pixels op een cel of een miniatuur, en op een knop of een veld neemt hij de volle hoogte, de vorm die designers een pill noemen. Je stelt deze hoeken niet element per element in. Een vorm die je kiest in **Mijn App › App-stijl › Miniaturen en cellen** geldt voor alle lijsten, alle widgets van de Home en hun kopteksten, op al je pagina's. Dat is ons principe ‘Set once, consistent everywhere’, een waarde die je één keer instelt en die overal terugkomt. Knoppen en velden hebben hun eigen optie, ook in App-stijl, onder **Knoppen** en **Formuliervelden**, met dezelfde drie vooraf ingestelde vormen. Zo kun je vierkante cellen en ronde knoppen houden. ## Kleine elementen blijven rond ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98605395-68813800.jpg?v=1793872366.5406818) In een GoodBarber-app met scherpe hoeken is **niet alles vierkant**. Cellen, miniaturen en knoppen wel. Maar **de avatar** van een auteur blijft een cirkel, rond van nature. En andere kleine elementen hebben hun eigen vorm, die niet de vorm volgt die voor de app is gekozen, **het afspeelicoon** van een video, **het label met de duur**, **de datumstip**. Onze templates leveren ze rond. Een cirkel herken je in één oogopslag, ook heel klein, en hij geeft iets aparts aan, een persoon, een actie, een herkenningspunt. **Toch ligt hun vorm niet vast.** De datumstip heeft een eigen schuifregelaar voor de vorm, met drie standen. Zo heeft de app van Unit 7 hierboven, die van een zeefdrukatelier, zijn datumstippen vierkant gemaakt, om zijn keuze voor scherpe hoeken tot het einde door te trekken. ## Stel de vorm van je app in GoodBarber in [Animatie: de vorm Ronde gekozen in Miniaturen en cellen, daarna een straal van 20 ingesteld in de JSON](https://player.vimeo.com/video/1243651729?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Alles gebeurt in **Mijn App › App-stijl**. Drie panelen bieden daar dezelfde keuze, Vierkant, Afgerond of Ronde. **Miniaturen en cellen** stelt de cellen, de miniaturen, de kopteksten en de achtergronden van widgets in. **Knoppen** stelt de knoppen in, en **Formuliervelden** de velden. Je keuze wordt bij de klik opgeslagen, en het voorbeeld werkt zich bij. Met de templates Bold, Minimal en Clean TabBar heeft de tabbalk een eigen instelling, ‘Hoekstijl’, in **Mijn App › Structuur › Menu › Instellingen**. Voor een straal die niet bij de drie opties hoort, opent de gratis 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/) en [de randen](https://nl.goodbarber.com/blog/hoe-stel-ik-de-randen-in-mijn-app-in-a1468/). Je installeert hem via het menu **‘Extensiewinkel’**, op de pagina ‘Advanced edition’, en je ontwerpschermen krijgen rechtsboven de knop { BEWERKING }. 1. **Open de JSON van de app.** Klik in **Mijn App › App-stijl › Miniaturen en cellen** op { BEWERKING }. De editor opent op de algemene instellingen van de app, op alfabetische volgorde. Klap shape open, daar vind je de sleutel **type**, met de waarde van je keuze (sharp, rounded of round). 2. **Ga naar een vrije straal.** Klik op de waarde van type en vervang hem door **custom**. 3. **Geef je straal.** Klik onder shape op ‘+ Voeg toe’, typ **radius** in het veld newKey, laat ‘Waarde’ geselecteerd, vul een geheel getal in pixels in (hier 20) en dan ‘Voeg toe’. De sleutel verschijnt, gemarkeerd met ‘Nieuw’. Klik op ‘Opslaan’. Cellen, miniaturen, kopteksten en achtergronden van widgets nemen deze straal over. Knoppen en velden houden de optie die in hun paneel is gekozen, en de kleine ronde elementen hun eigen vorm. Een tip. De straal is een geheel getal, en je leest hem op de schaal van een pagina, niet van één losse cel. Vergelijk in het voorbeeld voordat je kiest. ## Voor, na: een straal van 20 verandert het karakter van een app ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98605395-68813802.jpg?v=1793872368.2766917) Hier zie je twee keer hetzelfde scherm, dat van Eastside Music Workshop, een muziekschool. Links is alles vierkant, de optie Vierkant voor miniaturen en cellen, de tabbalk met ‘Hoekstijl’ op Vierkant, de datumstip in de eerste stand van zijn schuifregelaar. De app is strak, en een beetje streng voor een school. Rechts zijn drie instellingen veranderd, het object shape op custom met een straal van 20, de tabbalk op ‘Volledig afgerond’ en de datumstip op de ronde optie. Verder is er niets veranderd, niet de kleuren, niet de lettertypen, niet de witruimtes. En toch krijgt de app een ander karakter. Hij wordt uitnodigend, zoals een school waar jong en oud muziek komen leren. Meer doet een straal niet, en juist daarom verdient hij het om gekozen te worden in plaats van geaccepteerd. ## Scherpe, afgeronde of ronde hoeken, welk effect op je app? ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98605395-68813803.jpg?v=1793872369.9167008) Drie apps, drie vormen, en elk vertelt iets anders. Van links naar rechts toont de afbeelding scherpe hoeken voor de app van een zeefdrukatelier, afgeronde voor die van een natuurhistorisch genootschap, ronde voor die van een muziekschool. De tabel voegt de vrije straal toe. | Vorm | type | Straal | Het effect | | --------------- | ------- | ------------------------------------------- | -------------------------------------------------------------- | | 1. Vierkant | sharp | 0 | Helder, uitgesproken, als een affiche | | 2. Afgerond | rounded | 4 px | Verzacht zonder op te vallen, de meest discrete keuze | | 3. Ronde | round | 12 px, de volle hoogte op knoppen en velden | Zacht, uitnodigend, als een app voor iedereen | | 4. Vrije straal | custom | het getal van je keuze | Je signatuur, buiten de schaal, zoals de 20 van het voor en na | De eerste drie rijen kies je in App-stijl. De vierde stel je in de editor in, met twee sleutels. Geen enkele vorm is beter dan een andere. Elk van deze drie apps houdt stand dankzij zijn eigen vorm, omdat die hetzelfde zegt als zijn [kleuren](https://nl.goodbarber.com/blog/hoe-verander-ik-de-kleuren-van-mijn-app-a1478/) en zijn lettertypen. ## Een straal van 20 en ronde knoppen, voor een warme app ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98605395-68813804.jpg?v=1793872371.376709) Mijn favoriete instelling is die van Eastside, een straal van 20 op de cellen, ronde knoppen en een ronde tabbalk. Hij komt uit het logo van de school, drie afgeronde bogen, en die curve komt terug in elke cel en elke knop. Met zulke royale rondingen wordt elke cel een duidelijk afgebakend object op de achtergrond, en de ronde knoppen vallen meteen op. De straal van 20 zet je in de JSON, met de drie stappen van ‘Stel de vorm van je app in GoodBarber in’. Knoppen en velden gaan naar de optie Ronde, en de tabbalk naar ‘Volledig afgerond’. **De vorm in het kort** - In een GoodBarber-app kies je de vorm van de hoeken uit drie opties, **Vierkant** (0), **Afgerond** (4 px) en **Ronde** (12 px, of de volle hoogte op knoppen en velden). - Een vorm die je kiest in **App-stijl › Miniaturen en cellen** geldt voor alle cellen, miniaturen, kopteksten en achtergronden van widgets. Knoppen en velden hebben dezelfde keuze, in hun eigen paneel. - De tabbalk heeft een eigen instelling, **‘Hoekstijl’**, met de templates Bold, Minimal en Clean TabBar. - Sommige kleine elementen **volgen de vorm van de app niet**. De avatar is rond van nature, het afspeelicoon, de duur en de datumstip hebben hun eigen vorm, rond in onze templates. - Voor een precieze straal ga je via de JSON met de gratis extensie **Advanced edition**, door type op custom te zetten en radius toe te voegen, een geheel getal. ## Nu jij Open **Mijn App › App-stijl › Miniaturen en cellen** en probeer de drie opties, het voorbeeld volgt. Als je zin krijgt in een eigen straal, voegt de gratis extensie Advanced edition de knop { BEWERKING } toe op hetzelfde scherm, en twee sleutels zijn genoeg. Nog geen app? [Maak de jouwe](https://nl.goodbarber.com/create/) met GoodBarber, de Mobile App Builder. Volg GoodBarber op Google [![Add as a preferred source on Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-en.172e670ec003.png)](https://www.google.com/preferences/source?q=nl.goodbarber.com) ![](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/)