Cómo configurar el estilo de tu aplicación

Estilo de la app

«App style» define todo el diseño de tu app desde un solo lugar: colores, fuentes, botones, campos de formulario y más.

En el menú «My App», haz clic en «App style».

Los ajustes tienen dos partes: lo esencial y luego opciones adicionales. Todo se aplica a cada sección de tu app y reemplaza el diseño propio de cada una.

Colores

Empieza por los colores.

Un tema de color es un conjunto de colores que combinan bien. Elige uno en la biblioteca… y la vista previa muestra tu app con él.

«Magic palette» te propone un nuevo tema… con cada clic.

Luego ajusta cada color en detalle: el encabezado, los colores principales, los fondos, el menú y los botones.

Haz clic en un color, escribe un código o elige uno, y haz clic en Choose.

El encabezado cambia al nuevo color.

Haz clic en Apply para usar estos colores en toda tu app, o en Cancel para conservar los actuales. Aquí, los conservamos.

Fuentes

Ahora, las fuentes.

Un tema de fuente reúne tres fuentes que combinan bien. Puedes elegir uno en esta lista.

El control deslizante ajusta el tamaño de todos los textos a la vez, manteniendo su jerarquía.

Todos los niveles de texto crecen juntos.

Tu app usa ocho niveles de texto, del título principal al texto normal. Para cambiar la fuente de uno, ábrelo… y elige una fuente. Están disponibles todas las Google Fonts, y el botón «+» agrega una fuente propia, si su licencia lo permite.

El título principal toma la nueva fuente.

En cada nivel, también ajustas grosor, interlineado y espaciado entre letras.

De nuevo, haz clic en Apply para usarlas, o en Cancel para conservar las tuyas.

Botones y campos de formulario

Siguen los botones.

Tu app usa tres niveles de botones, que GoodBarber elige para cada acción: el nivel uno tiene relleno, el nivel dos tiene contorno y el nivel tres es un simple enlace de texto. Sus colores vienen de tu tema de color.

Elige su forma: cuadrada, redondeada o redonda… y todos los botones de tu app la adoptan.

«Form fields» funciona igual: elige la forma y el tamaño de los campos, y dónde va el título, encima o dentro.

Miniaturas y celdas

«Thumbnails and cells» define la forma de las imágenes y tarjetas de tus listas: cuadrada, redondeada o redonda.

Aquí, las esquinas se vuelven cuadradas.

En la web app de escritorio, también puedes agregar un efecto al pasar el ratón sobre una imagen.

Espaciado

Spacing define los márgenes alrededor de tu contenido, en píxeles.

Con márgenes más amplios, el contenido tiene más espacio alrededor.

Animaciones y vibración

En las apps nativas iOS y Android, también puedes elegir cómo se abre una página desde una lista, agregar una leve vibración al tocar y revelar los elementos al desplazarse.

Iconos

En Icons, eliges los iconos predeterminados de tu app. Por ejemplo, haz clic en el icono de marcador… y elige otro en la biblioteca.

El nuevo icono aparece en cada artículo.

Fondo y separadores

Por último, el fondo de tu app: un color o una imagen, y el color de los separadores.

El fondo cambia en todas las páginas.

Publicar

Para que tus usuarios vean los cambios, publica la actualización de tu app desde el menú Publish.