--- title: "Modulair ontwerp-functies om een app te maken - Modulair ontwerp app maken" description: "Maak gebruik van de beste no-code appbouwer om een prachtig ontwerp voor uw app te maken" canonical_url: "https://nl.goodbarber.com/feature-index/design/" lang: nl --- # Modulair ontwerp Maak gebruik van de beste no-code appbouwer om een prachtig ontwerp voor uw app te maken - [Algemeen ontwerp](#generaldesign) - [Startpagina](#home) - [Header](#header) - [Navigatiemodus](#navigationmode) - [De navigatie aanpassen](#customnav) - [Menu](#menu) - [Ontwerpmiddelen](#design_ressources) - [Secties](#sections) ## Algemeen ontwerp+ [https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Global_Style.ec2e912aefe2.mp4](https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Global_Style.ec2e912aefe2.mp4) - ### Afgestemd op elk apparaat GoodBarber heeft het ontwerp volledig onder controle, van mobiel tot desktop. Onze ontwerpelementen passen zich perfect aan elk schermformaat aan voor een consistente kwaliteit op elk apparaat, smartphone, tablet, laptop of desktop. - ### Globale stijltool Beheer de algehele stijl van uw app vanuit één enkel menu: het kleurenthema, typografie, actieknoppen, muis-over-effecten en andere elementen. Maak uw ontwerp en pas het met één klik toe op uw volledige app. - ### Achtergrondbeheer afbeeldingen Met GoodBarber kunt u afbeeldingen in uw ontwerp integreren en deze op de achtergrond weergeven. - ### Aanpasbare marges Pas de marges van uw project aan: horizontaal voor alle schermen, alleen verticaal voor weergave op mobiele schermen. - ### Muis-over-effecten op teksten Voeg een muis-over-effect toe aan uw teksten: onderstrepen, helderder of donkerder maken van de lettertypekleur. - ### Muis-over-effecten op afbeeldingen Voeg een muis-over-effect toe aan uw afbeeldingen: inzoomen, uitzoomen of ondoorzichtigheid. - ### Uw thema veranderen U kunt uw thema met één klik wijzigen terwijl u uw navigatiemodus en de algehele architectuur en inhoud van uw project behoudt. - ### Voor elk doel een oplossing Door de diversiteit aan sjablonen, evenals de verscheidenheid en capaciteit van de beschikbare aanpassingsopties, kunt u een app maken die is afgestemd op uw doel. - ### Stijlbewerker Beheer uw stijlen op globaal niveau om te zorgen voor een samenhangend ontwerp in de verschillende weergaven van de app. - ### Aanpassingenlog De GoodBarber-backoffice bevat een log met aanpassingen waarmee u toegang krijgt tot een geschiedenis van alle aanpassingen die op uw project zijn uitgevoerd. - ### Het ontwerp bijwerken zonder opnieuw te bouwen Updates met betrekking tot het ontwerp van uw project vereisen niet dat u uw app opnieuw opbouwt. Na goedkeuring worden ze automatisch meegenomen en zijn ze zichtbaar voor uw gebruikers, zonder extra actie. - ### Afbeeldingenbibliotheek Sla afbeeldingen op in uw persoonlijke bibliotheek zodat u ze gemakkelijk kunt openen voor later gebruik. - ### Selectieve formaataanpassing van de afbeelding Afbeeldingen worden verkleind tot verschillende verhoudingen, gecomprimeerd en in de cache opgeslagen om de beste combinatie van zwaarte, prestaties en weergavekwaliteit te bereiken. De laadtijden worden geoptimaliseerd zonder de weergavekwaliteit in gevaar te brengen. - ### Monochroom effect Dankzij de afbeeldingseditor die is geïntegreerd in de GoodBarber-backoffice, kunt u een monochroom effect aan uw afbeeldingen toevoegen. - ### Blureffect Voeg een blureffect toe aan uw afbeeldingen met één klik, rechtstreeks vanuit de GoodBarber-backoffice, dankzij de geïntegreerde afbeeldingseditor. - ### Zoomeffect Pas zoomeffecten toe bij rollover op de afbeeldingen, op de desktopversie van uw project. - ### Assistent voor het genereren van pictogrammen en opstartschermen De backoffice van GoodBarber biedt een hulpmiddel om u te helpen bij het maken van uw app-pictogram en het startscherm vanuit het niets. - ### Verloopbeheer Integreer kleurovergangen in het ontwerp van uw app door er een te kiezen uit de volledige bibliotheek (die de service [https://uigradients.com](https://nl.goodbarber.com) gebruikt). Nadat u er een heeft gekozen, wordt het verloop automatisch gegenereerd en toegepast op het ontwerp van uw app. - ### Genius Palette Laat de AI je kleurenpalet maken. Met één klik genereert Genius Palette een samenhangende, professionele kleurenset, klaar om op je hele design toe te passen. - ### Design System GoodBarber rust op een geformaliseerd design system: fundamenten, atomen en componenten, plus een bibliotheek met kant-en-klare layouts. De regels gelden standaard voor elke pagina, zodat een project van scherm tot scherm samenhangend blijft. - ### Haptische feedback en animaties Native apps dragen een zintuiglijke laag: haptische feedback onder de vinger, vloeiende overgangen van een lijst naar het detail, en beweging die op het scrollen antwoordt. - ### Vorm van knoppen en velden Bepaal de vorm van alle knoppen in je app — vierkant, afgerond of rond — én de vorm, de grootte en de labelpositie van je formuliervelden. - ### App Walkthrough Leid je gebruikers bij de eerste start door een interactieve rondleiding. Kies hoe hij wordt getoond en breng de schermen tot leven met Lottie-animaties. ## Startpagina+ [https://portal.ww-cdn.com/portal_static/images/radio/home_buildin.6c6c5f4784f2.mp4](https://portal.ww-cdn.com/portal_static/images/radio/home_buildin.6c6c5f4784f2.mp4) - ### Modulaire startpagina De Startpagina-sectie is het eerste gedeelte van uw app, het bestaat uit widgets en is volledig flexibel. Met de grote verscheidenheid aan beschikbare widgets, kunt u met de Startpagina uw project bouwen op een manier die uw app echt uniek maakt. - ### Activeren of deactiveren U kunt ervoor kiezen om de Startpagina-sectie in uw app te activeren of te deactiveren. Als u deze deactiveert, is de navigatie uitsluitend afhankelijk van de navigatiemodus die u kiest. - ### 77 widgets Met widgets heeft u een unieke flexibiliteit om de startpagina van uw app te organiseren. - ### Contentwidgets Content apps Maak de startpagina van uw app dynamischer met widgets die automatisch worden vernieuwd telkens wanneer er nieuwe inhoud in uw project wordt gepubliceerd. - ### Navigatiewidgets Content apps Bied directe toegang tot de belangrijkste delen van uw app met widgets voor navigatie. De perfecte manier om uw gebruiker te begeleiden naar de belangrijkste functie van uw project. - ### e-commercewidgets eCommerce apps Maak directe toegang tot uw producten en collecties vanaf de startpagina van uw app met behulp van de widget voor productlijsten en de widgets voor collectielijsten - ### Promowidget eCommerce apps Geef een reclameboodschap weer zodra gebruikers op de startpagina van uw winkel aankomen. U kunt een product, een collectie en een lijst met collecties highlighten. De promotionele widget is zeer flexibel en zal u helpen uw omzet te verhogen. - ### Semi-dynamische widgets Met deze widgets kunt u een startpagina bouwen die automatisch wordt bijgewerkt wanneer nieuwe inhoud wordt gepubliceerd, terwijl deze de gebruiker een duidelijke architectuur biedt als het gaat om het navigeren door de app. - ### Andere widgets Deze categorie bundelt nuttige widgets zoals de zoek-, nieuwsbrief-, advertentie-, aftel- en zelfs HTML-widgets. - ### Drag-and-drop-constructie Het is eenvoudig om de verschillende widgets op uw startpagina te rangschikken. Sleep uw widgets gewoon naar de gewenste plek. - ### Sorteeropties Toegang tot een breed scala aan opties voor het beheren van de weergavevolgorde van de elementen in uw contentwidgets: op datum, populariteit, alfabetische volgorde, willekeurig,... - ### Aantal items Het aantal elementen dat door een widget wordt weergegeven, kan voor elke widget worden ingesteld om maximale flexibiliteit te bieden bij het organiseren van uw startpagina. - ### Widgets met eigen code Bouw je eigen widgets in HTML, CSS en JavaScript en zet ze op de home naast de standaardwidgets. ## Header+ [https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Logo_Title.b8e1067a5361.mp4](https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Logo_Title.b8e1067a5361.mp4) - ### Aanpasbare navigatiebalk De navigatiebalk is een strategische locatie binnen uw app. Daarom heeft u volledige controle over het ontwerp en de functies. - ### Aanpasbare pictogrammen Elke link die aan uw navigatiebalk wordt toegevoegd, krijgt een pictogram toegewezen. Dit pictogram is volledig aanpasbaar. - ### Snelkoppelingen toevoegen De navigatiebalk kan tot zes snelkoppelingen weergeven naar belangrijke delen van uw app of externe bronnen. - ### Snelkoppelingen beheren Door de uitstraling van uw navigatiebalksnelkoppelingen aan te passen, behoudt u een samenhangende gebruikerservaring in uw hele app. - ### Automatische indeling Op basis van het aantal beschikbare snelkoppelingen in de navigatiebalk, wordt de beste indeling automatisch beheerd door de app. - ### Aanpasbare snelkoppelingen Het ontwerp van elke navigatiebalksnelkoppeling kan worden aangepast. Krijg toegang tot een bibliotheek met meer dan 1000 vectoriële pictogrammen, voeg uw eigen pictogrammen toe en pas de linktitels aan. - ### Effectopties Content apps Pas transparantie, blur of verbergende effecten toe op de header. Deze subtiele effecten kunnen uw app de finishing touch geven en u onderscheiden van de massa. - ### Automatisch effectenbeheer Effecten worden automatisch door GoodBarber op de header toegepast op basis van het apparaat en het besturingssysteem waarmee de app wordt weergegeven. - ### Aanpasbare header per sectie Een specifieke header en gerelateerde navigatiebalk kunnen worden ingesteld voor elke sectie binnen uw app. ## Navigatiemodus+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/navigation_mode.82959cd1bbdf.jpg) - ### Aanpasbare navigatiemodi Kies de navigatiemodus van uw app uit de voorgestelde sjablonen. Elk menu kan tot in het kleinste detail worden aangepast, met een onbeperkt aantal combinaties, om elk project uniek te maken. - ### Vegen Een belangrijke navigatiemodus voor apps met een groot aantal secties. - ### Kleine veeg Bied verticale navigatie waarbij elk item in uw app wordt geïllustreerd door een pictogram. - ### Tabbladbalk Een klassieker, de tabbladbalk is een navigatiemodus die snelle toegang geeft tot de belangrijkste secties binnen uw app. - ### Raster Het raster geeft de navigatie van uw app op volledig scherm weer, elk item wordt weergegeven door een pictogram. - ### Slate De slate geeft de navigatie van uw app op volledig scherm weer, elk item wordt weergegeven met tekst. - ### Vanuit het niets Content apps Met het vanuit het niets-menu kunt u uw navigatie coderen door uw eigen HTML-code in te voegen. - ### Onzichtbaar Content apps Als u geen navigatiemenu voor uw app wilt weergeven, kunt u de onzichtbare navigatiemodus inschakelen. - ### Floating TabBar Een TabBar die losstaat van de schermrand en boven je content zweeft. In native apps staat hij onderaan; in de web app verschijnt hij als banner onder de header. ## De navigatie aanpassen+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/custom_navigation.8cd1ea29a274.jpg) - ### Header, hoofdtekst en voettekst Elk navigatiemenu bestaat uit drie verschillende delen: de header, hoofdtekst en voettekst, elk volledig aanpasbaar. Het weergeven van de header en voettekst is niet verplicht. - ### Logoweergave Geef uw logo weer in de header van uw navigatiemodus door uw logo te uploaden of rechtstreeks tekst toe te voegen. - ### Link naar gebruikersprofiel Voeg een directe link toe naar het gebruikersprofiel in uw navigatiemodus. Bewerk de tekst, het pictogram en de linkkleur. - ### Snelkoppelingen toevoegen Voeg snelkoppelingen toe in uw navigatiemodus en laat gebruikers gemakkelijk toegang krijgen tot elke sectie van uw app, een externe link of zelfs een actie uitvoeren zoals uitloggen, een sms of een e-mail verzenden. - ### Aanpasbare scheidingstekens Voeg scheidingstekens toe in uw navigatiemenu en pas hun kleur en pixelhoogte aan. - ### Aanpasbaar linkgebied Stel uw navigatiemenu samen door links naar secties in uw app toe te voegen. - ### Copyright Voeg een copyrightgebied toe in het navigatiemenu van uw project. Selecteer de kleur en tekst, evenals het lettertype en de tekengrootte. - ### Geavanceerde ontwerpopties GoodBarber maakt geavanceerde aanpassing van het navigatiemenu-ontwerp mogelijk. Lettertype, kleuren, uitlijning, pictogram, celhoogte, titel toevoegen... - ### Standaardweergave menu Voor de veeg-, kleine veeg-, raster- en slatemenu's selecteert u de standaardstatus van het menu: altijd verborgen of altijd weergegeven wanneer de app wordt gestart. ## Menu+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/templates.493d19427b54.jpg) - ### 10 intermediaire menusjablonen GoodBarber biedt een menugedeelte om navigatie op meerdere niveaus in uw app mogelijk te maken. U kunt kiezen uit tien sjablonen. - ### Een afbeelding voor elk element Kies een navigatie waarbij elk item van het menu een afbeelding met hoge resolutie is, om een perfect ontwerp te krijgen, ongeacht de schermgrootte waarin uw app wordt weergegeven. - ### Geavanceerd ontwerp Pas verloop- of blureffecten toe op afbeeldingen. Pas de positie van de tekst en de logokeuze voor uw menu-items aan. - ### Automatische constructie Op basis van het aantal vermeldingen in uw menu, zal GoodBarber een automatische indeling uitvoeren om er zeker van te zijn dat een aantrekkelijk display altijd behouden blijft. - ### Menu met eigen code Schrijf je menu helemaal zelf in HTML, CSS en JavaScript, met de ingebouwde editor en de GoodBarber App API, voor een navigatie die op geen enkele andere lijkt. ## Ontwerpmiddelen+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-7.50744db5f733.jpg) - ### Pictogrammengalerij Een collectie van meer dan 1000 pictogrammen die speciaal door ons team van ontwerpers zijn gemaakt en in drie verschillende sets zijn onderverdeeld, is beschikbaar in uw backoffice. - ### Aanpasbare pictogrammen Creëer uw eigen pictogramcollectie door uw eigen pictogrammen of afbeeldingen te uploaden, rechtstreeks vanuit de backoffice van uw project, in .png-formaat, 260px bij 260px. - ### Professionele thema's De backoffice van GoodBarber biedt 25 professionele thema's die zijn gemaakt door ons team van deskundige ontwerpers. Geïnspireerd door onze mobile-first-filosofie, zijn ze ontworpen om perfect aan te passen aan elk apparaat, in overeenstemming met de huidige trends en volledig aanpasbaar. - ### Google Fonts-bibliotheek GoodBarber beschikt over een set van meer dan 400 Google Fonts die direct in de backoffice kunnen worden gebruikt, zonder dat er extra code moet worden ingesloten. - ### Pexels-bibliotheek GoodBarber-klanten hebben rechtstreeks vanuit de backoffice toegang tot de Pexels-fotobibliotheek met meer dan 500.000 afbeeldingen met een hoge resolutie. - ### Afbeeldingen geavanceerd zoeken De Pexels-bibliotheek in de GoodBarber-backoffice is uitgerust met een geavanceerde zoekmachine om afbeeldingen te sorteren op thema, trefwoord of kleur. - ### Eigen lettertypes Upload je eigen lettertypes — .woff2 voor de web app, .ttf of .otf voor native apps — en vind ze terug in elke lettertypekiezer van de back office, naast de Google Fonts-bibliotheek. - ### Google Material Icons Voeg de Google Material-iconenset toe aan je app, in de stijlen vol, afgerond, contour en tweekleurig, en gebruik hem overal waar iconen verschijnen, navigatiemenu inbegrepen. ## Secties+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-8.c045955904b2.jpg) - ### 30 verschillende soorten secties GoodBarber biedt 30 verschillende soorten secties die u kunt gebruiken om uw project te bouwen. - ### Geavanceerde instellingen voor de te weergeven informatie Kies voor elke sectie de informatie die u wilt weergeven, zoals de datum of de auteur van een artikelsectie. - ### Toolbar aanpassen Content apps Kies voor elke sectie de acties die beschikbaar zijn in de werkbalk: opmerkingen, delen, tekstgrootte, bladwijzers voor het item. - ### Toegang tot reacties Content apps Geef gebruikers toegang tot de pagina met reacties vanuit elke inhoudsweergave. - ### Directe link om te delen op sociale media Voeg directe links naar sociale media toe op elke inhoudspagina. - ### Progressief laden van pagina's Intuïtieve gebaren stellen de gebruiker in staat om op aanvraag extra inhoud weer te geven bij het bezoeken van een sectie. Dit zorgt voor een snellere weergave terwijl de gebruikerservaring wordt verbeterd. - ### Globale zwevende knop Een actieknop die boven je content zweeft en in de hele app bereikbaar blijft, met het label van jouw keuze. ## Klaar om je app te bouwen? [Begin gratis](https://nl.goodbarber.com/create/)[Bekijk de prijzen](https://nl.goodbarber.com/pricing/content/)