ds_banner_alt

GoodBarber
Design System

El sistema de diseño de GoodBarber Apps

¿Por qué estas pautas de diseño?

GoodBarber es un creador de aplicaciones sin código lanzado en 2011. Permite que cualquier persona cree su propia aplicación nativa o aplicación web progresiva sin necesidad de escribir ningún código. Esta es una herramienta poderosa para las personas que desean crear una aplicación pero no tienen las habilidades técnicas para hacerlo. Desde el principio, ha estado en nuestro ADN proporcionar la tecnología y los recursos para convertir los diseños de aplicaciones en realidades asombrosas. Nos esforzamos por continuar brindando las mejores soluciones para la creación de aplicaciones hermosas.

Cuando se lanzó GoodBarber por primera vez, el campo del diseño de la experiencia del usuario (UX) no se entendía ni adoptaba tan ampliamente como es hoy. En el pasado, antes de la existencia de los sistemas de diseño, la creación de aplicaciones móviles solía ser un proceso desafiante para los diseñadores y desarrolladores. Sin un conjunto de directrices coherentes y mejores prácticas a seguir, era difícil garantizar que la aplicación fuera visualmente consistente y fácil de usar en sus diferentes pantallas. Los diseñadores y desarrolladores también enfrentaron mucha ineficiencia al crear nuevas funciones, ya que a menudo tenían que comenzar desde cero cada vez. Esto resultó en una gran cantidad de tiempo y recursos desperdiciados. Además, la colaboración y la comunicación también eran difíciles, ya que no había un idioma compartido ni un conjunto de estándares entre los miembros del equipo.

Desde entonces, los métodos y herramientas de los diseñadores han evolucionado considerablemente. Los sistemas de diseño han ayudado a superar estos desafíos al proporcionar un conjunto de pautas y mejores prácticas que los diseñadores y desarrolladores pueden seguir. A medida que la plataforma de GoodBarber ha evolucionado, nos dimos cuenta de la necesidad de repensar el diseño de nuestras plantillas en su totalidad para obtener coherencia visual en todas las plataformas y acelerar el proceso de desarrollo. Lo hemos hecho mediante la creación de GoodBarber Design System, un conjunto de pautas y mejores prácticas para garantizar la coherencia, la eficiencia, la colaboración, la escalabilidad, la marca y la accesibilidad en el proceso de diseño.

Al publicar GoodBarber Design System al público, compartimos con todos nuestros principios de diseño, que se han desarrollado y perfeccionado a lo largo de los años. Esto puede ayudar a los usuarios avanzados a lograr coherencia, eficiencia y escalabilidad al crear complementos personalizados o realizar personalizaciones avanzadas en su aplicación.

Para el equipo de GoodBarber, el GoodBarber Design System agiliza el proceso de desarrollo de aplicaciones, garantiza una experiencia de usuario uniforme y mejora la calidad general de las aplicaciones que creas con nuestra tecnología

Los desarrolladores tienen acceso a las especificaciones técnicas de las páginas y componentes: su tamaño, su posicionamiento, sus comportamientos y sus propiedades.

Los diseñadores pueden confiar en un conjunto de reglas de espaciado, tamaños de fuente, proporciones de imagen o distribución de color para la creación de nuevas páginas.

Objetivos

ds_objectives_principles_alt

Optimiza la creación y producción de plantillas mediante la implementación de principios de construcción.

ds_objectives_consistency_alt

Garantiza la coherencia visual entre las páginas de una aplicación en diferentes plataformas.

ds_objectives_smoothux_alt

Garantiza una experiencia de usuario fluida y óptima

¿Qué es un buen diseño?

Buen manejo del espacio

En diseño, el espacio "blanco", también conocido como espacio negativo, se refiere al espacio vacío entre los elementos de una página. A menudo se considera espacio desperdiciado cuando, de hecho, juega un papel importante en la creación de un diseño limpio y ordenado. Ayuda a separar y resaltar diferentes elementos, haciéndolos más fáciles de leer y comprender. Además, el espacio "en blanco" también puede crear una sensación de jerarquía, guiando la vista del usuario hacia la información más importante de la página.

