eCommerce
Restaurant
Grocery
Pickup & Delivery
Online Courses
Employee Communication
Content Creators
Bookings
Newspaper
Radio
Schools
Events
Travel guide
Faith
Organizations
Custom apps
PRODUCT RESOURCES
TOPICS
TECHNOLOGY
MOBILE APPS RESELLERS
DISCOVER
New Global Style Menu : easy design setup
Written by Jerome Granados on
Global Style is a new feature. It allows you to manage your app's overall design from one single menu. It's a time saver and makes it easier to maintain a homogeneous design throughout all pages of your app.
At GoodBarber, design is a sacred thing. We're obsessed with giving you the freedom to customize many settings so you can end up with a unique app. No other App Builder takes it this far as far as design options go, but with offering a multitude of options comes the fact that interfaces can start to get messy, bringing us to our next challenge which was to find a simple way for the app customization process to be carried out.
Global Style is the solution. It is the menu where you can define the overall design of your app from.
At GoodBarber, design is a sacred thing. We're obsessed with giving you the freedom to customize many settings so you can end up with a unique app. No other App Builder takes it this far as far as design options go, but with offering a multitude of options comes the fact that interfaces can start to get messy, bringing us to our next challenge which was to find a simple way for the app customization process to be carried out.
Global Style is the solution. It is the menu where you can define the overall design of your app from.
To create Global Style, we had to reconstruct some behind the scenes parts of GoodBarber, especially those involved with generating the design.
When a user creates a project on the platform, a theme is automatically applied. This theme is randomly chosen from the library.
Each theme in the library is made by our designers. The color scale, the choice of font, the effects used, the design of the buttons...everything is designed to go with the world the designer creates around this theme.
Up until now, the theme was one whole entity that couldn't be separated. If you liked a theme as a whole, but still wanted to change one or two small details, you had two solutions.
Quick solution : forget about the theme altogether, find another one that suits your better, and apply it to your project.
Tedious solution : modify all of the pages of the theme one by one to change this undesired detail.
Forget about the tedious solution, which is no longer relevant. Thanks to Global Style, you can now modify entire parts of a theme and apply the modifications to all pages of your app in 1 click.
When a user creates a project on the platform, a theme is automatically applied. This theme is randomly chosen from the library.
Each theme in the library is made by our designers. The color scale, the choice of font, the effects used, the design of the buttons...everything is designed to go with the world the designer creates around this theme.
Up until now, the theme was one whole entity that couldn't be separated. If you liked a theme as a whole, but still wanted to change one or two small details, you had two solutions.
Quick solution : forget about the theme altogether, find another one that suits your better, and apply it to your project.
Tedious solution : modify all of the pages of the theme one by one to change this undesired detail.
Forget about the tedious solution, which is no longer relevant. Thanks to Global Style, you can now modify entire parts of a theme and apply the modifications to all pages of your app in 1 click.
Color scheme
A color scheme is a combination of colors that go well together. Global Style offers a library of color schemes.
When you choose a color scheme, the colors that it's made up of are applied to different elements of your app.
Each color scheme offers artistic elements specific to that scheme. Some use gradients either on titles or background images, others just use solid colors.
Once the color scheme has been chosen, it's applied everywhere in the app. GoodBarber offers you a variety of 31 different schemes you can choose from.
When you choose a color scheme, the colors that it's made up of are applied to different elements of your app.
Each color scheme offers artistic elements specific to that scheme. Some use gradients either on titles or background images, others just use solid colors.
Once the color scheme has been chosen, it's applied everywhere in the app. GoodBarber offers you a variety of 31 different schemes you can choose from.
Typography
There is a hierarchy for displaying text in the application. 8 levels are used to display titles, subheadings, and the text in paragraphs.
A cursor allows you to define the text's size. Global Style automatically calculates each level's size in order to respect this hierarchy.
For each level, Global Style allows you to define the font. The range of choice is impressive. All of the fonts in the Google Font library are available, as well as the native fonts available by default on your users' devices.
For each font, you have access to options to choose its thickness.
A cursor allows you to define the text's size. Global Style automatically calculates each level's size in order to respect this hierarchy.
For each level, Global Style allows you to define the font. The range of choice is impressive. All of the fonts in the Google Font library are available, as well as the native fonts available by default on your users' devices.
For each font, you have access to options to choose its thickness.
Buttons
For pages in your app that prompt users to perform an action, you can choose the design of the buttons.
The design of the button is based on the app's color scheme, so as to respect the harmony. 8 variations are available for each scheme.
The design of the button is based on the app's color scheme, so as to respect the harmony. 8 variations are available for each scheme.
Hover effects
Don't forget that your Progressive Web App is beautiful not just on Mobile but on Desktop too.
Additionally, you can choose the effects that appear when hovering the mouse over something. They are applied on images and hypertext links.
Additionally, you can choose the effects that appear when hovering the mouse over something. They are applied on images and hypertext links.
Extra elements
The real beauty of a design lies in the details. Global Style brings the menu icon and back button choices together in the same spot.
The Global Style menu is located in the Builder. It is the first step of the wizard. Much more flexible than the theme choice, it gives a simple and quick overview of the app's overall design. For those expert users out there–don't worry, you still have the option to individually modify each page of the app. Global Style is just an extra way to maintain your app's homogeneous design.