Come personalizzare le icone principali della tua app

Stile dell'app

«App style» definisce il design generale della tua app da un unico punto: colori, font, pulsanti, campi dei moduli e altro.

Nel menu «My App», clicca su «App style».

Le impostazioni hanno due parti: l'essenziale, poi le opzioni aggiuntive. Tutto ciò che imposti qui vale per ogni sezione della tua app, e sostituisce il design definito sezione per sezione.

Colori

Inizia da Colors.

Un tema cromatico è un insieme di colori che si abbinano bene. Scegline uno nella libreria… e l'anteprima mostra l'app con quel tema.

«Magic palette» ti propone un nuovo tema… a ogni clic.

Poi regola ogni colore nel dettaglio: l'header, i colori principali, gli sfondi, il menu e i pulsanti.

Clicca su un colore, inserisci un codice o scegline uno, poi clicca su Choose.

L'header cambia colore.

Clicca su Apply per usare questi colori in tutta l'app, o su Cancel per mantenere quelli attuali. Qui li teniamo.

Font

Poi passa a Fonts.

Un tema di font combina tre font che si abbinano bene. Puoi sceglierne uno in questo elenco.

Il cursore regola la dimensione di tutti i testi insieme e ne mantiene la gerarchia.

Tutti i livelli di testo crescono insieme.

La tua app usa otto livelli di testo, dal titolo principale al testo normale. Per cambiare il font di un livello, aprilo… e scegli un font. Tutti i Google Fonts sono disponibili, e il pulsante + aggiunge un tuo font, se la licenza lo consente.

Il titolo principale cambia font.

Per ogni livello puoi anche impostare spessore, interlinea e spaziatura tra le lettere.

Anche qui, clicca su Apply per usare questi font, o su Cancel per mantenere i tuoi.

Pulsanti e campi dei moduli

Ora tocca a Buttons.

La tua app usa tre livelli di pulsanti, scelti da GoodBarber per ogni azione: il livello 1 è pieno, il livello 2 è contornato e il livello 3 è un semplice link testuale. I colori vengono dal tuo tema cromatico.

Scegline la forma: quadrata, arrotondata o rotonda… e ogni pulsante della tua app la adotta.

Lo stesso vale per «Form fields»: scegli forma, dimensione e posizione del titolo, sopra il campo o al suo interno.

Miniature e celle

«Thumbnails and cells» definisce la forma di immagini e card negli elenchi: quadrata, arrotondata o rotonda.

Qui, gli angoli diventano squadrati.

Sulla web app desktop, puoi anche aggiungere un effetto al passaggio del mouse su un'immagine.

Spaziatura

Spacing definisce i margini attorno ai contenuti, in pixel.

Con margini più ampi, il contenuto ha più spazio intorno.

Animazioni e feedback tattile

Sulle app native iOS e Android, puoi anche scegliere come si apre una pagina da un elenco, aggiungere una lieve vibrazione al tocco e rivelare gli elementi allo scorrimento.

Icone

In Icons, scegli le icone predefinite della tua app. Per esempio, clicca sull'icona del segnalibro… e scegline un'altra nella libreria.

La nuova icona compare su ogni articolo.

Sfondo e separatori

Infine, lo sfondo della tua app: un colore o un'immagine, e il colore dei separatori.

Lo sfondo cambia su ogni pagina.

Pubblicazione

Perché i tuoi utenti vedano le modifiche, pubblica l'aggiornamento della tua app dal menu Publish.