Encontrar los mismos espacios entre elementos también es una forma sencilla de garantizar la coherencia visual entre las páginas. El uso de una cuadrícula para asegurar la alineación del texto es una técnica común utilizada en diseño gráfico y tipografía. Por lo tanto, confiaremos en una cuadrícula para garantizar la alineación, que es esencial para una lectura fluida. También se deben elegir valores de espaciado recurrentes para garantizar la coherencia entre las diferentes secciones en todos los dispositivos.

Jerarquía clara

Un buen contraste entre los diferentes niveles de texto es esencial para crear un diseño visualmente organizado y fácil de leer. El uso de diferentes tamaños y estilos de texto, como encabezados y cuerpo de texto, ayuda a crear una jerarquía de información y guía la vista del usuario a través del diseño.

En nuestro sistema de diseño, utilizamos la proporción áurea para establecer la proporción de tamaño entre los encabezados y el cuerpo del texto. La proporción áurea, también conocida como la "Proporción Divina", es una proporción matemática que se usa a menudo en el diseño para crear diseños armoniosos y visualmente agradables. Al utilizar la proporción áurea para establecer la proporción de tamaño entre los encabezados y el cuerpo del texto, podemos crear un contraste que sea tanto estéticamente agradable como funcional.

Además, también utilizamos otras técnicas tipográficas como el peso, el color y el espaciado para crear un contraste entre los diferentes niveles de texto, de esta manera podemos asegurarnos de que los encabezados se destaquen del cuerpo del texto y guíen la atención del usuario. . Mediante el uso de estas técnicas, podemos crear un diseño visualmente organizado y fácil de leer que guía al usuario a través del contenido de forma clara y sin problemas.

Buena gestión de fuentes y colores

Un diseño que utiliza demasiadas tipografías y colores puede dar una imagen equivocada creando confusión. Limitar estos elementos es una buena práctica que ayuda a aclarar el contenido.

En nuestro back office, antes de cualquier otra acción, se invita al usuario a seleccionar un tema que luego puede personalizar para crear la identidad visual de tu aplicación. Este flujo de usuario permite un cierto encuadre: de hecho, los temas propuestos se construyen con un número limitado de fuentes, seleccionadas para formar bonitas combinaciones Encabezado/Cuerpo.

Las paletas de colores están limitadas a 4 colores principales y su buena distribución interviene en la jerarquización de la información (por ejemplo: un color primario para la marca y los botones, uno o dos colores secundarios para los botones menos importantes, los enlaces, etc. ).

Este marco permite aplicar un diseño predeterminado eficiente a las aplicaciones, pero GoodBarber también permite a los usuarios avanzados personalizar tu producto de una manera muy precisa, mucho más allá de las recomendaciones básicas.

El Design System GoodBarber

GoodBarber Design System es una solución integral que sirve como marco, caja de herramientas y carta gráfica para diseñadores y desarrolladores. Es una colección de directrices en evolución que proporcionan un lenguaje de diseño coherente y cohesivo en toda la plataforma, en el que los diseñadores y desarrolladores pueden confiar para garantizar la coherencia, la eficiencia y la escalabilidad en tu trabajo. Es una guía que ayuda a establecer un entendimiento común de los principios y patrones de diseño, y también permite flexibilidad y personalización cuando sea necesario. En general, GoodBarber Design System es una poderosa herramienta que ayuda a agilizar el proceso de desarrollo de aplicaciones y crear aplicaciones hermosas y funcionales.

Bases

Nuestro sistema de diseño incluye pautas sobre cómo construir plantillas que sean consistentes, eficientes y fáciles de usar

Componentes

Los componentes de nuestro sistema de diseño son bloques de construcción que se pueden usar para crear un diseño cohesivo y consistente en toda tu app.

Recursos

Nuestro sistema de diseño incluye una biblioteca de prototipos y especificaciones técnicas para las diferentes pantallas del producto. Estas especificaciones son para uso interno de nuestros diseñadores y desarrolladores.