--- title: "Modular Design features to make an app - Modular Design app builder" description: "Enjoy the best no-code app builder to create a beautiful design for your app" canonical_url: "https://www.goodbarber.com/feature-index/design/" lang: en --- # Modular Design Enjoy the best no-code app builder to create a beautiful design for your app - [General Design](#generaldesign) - [Home](#home) - [Header](#header) - [Navigation mode](#navigationmode) - [Customizing the navigation](#customnav) - [Menu](#menu) - [Design resources](#design_ressources) - [Sections](#sections) ## General Design+ [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) - ### Tailored to each device GoodBarber has got design fully covered from mobile to desktop. Our elements of design perfectly adapt to each screen size for consistent quality on each device, smartphone, tablet, laptop or desktop. - ### Global Style Tool Manage your app's overall style from one, single menu: the color theme, typography, action buttons, hover effects, and other elements. Create your design and apply it to the entirety of your app, in one click. - ### Images background management GoodBarber lets you integrate images within your design and display them in the background. - ### Customizable margins Customize the margins of your project—horizontal for all screens, vertical only for mobile screens display. - ### Hover effects on texts Add a Hover effect on your texts: underlining, brightening or darkening of the font color. - ### Hover effects on images Add a Hover effect on your images: zoom in, zoom out or opacity. - ### Changing your theme You can change your theme in one click while maintaining your navigation mode and the overall architecture and content of your project. - ### A solution for each purpose The diversity of templates, as well as the variety and capacity of the customization options available, let you create an app tailored to your purpose. - ### Style editor Manage your styles at the global level in order to ensure a coherent design throughout the different views of the app. - ### Modifications log The GoodBarber back office includes a log of modifications which lets you access a history of all the modifications performed on your project. - ### Updating the design without rebuilding Updates related to the design of your project do not require you to rebuild your app. Once approved they are automatically taken into account and visible for your users, without extra action. - ### Images library Store images in your personal library in order to easily access them for later use. - ### Selective image resizing Images are resized to several ratios, compressed and cached to reach the best weight, performance and display quality combination. Loading times are optimized without jeopardizing display quality. - ### Monochrome effect Thanks to the image editor integrated within the GoodBarber back office you can add a monochrome effect on your images. - ### Blur effect Add a blur effect to your images in one click, directly from the GoodBarber back office, thanks to the integrated image editor. - ### Zoom effect Apply zoom effects upon rollover on the images, on the desktop version of your project. - ### Icon and splash screen generation assistant The GoodBarber back office offers a tool to assist you in creating your app icon and launching screen from scratch. - ### Gradient management Integrate color gradients in your app's design by choosing one from the full library (which uses the [https://uigradients.com](https://www.goodbarber.com) service). Once you've chosen one, the gradient is automatically generated and applied to your app's design. - ### Genius Palette Leave your color palette to AI. In a single click, Genius Palette generates a coherent, professional set of colors, ready to apply to your whole design. - ### Design System GoodBarber rests on a formalized design system: foundations, atoms and components, plus a library of ready-made layouts. The rules apply by default to every page, so a project stays consistent from one screen to the next. - ### Haptic feedback and animations Native apps carry a sensory layer: haptic feedback under the finger, fluid transitions from a list to its detail, and motion that answers the scroll. - ### Buttons and form field shapes Set the shape of every button in your app — square, rounded or round — along with the shape, the size and the label position of your form fields. - ### App Walkthrough Guide your users through the first launch with an interactive tutorial. Choose how it is displayed, and bring the screens to life with Lottie animations. ## Home+ [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) - ### Modular home The Home section is the first section of your app, it is made up of widgets and completely flexible. With the great variety of widgets available, the Home lets you build your project in a way that makes your app truly unique. - ### Activate or deactivate You can choose to activate or deactivate the Home section in your app. If you deactivate it, the navigation will depend solely on the navigation mode you choose. - ### 77 widgets With widgets you have unique flexibility to organize your app’s home. - ### Content widgets Content apps Make the home of your app more dynamic with widgets which automatically refresh each time new content is published inside your project. - ### Navigation widgets Content apps Offer direct access to the most important sections of your app with widgets dedicated to navigation. The perfect way to guide your user towards the key function of your project. - ### eCommerce widgets eCommerce apps Create direct entries to your products and collections, from the Home page of your app using the Product list widget and the collection list widgets - ### Promo widget eCommerce apps Display a promotional message as soon as users arrive on the Home of your shop. You can highlight a product, a collection, a list of collections. The promotional widget is very flexible and will help you increase your sales. - ### Semi-dynamic widgets These widgets let you build a home which automatically updates whenever new content is published, all the while offering a clear architecture to the user when it comes to navigating the app. - ### Other widgets This category regroups useful widgets such as the search, newsletter, advertisement, countdown, or even HTML widgets. - ### Drag & drop construction Arranging the different widgets featured on your home is easy. Just drag and drop your widgets where you want them to be. - ### Sorting options Access a wide range of options for managing the display order of the elements within your content widgets: by date, popularity, alphabetical order, randomly,… - ### Number of items The number of elements displayed by a widget can be set up for each widget, in order to allow maximum flexibility to organize your home. - ### Custom code widgets Build your own widgets in HTML, CSS and JavaScript, and place them on the home next to the standard ones. ## 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) - ### Customizable NavBar The NavBar is a strategic location within your app. Therefore, you have complete control over its design and features. Choose from 3 different height formats (Small, Medium, Big) to display your logo, a title or description. - ### Customizable icons Each link added to your NavBar is assigned an icon. This icon is fully customizable. - ### Adding shortcuts The NavBar can display up to 6 shortcut links to key sections of your app or external sources. - ### Managing shortcuts Access to the customization of the look and feel of your NavBar shortcuts lets you maintain a coherent user experience throughout your app. - ### Automatic arrangement Based on the number of shortcuts available in the NavBar, the best arrangement will be automatically managed by the app. - ### Customizable shortcuts The design of each NavBar shortcut is customizable. Access a library of over 1000 vectorial icons, add your own icons and customize the link titles. - ### Effect options Content apps Apply transparency, blur or hiding effects to the header. These subtle effects can give your app the final polished touch and set you apart from the crowd. - ### Automatic effects management Effects are automatically applied to the header by GoodBarber based on the device and OS through which the app is displayed. - ### Declinable header per section A specific header and related NavBar can be set up for each section within your app. ## Navigation mode+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/navigation_mode.82959cd1bbdf.jpg) - ### Customizable navigation modes Choose the navigation mode of your app from the proposed templates. Each menu can be customized up to the very last detail, with an unlimited amount of combinations, to make each project unique. - ### Swipe A key navigation mode for apps with a large number of sections. - ### Little Swipe Offer vertical navigation where each entry within your app is illustrated by an icon. - ### TabBar A classic, the TabBar is a navigation mode which grants quick access to the most important sections within your app. - ### Grid The Grid displays your app's navigation in full screen, each entry is depicted by an icon. - ### Slate The Slate displays your app's navigation in full screen, each entry is depicted by text. - ### From scratch Content apps The From Scratch menu lets you code your navigation by inserting your own HTML code. - ### Invisible Content apps If you do not wish to display a navigation menu for your app you can enable the invisible navigation mode. - ### Floating TabBar A TabBar detached from the edge of the screen, floating above your content. On native apps it sits at the bottom; on the web app it appears as a banner under the header. ## Customizing the navigation+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/custom_navigation.8cd1ea29a274.jpg) - ### Header, Body & Footer Each navigation menu is made up of 3 distinct parts: the Header, Body and Footer, each fully customizable. Displaying the Header and Footer is not mandatory. - ### Logo display Display your logo inside the header of your navigation mode, by uploading your logo or adding text directly. - ### Link to the user profile Add a direct link to the user's profile inside your navigation mode. Edit the text, icon and link color. - ### Adding shortcuts Add shortcuts within your navigation mode and let users easily access any section within your app, an external link or even perform an action such as logging out, sending a text or an email. - ### Customizable separators Add separators inside your navigation menu and customize their color and pixel height. - ### Customizable link area Build your navigation menu by adding links to sections within your app. - ### Copyright Add a copyright area within the navigation menu of your project. Select the color and text, as well as the font and font size. - ### Advanced design options GoodBarber allows advanced customization of the navigation menu design. Font, colors, alignment, icon, cell height, adding a title… - ### Menu default display For the Swipe, Little Swipe, Grid and Slate menus select the default status of the menu: always hidden or always displayed when the app launches. ## Menu+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/templates.493d19427b54.jpg) - ### 10 intermediary menu templates GoodBarber offers a Menu section to enable multi-level navigation inside your app. You can choose from 10 templates. - ### An image for each element Choose a navigation where each entry of the menu is a high-res image, in order to achieve a perfect design regardless of the screen size your app is being displayed in. - ### Advanced design Apply gradient or blur effects on images. Adjust the position of the text and the logo choice for your menu entries. - ### Automatic construction Based on the number of entries inside your menu, GoodBarber will perform an automatic arrangement to be sure an attractive display is always maintained. - ### Custom code menu Write your menu from scratch in HTML, CSS and JavaScript, with the built-in editor and the GoodBarber App API, for a navigation that looks like nothing else. ## Design resources+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-7.50744db5f733.jpg) - ### Icons gallery A collection of more than 1000 icons created specifically by our team of designers and organized into 3 different sets is available in your back office. - ### Customizable icons Create your own icon collection by uploading your own icons or images, directly from the back office of your project, in .png format, 260px x 260px. - ### Professional themes The GoodBarber back office features 25 professional themes produced by our team of expert designers. Inspired by our mobile-first philosophy, they are designed to perfectly adapt to each device, keeping with the current trends, plus fully customizable. - ### Google Fonts library GoodBarber features a set of more than 400 Google Fonts which can be used directly in the back office, without the need to embed extra code. - ### Pexels library GoodBarber clients can access the Pexels photo library, directly from the back office, with over 500,000 high resolution images. - ### Images advanced search The Pexels library in the GoodBarber back office is equipped with an advanced search engine to sort images by theme, keyword or color. - ### Custom fonts Upload your own typefaces — .woff2 for the web app, .ttf or .otf for native apps — and find them in every font selector of the back office, next to the Google Fonts library. - ### Google Material Icons Add the Google Material icon set to your app, in its solid, rounded, contour and two-tone styles, and use it wherever icons appear, navigation menu included. ## Sections+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-8.c045955904b2.jpg) - ### 30 different types of sections GoodBarber offers 30 different types of sections which you can use to build your project. - ### Advanced settings for the information to be displayed For each section, choose the information to display, such as the date or the author for an Article section. - ### Toolbar customization Content apps For each section choose the actions available in the toolbar: comments, sharing, text size, bookmarking the item. - ### Comments access Content apps Allow users to access the comments page from each content view. - ### Direct link to share on social media Add direct sharing links to social media in each content page. - ### Progressive page loading Intuitive gestures allow the user to display extra content, on demand, when visiting a section. This allows for a faster display while improving the user experience. - ### Global floating button An action button that floats above your content and stays available throughout the app, with the label of your choice. ## Ready to build your app? [Start for free](https://www.goodbarber.com/create/)[See pricing](https://www.goodbarber.com/pricing/content/)