Personalizza il design della tua app con GoodBarber

Con GoodBarber puoi creare la tua app personalizzata: ecco alcuni consigli per migliorarne il design e lo stile.

Avatar di GoodBarber

a cura di GoodBarber

Gli app builder permettono a chiunque di creare applicazioni, senza conoscere o scrivere alcun codice, ad una frazione del costo che richiederebbe uno sviluppo ad hoc. Decisamente un elemento favorevole e convincente sia per i principianti che per gli sviluppatori più esperti. Ma per quanto riguarda il design? È possibile realizzare un'app unica nel suo genere con un app builder?

La risposta è sì, se si sceglie una soluzione che mette il design al primo posto. GoodBarber rientra nella top 3 dei migliori app builder sul mercato e già da tempo si è distinto come l'app builder delle Beautiful App.

Tra le caratteristiche che portano GoodBarber ad un livello superiore rispetto ad altri servizi dello stesso genere, vi è sicuramente lo spazio che lascia alla personalizzazione del design dell'app, parametro fondamentale se il vostro business si basa sullo sviluppo di applicazioni e ancora di più se le rivendete ai vostri clienti. Poter soddisfare le differenti esigenze dei vostri clienti, avendo la possibilità di utilizzare una stessa piattaforma, personalizzando a piacere il design delle app, è decisamente un elemento vincente.

In questo spirito oggi vi mostreremo due esempi di cosa e di come si può personalizzare a livello di design, accedendo al pannello di controllo delle API di GoodBarber:

  • Personalizzare il template della sezione Menu per visualizzare le icone sopra un'immagine di sfondo;

  • Aggiungere un sottotitolo o uno slogan per introdurre le sezioni del menu;

Vi state già preoccupando di non essere abbastanza esperti di tecnologia per riuscirci? Tranquilli! Entrambe le modifiche possono venir apportate senza troppe complicazioni; inoltre, con la nostra guida e l'interfaccia di GoodBarber sarà facile come contare fino a 3.

Gli elementi relativi al design dell'app sono per la maggior parte gestiti tramite il menu laterale. Qui potete vedere un esempio di progetto, in cui tutti gli elementi sono già inclusi all'interno del tema scelto.

GoodBarber 1

Qui, invece, vi è la stessa sezione, personalizzata utilizzando solo le impostazioni di default fornite nel menu laterale del back office.

GoodBarber 2

Le impostazioni di default, disponibili nel pannello di controllo, gestiscono le immagini di sfondo, i font, i colori, gli effetti ecc.. Ma vogliamo dare un tocco personale?

Di default il modello utilizzato in questo esempio (Modello n°3 della sezione Menu) presenta un'immagine e un titolo per sezione. Cominciamo, quindi, aggiungendo al mix le icone delle sezioni.

Per fare ciò, è necessario attivare l'accesso API (disponibile nello store Add-On), incluso gratuitamente con il piano Advanced e disponibile per tutti gli altri abbonamenti, con un periodo di prova gratuito di 30 giorni.

GoodBarber 3

Una volta che l'Add-On è attivato, la scheda di accesso al JSON verrà abilitata accanto a quella dell'anteprima e delle impostazioni nel menu in alto del vostro back office.

GoodBarber 4

Cliccando su quella scheda e andando sotto "GBNodeListTemplateTypeUneGrid" (che equivale al nome del modello n°3 della sezione menu), potete applicare dei parametri di personalizzazione avanzata.

GoodBarber 5

In primo luogo, iniziamo con l'aggiungere la Property "showIcon" = 1.

GoodBarber 6

Non dimenticate di salvare le modifiche prima di passare alle fasi successive del tutorial. Per tornare indietro o eliminare la proprietà, fate clic sulla croce rossa accanto ad essa (come mostrato qui sotto). 

GoodBarber 7

Questa piccola modifica attiverà la visualizzazione delle icone relative a ciascuna sezione all'interno del menu, come puoi vedere qui sotto:

GoodBarber 8

Se volete modificare le icone assegnate ad ogni sezione, lo potrete fare semplicemente utilizzando le opzioni fornite nel back office.

GoodBarber 9

La piattaforma GoodBarber offre una galleria di oltre 1500 icone, ma potrete caricare anche i vostri elementi grafici.

GoodBarber 10

Ora che abbiamo aggiunto le icone, vediamo come aggiungere un'altra property, ovvero il sottotitolo o slogan: "displaySubtitleOnFirst" = 1. Questa modifica mostrerà un sottotitolo o uno slogan sotto il titolo della prima sezione.

GoodBarber 11

È possibile personalizzare la visualizzazione di questo sottotitolo registrando le informazioni relative al tipo di font, il colore e le dimensioni. Per fare ciò, cliccate questa volta su "Add Object" e aggiungete le proprietà di cui sopra.

GoodBarber 12

Ecco fatto!

GoodBarber 13

Naturalmente la personalizzazione delle setting API varia a seconda di ogni progetto, in quanto si basa sul tipo di navigazione scelto. Per facilitarvi il lavoro, conviene partire scegliendo un tema in linea con il vostro progetto. Il back office genererà automaticamente l'architettura dell'applicazione, il pannello di controllo vi aiuterà a personalizzare il vostro design, mentre le API vi permetteranno di giocare con quei piccoli grandi dettagli.

Ebbene sì! Sono quelli che, alla fine, fanno la differenza più grande, quindi non abbiate paura di rimboccarvi un po' le maniche. Questi ritocchi vi permetteranno di rendere la vostra app unica ed esclusiva, e che mai e poi mai vi venga detto che avete utilizzato un'app builder per realizzare la vostra presenza sugli store.