ds_banner_alt

GoodBarber
Design System

El sistema de diseño de GoodBarber Apps

¿Por qué estas pautas de diseño?

GoodBarber ha sido un creador de aplicaciones sin código desde 2011. Permite que cualquiera pueda crear de manera intuitiva e independiente su propia aplicación nativa o aplicación web progresiva, independientemente de tus habilidades técnicas.

Cuando se lanzó GoodBarber, El diseño de UX no se democratizó como lo es hoy y los diseños se hicieron en mapa de bits, a medida que aparecían nuevas características.

Desde entonces, los métodos y herramientas de los diseñadores han evolucionado considerablemente poniendo al usuario en el centro del proceso de diseño y permitir una optimización significativa del proceso de producción.

La necesidad de repensar el diseño de las plantillas en su totalidad era, por lo tanto, necesaria para ganar consistencia visual en todas las plataformas y velocidad de desarrollo.

Tras una selección de las plantillas más utilizadas, se han rediseñado según las pautas de maquetación recogidas en este sistema de diseño. De esta forma

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

Con demasiada frecuencia, el espacio "blanco" -o espacio negativo- es sinónimo de espacio desperdiciado, cuando es una regla básica del buen diseño. Demasiada información puede generar confusión y una experiencia negativa.

Encontrar los mismos espacios entre los elementos también es una forma sencilla de garantizar la coherencia visual entre las páginas. 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 contribuye a la organización visual y guía la lectura.

En nuestro sistema de diseño, la proporción de tamaño entre un encabezado y un cuerpo se basa en el < strong>proporción áurea y ayuda a crear un contraste armonioso.

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 un marco, así como una caja de herramientas y una carta gráfica. Es un conjunto de directrices en evolución en las que los diseñadores y desarrolladores pueden confiar.

Bases

principios de construcción de plantillas

Componentes

descripción precisa de los componentes

Recursos

biblioteca de prototipos y especificaciones técnicas de plantilla