hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

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.

Custom Mobile Design with the GoodBarber App Builder
Here, is the same view personalized using only the default settings provided in the GoodBarber back office:

Custom Mobile Design with the GoodBarber App Builder

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.

Custom Mobile Design with the GoodBarber App Builder

Once the Add-On is activated, a Json tab will show, next to the preview and settings tabs in the back office.

Custom Mobile Design with the GoodBarber App Builder

From that tab, under “GBNodeListTemplateTypeUneGrid” (that is how the Template n°3 is identified in the Json tab), advanced customization can be applied.

Custom Mobile Design with the GoodBarber App Builder

First, you want to start by adding the property “showIcon” = 1.

Custom Mobile Design with the GoodBarber App Builder

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).

Custom Mobile Design with the GoodBarber App Builder

This properly will trigger the display of the icons attached to each section within the menu, as you can see below:

Custom Mobile Design with the GoodBarber App Builder

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.

Custom Mobile Design with the GoodBarber App Builder

By the way, the GoodBarber platform provides a gallery of over 1500 icons, but you can also import your own graphic elements.

Custom Mobile Design with the GoodBarber App Builder

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.

Custom Mobile Design with the GoodBarber App Builder

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.

Custom Mobile Design with the GoodBarber App Builder

That’s it!

Custom Mobile Design with the GoodBarber App Builder

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.

Article source: http://feedproxy.google.com/~r/onextrapixel/~3/FrsBvE9cMiA/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.