Custom Mobile Design with the GoodBarber App Builder
App builders will let anyone build apps, without coding skills, at a fraction of the price of custom development. A convincing sales point for beginners and experienced developers alike. But what of design? Is it possible to deliver an app with a unique feel, with an app builder?
The answer is yes, if you pick a solution which puts design first. GoodBarber, one of the top 3 app builders in the market, has long distinguished itself as the app builder to create beautiful apps, for a variety of devices, iPhone, iPad and Android.
What puts GoodBarber a cut above the rest, is also the room it leaves for customization, an important parameter if you are in the business of creating apps for your own projects, and even more so if you are reselling apps for clients. To meet specific demands, having the option to personalize the app design can come in handy.
In that spirit, today, we’ll demonstrate two examples of customization tricks the GoodBarber app builder has to offer with its API access:
- personalizing a menu section template to display icons on top of the background images
- adding a subtitle to illustrate one of the menu’s sections with a catchphrase
Worried that you aren’t tech savvy enough? Both these design modifications can actually be performed without being an expert developer. With our walkthrough, you will even see that playing with the hidden settings of the GoodBarber platform is easy as 1,2,3.
Modifications related to design, are, for the most part, first applied through the already exhaustive list of settings provided for each view for features and sections alike. Here is the default view included with a ready made theme.
Here, is the same view personalized using only the default settings provided in the GoodBarber back office:
These include background images, fonts, colors, effects, which can all be managed directly from the design panel. Want to take things up a notch?
By default, the template used here (menu Template n°3) only displays 1 image and 1 title per section. Let’s start by making the icon of each section visible shall we?
To do so, you will need to activate the API access Add-On, included with the GoodBarber Advanced plan, and available for try out during the 30 days free trial we offer.
Once the Add-On is activated, a Json tab will show, next to the preview and settings tabs in the back office.
From that tab, under “GBNodeListTemplateTypeUneGrid” (that is how the Template n°3 is identified in the Json tab), advanced customization can be applied.
First, you want to start by adding the property “showIcon” = 1.
Don’t forget to save your changes before moving on to the next steps of the tutorial. To go back or delete the property, you can click on the red cross next to it (as seen below).
This properly will trigger the display of the icons attached to each section within the menu, as you can see below:
If you want to edit the icons used for each section (Articles sections here), you can simply use the options provided in the back office to assign new and more illustrative icons, for a better user experience and unique design.
By the way, the GoodBarber platform provides a gallery of over 1500 icons, but you can also import your own graphic elements.
Now that we have added icons, let’s see how we can add another property, the subtitle or catchphrase: “displaySubtitleOnFirst” = 1. This will display a subtitle or catchphrase under the title of the first section.
You can customize the display of this subtitle by registering information related to the font used, as well as the color and size. To do so, click on “Add object” this time, and add the above properties.
That’s it!
Of course, the personalization of the API settings will vary for each project, based on the navigation you choose or the templates you activate. For more efficiency, it also helps to pick the right theme to get started. The back office will generate the architecture of the app, the design panel will bring your design to life, while the API access will let you adjust the little big details.
And yes, they are the ones that make the biggest difference in the end, so don’t be afraid to roll up your sleeves a little bit. These finishing touches are what will make an app unique unique, so that it can never come across as delivered using an app builder in the app stores.
With GoodBarber, you can really oversee all stages of the creation process, from development to design. And with your knowledge and experience of design you’ll always be ahead of the curve, with a vision of best practices and pitfalls to avoid saving you time, on top of using an already efficient technology, which does most tricks for you.
Try GoodBarber today, and be sure to check out their free ebook to learn how to earn money by selling apps.
