--- title: "Diseño modular: características para crear una aplicación - creador de aplicaciones con Diseño modular" description: "Disfruta del mejor creador de aplicaciones sin código para crear un hermoso diseño para tu aplicación" canonical_url: "https://es.goodbarber.com/feature-index/design/" lang: es --- # Design modular Disfruta del mejor creador de aplicaciones sin código para crear un hermoso diseño para tu aplicación - [Diseño general](#generaldesign) - [Inicio](#home) - [Cabecera](#header) - [Modo de navegación](#navigationmode) - [Personalización de la navegación](#customnav) - [Menú](#menu) - [Recursos de diseño](#design_ressources) - [Secciones](#sections) ## Diseño general+ [https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Global_Style.ec2e912aefe2.mp4](https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Global_Style.ec2e912aefe2.mp4) - ### Adaptado a cada dispositivo En un primer momento los diseños de GoodBarber se centran en el móvil y después se adaptan por completo a cada pantalla para ofrecer una calidad constante en todos los dispositivos: smartphone, tableta, ordenador portátil o de escritorio. - ### Editor de estilo global Gestiona el estilo general de tu aplicación desde un único menú: tema de color, tipografía, botones de acción, efectos de rollover y elementos adicionales, configura tu diseño y aplícalo a toda la aplicación, con un solo clic. - ### Gestión de las imágenes de fondo GoodBarber ofrece la posibilidad de insertar imágenes a tu diseño colocándolas en segundo plano. - ### Márgenes personalizables Personaliza los márgenes de tu proyecto. Horizontal en todas las pantallas y vertical en la versión móvil. - ### Efectos en el texto Puedes añadir efectos a los textos para cuando el ratón para por encima: subrayado, aclarado o sombra. - ### Efectos en las fotos Añade efectos a las imágenes en el momento que el ratón pasa por encima: zoom-in, zoom-out u opacidad. - ### Cambio de tema Cambia de tema con un sólo clic, conservando el modo de navegación, la arquitectura y el contenido del proyecto. - ### Una solución para cada propósito La diversidad de plantillas, así como la variedad y capacidad de las opciones de personalización disponibles, te permiten crear una aplicación adaptada a cada una de tus necesidades. - ### Editor de estilo Gestiona tu estilo globalmente para garantizar un diseño coherente en las distintas vistas de la aplicación. - ### Registro de modificaciones El back office de GoodBarber incluye un registro de modificaciones que te permite acceder al historial de todas las modificaciones realizadas en tu proyecto. - ### Actualizar el diseño sin reconstruir Las actualizaciones del diseño de tu proyecto no obligan a reconstruir la aplicación. Una vez aprobados, se aplican automáticamente y están visibles para tus usuarios, sin tener que realizar ninguna acción. - ### Biblioteca de imágenes Guarda las imágenes dentro de tu biblioteca personal para poder acceder fácilmente a éstas cuando las necesites. - ### Redimensionamiento selectivo de imagen Las imágenes se redimensionan en varias proporciones, se comprimen y almacenan en caché para alcanzar la mejor combinación de peso, rendimiento y calidad de visualización. Los tiempos de carga se optimizan sin comprometer la calidad de visualización. - ### Efecto monocromo Gracias al editor de imágenes integrado en el back office de GoodBarber puedes añadir un efecto monocromo a tus imágenes. - ### Efecto borroso Añade un efecto borroso a tus imágenes en un solo clic, directamente desde el back office de GoodBarber, gracias al editor de imágenes integrado. - ### Efecto zoom Aplica el efecto zoom en las imágenes, en la versión desktop de tu proyecto - ### Asistente de generación de pantalla de bienvenida e icono El back office de GoodBarber ofrece una herramienta diseñada para ayudarte con la creación del icono y la splash screen de la aplicación desde cero - ### Gestión de degradados Integra degradados de color en el diseño de tu app eligiendo uno de los disponibles en nuestra completa biblioteca (conectada al servicio [https://uigradients.com](https://es.goodbarber.com)). Una vez elegido, el degradado se genera automáticamente y se aplica al diseño de tu app. - ### Genius Palette Deja tu paleta de colores en manos de la IA. Con un solo clic, Genius Palette genera un conjunto de colores coherente y profesional, listo para aplicar a todo tu diseño. - ### Design System GoodBarber se apoya en un design system formalizado: fundamentos, átomos y componentes, más una biblioteca de maquetas listas para usar. Las reglas se aplican por defecto a cada página, de modo que un proyecto se mantiene coherente de una pantalla a otra. - ### Respuesta háptica y animaciones Las apps nativas llevan una capa sensorial: respuesta háptica bajo el dedo, transiciones fluidas de una lista a su detalle, y un movimiento que responde al desplazamiento. - ### Forma de botones y campos Define la forma de todos los botones de tu app — cuadrada, redondeada o redonda — junto con la forma, el tamaño y la posición de la etiqueta de tus campos de formulario. - ### App Walkthrough Guía a tus usuarios en el primer lanzamiento con un tutorial interactivo. Elige cómo se muestra y da vida a las pantallas con animaciones Lottie. ## Inicio+ [https://portal.ww-cdn.com/portal_static/images/radio/home_buildin.6c6c5f4784f2.mp4](https://portal.ww-cdn.com/portal_static/images/radio/home_buildin.6c6c5f4784f2.mp4) - ### Home modular La sección Home es la primera sección de tu app, es completamente flexible y está compuesta de widgets. Ahora, es posible crear una app realmente única gracias a la gran variedad de widgets. - ### Activar o desactivar Puedes activar o desactivar la sección Home de tu app. Si la desactivas, la navegación se hará a través del modo de navegación que hayas elegido. - ### 74 widgets Gracias a los widgets, tendrás una flexibilidad incomparable para organizar la home de tu app. - ### Wigdets para el contenido Content apps Con los widgets podrás dinamizar la home de tu app, ésta se actualizará automáticamente cuando se publique nuevo contenido dentro de la app. - ### Widgets para la navegación Content apps Ofrece una entrada directa a las secciones importantes de la app con los widgets de navegación. Ideal para guiar al usuario hacia la función principal de tu proyecto. - ### eCommerce widgets eCommerce apps Crea entradas directas a tus productos y colecciones, desde la página de inicio de tu aplicación utilizando el widget Lista de productos y los widgets de la lista de colecciones - ### Promo widget eCommerce apps Muestra un mensaje promocional tan pronto como los usuarios lleguen a la página de inicio de tu tienda. Puedes resaltar un producto, una colección, una lista de colecciones. El widget promocional es muy flexible y te ayudará a aumentar tus ventas. - ### Widgets semi-dinámicos Estos widgets permiten construir una home que se actualiza automáticamente cuando hay contenido nuevo publicado. La idea es proponer una arquitectura clara para que la navegación del usuario dentro de la app. - ### Otros widgets Esta categoría reúne unos widgets utilitarios como los widgets de búsqueda, newsletter, de publicidad, cuenta atrás o HTML. - ### Construcción drag & drop Organizar los widgets de tu home es muy sencillo, simplemente hay que arrastrarlos y soltarlos en el sitio que desees. - ### Opciones de clasificación Accede a una amplia gama de opciones para gestionar el orden de visualización de los elementos dentro de tus widgets de contenido: por fecha, popularidad, orden alfabético, al azar... - ### Número de items El número de elementos mostrados por un widget es configurable por cada widget. De ese modo, te garantizamos una mayor flexibilidad para organizar tu home. - ### Widgets de código personalizado Construye tus propios widgets en HTML, CSS y JavaScript, y colócalos en la home junto a los estándar. ## Cabecera+ [https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Logo_Title.b8e1067a5361.mp4](https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Logo_Title.b8e1067a5361.mp4) - ### Barra de Navegación personalizable NavBar es una ubicación estratégica dentro de tu aplicación. Por lo tanto, tienes un control total sobre su diseño y características. Elige entre 3 formatos de altura diferentes (Pequeño, Mediano, Grande) para mostrar tu logotipo, un título o una descripción. - ### Iconos personalizables A cada enlace añadido dentro de tu barra de navegación le corresponde un icono, este se puede personalizar completamente. - ### Añade atajos (enlaces de acceso directo) La barra de navegación puede mostrar hasta seis enlaces de acceso directo a las secciones clave de tu app o fuentes externas. - ### Gestiona los atajos Personaliza la apariencia de los enlaces de acceso directo de tu barra de navegación para mantener una experiencia de usuario coherente en toda la app. - ### Disposición automática Según la cantidad de accesos directos disponibles en la barra de navegación, la aplicación gestionará automáticamente la mejor disposición. - ### Enlaces directos personalizados El diseño de cada enlace directo dentro de la barra de navegación es personalizable. Accede a una biblioteca con más de 1000 iconos vectoriales, añade tus propios iconos y personaliza los títulos de los enlaces. - ### Opciones de efectos Content apps Aplica los efectos de transparencia, desenfoque u ocultar a la cabecera de la app. Estos efectos le darán a tu app el toque final para diferenciarla de la multitud. - ### Gestión automática de efectos Los efectos se aplican automáticamente a la cabecera en función del dispositivo y el sistema operativo a través del cual se muestra la aplicación. - ### Cabecera declinable por sección Se puede configurar una cabecera específica y una barra de navegación relacionada para cada sección de la app. ## Modo de navegación+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/navigation_mode.82959cd1bbdf.jpg) - ### Modos de navegación personalizables Encontrarás plantillas entre las que elegir para el modo de navegación de tu app. Cada menú puede ser personalizado hasta el último detalle, con una cantidad ilimitada de combinaciones, para hacer cada proyecto único. - ### Swipe Un modo de navegación clave para aplicaciones con un gran número de secciones. - ### Little Swipe Ofrece una navegación vertical donde cada entrada dentro de tu app se ilustre mediante un icono. - ### TabBar Un clásico, la *TabBar* es un modo de navegación que concede acceso rápido a las secciones más importantes dentro de la aplicación. - ### Grid Grid muestra la navegación de tu aplicación en pantalla completa, cada entrada está representada por un icono. - ### Slate Slate muestra la navegación de la aplicación en pantalla completa, cada entrada se muestra mediante texto. - ### Desde cero Content apps El menú Desde Cero permite desarrollar la navegación introduciendo código HTML dentro de la app. - ### Invisible Content apps Si no quieres mostrar un menú de navegación para tu app, puedes activar el modo de navegación invisible. - ### Floating TabBar Una TabBar separada del borde de la pantalla, flotando sobre tu contenido. En las apps nativas se sitúa abajo; en la web app aparece como banner bajo la cabecera. ## Personalización de la navegación+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/custom_navigation.8cd1ea29a274.jpg) - ### Cabecera, cuerpo de la app y pie de página Cada menú de navegación está compuesto por 3 partes distintas: cabecera, cuerpo y pie de página, cada uno de ellos es completamente personalizable. Asimismo, no es obligatorio mostrar el encabezado y el pie de página. - ### Visualización del logo Visualiza tu logo dentro de la cabecera de tu navegación. Para hacerlo, simplemente tienes que importar el logo o añadir directamente texto. - ### Enlace al perfil de usuario Añade un enlace directo al perfil del usuario dentro de tu modo de navegación. Edita el texto, el icono y el color del enlace. - ### Añade un enlace directo Añade accesos directos a tu modo de navegación y deja que los usuarios accedan fácilmente a cualquier sección de tu app, a un enlace externo o incluso pueda realizar una acción como cerrar sesión, enviar un mensaje de texto o un email. - ### Separadores personalizables Añade separadores dentro de tu menú de navegación y personaliza el color y la altura de los píxeles. - ### Área de enlaces personalizable Crea tu menú de navegación añadiendo enlaces a secciones dentro de tu app. - ### Copyright Añade una área de copyright dentro del menú de navegación de tu proyecto. Selecciona el color y el texto, así como la fuente y el tamaño de ésta. - ### Opciones de diseño avanzadas GoodBarber permite la personalización avanzada del diseño del menú de navegación. Fuente, colores, alineación, icono, altura de la celda, título ... - ### Pantalla predeterminada del menú Para los menús Swipe, Little Swipe, Grid y Slate selecciona el estado por defecto: siempre escondido o siempre visible cuando la app se abre. ## Menú+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/templates.493d19427b54.jpg) - ### 10 plantillas de menús intermedios GoodBarber ofrece una sección de Menú para habilitar la navegación multinivel dentro de tu aplicación. Puedes elegir entre 10 plantillas. - ### Una imagen para cada elemento Elige una navegación en la que cada entrada del menú sea una imagen de alta resolución, para lograr un diseño perfecto, independientemente del tamaño de pantalla en el que se muestre tu app. - ### Diseño avanzado Aplica efectos de degradado o desenfoque en las imágenes. Ajusta la posición del texto y el logotipo para las entradas de menú. - ### Construcción automática En función del número de entradas dentro de tu menú, GoodBarber realizará una disposición automática para mantener el equilibrio y asegurar un diseño atractivo. - ### Menú de código personalizado Escribe tu menú desde cero en HTML, CSS y JavaScript, con el editor integrado y la GoodBarber App API, para una navegación que no se parece a ninguna otra. ## Recursos de diseño+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-7.50744db5f733.jpg) - ### Galería de iconos Una colección con más de 1000 iconos creados a medida por nuestro equipo de diseñadores y organizados en 3 grupos diferente. Está disponible en tu back office. - ### Iconos personalizables Crea tu propia colección de iconos cargándolos directamente en el back office. Pueden ser iconos o imágenes en formato .png, 260px x 260px. - ### Temas Profesionales El back office de GoodBarber cuenta con 25 temas profesionales creados por nuestro equipo de diseñadores expertos. Inspirados en nuestra filosofía mobile first, están diseñados para adaptarse perfectamente a cada dispositivo, siguiendo las tendencias actuales, además de ser totalmente personalizables. - ### Libreria de Google Fonts GoodBarber cuenta con un conjunto de más de 400 fuentes de Google que se pueden utilizar directamente en el back office, sin necesidad de incorporar código adicional. - ### Libreria de Pexels Los clientes de GoodBarber pueden acceder a la biblioteca de fotos de Pexels, directamente desde el back office, con más de 500.000 imágenes de alta resolución. - ### Búsqueda avanzada de imágenes La libreria de Pexels en el back office de GoodBarber está equipada con una herramienta de búsqueda avanzada de imágenes por tema, palabra clave o color. - ### Fuentes personalizadas Sube tus propias tipografías — .woff2 para la web app, .ttf u .otf para las apps nativas — y encuéntralas en todos los selectores de fuente del back office, junto a la biblioteca de Google Fonts. - ### Google Material Icons Añade el conjunto de iconos Google Material a tu app, en sus estilos sólido, redondeado, contorno y bicolor, y úsalo allí donde aparezcan iconos, incluido el menú de navegación. ## Secciones+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-8.c045955904b2.jpg) - ### 30 tipos de secciones GoodBarber te ofrece 30 tipos de secciones que puedes utilizar para construir tu proyecto. - ### Configuración avanzada que se mostrará Para cada sección, selecciona la información que quieres mostrar, como la hora de publicación o el autor de una sección de artículos. - ### Personalización de la barra de herramientas Content apps Para cada sección, elige las acciones disponibles en la barra de herramientas: comentarios, compartir, tamaño de texto, favorito. - ### Acceso a los comentarios Content apps Permite a tus usuarios acceder a la página de comentarios desde cada tipo de contenido. - ### Enlace directo para compartir en las redes sociales Añade enlaces directos para compartir en las redes sociales en cada página de contenido. - ### Carga de página progresiva Los gestos intuitivos permiten al usuario mostrar contenido adicional, bajo demanda, cuando el usuario visita una sección. Esto permite una visualización más rápida mientras mejora la experiencia del usuario. - ### Botón flotante global Un botón de acción que flota sobre tu contenido y sigue disponible en toda la app, con la etiqueta que elijas. ## ¿Listo para crear tu app? [Empezar gratis](https://es.goodbarber.com/create/)[Ver precios](https://es.goodbarber.com/pricing/content/)