--- title: "La Home modular" description: "La Home es una de las pantallas más importantes de tu app, es lo primero que ve el usuario cuando abre la app. Asimismo, todos los elementos" canonical_url: "https://es.goodbarber.com/blog/la-home-modular-a547/" lang: es date: 2017-04-12 last_updated: 2017-06-05 --- # La Home modular [Atrás](/blog/make-it-r8/) # La Home modular Escrito por [Jerome Granados](https://es.goodbarber.com/blog/author/jerome-granados/) el Miércoles 12 Abril 2017· Última actualización: Lunes 5 Junio 2017 ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11940440-19384061.jpg?v=1491820437.1021435) La *Home* es una de las pantallas más importantes de tu app, es lo primero que ve el usuario cuando abre la app. Asimismo, todos los elementos se articulan alrededor de ésta. GoodBarber 4.0 introduce un sistema modular, ultra flexible, para gestionar la *Home* ycrear un punto de partida y una experiencia de usuario únicos. ## Navegación Principal y contenido seleccionado ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11940440-19384130.jpg?v=1491820724.2994745) Es en la *Home* donde se concentra la actividad principal de tus usuarios. Gracias a las estadísticas de uso de las apps creadas con GoodBarber vemos que el 90% de los usuarios sólo consultan la primera sección de la app. Al mismo tiempo, en general en nuestra industria, observamos que un número creciente de apps usan la *Home* para gestionar su navegación principal. Estas observaciones nos obligaron a imaginar un concepto de *Home* completamente nuevo para las apps de la nueva versión, la V4. La nueva *Home* da la posibilidad de escoger qué contenidos se quieren colocar al abrir la app. Además, también permite colocar enlaces a otras destinaciones que se consideren importantes en el proyecto. Nosotros creemos firmemente que esta nueva navegación, mejorará el trafico dentro de la app. ## Escalabilidad infinita ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11940440-19384301.jpg?v=1496694169.0173223) Con GoodBarber 4.0, cada *Home* es única. Esta nueva funcionalidad sigue nuestro *leitmotiv:* cada app tiene que tener un diseño único e incomparable. Esta es la razón por la que hemos desarrollado 66 *widgets,* disponibles desde el lanzamiento de GoodBarber 4.0, para construir la *Home.* Los *widgets* son módulos funcionales. Para diseñarlos, en un primer momento imaginamos diferentes plantilla visibles en el móvil. La superficie útil en la interfaz de un teléfono móvil es un recurso escaso. Pensado en *mobile* en primer lugar, nos ha hecho ser más creativos y ha dado lugar al nacimiento de un nuevo diseño que consigue mantener la riqueza funcional dentro de cualquier interfaz. Desde el *back office,* la *Home* tiene que empezar diseñarse desde la vista móvil. Puedes pensar en tu *Home* como un *banner* vertical dividir por franjas horizontales. Cada franja está compuesta por un *widget.* La variedad de *widgets* es lo que hace una página dinámica. Las plantillas asociadas con los *widgets* tienen una declinación móvil, tablet y *desktop.* Cuando añades un widget a tu *Home*, la vista en cada una de las pantallas se realiza automáticamente. De todos modos, tienes que configurar los detalles en particular de cada una de las medidas de pantalla. ## Los widgets ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/11940440-19385461.jpg?v=1491825826.1728804) Los *widgets* se organizan en 2 categorías. Los ***widgets* de contenido** y los ***widgets* de navegación**. En la página [UI Index](https://fr.goodbarber.com/ui-index) del portal de GoodBarber, podrás consultar los *mockups* de todas las plantillas disponibles para los *widgets* de contenido relativos a cada tipo de sección. ***WIDGETS* DE CONTENIDO** Los *widgets* de contenido pueden utilizarse para mostrar los items que pertenecen a una sección de la app, en la *Home.* Hay 3 familias: - Lista: el contenido se muestra en formato lista, con la posibilidad de resaltar algunos items (*widget* n°1 y n°6 del ejemplo anterior). Puedes escoger si mostrar los items relacionados a una categoría específica en una sección (*widget* n°2 muestra la categoría “Radar” de la sección “News”). - *Banner*: estos *widgets* optimizan el uso del espacio en la *Home.* Se puede navegar a través del contenido con un *scrolling* horizontal (*widget* n°3). - Destacar: estos son *widgets* semi-dinámicos. El primer elemento mostrado es un enlace a la sección, los siguientes elementos forman parte de la sección (*widget* n°5). Además, tienes opciones de clasificación para mostrar el contenido por fecha, al azar, alfabéticamente... ***WIDGETS* DE NAVEGACIÓN** Estos *widgets* se pueden utilizar para crea enlaces a secciones, desencadenan acciones o dirigen hacia url externos. Hay 3 familias: - Lista: estos *widgets* ocupan el espacio disponible. Los enlaces se muestran en formato lista y pueden mostrar: título, subtítulo, botón, imágenes o iconos, con el objetivo de resaltar la acción a realizar (*widget* n°4 del ejemplo). - *Banner*: navegar por los enlaces dentro de estos *widgets* se puede lograr a través del *scrolling* (desplazamiento) horizontal. Como resultado, pueden utilizarse para minimizar el espacio usado. Títulos, subtítulos, botones, imágenes e iconos están disponibles con esta familia de *widgets.* - Remoto: estos *widgets* pueden mostrar hasta 6 enlaces, sólo con un título y un icono. Están pensados para que sean compacto y generalmente, para localizarse en la parte inferior de la *Home,* como el pie de página. La *Home* modular de GoodBarber 4.0 tiene como objetivo dar el máximo valor posible al tráfico capturado cuando la app se abre. Combinando los *widgets* de contenido y navegación, tu *Home* puede ser completamente única. Y ahora, ya puedes empezar a construir la mejor experiencia de usuario para tu app. ## Bonus Para información complementaria sobre la configuración de la *Home* consulta este vídeo tutorial con subtítulos en español. - [#Home](https://es.goodbarber.com/blog/tags/home) ![Jerome Granados](https://blog.goodbarber.com/_public/profile/1b/1b6453892473a467d07372d45eb05abc2031647a-default.jpg) Sobre el autor[Jerome Granados](https://es.goodbarber.com/blog/author/jerome-granados/)CMO Soy CMO y socio de GoodBarber. A través de este blog, comparto consejos prácticos para ayudarte a sacar el máximo partido a GoodBarber, análisis sobre las tendencias que están transformando el mundo móvil y el no-code, así como algunas reflexiones sobre el impacto de la inteligencia artificial en nuestro sector. Si algún artículo te inspira una pregunta, una idea o una experiencia que quieras compartir, conversemos en los comentarios. [Leer más](https://es.goodbarber.com/blog/author/jerome-granados/) [![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://www.linkedin.com/in/jeromegranados/)[![X](https://portal.ww-cdn.com/portal_static/svg/base2021/x.820492c586dd.svg)](https://x.com/jeromegranados)[![Facebook](https://portal.ww-cdn.com/portal_static/svg/base2021/fb.be37c82b8283.svg)](https://www.facebook.com/jerome.granados)[![Instagram](https://portal.ww-cdn.com/portal_static/svg/base2021/instagram.e3b82841d5d7.svg)](https://www.instagram.com/jeromegranados/)[![Pinterest](https://portal.ww-cdn.com/portal_static/svg/base2021/pinterest.3ba400801cb2.svg)](https://www.pinterest.com/jeromegranados/)