top of page
  • Foto del escritorPymeWebApp

Diseño de la App.

En la pestaña de diseño, encontrarás todas las opciones relacionadas con el estilo del menú y de la pantalla inicial de tu App.


Función disponible para, Plan ilimitado.



PymeWebApp. Desarrollo PWA (Aplicación Móvil Multidispositivo).


PymeWebApp. Desarrollo PWA (Aplicación Móvil Multidispositivo).

La sección Opciones de Pantalla de Inicio muestra las opciones disponibles según el estilo de navegación (Layout) escogido.



PymeWebApp. Desarrollo PWA (Aplicación Móvil Multidispositivo).

Añadir un slider o carrusel animado de imágenes en tu App es muy sencillo y puede configurarse en menos de 10 segundos.


Ten en cuenta que no todos los estilos de navegación (Layouts) admiten el uso de Sliders.


Si haces un poco de scroll encontrarás una nueva sección llamada 'Opciones del Slider de Inicio':


- Indica si deseas que las imágenes se muevan en bucle.

- Especifica la duración de tu Slider.

- Ajusta la opacidad de las imágenes.

- Escoge la altura de las imágenes.


Si deseas que las imágenes del Slider ocupen toda la pantalla, asegúrate de marcar el 100% en el selector de Altura de las Imágenes. Te recomendamos que éstas tengan un tamaño de 1432X2732 píxeles.



PymeWebApp. Desarrollo PWA (Aplicación Móvil Multidispositivo).

Por último haz clic en 'AÑADIR IMÁGENES'


Las imágenes no deben superar los 3000 píxeles y se recomienda que no pesen más de 500kb (cuanto más optimizadas estén más rápida será tu app).



PymeWebApp. Desarrollo PWA (Aplicación Móvil Multidispositivo).

Esta sección, que vas a ver a continuación, te ayuda a elegir una imagen que se vea bien en todos los dispositivos y ratios de pantalla. Usa la herramienta overlay (sombreado) para comprobar si la información importante de tu diseño queda dentro de las zonas seguras recomendadas en función de la orientación de pantalla para la que está diseñada tu App.



PymeWebApp. Desarrollo PWA (Aplicación Móvil Multidispositivo).

Para saber cómo diseñar bien las imágenes puedes descargar la plantilla con las medidas, disponible tanto en formato .png como en .psd.


En este vídeo de 5 minutos voy a explicarte cómo diseñar correctamente la Pantalla de Inicio de tu App:




A continuación, verás una sección para escoger el idioma en función de tu país y la moneda de tu aplicación. Se utilizará para diferentes aspectos, como la zona horaria y el símbolo de la moneda.



PymeWebApp. Desarrollo PWA (Aplicación Móvil Multidispositivo).

Para cambiar la fuente de tu App puedes seleccionar una de las que aparecen en el menú del constructor, o importar una desde Google Fonts. Para hacerlo es tan sencillo como escribir el nombre de la fuente.



PymeWebApp. Desarrollo PWA (Aplicación Móvil Multidispositivo).


PymeWebApp. Desarrollo PWA (Aplicación Móvil Multidispositivo).

¿Quieres previsualizar la App en tu propio dispositivo?


Visualizar el prototipo en tu propio smartphone es muy sencillo. Primero haz clic en el icono de la sección 'Promocionar' que encontrarás en el menú lateral izquierdo:



PymeWebApp. Desarrollo PWA (Aplicación Móvil Multidispositivo).

A continuación escanea el código QR que encontrarás en esa sección con la cámara de tu smartphone y después haz clic en el botón de 'App Builder' del menú superior para regresar a la pantalla de edición de tu App.



PymeWebApp. Desarrollo PWA (Aplicación Móvil Multidispositivo).


Segundo paso. Colores


Elige los colores principales de la aplicación.

- General: aplica al fondo (si no hay una imagen específica) y al texto general.

- Inicio: aplica al menú de navegación y a sus elementos.

- Cabecera: aplica a la cabecera de navegación de la app.

- Tarjeta: aplica a los elementos mostrados en formato tarjeta.

- Lista: aplica a los elementos mostrados en formato lista.



PymeWebApp. Desarrollo PWA (Aplicación Móvil Multidispositivo).


Tercer paso. Funciones


Si comenzaste tu App a partir de una plantilla, verás que ya incorporan de forma predeterminada algunas funciones que consideramos interesantes para cada sector. Puedes verlas en el carrusel de funciones. Pero si quieres eliminar alguna, sólo tendrás que darle a la “X”.



PymeWebApp. Desarrollo PWA (Aplicación Móvil Multidispositivo).



Ahora, es el momento de preguntarnos qué queremos que haga la App...


Registro de usuarios, vender productos, gestionar reservas, fidelizar clientes, mostrar contenidos...


Disponemos de muchísimas funciones que puedes incorporar a tu Aplicación. Puedes verlas todas haciendo clic en el siguiente enlace:


bottom of page